274 lines
12 KiB
TypeScript
274 lines
12 KiB
TypeScript
import React, { useCallback } from 'react'
|
||
import Icon from '@ant-design/icons'
|
||
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
|
||
import {
|
||
H_CAPTCHA_SITE_KEY,
|
||
PERMISSION_FORGET_SUCCESS,
|
||
PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED,
|
||
PERMISSION_RETRIEVE_SUCCESS,
|
||
PERMISSION_USER_NOT_FOUND,
|
||
SYSTEM_INVALID_CAPTCHA_CODE
|
||
} from '@/constants/common.constants'
|
||
import { useUpdatedEffect } from '@/util/hooks'
|
||
import { r_auth_forget, r_auth_retrieve } from '@/services/auth'
|
||
import FitCenter from '@/components/common/FitCenter'
|
||
import FlexBox from '@/components/common/FlexBox'
|
||
|
||
const Forget: React.FC = () => {
|
||
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 [isSending, setIsSending] = useState(false)
|
||
const [isSent, setIsSent] = useState(false)
|
||
const [isChanging, setIsChanging] = useState(false)
|
||
const [isChanged, setIsChanged] = useState(false)
|
||
const [captchaCode, setCaptchaCode] = useState('')
|
||
const [retrieveCaptchaCode, setRetrieveCaptchaCode] = useState('')
|
||
|
||
useUpdatedEffect(() => {
|
||
if (!isSending) {
|
||
setCaptchaCode('')
|
||
turnstileRef.current?.reset()
|
||
turnstileRef.current?.execute()
|
||
}
|
||
}, [isSending])
|
||
|
||
useUpdatedEffect(() => {
|
||
if (!isChanging) {
|
||
setRetrieveCaptchaCode('')
|
||
retrieveTurnstileRef.current?.reset()
|
||
retrieveTurnstileRef.current?.execute()
|
||
}
|
||
}, [isChanging])
|
||
|
||
const handleOnSend = (forgetParam: ForgetParam) => {
|
||
if (isSending) {
|
||
return
|
||
}
|
||
setIsSending(true)
|
||
|
||
if (!captchaCode) {
|
||
void message.warning('请先通过验证')
|
||
setIsSending(false)
|
||
return
|
||
}
|
||
|
||
void r_auth_forget({ email: forgetParam.email, captchaCode })
|
||
.then((res) => {
|
||
const response = res.data
|
||
switch (response.code) {
|
||
case PERMISSION_FORGET_SUCCESS:
|
||
void message.success('已发送验证邮件，请查收')
|
||
setIsSent(true)
|
||
break
|
||
case PERMISSION_USER_NOT_FOUND:
|
||
void message.error('用户不存在')
|
||
break
|
||
case SYSTEM_INVALID_CAPTCHA_CODE:
|
||
void message.error('验证码有误，请重试')
|
||
break
|
||
default:
|
||
void message.error('出错了，请稍后重试')
|
||
}
|
||
})
|
||
.finally(() => {
|
||
setIsSending(false)
|
||
})
|
||
}
|
||
|
||
const handleOnRetry = () => {
|
||
setIsSent(false)
|
||
}
|
||
|
||
const handleOnChange = (retrieveParam: RetrieveParam) => {
|
||
if (isChanging) {
|
||
return
|
||
}
|
||
setIsChanging(true)
|
||
|
||
void r_auth_retrieve({
|
||
code: searchParams.get('code') ?? '',
|
||
password: retrieveParam.password,
|
||
captchaCode: retrieveCaptchaCode
|
||
})
|
||
.then((res) => {
|
||
const response = res.data
|
||
|
||
switch (response.code) {
|
||
case PERMISSION_RETRIEVE_SUCCESS:
|
||
void message.success('密码已更新')
|
||
setIsChanged(true)
|
||
break
|
||
case PERMISSION_RETRIEVE_CODE_ERROR_OR_EXPIRED:
|
||
void message.error('请重新获取邮件')
|
||
break
|
||
case SYSTEM_INVALID_CAPTCHA_CODE:
|
||
void message.error('验证码有误，请重试')
|
||
break
|
||
default:
|
||
void message.error('出错了，请稍后重试')
|
||
}
|
||
})
|
||
.finally(() => {
|
||
setIsChanging(false)
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className={'forget'}>
|
||
<FitCenter>
|
||
<FlexBox>
|
||
<div className={'title'}>
|
||
<div className={'primary'}>找回密码</div>
|
||
<div className={'secondary'}>Retrieve password</div>
|
||
</div>
|
||
<div className={'form'}>
|
||
{!searchParams.get('code') ? (
|
||
!isSent ? (
|
||
<>
|
||
<AntdForm autoComplete={'on'} onFinish={handleOnSend}>
|
||
<AntdForm.Item
|
||
name={'email'}
|
||
rules={[
|
||
{ required: true, message: '请输入邮箱' },
|
||
{ type: 'email', message: '不是有效的邮箱地址' }
|
||
]}
|
||
>
|
||
<AntdInput
|
||
prefix={<Icon component={IconOxygenEmail} />}
|
||
placeholder={'邮箱'}
|
||
disabled={isSending}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item>
|
||
<Turnstile
|
||
id={'forget-turnstile'}
|
||
ref={turnstileRefCallback}
|
||
siteKey={H_CAPTCHA_SITE_KEY}
|
||
options={{ theme: 'light', execution: 'execute' }}
|
||
onSuccess={setCaptchaCode}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item>
|
||
<AntdButton
|
||
style={{ width: '100%' }}
|
||
type={'primary'}
|
||
htmlType={'submit'}
|
||
disabled={isSending}
|
||
loading={isSending}
|
||
>
|
||
确    定
|
||
</AntdButton>
|
||
</AntdForm.Item>
|
||
</AntdForm>
|
||
</>
|
||
) : (
|
||
<div className={'retry'}>
|
||
我们向您发送了一封包含找回密码链接的邮件，如未收到，可能被归为垃圾邮件，请仔细检查。
|
||
<a onClick={handleOnRetry}>重新发送</a>
|
||
</div>
|
||
)
|
||
) : !isChanged ? (
|
||
<>
|
||
<AntdForm autoComplete={'on'} onFinish={handleOnChange}>
|
||
<AntdForm.Item
|
||
name={'password'}
|
||
rules={[
|
||
{ required: true, message: '请输入密码' },
|
||
{ min: 10, message: '密码至少为10位' },
|
||
{ max: 30, message: '密码最多为30位' }
|
||
]}
|
||
>
|
||
<AntdInput.Password
|
||
addonBefore={
|
||
<span>新 密 码</span>
|
||
}
|
||
placeholder={'密码'}
|
||
disabled={isChanging}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item
|
||
name={'passwordConfirm'}
|
||
rules={[
|
||
{ required: true, message: '请确认密码' },
|
||
({ getFieldValue }) => ({
|
||
validator(_, value) {
|
||
if (
|
||
!value ||
|
||
getFieldValue('password') === value
|
||
) {
|
||
return Promise.resolve()
|
||
}
|
||
return Promise.reject(
|
||
new Error('两次密码输入必须一致')
|
||
)
|
||
}
|
||
})
|
||
]}
|
||
>
|
||
<AntdInput.Password
|
||
addonBefore={'确认密码'}
|
||
placeholder={'确认密码'}
|
||
disabled={isChanging}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item>
|
||
<Turnstile
|
||
id={'retrieve-turnstile'}
|
||
ref={retrieveTurnstileRefCallback}
|
||
siteKey={H_CAPTCHA_SITE_KEY}
|
||
options={{ theme: 'light', execution: 'execute' }}
|
||
onSuccess={setRetrieveCaptchaCode}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item>
|
||
<AntdButton
|
||
style={{ width: '100%' }}
|
||
type={'primary'}
|
||
htmlType={'submit'}
|
||
disabled={isChanging}
|
||
loading={isChanging}
|
||
>
|
||
更    改
|
||
</AntdButton>
|
||
</AntdForm.Item>
|
||
</AntdForm>
|
||
</>
|
||
) : (
|
||
<div className={'success'}>恭喜你，密码已更新，请重新登录。</div>
|
||
)}
|
||
|
||
<div className={'footer'}>
|
||
找到了？
|
||
<a onClick={() => navigate(`/login`, { replace: true })}>登录</a>
|
||
</div>
|
||
</div>
|
||
</FlexBox>
|
||
</FitCenter>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Forget
|