Fix: sign page - turnstile on every page load at the same time

src/assets/css/pages/sign.scss

@@ -85,11 +85,6 @@
       }
 
       .sign-up, .sign-in, .forget {
-        .loading-turnstile {
-          display: flex;
-          justify-content: center;
-        }
-
         .footer {
           a {
             font-weight: bolder;

src/pages/Sign/Forget.tsx

@@ -6,7 +6,6 @@ import {
     PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED,
     PERMISSION_RETRIEVE_SUCCESS,
     PERMISSION_USER_NOT_FOUND,
-    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
 import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
@@ -17,27 +16,8 @@ const Forget = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
-    const turnstileRefCallback = useCallback(
-        (node: TurnstileInstance) => {
-            turnstileRef.current = node
-
-            if (location.pathname === '/forget' && !searchParams.get('code')) {
-                turnstileRef.current?.execute()
-            }
-        },
-        [location.pathname, searchParams]
-    )
     const retrieveTurnstileRef = useRef<TurnstileInstance>()
-    const retrieveTurnstileRefCallback = useCallback(
+    const [refreshTime, setRefreshTime] = useState(0)
-        (node: TurnstileInstance) => {
-            retrieveTurnstileRef.current = node
-
-            if (location.pathname === '/forget' && searchParams.get('code')) {
-                retrieveTurnstileRef.current?.execute()
-            }
-        },
-        [location.pathname, searchParams]
-    )
     const [isSending, setIsSending] = useState(false)
     const [isSent, setIsSent] = useState(false)
     const [isChanging, setIsChanging] = useState(false)
@@ -45,6 +25,25 @@ const Forget = () => {
     const [captchaCode, setCaptchaCode] = useState('')
     const [retrieveCaptchaCode, setRetrieveCaptchaCode] = useState('')
 
+    useEffect(() => {
+        const timer = setInterval(() => {
+            if (window.turnstile) {
+                clearInterval(timer)
+                setRefreshTime(Date.now())
+                if (location.pathname === '/forget' && !searchParams.get('code')) {
+                    setTimeout(() => {
+                        turnstileRef.current?.execute()
+                    }, 500)
+                }
+                if (location.pathname === '/forget' && searchParams.get('code')) {
+                    setTimeout(() => {
+                        retrieveTurnstileRef.current?.execute()
+                    }, 500)
+                }
+            }
+        })
+    }, [location.pathname])
+
     useEffect(() => {
         if (!isSending) {
             setCaptchaCode('')
@@ -161,22 +160,17 @@ const Forget = () => {
                                             />
                                         </AntdForm.Item>
                                         <AntdForm.Item>
-                                            {!turnstileRef.current && (
-                                                <div className={'loading-turnstile'}>
-                                                    <Icon
-                                                        component={IconOxygenLoading}
-                                                        style={{ fontSize: SIZE_ICON_MD }}
-                                                        spin
-                                                    />
-                                                </div>
-                                            )}
                                             <Turnstile
                                                 id={'forget-turnstile'}
-                                                ref={turnstileRefCallback}
+                                                ref={turnstileRef}
                                                 siteKey={H_CAPTCHA_SITE_KEY}
-                                                hidden={!turnstileRef.current}
+                                                options={{
-                                                options={{ theme: 'light' }}
+                                                    theme: 'light',
+                                                    execution: 'execute',
+                                                    appearance: 'execute'
+                                                }}
                                                 onSuccess={setCaptchaCode}
+                                                data-refresh={refreshTime}
                                             />
                                         </AntdForm.Item>
                                         <AntdForm.Item>
@@ -243,22 +237,17 @@ const Forget = () => {
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item>
-                                        {!turnstileRef.current && (
-                                            <div className={'loading-turnstile'}>
-                                                <Icon
-                                                    component={IconOxygenLoading}
-                                                    style={{ fontSize: SIZE_ICON_MD }}
-                                                    spin
-                                                />
-                                            </div>
-                                        )}
                                         <Turnstile
                                             id={'retrieve-turnstile'}
-                                            ref={retrieveTurnstileRefCallback}
+                                            ref={retrieveTurnstileRef}
                                             siteKey={H_CAPTCHA_SITE_KEY}
-                                            hidden={!turnstileRef.current}
+                                            options={{
-                                            options={{ theme: 'light' }}
+                                                theme: 'light',
+                                                execution: 'execute',
+                                                appearance: 'execute'
+                                            }}
                                             onSuccess={setRetrieveCaptchaCode}
+                                            data-refresh={refreshTime}
                                         />
                                     </AntdForm.Item>
                                     <AntdForm.Item>

src/pages/Sign/SignIn.tsx

@@ -8,7 +8,6 @@ import {
     PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR,
     PERMISSION_USER_DISABLE,
     PERMISSION_USERNAME_NOT_FOUND,
-    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE
 } from '@/constants/common.constants'
 import { getUserInfo, setToken } from '@/util/auth'
@@ -24,19 +23,25 @@ const SignIn = () => {
     const navigate = useNavigate()
     const [searchParams] = useSearchParams()
     const turnstileRef = useRef<TurnstileInstance>()
-    const turnstileRefCallback = useCallback(
+    const [refreshTime, setRefreshTime] = useState(0)
-        (node: TurnstileInstance) => {
-            turnstileRef.current = node
-            if (location.pathname === '/login') {
-                turnstileRef.current?.execute()
-            }
-        },
-        [location.pathname]
-    )
     const [twoFactorForm] = AntdForm.useForm<{ twoFactorCode: string }>()
     const [isSigningIn, setIsSigningIn] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
+    useEffect(() => {
+        const timer = setInterval(() => {
+            if (window.turnstile) {
+                clearInterval(timer)
+                setRefreshTime(Date.now())
+                if (location.pathname === '/login') {
+                    setTimeout(() => {
+                        turnstileRef.current?.execute()
+                    }, 500)
+                }
+            }
+        })
+    }, [location.pathname])
+
     useEffect(() => {
         if (!isSigningIn) {
             setCaptchaCode('')
@@ -227,22 +232,17 @@ const SignIn = () => {
                             />
                         </AntdForm.Item>
                         <AntdForm.Item>
-                            {!turnstileRef.current && (
-                                <div className={'loading-turnstile'}>
-                                    <Icon
-                                        component={IconOxygenLoading}
-                                        style={{ fontSize: SIZE_ICON_MD }}
-                                        spin
-                                    />
-                                </div>
-                            )}
                             <Turnstile
                                 id={'sign-in-turnstile'}
-                                ref={turnstileRefCallback}
+                                ref={turnstileRef}
                                 siteKey={H_CAPTCHA_SITE_KEY}
-                                hidden={!turnstileRef.current}
+                                options={{
-                                options={{ theme: 'light' }}
+                                    theme: 'light',
+                                    execution: 'execute',
+                                    appearance: 'execute'
+                                }}
                                 onSuccess={setCaptchaCode}
+                                data-refresh={refreshTime}
                             />
                         </AntdForm.Item>
                         <FlexBox direction={'horizontal'} className={'addition'}>

src/pages/Sign/SignUp.tsx

@@ -4,7 +4,6 @@ import {
     DATABASE_DUPLICATE_KEY,
     H_CAPTCHA_SITE_KEY,
     PERMISSION_REGISTER_SUCCESS,
-    SIZE_ICON_MD,
     SYSTEM_INVALID_CAPTCHA_CODE,
     SYSTEM_MATCH_SENSITIVE_WORD
 } from '@/constants/common.constants'
@@ -17,21 +16,26 @@ const SignUp = () => {
     const location = useLocation()
     const navigate = useNavigate()
     const turnstileRef = useRef<TurnstileInstance>()
-    const turnstileRefCallback = useCallback(
+    const [refreshTime, setRefreshTime] = useState(0)
-        (node: TurnstileInstance) => {
-            turnstileRef.current = node
-
-            if (location.pathname === '/register') {
-                turnstileRef.current?.execute()
-            }
-        },
-        [location.pathname]
-    )
     const [isSigningUp, setIsSigningUp] = useState(false)
     const [isFinish, setIsFinish] = useState(false)
     const [isSending, setIsSending] = useState(false)
     const [captchaCode, setCaptchaCode] = useState('')
 
+    useEffect(() => {
+        const timer = setInterval(() => {
+            if (window.turnstile) {
+                clearInterval(timer)
+                setRefreshTime(Date.now())
+                if (location.pathname === '/register') {
+                    setTimeout(() => {
+                        turnstileRef.current?.execute()
+                    }, 500)
+                }
+            }
+        })
+    }, [location.pathname])
+
     useEffect(() => {
         if (!isSigningUp) {
             setCaptchaCode('')
@@ -201,22 +205,17 @@ const SignUp = () => {
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item>
-                                    {!turnstileRef.current && (
-                                        <div className={'loading-turnstile'}>
-                                            <Icon
-                                                component={IconOxygenLoading}
-                                                style={{ fontSize: SIZE_ICON_MD }}
-                                                spin
-                                            />
-                                        </div>
-                                    )}
                                     <Turnstile
                                         id={'sign-up-turnstile'}
-                                        ref={turnstileRefCallback}
+                                        ref={turnstileRef}
                                         siteKey={H_CAPTCHA_SITE_KEY}
-                                        hidden={!turnstileRef.current}
+                                        options={{
-                                        options={{ theme: 'light' }}
+                                            theme: 'light',
+                                            execution: 'execute',
+                                            appearance: 'execute'
+                                        }}
                                         onSuccess={setCaptchaCode}
+                                        data-refresh={refreshTime}
                                     />
                                 </AntdForm.Item>
                                 <AntdForm.Item>