From 7db5b9e214201815bb8b9cdefb442b20ccb55fa4 Mon Sep 17 00:00:00 2001
From: Sora39831 <540587985@qq.com>
Date: Sun, 5 Apr 2026 02:55:28 +0800
Subject: [PATCH] fix(login): reliably render turnstile on register tab

---
 web/html/login.html | 38 ++++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/web/html/login.html b/web/html/login.html
index 12b56b1e..a4ceb831 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -149,6 +149,7 @@
 {{template "component/aThemeSwitch" .}}
 <script>
   var turnstileToken = '';
+  var turnstileWidgetId = null;
 
   const app = new Vue({
     delimiters: ['[[', ']]'],
@@ -169,7 +170,7 @@
       this.twoFactorEnable = await this.getTwoFactorEnable();
       this.turnstileSiteKey = await this.getTurnstileSiteKey();
       if (this.turnstileSiteKey) {
-        this.renderTurnstile();
+        this.$nextTick(() => this.ensureTurnstileRendered());
       }
     },
     computed: {
@@ -180,6 +181,9 @@
     methods: {
       switchTab(key) {
         this.activeTab = key;
+        if (key === 'register') {
+          this.$nextTick(() => this.ensureTurnstileRendered());
+        }
       },
       async doLogin() {
         this.loadingStates.spinning = true;
@@ -210,26 +214,28 @@
           this.user.username = this.regUser.username;
           this.regUser = { username: "", password: "", confirmPassword: "" };
           turnstileToken = '';
-          if (window.turnstile) {
-            var container = document.getElementById('turnstile-widget');
-            if (container) {
-              turnstile.reset(container);
-            }
+          if (window.turnstile && turnstileWidgetId !== null) {
+            turnstile.reset(turnstileWidgetId);
           }
         }
         this.loadingStates.registerSpinning = false;
       },
-      renderTurnstile() {
-        if (window.turnstile) {
-          var container = document.getElementById('turnstile-widget');
-          if (container) {
-            turnstile.render(container, {
-              sitekey: this.turnstileSiteKey,
-              callback: function(token) { turnstileToken = token; },
-              size: this.turnstileSize,
-            });
-          }
+      ensureTurnstileRendered(retries = 20) {
+        if (!this.turnstileSiteKey || turnstileWidgetId !== null) {
+          return;
         }
+        var container = document.getElementById('turnstile-widget');
+        if (!container || !window.turnstile) {
+          if (retries > 0) {
+            setTimeout(() => this.ensureTurnstileRendered(retries - 1), 150);
+          }
+          return;
+        }
+        turnstileWidgetId = turnstile.render(container, {
+          sitekey: this.turnstileSiteKey,
+          callback: function(token) { turnstileToken = token; },
+          size: this.turnstileSize,
+        });
       },
       async getTurnstileSiteKey() {
         const msg = await HttpUtil.post('/getTurnstileSiteKey');