88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
|
import React, { useState } from 'react';
|
|
import { ProFormText, LoginForm } from '@ant-design/pro-form';
|
|
import { useIntl, history, FormattedMessage, useModel } from 'umi';
|
|
import { login } from '@/services/login';
|
|
import defaultSettings from '../../../config/defaultSettings';
|
|
import styles from './index.less';
|
|
import { CACHE_TOKEN } from '@/constants/cacheKey';
|
|
|
|
const Login: React.FC = () => {
|
|
const intl = useIntl();
|
|
|
|
const handleSubmit = async (values: API.LoginParams) => {
|
|
// 登录
|
|
const res: any = await login({ ...values });
|
|
localStorage.setItem(CACHE_TOKEN, res.token);
|
|
/** 此方法会跳转到 redirect 参数所在的位置 */
|
|
if (!history) return;
|
|
const { query } = history.location;
|
|
const { redirect } = query as { redirect: string };
|
|
history.push(redirect || '/');
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.content}>
|
|
<LoginForm
|
|
logo={<img alt="logo" src="/logo.svg" />}
|
|
title={defaultSettings.title as string}
|
|
initialValues={{
|
|
autoLogin: true,
|
|
}}
|
|
onFinish={async (values) => {
|
|
await handleSubmit(values as API.LoginParams);
|
|
}}
|
|
>
|
|
<ProFormText
|
|
name="name"
|
|
fieldProps={{
|
|
size: 'large',
|
|
prefix: <UserOutlined className={styles.prefixIcon} />,
|
|
}}
|
|
placeholder={intl.formatMessage({
|
|
id: 'pages.login.username.placeholder',
|
|
defaultMessage: '用户名',
|
|
})}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: (
|
|
<FormattedMessage
|
|
id="pages.login.username.required"
|
|
defaultMessage="请输入用户名!"
|
|
/>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
<ProFormText.Password
|
|
name="password"
|
|
fieldProps={{
|
|
size: 'large',
|
|
prefix: <LockOutlined className={styles.prefixIcon} />,
|
|
}}
|
|
placeholder={intl.formatMessage({
|
|
id: 'pages.login.password.placeholder',
|
|
defaultMessage: '密码',
|
|
})}
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: (
|
|
<FormattedMessage
|
|
id="pages.login.password.required"
|
|
defaultMessage="请输入密码！"
|
|
/>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</LoginForm>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|