Реализация отображения иконки капча до авторизации

src/components/Authe.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import axios from "axios";
 
 // Получение props
@@ -13,12 +13,34 @@ 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 recaptchaToken = await grecaptcha.execute(
+      "6LdfSo8sAAAAAGGhbgIGO51nHgMUALYjcAMOxnOg",
+      { action: "login" },
+    );
 
     const response = await axios.post("http://127.0.0.1:8004/login", {
       username: login.value,
@@ -27,6 +49,8 @@ const auth_my = async () => {
     });
     if (response.data.message === "Login successful") {
       authError.value = false;
+      isLoggedIn.value = true;
+      hideRecaptchaBadge();
       emit("update", "rezylt");
     } else {
       authError.value = true;
@@ -47,6 +71,8 @@ const handleKeyDown = (event) => {
 // Добавляем глобальный слушатель при монтировании
 onMounted(() => {
   window.addEventListener("keydown", handleKeyDown);
+  // Показываем badge reCAPTCHA при монтировании
+  showRecaptchaBadge();
 });
 
 // Удаляем при размонтировании
@@ -60,8 +86,17 @@ function showStartPage() {
   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>
@@ -94,5 +129,10 @@ function showStartPage() {
       Неверный логин или пароль
     </div>
   </div>
-  
 </template>
+
+<style scoped>
+.grecaptcha-badge {
+  display: block !important;
+}
+</style>