feature(markup): Добавлена форма

components/Form/Auth.vue

@@ -0,0 +1,66 @@
+<template>
+  <form
+    class="flex flex-col gap-3"
+    @submit.prevent="[$emit('isClosed')]"
+  >
+    <h1 class="text-4xl font-light text-center mb-6">Войдите в аккаунт</h1>
+    <input
+      class="bg-transparent border-[1px] border-white text-white text-lg outline-none p-3 rounded-md"
+      placeholder="Логин"
+      type="text"
+      v-model="authData.login"
+    />
+    <input
+      class="bg-transparent border-[1px] border-white text-white text-lg outline-none p-3 rounded-md"
+      placeholder="Пароль"
+      type="password"
+      v-model="authData.password"
+    />
+    <button
+      class="border-[1px] font-semibold text-md border-primary rounded-md flex gap-3 justify-center items-center mt-6 duration-150"
+      :class="isLoading ? 'h-10' : 'h-12'"
+      type="submit"
+    >
+      <Icon name="svg-spinners:ring-resize" v-if="isLoading" class="w-6 h-6" />
+      <p class="text-lg">
+        {{ isLoading ? "Авторизация" : "Войти в аккаунт" }}
+      </p>
+    </button>
+    <button
+      @click="form.show('Необходимо ввести данные АСУ Проколледж')"
+      class="h-12 border-[1px] font-semibold text-md border-yellow-300 rounded-md flex gap-3 justify-center items-center duration-150"
+      type="button"
+    >
+      <p class="text-lg">Откуда брать данные?</p>
+    </button>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { $fetch } from 'ofetch'
+import { useUser } from '~/store/useUser';
+
+defineEmits(['isClosed'])
+
+const { public: {API_URL} } = useRuntimeConfig()
+const router = useRouter()
+const user = useUser()
+
+const isLoading = ref(false)
+const authData = reactive({
+    login: "rp-09-21-1-morozovvv",
+    password: "whwye323"
+})
+
+async function auth() {
+    isLoading.value = true
+    const res = await $fetch(`${API_URL}/user/login`, {
+        method: "POST",
+        body: authData
+    })
+    user.setUserData(res)
+    router.push('/profile')
+}
+</script>
+
+<style scoped></style>

components/Form/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed top-0 left-0 w-screen h-screen" v-if="isRendered">
+      <div class="relative w-full h-full">
+        <div
+          :class="isAnimate ? 'animate__fadeIn' : 'animate__fadeOut'"
+          class="w-full h-full backdrop-blur-md animate__animated animate__duration"
+        />
+        <div
+          class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+        >
+          <form
+            v-if="formType === 0"
+            ref="target"
+            :class="isAnimate ? 'animate__fadeInUp' : 'animate__fadeOutDown'"
+            class="flex flex-col gap-3 p-5 rounded-md bg-stone-800 text-white animate__animated animate__duration"
+            @submit.prevent="[isVisible = false, $emit('isClosed', null)]"
+          >
+            <p v-text="formMessage" />
+            <button type="submit">Ок</button>
+          </form>
+          <FormAuth :class="isAnimate ? 'animate__fadeInUp' : 'animate__fadeOutDown'" @is-closed="" v-else-if="formType === 1" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+
+const target = ref(null);
+const isAnimate = ref(false);
+const isVisible = defineModel("isVisible");
+const isRendered = ref(isAnimate.value);
+
+const props = withDefaults(
+  defineProps<{
+    closable?: boolean;
+    formMessage?: string;
+    formType?: number;
+  }>(),
+  {
+    closable: true,
+    formType: 0,
+  }
+);
+defineEmits(["isClosed"]);
+
+watch(isVisible, (val) => {
+  console.log(
+    `after ${isVisible.value} | ${isAnimate.value} ${isRendered.value}`
+  );
+  if (val === true) {
+    isAnimate.value = true;
+    isRendered.value = true;
+  } else {
+    isAnimate.value = false;
+
+    setTimeout(() => {
+      isRendered.value = false;
+    }, 300);
+  }
+  console.log(
+    `then ${isVisible.value} | ${isAnimate.value} ${isRendered.value}`
+  );
+});
+
+// watcher fix
+if (isVisible.value === true) {
+  isAnimate.value = true;
+  isRendered.value = true;
+}
+
+onClickOutside(target, () => {
+  if (props.closable) isVisible.value = false;
+});
+</script>

nuxt.config.ts

@@ -10,7 +10,7 @@ export default defineNuxtConfig({
   ],
   ssr: false,
   
-  css: ['animate.css'],
+  css: ['animate.css', '~/public/css/config.css'],
   tailwindcss: {
     config: {
       theme: {

pages/auth.vue

@@ -1,41 +1,8 @@
 <template>
-    <div class="w-full h-full flex justify-center items-center">
-        <form @submit.prevent="auth" class="flex flex-col gap-3">
-            <h1 class="text-4xl font-light text-center">KTC Auth</h1>
-            <input class="bg-transparent border-[1px] border-white text-white text-lg outline-none p-3 rounded-md" placeholder="Логин" type="text" v-model="authData.login">
-            <input class="bg-transparent border-[1px] border-white text-white text-lg outline-none p-3 rounded-md" placeholder="Пароль" type="password" v-model="authData.password">
-            <button class="border-[1px] font-semibold text-md border-primary rounded-md flex gap-3 justify-center items-center duration-150" :class="isLoading ? 'h-10' : 'h-12'" type="submit">
-                <Icon name="svg-spinners:ring-resize" v-if="isLoading" class="w-6 h-6" />
-                <p class="text-lg">{{ isLoading ? 'Авторизация' : 'Войти в аккаунт' }}</p>
-            </button>
-        </form>
-    </div>
+    <Form v-model:is-visible="formState" :form-type="1" />
+    <button @click="formState = !formState">show {{ formState }}</button>
 </template>
 
 <script setup lang="ts">
-import { $fetch } from 'ofetch'
-import { useUser } from '~/store/useUser';
-
-definePageMeta({
-    layout: 'none'
-})
-
-const { public: {API_URL} } = useRuntimeConfig()
-const user = useUser()
-const isLoading = ref(false)
-const router = useRouter()
-
-const authData = reactive({
-    login: "rp-09-21-1-morozovvv",
-    password: "whwye323"
-})
-async function auth() {
-    isLoading.value = true
-    const res = await $fetch(`${API_URL}/user/login`, {
-        method: "POST",
-        body: authData
-    })
-    user.setUserData(res)
-    router.push('/profile')
-}
+const formState = ref(true)
 </script>

public/css/config.css

@@ -0,0 +1,3 @@
+.animate__duration {
+    --animate-duration: 200ms;
+}