diff --git a/src/assets/css/pages/sign.scss b/src/assets/css/pages/sign.scss index 96ffe38..ad54058 100644 --- a/src/assets/css/pages/sign.scss +++ b/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; diff --git a/src/pages/Sign/Forget.tsx b/src/pages/Sign/Forget.tsx index 63d7121..b84290a 100644 --- a/src/pages/Sign/Forget.tsx +++ b/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() - const turnstileRefCallback = useCallback( - (node: TurnstileInstance) => { - turnstileRef.current = node - - if (location.pathname === '/forget' && !searchParams.get('code')) { - turnstileRef.current?.execute() - } - }, - [location.pathname, searchParams] - ) const retrieveTurnstileRef = useRef() - const retrieveTurnstileRefCallback = useCallback( - (node: TurnstileInstance) => { - retrieveTurnstileRef.current = node - - if (location.pathname === '/forget' && searchParams.get('code')) { - retrieveTurnstileRef.current?.execute() - } - }, - [location.pathname, searchParams] - ) + const [refreshTime, setRefreshTime] = useState(0) 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 = () => { /> - {!turnstileRef.current && ( -
- -
- )}
@@ -243,22 +237,17 @@ const Forget = () => { /> - {!turnstileRef.current && ( -
- -
- )}
diff --git a/src/pages/Sign/SignIn.tsx b/src/pages/Sign/SignIn.tsx index 854886e..0eaac4e 100644 --- a/src/pages/Sign/SignIn.tsx +++ b/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() - const turnstileRefCallback = useCallback( - (node: TurnstileInstance) => { - turnstileRef.current = node - if (location.pathname === '/login') { - turnstileRef.current?.execute() - } - }, - [location.pathname] - ) + const [refreshTime, setRefreshTime] = useState(0) 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 = () => { /> - {!turnstileRef.current && ( -
- -
- )}
diff --git a/src/pages/Sign/SignUp.tsx b/src/pages/Sign/SignUp.tsx index 23ce21b..4a52b4e 100644 --- a/src/pages/Sign/SignUp.tsx +++ b/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() - const turnstileRefCallback = useCallback( - (node: TurnstileInstance) => { - turnstileRef.current = node - - if (location.pathname === '/register') { - turnstileRef.current?.execute() - } - }, - [location.pathname] - ) + const [refreshTime, setRefreshTime] = useState(0) 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 = () => { /> - {!turnstileRef.current && ( -
- -
- )}