110 lines
4.4 KiB
TypeScript
110 lines
4.4 KiB
TypeScript
import React, { useState } from 'react'
|
||
import { Button, Form, Input, message } from 'antd'
|
||
import { LockOutlined, UserOutlined } from '@ant-design/icons'
|
||
import { login } from '@/utils/auth.ts'
|
||
import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts'
|
||
import { setToken } from '@/utils/common.ts'
|
||
import { useNavigate } from 'react-router'
|
||
import '@/assets/css/login.css'
|
||
|
||
const Login: React.FC = () => {
|
||
const [messageApi, contextHolder] = message.useMessage()
|
||
const navigate = useNavigate()
|
||
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 LOGIN_SUCCESS:
|
||
setToken(data?.token ?? '')
|
||
void messageApi.success('登录成功')
|
||
setTimeout(() => {
|
||
navigate('/')
|
||
}, 1500)
|
||
break
|
||
case LOGIN_USERNAME_PASSWORD_ERROR:
|
||
void messageApi.error(
|
||
<>
|
||
<strong>用户名</strong>或<strong>密码</strong>错误，请重试
|
||
</>
|
||
)
|
||
setIsLoggingIn(false)
|
||
break
|
||
default:
|
||
void messageApi.error(
|
||
<>
|
||
<strong>服务器出错了</strong>
|
||
</>
|
||
)
|
||
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>
|
||
<Form
|
||
name="login-form"
|
||
autoComplete="on"
|
||
onFinish={onFinish}
|
||
className={'login-from'}
|
||
>
|
||
<Form.Item
|
||
className={'login-from-item'}
|
||
name={'username'}
|
||
rules={[{ required: true, message: '用户名为空' }]}
|
||
>
|
||
<Input
|
||
prefix={<UserOutlined />}
|
||
placeholder={'用户名'}
|
||
disabled={isLoggingIn}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
className={'login-from-item'}
|
||
name={'password'}
|
||
rules={[{ required: true, message: '密码为空' }]}
|
||
>
|
||
<Input.Password
|
||
prefix={<LockOutlined />}
|
||
placeholder={'密码'}
|
||
disabled={isLoggingIn}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item className={'login-from-item'}>
|
||
<Button
|
||
style={{ width: '100%' }}
|
||
type={'primary'}
|
||
htmlType={'submit'}
|
||
disabled={isLoggingIn}
|
||
loading={isLoggingIn}
|
||
>
|
||
登    录
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Login
|