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

Fix 2 bugs. Optimize 1 code. #40

Merged
FatttSnake merged 3 commits from FatttSnake into dev 2024-03-04 15:06:51 +08:00
Conversation 0 Commits 3 Files Changed 6 +78 -95
4 changed files with 78 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit db28fba694 - Show all commits

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

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

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

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

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

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

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

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