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 +108 -102
6 changed files with 108 additions and 102 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 { .sign-up, .sign-in, .forget {
.loading-turnstile {
display: flex;
justify-content: center;
}
.footer { .footer {
a { a {
font-weight: bolder; font-weight: bolder;

81
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>
@@ -210,6 +204,7 @@ const Forget = () => {
]} ]}
> >
<AntdInput.Password <AntdInput.Password
id={'forget-password'}
addonBefore={ addonBefore={
<span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span> <span>新&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
} }
@@ -237,28 +232,24 @@ const Forget = () => {
]} ]}
> >
<AntdInput.Password <AntdInput.Password
id={'forget-password-confirm'}
addonBefore={'确认密码'} addonBefore={'确认密码'}
placeholder={'确认密码'} placeholder={'确认密码'}
disabled={isChanging} disabled={isChanging}
/> />
</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>

50
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('')
@@ -129,7 +134,11 @@ const SignIn = () => {
style={{ marginTop: 10 }} style={{ marginTop: 10 }}
rules={[{ required: true, len: 6 }]} rules={[{ required: true, len: 6 }]}
> >
<AntdInput showCount maxLength={6} /> <AntdInput
showCount
maxLength={6}
autoComplete={'off'}
/>
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
</> </>
@@ -227,22 +236,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'}>

47
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('')
@@ -173,6 +177,7 @@ const SignUp = () => {
]} ]}
> >
<AntdInput.Password <AntdInput.Password
id={'sign-up-password'}
prefix={<Icon component={IconOxygenPassword} />} prefix={<Icon component={IconOxygenPassword} />}
placeholder={'密码'} placeholder={'密码'}
disabled={isSigningUp} disabled={isSigningUp}
@@ -195,28 +200,24 @@ const SignUp = () => {
]} ]}
> >
<AntdInput.Password <AntdInput.Password
id={'sign-up-password-confirm'}
prefix={<Icon component={IconOxygenPassword} />} prefix={<Icon component={IconOxygenPassword} />}
placeholder={'确认密码'} placeholder={'确认密码'}
disabled={isSigningUp} disabled={isSigningUp}
/> />
</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>

15
src/pages/Sign/Verify.tsx
View File

@@ -2,6 +2,7 @@ import {
COLOR_BACKGROUND, COLOR_BACKGROUND,
PERMISSION_ACCOUNT_NEED_INIT, PERMISSION_ACCOUNT_NEED_INIT,
PERMISSION_NO_VERIFICATION_REQUIRED, PERMISSION_NO_VERIFICATION_REQUIRED,
PERMISSION_RESEND_SUCCESS,
PERMISSION_VERIFY_SUCCESS, PERMISSION_VERIFY_SUCCESS,
SYSTEM_MATCH_SENSITIVE_WORD SYSTEM_MATCH_SENSITIVE_WORD
} from '@/constants/common.constants' } from '@/constants/common.constants'
@@ -74,10 +75,16 @@ const Verify = () => {
void r_auth_resend() void r_auth_resend()
.then((res) => { .then((res) => {
const response = res.data const response = res.data
if (response.success) { switch (response.code) {
void message.success('已发送验证邮件，请查收') case PERMISSION_RESEND_SUCCESS:
} else { void message.success('已发送验证邮件，请查收')
void message.error('出错了，请稍后重试') break
case PERMISSION_NO_VERIFICATION_REQUIRED:
void message.warning('账户已验证')
navigate('/')
break
default:
void message.error('出错了，请稍后重试')
} }
}) })
.finally(() => { .finally(() => {

12
src/pages/User/index.tsx
View File

@@ -257,7 +257,11 @@ const User = () => {
style={{ marginTop: 10 }} style={{ marginTop: 10 }}
rules={[{ required: true, len: 6 }]} rules={[{ required: true, len: 6 }]}
> >
<AntdInput showCount maxLength={6} /> <AntdInput
showCount
maxLength={6}
autoComplete={'off'}
/>
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
</> </>
@@ -336,7 +340,11 @@ const User = () => {
style={{ marginTop: 10, marginRight: 30 }} style={{ marginTop: 10, marginRight: 30 }}
rules={[{ required: true, len: 6 }]} rules={[{ required: true, len: 6 }]}
> >
<AntdInput showCount maxLength={6} /> <AntdInput
showCount
maxLength={6}
autoComplete={'off'}
/>
</AntdForm.Item> </AntdForm.Item>
</AntdForm> </AntdForm>
</> </>