150 lines
6.3 KiB
TypeScript
150 lines
6.3 KiB
TypeScript
import React from 'react'
|
||
import { notification } from 'antd'
|
||
import '@/assets/css/pages/login.scss'
|
||
import { getLocalTime, setToken } from '@/utils/common'
|
||
import { getUserInfo, login } from '@/utils/auth'
|
||
import {
|
||
PERMISSION_LOGIN_SUCCESS,
|
||
PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR,
|
||
PERMISSION_USER_DISABLE,
|
||
PERMISSION_USERNAME_NOT_FOUND
|
||
} from '@/constants/common.constants'
|
||
|
||
const Login: React.FC = () => {
|
||
const [messageApi, contextHolder] = message.useMessage()
|
||
const navigate = useNavigate()
|
||
const [searchParams] = useSearchParams()
|
||
const [isLoggingIn, setIsLoggingIn] = useState(false)
|
||
|
||
const onFinish = (values: LoginForm) => {
|
||
setIsLoggingIn(true)
|
||
void login(values.username, values.password)
|
||
.then((value) => {
|
||
const res = value.data
|
||
const { code, data } = res
|
||
switch (code) {
|
||
case PERMISSION_LOGIN_SUCCESS:
|
||
setToken(data?.token ?? '')
|
||
void messageApi.success('登录成功')
|
||
setTimeout(() => {
|
||
if (searchParams.has('redirect')) {
|
||
navigate(searchParams.get('redirect') ?? '/')
|
||
} else {
|
||
navigate('/')
|
||
}
|
||
void getUserInfo().then((user) => {
|
||
notification.success({
|
||
message: '欢迎回来',
|
||
description: (
|
||
<>
|
||
<span>
|
||
你好 <strong>{user.userInfo.nickname}</strong>
|
||
</span>
|
||
<br />
|
||
<span>
|
||
上次登录：
|
||
{getLocalTime(user.lastLoginTime)}【
|
||
{user.lastLoginIp}】
|
||
</span>
|
||
</>
|
||
),
|
||
placement: 'topRight'
|
||
})
|
||
})
|
||
}, 1500)
|
||
break
|
||
case PERMISSION_USERNAME_NOT_FOUND:
|
||
case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
|
||
void messageApi.error(
|
||
<>
|
||
<strong>用户名</strong>或<strong>密码</strong>错误，请重试
|
||
</>
|
||
)
|
||
setIsLoggingIn(false)
|
||
break
|
||
case PERMISSION_USER_DISABLE:
|
||
void messageApi.error(
|
||
<>
|
||
该用户已被<strong>禁用</strong>
|
||
</>
|
||
)
|
||
setIsLoggingIn(false)
|
||
break
|
||
default:
|
||
void messageApi.error(
|
||
<>
|
||
<strong>服务器出错了</strong>
|
||
</>
|
||
)
|
||
setIsLoggingIn(false)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
setIsLoggingIn(false)
|
||
})
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{contextHolder}
|
||
<div className={'login-background'}>
|
||
<div className={'login-box'}>
|
||
<div className={'login-box-left'}>
|
||
<div className={'login-box-left-text'}>
|
||
<div>欢迎回来</div>
|
||
<div>Welcome back</div>
|
||
</div>
|
||
</div>
|
||
<div className={'login-box-right'}>
|
||
<div className={'login-from-text'}>
|
||
<span>登 录</span>
|
||
</div>
|
||
<AntdForm
|
||
name="login-form"
|
||
autoComplete="on"
|
||
onFinish={onFinish}
|
||
className={'login-from'}
|
||
>
|
||
<AntdForm.Item
|
||
className={'login-from-item'}
|
||
name={'username'}
|
||
rules={[{ required: true, message: '用户名为空' }]}
|
||
>
|
||
<AntdInput
|
||
prefix={<UserOutlined />}
|
||
placeholder={'用户名'}
|
||
disabled={isLoggingIn}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item
|
||
className={'login-from-item'}
|
||
name={'password'}
|
||
rules={[{ required: true, message: '密码为空' }]}
|
||
>
|
||
<AntdInput.Password
|
||
prefix={<LockOutlined />}
|
||
placeholder={'密码'}
|
||
disabled={isLoggingIn}
|
||
/>
|
||
</AntdForm.Item>
|
||
<AntdForm.Item className={'login-from-item'}>
|
||
<AntdButton
|
||
style={{ width: '100%' }}
|
||
type={'primary'}
|
||
htmlType={'submit'}
|
||
disabled={isLoggingIn}
|
||
loading={isLoggingIn}
|
||
>
|
||
登    录
|
||
</AntdButton>
|
||
</AntdForm.Item>
|
||
</AntdForm>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Login
|