полный рефакторинг всей системы

src/components/Autherization/Authe.vue

@@ -1,140 +1,93 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
-import axios from "axios";
+import { ref } from 'vue'
+import { login as apiLogin } from '@/services/authService.js'
 
-// Получение props
 const props = defineProps({
   currentPage: String,
-});
+})
 
-// Объявление события для обновления страницы
-const emit = defineEmits(["update"]);
+const emit = defineEmits(['update'])
 
-const login = ref("");
-const password = ref("");
-const authError = ref(false);
-const isLoggedIn = ref(false);
+const login = ref('')
+const password = ref('')
+const authError = ref(false)
+const isLoading = ref(false)
 
-// // Показать badge reCAPTCHA
-// const showRecaptchaBadge = () => {
-//   setTimeout(() => {
-//     const badge = document.querySelector(".grecaptcha-badge");
-//     if (badge) {
-//       badge.style.display = "block";
-//     }
-//   }, 100);
-// };
+async function handleLogin() {
+  isLoading.value = true
+  authError.value = false
 
-// // Скрыть badge reCAPTCHA
-// const hideRecaptchaBadge = () => {
-//   const badge = document.querySelector(".grecaptcha-badge");
-//   if (badge) {
-//     badge.style.display = "none";
-//   }
-// };
-
-// Функция авторизации
-const auth_my = async () => {
   try {
-    // Получение токена reCAPTCHA
-    // const recaptchaToken = await grecaptcha.execute(
-    //   "6LdfSo8sAAAAAGGhbgIGO51nHgMUALYjcAMOxnOg",
-    //   { action: "login" },
-    // );
-
-    const response = await axios.post("https://allowlgroup.ru/api/8004/login", {
-      username: login.value,
-      password: password.value,
-      // recaptcha_token: recaptchaToken,
-    });
-    if (response.data.message === "Login successful") {
-      authError.value = false;
-      isLoggedIn.value = true;
-      // hideRecaptchaBadge();
-      emit("update", "rezylt");
+    const data = await apiLogin(login.value, password.value)
+    if (data.message === 'Login successful') {
+      emit('update', 'rezylt')
     } else {
-      authError.value = true;
+      authError.value = true
     }
   } catch (err) {
-    authError.value = true;
-    console.log(err);
+    authError.value = true
+    console.error(err)
+  } finally {
+    isLoading.value = false
   }
-};
-
-// Обработка глобального нажатия Enter
-const handleKeyDown = (event) => {
-  if (event.key === "Enter"&& !isLoggedIn.value) {
-    auth_my();
-  }
-};
-
-// Добавляем глобальный слушатель при монтировании
-onMounted(() => {
-  window.addEventListener("keydown", handleKeyDown);
-  // showRecaptchaBadge();
-});
-
-// Удаляем при размонтировании
-onUnmounted(() => {
-  window.removeEventListener("keydown", handleKeyDown);
-});
-
-// Переход на стартовую страницу (сброс данных)
-function showStartPage() {
-  emit("update", "admin-panel");
-  login.value = "";
-  password.value = "";
-  authError.value = false;
-  isLoggedIn.value = false;
-  // Показываем badge reCAPTCHA
-  // showRecaptchaBadge();
 }
 
-// Отслеживание перехода на страницу admin-panel
-// watch(
-//   () => props.currentPage,
-//   (newPage) => {
-//     if (newPage === "admin-panel" && !isLoggedIn.value) {
-//       showRecaptchaBadge();
-//     }
-//   },
-// );
+function handleKeyDown(event) {
+  if (event.key === 'Enter') {
+    handleLogin()
+  }
+}
+
+function showStartPage() {
+  emit('update', 'admin-panel')
+  login.value = ''
+  password.value = ''
+  authError.value = false
+}
 </script>
 
 <template>
   <div
-    v-if="props.currentPage === 'admin-panel'"
-    class="p-4 bg-white rounded shadow max-w-md mx-auto mt-10 dark:bg-gray-800 dark:text-neutral-300"
+    v-if="currentPage === 'admin-panel'"
+    class="p-6 bg-white rounded-xl shadow max-w-md mx-auto mt-10 dark:bg-gray-800 dark:text-neutral-300"
   >
-    <h2>Вход для администратора</h2>
-    <div class="mb-2">
-      <label>Логин:</label>
-      <input v-model="login" type="text" class="border p-1 w-full" />
+    <h2 class="text-xl font-semibold mb-4">Вход для администратора</h2>
+    <div class="mb-3">
+      <label class="block mb-1 text-sm">Логин</label>
+      <input
+        v-model="login"
+        type="text"
+        class="border rounded-lg p-2 w-full dark:bg-gray-900 dark:border-gray-600"
+        @keydown="handleKeyDown"
+      />
     </div>
-    <div class="mb-2">
-      <label>Пароль:</label>
-      <input v-model="password" type="password" class="border p-1 w-full" />
+    <div class="mb-4">
+      <label class="block mb-1 text-sm">Пароль</label>
+      <input
+        v-model="password"
+        type="password"
+        class="border rounded-lg p-2 w-full dark:bg-gray-900 dark:border-gray-600"
+        @keydown="handleKeyDown"
+      />
     </div>
     <button
-      @click="auth_my"
-      class="mr-2 bg-teal-600 hover:bg-teal-800 text-white px-4 py-2 rounded cursor-pointer"
+      type="button"
+      :disabled="isLoading"
+      class="mr-2 bg-teal-600 hover:bg-teal-800 text-white px-4 py-2 rounded-lg cursor-pointer disabled:opacity-50"
+      @click="handleLogin"
     >
-      Войти
+      {{ isLoading ? 'Вход...' : 'Войти' }}
     </button>
     <button
+      type="button"
+      class="dark:bg-gray-600 dark:hover:bg-gray-700 bg-gray-500 hover:bg-gray-600 px-4 py-2 rounded-lg cursor-pointer"
       @click="showStartPage"
-      class="dark:bg-gray-600 dark:hover:bg-gray-700 bg-gray-500 hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
     >
       Отмена
     </button>
-    <div v-if="authError" class="mt-2 text-red-600">
+    <div v-if="authError" class="mt-3 text-red-600 text-sm">
       Неверный логин или пароль
     </div>
   </div>
 </template>
 
-<!-- <style scoped>
-.grecaptcha-badge {
-  display: block !important;
-}
-</style> -->