группировка по папкам + удоление источников

src/components/Autherization/Authe.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import axios from "axios";
+
+// Получение props
+const props = defineProps({
+  currentPage: String,
+});
+
+// Объявление события для обновления страницы
+const emit = defineEmits(["update"]);
+
+const login = ref("");
+const password = ref("");
+const authError = ref(false);
+const isLoggedIn = ref(false);
+
+// Показать badge reCAPTCHA
+const showRecaptchaBadge = () => {
+  setTimeout(() => {
+    const badge = document.querySelector(".grecaptcha-badge");
+    if (badge) {
+      badge.style.display = "block";
+    }
+  }, 100);
+};
+
+// Скрыть 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");
+    } else {
+      authError.value = true;
+    }
+  } catch (err) {
+    authError.value = true;
+    console.log(err);
+  }
+};
+
+// Обработка глобального нажатия 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();
+  }
+});
+</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"
+  >
+    <h2>Вход для администратора</h2>
+    <div class="mb-2">
+      <label>Логин:</label>
+      <input v-model="login" type="text" class="border p-1 w-full" />
+    </div>
+    <div class="mb-2">
+      <label>Пароль:</label>
+      <input v-model="password" type="password" class="border p-1 w-full" />
+    </div>
+    <button
+      @click="auth_my"
+      class="mr-2 bg-teal-600 hover:bg-teal-800 text-white px-4 py-2 rounded cursor-pointer"
+    >
+      Войти
+    </button>
+    <button
+      @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>
+  </div>
+</template>
+
+<style scoped>
+.grecaptcha-badge {
+  display: block !important;
+}
+</style>