funcodingdev
diff --git a/‎web/app/pages/search-messages/index.vue‎
Lines changed: 49 additions & 8 deletions b/‎web/app/pages/search-messages/index.vue‎
Lines changed: 49 additions & 8 deletions
diff --git a/‎web/package.json‎
Lines changed: 1 addition & 0 deletions b/‎web/package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎web/pnpm-lock.yaml‎
Lines changed: 10 additions & 0 deletions b/‎web/pnpm-lock.yaml‎
Lines changed: 10 additions & 0 deletions
@@ -28,6 +28,8 @@ interface Turnstile {
       "error-callback"?: (error: string) => void;
     },
   ): string | null | undefined;
+  reset(widgetId?: string): void;
+  remove(widgetId?: string): void;
 }
 
 definePageMeta({
@@ -63,6 +65,8 @@ const formQuery = ref("");
 const messages = ref<EntitiesMessage[]>([]);
 const totalMessages = ref(0);
 const selectedIds = ref<string[]>([]);
+let turnstileWidgetId: string | null = null;
+let captchaPromise: Promise<string> | null = null;
 
 const page = ref(1);
 const itemsPerPage = ref(100);
@@ -123,23 +127,51 @@ const messageStatusSelectItems = [
 ];
 
 function getCaptcha(): Promise<string> {
-  return new Promise<string>((resolve, reject) => {
+  if (captchaPromise) {
+    return captchaPromise;
+  }
+
+  captchaPromise = new Promise<string>((resolve, reject) => {
     const turnstile = (window as unknown as { turnstile?: Turnstile })
       .turnstile;
     if (!turnstile) {
       resolve("");
       return;
     }
+
+    const resetPromise = () => {
+      captchaPromise = null;
+    };
+
     turnstile.ready(() => {
-      turnstile.render("#cloudflare-turnstile", {
-        sitekey: (config.public as Record<string, string>)
-          .cloudflareTurnstileSiteKey!,
-        action: "search_messages",
-        callback: (token) => resolve(token),
-        "error-callback": (error: string) => reject(error),
-      });
+      const complete = (token: string) => {
+        resetPromise();
+        resolve(token);
+      };
+      const fail = (error: string) => {
+        resetPromise();
+        reject(error);
+      };
+
+      if (turnstileWidgetId) {
+        turnstile.reset(turnstileWidgetId);
+        return;
+      }
+
+      turnstileWidgetId =
+        turnstile.render("#cloudflare-turnstile", {
+          sitekey: (config.public as Record<string, string>)
+            .cloudflareTurnstileSiteKey!,
+          action: "search_messages",
+          callback: complete,
+          "error-callback": fail,
+        }) ?? null;
     });
   });
+
+  return captchaPromise.finally(() => {
+    captchaPromise = null;
+  });
 }
 
 function parseErrors(error: any): ErrorMessages {
@@ -329,6 +361,15 @@ onMounted(async () => {
     await fetchMessages(true);
   }
 });
+
+onBeforeUnmount(() => {
+  const turnstile = (window as unknown as { turnstile?: Turnstile })
+    .turnstile;
+  if (turnstile && turnstileWidgetId) {
+    turnstile.remove(turnstileWidgetId);
+    turnstileWidgetId = null;
+  }
+});
 </script>
 
 <template>
 
@@ -25,6 +25,7 @@
     "moment": "^2.30.1",
     "nuxt": "^4.4.6",
     "pinia": "^3.0.4",
+    "prettier": "^3.8.4",
     "pusher-js": "^8.5.0",
     "qrcode": "^1.5.4",
     "sass": "^1.100.0",