134 lines
3.6 KiB
TypeScript
134 lines
3.6 KiB
TypeScript
import {
|
||
Form,
|
||
Input,
|
||
Checkbox,
|
||
Link,
|
||
Button,
|
||
Space,
|
||
Message,
|
||
} from '@arco-design/web-react';
|
||
import { FormInstance } from '@arco-design/web-react/es/Form';
|
||
import { IconLock, IconUser } from '@arco-design/web-react/icon';
|
||
import React, { useEffect, useRef, useState } from 'react';
|
||
import axios from 'axios';
|
||
import useStorage from '@/utils/useStorage';
|
||
import useLocale from '@/utils/useLocale';
|
||
import locale from './locale';
|
||
import styles from './style/index.module.less';
|
||
|
||
export default function LoginForm() {
|
||
const formRef = useRef<FormInstance>();
|
||
const [errorMessage, setErrorMessage] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
const [loginParams, setLoginParams, removeLoginParams] =
|
||
useStorage('loginParams');
|
||
|
||
const t = useLocale(locale);
|
||
|
||
const [rememberPassword, setRememberPassword] = useState(!!loginParams);
|
||
|
||
function afterLoginSuccess(params) {
|
||
// 记住密码
|
||
if (rememberPassword) {
|
||
setLoginParams(JSON.stringify(params));
|
||
} else {
|
||
removeLoginParams();
|
||
}
|
||
// 记录登录状态
|
||
localStorage.setItem('userStatus', 'login');
|
||
// 跳转首页
|
||
window.location.href = '/';
|
||
}
|
||
|
||
function login(params) {
|
||
setErrorMessage('');
|
||
setLoading(true);
|
||
axios
|
||
.post('/api/user/login', params)
|
||
.then((res) => {
|
||
const { status, msg } = res.data;
|
||
if (status === 'ok') {
|
||
afterLoginSuccess(params);
|
||
} else {
|
||
setErrorMessage(msg || t['login.form.login.errMsg']);
|
||
}
|
||
})
|
||
.finally(() => {
|
||
setLoading(false);
|
||
});
|
||
}
|
||
|
||
function onSubmitClick() {
|
||
formRef.current.validate().then((values) => {
|
||
login(values);
|
||
});
|
||
}
|
||
|
||
// 读取 localStorage，设置初始值
|
||
useEffect(() => {
|
||
const rememberPassword = !!loginParams;
|
||
setRememberPassword(rememberPassword);
|
||
if (formRef.current && rememberPassword) {
|
||
const parseParams = JSON.parse(loginParams);
|
||
formRef.current.setFieldsValue(parseParams);
|
||
}
|
||
}, [loginParams]);
|
||
|
||
return (
|
||
<div className={styles['login-form-wrapper']}>
|
||
<div className={styles['login-form-title']}>账号登录</div>
|
||
|
||
{errorMessage && (
|
||
<div className={styles['login-form-error-msg']}>{errorMessage}</div>
|
||
)}
|
||
|
||
<Form
|
||
className={styles['login-form']}
|
||
layout="vertical"
|
||
ref={formRef}
|
||
initialValues={{ userName: 'admin', password: 'admin' }}
|
||
>
|
||
<Form.Item
|
||
field="userName"
|
||
rules={[{ required: true, message: t['login.form.userName.errMsg'] }]}
|
||
>
|
||
<Input
|
||
placeholder={t['login.form.userName.placeholder']}
|
||
onPressEnter={onSubmitClick}
|
||
size="large"
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
field="password"
|
||
rules={[{ required: true, message: t['login.form.password.errMsg'] }]}
|
||
>
|
||
<Input.Password
|
||
placeholder={t['login.form.password.placeholder']}
|
||
onPressEnter={onSubmitClick}
|
||
size="large"
|
||
/>
|
||
</Form.Item>
|
||
|
||
<div className={styles['login-form-actions']}>
|
||
<Checkbox checked={rememberPassword} onChange={setRememberPassword}>
|
||
{t['login.form.rememberPassword']}
|
||
</Checkbox>
|
||
<Link>{t['login.form.forgetPassword']}</Link>
|
||
</div>
|
||
|
||
<Button
|
||
type="primary"
|
||
long
|
||
size="large"
|
||
onClick={onSubmitClick}
|
||
loading={loading}
|
||
className={styles['login-btn']}
|
||
>
|
||
{t['login.form.login']}
|
||
</Button>
|
||
</Form>
|
||
</div>
|
||
);
|
||
}
|