FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
Fat Snake
2024-03-04 14:48:04 +08:00
parent 841475b305
commit db28fba694
4 changed files with 78 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/pages/sign.scss
View File

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

79
src/pages/Sign/Forget.tsx
View File

@@ -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>

44
src/pages/Sign/SignIn.tsx
View File

@@ -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'}>

45
src/pages/Sign/SignUp.tsx
View File

@@ -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>