Browse Source

🎨 refactor: move Turnstile component to global scope in auth forms

Move the Turnstile verification component from the renderOAuthOptions method to the main render function in both LoginForm and RegisterForm components. This ensures the Turnstile verification is globally visible and accessible regardless of which authentication method the user chooses (email login/register or third-party OAuth options).

The change improves UI consistency and ensures the verification mechanism works properly across all authentication flows.
Apple\Apple 9 months ago
parent
commit
01c84f9a45
2 changed files with 22 additions and 22 deletions
  1. 11 11
      web/src/components/auth/LoginForm.js
  2. 11 11
      web/src/components/auth/RegisterForm.js

+ 11 - 11
web/src/components/auth/LoginForm.js

@@ -362,17 +362,6 @@ const LoginForm = () => {
               </div>
             </div>
           </Card>
-
-          {turnstileEnabled && (
-            <div className="flex justify-center mt-6">
-              <Turnstile
-                sitekey={turnstileSiteKey}
-                onVerify={(token) => {
-                  setTurnstileToken(token);
-                }}
-              />
-            </div>
-          )}
         </div>
       </div>
     );
@@ -528,6 +517,17 @@ const LoginForm = () => {
           ? renderEmailLoginForm()
           : renderOAuthOptions()}
         {renderWeChatLoginModal()}
+
+        {turnstileEnabled && (
+          <div className="flex justify-center mt-6">
+            <Turnstile
+              sitekey={turnstileSiteKey}
+              onVerify={(token) => {
+                setTurnstileToken(token);
+              }}
+            />
+          </div>
+        )}
       </div>
     </div>
   );

+ 11 - 11
web/src/components/auth/RegisterForm.js

@@ -368,17 +368,6 @@ const RegisterForm = () => {
               </div>
             </div>
           </Card>
-
-          {turnstileEnabled && (
-            <div className="flex justify-center mt-6">
-              <Turnstile
-                sitekey={turnstileSiteKey}
-                onVerify={(token) => {
-                  setTurnstileToken(token);
-                }}
-              />
-            </div>
-          )}
         </div>
       </div>
     );
@@ -568,6 +557,17 @@ const RegisterForm = () => {
           ? renderEmailRegisterForm()
           : renderOAuthOptions()}
         {renderWeChatLoginModal()}
+
+        {turnstileEnabled && (
+          <div className="flex justify-center mt-6">
+            <Turnstile
+              sitekey={turnstileSiteKey}
+              onVerify={(token) => {
+                setTurnstileToken(token);
+              }}
+            />
+          </div>
+        )}
       </div>
     </div>
   );