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 {
.loading-turnstile {
display: flex;
justify-content: center;
}
.footer {
a {
font-weight: bolder;

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

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

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

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

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

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

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