Optimize code
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import Icon from '@ant-design/icons'
|
||||
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
|
||||
import {
|
||||
@@ -18,7 +18,27 @@ const Forget: React.FC = () => {
|
||||
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(
|
||||
(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)
|
||||
@@ -42,20 +62,6 @@ const Forget: React.FC = () => {
|
||||
}
|
||||
}, [isChanging])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
if (location.pathname !== '/forget') {
|
||||
return
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (!searchParams.get('code')) {
|
||||
turnstileRef.current?.execute()
|
||||
} else {
|
||||
retrieveTurnstileRef.current?.execute()
|
||||
}
|
||||
}, 500)
|
||||
}, [location.pathname])
|
||||
|
||||
const handleOnSend = (forgetParam: ForgetParam) => {
|
||||
if (isSending) {
|
||||
return
|
||||
@@ -93,10 +99,6 @@ const Forget: React.FC = () => {
|
||||
|
||||
const handleOnRetry = () => {
|
||||
setIsSent(false)
|
||||
|
||||
setTimeout(() => {
|
||||
turnstileRef.current?.execute()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const handleOnChange = (retrieveParam: RetrieveParam) => {
|
||||
@@ -162,7 +164,7 @@ const Forget: React.FC = () => {
|
||||
<AntdForm.Item>
|
||||
<Turnstile
|
||||
id={'forget-turnstile'}
|
||||
ref={turnstileRef}
|
||||
ref={turnstileRefCallback}
|
||||
siteKey={H_CAPTCHA_SITE_KEY}
|
||||
options={{ theme: 'light', execution: 'execute' }}
|
||||
onSuccess={setCaptchaCode}
|
||||
@@ -234,7 +236,7 @@ const Forget: React.FC = () => {
|
||||
<AntdForm.Item>
|
||||
<Turnstile
|
||||
id={'retrieve-turnstile'}
|
||||
ref={retrieveTurnstileRef}
|
||||
ref={retrieveTurnstileRefCallback}
|
||||
siteKey={H_CAPTCHA_SITE_KEY}
|
||||
options={{ theme: 'light', execution: 'execute' }}
|
||||
onSuccess={setRetrieveCaptchaCode}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import Icon from '@ant-design/icons'
|
||||
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
|
||||
import {
|
||||
@@ -22,6 +22,15 @@ const SignIn: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
const turnstileRef = useRef<TurnstileInstance>()
|
||||
const turnstileRefCallback = useCallback(
|
||||
(node: TurnstileInstance) => {
|
||||
turnstileRef.current = node
|
||||
if (location.pathname === '/login') {
|
||||
turnstileRef.current?.execute()
|
||||
}
|
||||
},
|
||||
[location.pathname]
|
||||
)
|
||||
const [isSigningIn, setIsSigningIn] = useState(false)
|
||||
const [captchaCode, setCaptchaCode] = useState('')
|
||||
|
||||
@@ -33,15 +42,6 @@ const SignIn: React.FC = () => {
|
||||
}
|
||||
}, [isSigningIn])
|
||||
|
||||
useUpdatedEffect(() => {
|
||||
if (location.pathname !== '/login') {
|
||||
return
|
||||
}
|
||||
setTimeout(() => {
|
||||
turnstileRef.current?.execute()
|
||||
}, 500)
|
||||
}, [turnstileRef])
|
||||
|
||||
const handleOnFinish = (loginParam: LoginParam) => {
|
||||
if (isSigningIn) {
|
||||
return
|
||||
@@ -165,7 +165,7 @@ const SignIn: React.FC = () => {
|
||||
<AntdForm.Item>
|
||||
<Turnstile
|
||||
id={'sign-in-turnstile'}
|
||||
ref={turnstileRef}
|
||||
ref={turnstileRefCallback}
|
||||
siteKey={H_CAPTCHA_SITE_KEY}
|
||||
options={{ theme: 'light', execution: 'execute' }}
|
||||
onSuccess={setCaptchaCode}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import Icon from '@ant-design/icons'
|
||||
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
|
||||
import {
|
||||
@@ -17,6 +17,16 @@ const SignUp: React.FC = () => {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
const turnstileRef = useRef<TurnstileInstance>()
|
||||
const turnstileRefCallback = useCallback(
|
||||
(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)
|
||||
@@ -39,9 +49,6 @@ const SignUp: React.FC = () => {
|
||||
replace: true
|
||||
})
|
||||
}
|
||||
setTimeout(() => {
|
||||
turnstileRef.current?.execute()
|
||||
}, 500)
|
||||
}, [location.pathname])
|
||||
|
||||
const handleOnFinish = (registerParam: RegisterParam) => {
|
||||
@@ -192,7 +199,7 @@ const SignUp: React.FC = () => {
|
||||
<AntdForm.Item>
|
||||
<Turnstile
|
||||
id={'sign-up-turnstile'}
|
||||
ref={turnstileRef}
|
||||
ref={turnstileRefCallback}
|
||||
siteKey={H_CAPTCHA_SITE_KEY}
|
||||
options={{ theme: 'light', execution: 'execute' }}
|
||||
onSuccess={setCaptchaCode}
|
||||
|
||||
Reference in New Issue
Block a user