Fix: sign page - turnstile on every page load at the same time
This commit is contained in:
@@ -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(
|
||||
(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 = () => {
|
||||
/>
|
||||
</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={{ theme: 'light' }}
|
||||
options={{
|
||||
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={{ theme: 'light' }}
|
||||
options={{
|
||||
theme: 'light',
|
||||
execution: 'execute',
|
||||
appearance: 'execute'
|
||||
}}
|
||||
onSuccess={setRetrieveCaptchaCode}
|
||||
data-refresh={refreshTime}
|
||||
/>
|
||||
</AntdForm.Item>
|
||||
<AntdForm.Item>
|
||||
|
||||
@@ -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(
|
||||
(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 = () => {
|
||||
/>
|
||||
</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={{ theme: 'light' }}
|
||||
options={{
|
||||
theme: 'light',
|
||||
execution: 'execute',
|
||||
appearance: 'execute'
|
||||
}}
|
||||
onSuccess={setCaptchaCode}
|
||||
data-refresh={refreshTime}
|
||||
/>
|
||||
</AntdForm.Item>
|
||||
<FlexBox direction={'horizontal'} className={'addition'}>
|
||||
|
||||
@@ -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(
|
||||
(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 = () => {
|
||||
/>
|
||||
</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={{ theme: 'light' }}
|
||||
options={{
|
||||
theme: 'light',
|
||||
execution: 'execute',
|
||||
appearance: 'execute'
|
||||
}}
|
||||
onSuccess={setCaptchaCode}
|
||||
data-refresh={refreshTime}
|
||||
/>
|
||||
</AntdForm.Item>
|
||||
<AntdForm.Item>
|
||||
|
||||
Reference in New Issue
Block a user