305 lines
13 KiB
TypeScript
305 lines
13 KiB
TypeScript
import Icon from '@ant-design/icons'
|
||
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'
|
||
import {
|
||
H_CAPTCHA_SITE_KEY,
|
||
PERMISSION_LOGIN_SUCCESS,
|
||
PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
|
||
PERMISSION_NEED_TWO_FACTOR,
|
||
PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR,
|
||
PERMISSION_USER_DISABLE,
|
||
PERMISSION_USERNAME_NOT_FOUND,
|
||
SYSTEM_INVALID_CAPTCHA_CODE
|
||
} from '@/constants/common.constants'
|
||
import { getUserInfo, setToken } from '@/util/auth'
|
||
import { utcToLocalTime } from '@/util/datetime'
|
||
import { r_auth_login } from '@/services/auth'
|
||
import { AppContext } from '@/App'
|
||
import FitCenter from '@/components/common/FitCenter'
|
||
import FlexBox from '@/components/common/FlexBox'
|
||
|
||
const SignIn = () => {
|
||
const [modal, contextHolder] = AntdModal.useModal()
|
||
const { refreshRouter } = useContext(AppContext)
|
||
const navigate = useNavigate()
|
||
const [searchParams] = useSearchParams()
|
||
const turnstileRef = useRef<TurnstileInstance>()
|
||
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('')
|
||
turnstileRef.current?.reset()
|
||
turnstileRef.current?.execute()
|
||
}
|
||
}, [isSigningIn])
|
||
|
||
const handleOnFinish = (loginParam: LoginParam) => {
|
||
if (isSigningIn) {
|
||
return
|
||
}
|
||
setIsSigningIn(true)
|
||
|
||
if (!captchaCode) {
|
||
void message.warning('请先通过验证')
|
||
setIsSigningIn(false)
|
||
return
|
||
}
|
||
|
||
void r_auth_login({
|
||
account: loginParam.account,
|
||
password: loginParam.password,
|
||
captchaCode,
|
||
twoFactorCode: loginParam.twoFactorCode
|
||
})
|
||
.then((res) => {
|
||
const response = res.data
|
||
const { code, data } = response
|
||
switch (code) {
|
||
case PERMISSION_LOGIN_SUCCESS:
|
||
setToken(data?.token ?? '')
|
||
void message.success('登录成功')
|
||
setTimeout(() => {
|
||
void getUserInfo().then((user) => {
|
||
refreshRouter()
|
||
if (searchParams.has('redirect')) {
|
||
navigate(searchParams.get('redirect') ?? '/')
|
||
} else {
|
||
navigate('/')
|
||
}
|
||
|
||
notification.success({
|
||
message: '欢迎回来',
|
||
description: (
|
||
<>
|
||
<span>
|
||
你好 <strong>{user.userInfo.nickname}</strong>
|
||
</span>
|
||
<br />
|
||
<span>
|
||
最近登录：
|
||
{user.lastLoginTime
|
||
? `${utcToLocalTime(user.lastLoginTime)}【${
|
||
user.lastLoginIp
|
||
}】`
|
||
: '无'}
|
||
</span>
|
||
</>
|
||
),
|
||
placement: 'topRight'
|
||
})
|
||
})
|
||
}, 1500)
|
||
break
|
||
case PERMISSION_NEED_TWO_FACTOR:
|
||
twoFactorForm.resetFields()
|
||
void modal.confirm({
|
||
title: '双因素验证',
|
||
centered: true,
|
||
footer: (_, { OkBtn, CancelBtn }) => (
|
||
<>
|
||
<OkBtn />
|
||
<CancelBtn />
|
||
</>
|
||
),
|
||
content: (
|
||
<>
|
||
<AntdForm
|
||
form={twoFactorForm}
|
||
ref={(ref) => {
|
||
setTimeout(() => {
|
||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
|
||
ref?.getFieldInstance('twoFactorCode').focus()
|
||
}, 50)
|
||
}}
|
||
>
|
||
<AntdForm.Item
|
||
name={'twoFactorCode'}
|
||
label={'验证码'}
|
||
style={{ marginTop: 10 }}
|
||
rules={[{ required: true, whitespace: true, len: 6 }]}
|
||
>
|
||
<AntdInput
|
||
showCount
|
||
maxLength={6}
|
||
autoComplete={'off'}
|
||
/>
|
||
</AntdForm.Item>
|
||
</AntdForm>
|
||
</>
|
||
),
|
||
onOk: () =>
|
||
twoFactorForm.validateFields().then(
|
||
() => {
|
||
return new Promise<void>((resolve) => {
|
||
handleOnFinish({
|
||
...loginParam,
|
||
twoFactorCode: twoFactorForm.getFieldValue(
|
||
'twoFactorCode'
|
||
) as string
|
||
})
|
||
resolve()
|
||
})
|
||
},
|
||
() => {
|
||
return new Promise((_, reject) => {
|
||
reject('输入有误')
|
||
})
|
||
}
|
||
),
|
||
onCancel: () => {
|
||
setIsSigningIn(false)
|
||
}
|
||
})
|
||
break
|
||
case PERMISSION_USERNAME_NOT_FOUND:
|
||
case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
|
||
void message.error(
|
||
<>
|
||
<strong>账号</strong>或<strong>密码</strong>错误，请重试
|
||
</>
|
||
)
|
||
setIsSigningIn(false)
|
||
break
|
||
case PERMISSION_TWO_FACTOR_VERIFICATION_CODE_ERROR:
|
||
void message.error('双因素验证码错误')
|
||
setIsSigningIn(false)
|
||
break
|
||
case PERMISSION_USER_DISABLE:
|
||
void message.error(
|
||
<>
|
||
该用户已被<strong>禁用</strong>
|
||
</>
|
||
)
|
||
setIsSigningIn(false)
|
||
break
|
||
case SYSTEM_INVALID_CAPTCHA_CODE:
|
||
void message.error('验证码有误，请重试')
|
||
setIsSigningIn(false)
|
||
break
|
||
default:
|
||
void message.error(
|
||
<>
|
||
<strong>服务器出错了</strong>
|
||
</>
|
||
)
|
||
setIsSigningIn(false)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
setIsSigningIn(false)
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className={'sign-in'}>
|
||
<FitCenter>
|
||
<FlexBox>
|
||
<div className={'title'}>
|
||
<div className={'primary'}>欢迎回来</div>
|
||
<div className={'secondary'}>Welcome back</div>
|
||
</div>
|
||
<AntdForm autoComplete={'on'} onFinish={handleOnFinish} className={'form'}>
|
||
<AntdForm.Item
|
||
name={'account'}
|
||
rules={[
|
||
{ required: true, message: '请输入账号' },
|
||
{ whitespace: true, message: '账号不能为空字符' }
|
||
]}
|
||
>
|
||
<AntdInput
|
||
prefix={<Icon component={IconOxygenUser} />}
|
||
disabled={isSigningIn}
|
||
placeholder={'邮箱/用户名'}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item
|
||
name={'password'}
|
||
rules={[
|
||
{ required: true, message: '请输入密码' },
|
||
{ whitespace: true, message: '密码不能为空字符' }
|
||
]}
|
||
>
|
||
<AntdInput.Password
|
||
prefix={<Icon component={IconOxygenPassword} />}
|
||
disabled={isSigningIn}
|
||
placeholder={'密码'}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item>
|
||
<Turnstile
|
||
id={'sign-in-turnstile'}
|
||
ref={turnstileRef}
|
||
siteKey={H_CAPTCHA_SITE_KEY}
|
||
options={{
|
||
theme: 'light',
|
||
execution: 'execute',
|
||
appearance: 'execute'
|
||
}}
|
||
onSuccess={setCaptchaCode}
|
||
data-refresh={refreshTime}
|
||
/>
|
||
</AntdForm.Item>
|
||
<FlexBox direction={'horizontal'} className={'addition'}>
|
||
<a
|
||
onClick={() => {
|
||
navigate('/')
|
||
}}
|
||
>
|
||
返回首页
|
||
</a>
|
||
<a
|
||
onClick={() => {
|
||
navigate(`/forget${location.search}`, { replace: true })
|
||
}}
|
||
>
|
||
忘记密码？
|
||
</a>
|
||
</FlexBox>
|
||
<AntdForm.Item>
|
||
<AntdButton
|
||
style={{ width: '100%' }}
|
||
type={'primary'}
|
||
htmlType={'submit'}
|
||
disabled={isSigningIn}
|
||
loading={isSigningIn}
|
||
>
|
||
登    录
|
||
</AntdButton>
|
||
</AntdForm.Item>
|
||
<div className={'footer'}>
|
||
还没有账号？
|
||
<a
|
||
onClick={() =>
|
||
navigate(`/register${location.search}`, { replace: true })
|
||
}
|
||
>
|
||
注册
|
||
</a>
|
||
</div>
|
||
</AntdForm>
|
||
</FlexBox>
|
||
</FitCenter>
|
||
{contextHolder}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default SignIn
|