add network

src/components/auth/LoginPage.vue

@@ -1,36 +1,70 @@
 <script setup lang="ts">
-import { onMounted, ref, computed } from "vue"
+import {onMounted, ref} from "vue"
 import {useRouter} from "vue-router";
+import {InputText, Password, Button} from "primevue";
+import {useUserStore} from "@/stores/userStore";
 
 const router = useRouter()
 
 // необязательно делать реактивным, но удобно для шаблона
 const tgApp = ref(window.Telegram.WebApp)
 const tgData = ref()
+const errors = ref({username: '', password: ''})
+const loading = ref(false)
 
-// какие-то удобные вычисления для UI
-const userId = computed(() => tgApp.value?.user?.id?.toString() ?? "")
-const username = computed(() => tgApp.value?.user?.username ?? "")
-const firstName = computed(() => tgData.value?.user?.first_name ?? "")
+const username = ref<string>('')
+const password = ref<string>('')
+
+const userStore = useUserStore()
 
 onMounted(() => {
   // сообщаем Telegram WebApp, что UI готов
-  if (tgApp.initData){
+  if (tgApp.initData) {
     tgData.value = tgApp.initDataUnsafe
     if (tgData.value.user?.id != null) {
       localStorage.setItem("token", tgData.value.user.id.toString())
       router.push("/")
     }
-  }else {
-    localStorage.setItem("token", "123")
-    router.push("/")
+  } else {
+
   }
   // router.push('/')
 })
 </script>
 
 <template>
+  <div class="flex !w-full items-center justify-center h-100">
+    <div class="card !w-fit">
 
+      <h1 class="text-2xl font-bold text-center">Вход</h1>
+
+
+      <form @submit.prevent="userStore.login(username, password)" class="flex  flex-col !gap-6 !w-fit !p-10">
+        <div class="!w-full">
+          <label for="username" class="block text-sm font-semibold text-gray-700">Логин</label>
+          <InputText id="username" v-model.trim="username" class="w-full" :class="{'p-invalid': errors.username}"/>
+          <small v-if="errors.username" class="text-red-500">{{ errors.username }}</small>
+        </div>
+
+        <div class="mb-6">
+          <label for="password" class="block text-sm font-semibold text-gray-700">Пароль</label>
+          <Password id="password" v-model="password" class="w-full" :feedback="false" toggleMask/>
+          <small v-if="errors.password" class="text-red-500">{{ errors.password }}</small>
+        </div>
+
+        <Button label="Войти" type="submit" class="w-full mt-2 !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
+                :disabled="loading" :loading="loading"/>
+      </form>
+
+
+      <p class="mt-4 text-sm text-center text-gray-600">
+        Нет аккаунта?
+        <RouterLink to="/register" class="text-blue-500 hover:underline">Регистрация</RouterLink>
+      </p>
+
+
+    </div>
+  </div>
 </template>
 
 <style scoped>