100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
/**
|
|
* Created by hao.cheng on 2017/4/16.
|
|
*/
|
|
import React, { useEffect } from 'react';
|
|
import { Button, Form, Input } from 'antd';
|
|
import { PwaInstaller } from '../widget';
|
|
import { useAlita } from 'redux-alita';
|
|
import { RouteComponentProps } from 'react-router';
|
|
import { FormProps } from 'antd/lib/form';
|
|
import umbrella from 'umbrella-storage';
|
|
import { GithubOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { useUpdateEffect } from 'ahooks';
|
|
import { trailwayLogin } from '../../service';
|
|
|
|
const FormItem = Form.Item;
|
|
type LoginProps = {
|
|
setAlitaState: (param: any) => void;
|
|
auth: any;
|
|
} & RouteComponentProps &
|
|
FormProps;
|
|
|
|
const Login = (props: LoginProps) => {
|
|
const { history } = props;
|
|
const [auth, setAlita] = useAlita({ auth: {} }, { light: true });
|
|
|
|
useEffect(() => {
|
|
setAlita('auth', null);
|
|
}, [setAlita]);
|
|
|
|
useUpdateEffect(() => {
|
|
if (auth && auth.uid) {
|
|
// 判断是否登陆
|
|
umbrella.setLocalStorage('user', auth);
|
|
history.push('/');
|
|
}
|
|
}, [history, auth]);
|
|
|
|
const handleSubmit = async (values: any) => {
|
|
trailwayLogin({ username: values.userName, password: values.password }).then((res) => {
|
|
if (res.data.success) {
|
|
let user = {
|
|
uid: res.data.id,
|
|
role: res.data.role === 1 ? '系统管理员' : '访客',
|
|
roleType: res.data.role,
|
|
username: values.userName,
|
|
permissions: res.data.role === 1 ? ['auth/admin'] : [],
|
|
};
|
|
setAlita('auth', user);
|
|
}
|
|
});
|
|
};
|
|
const checkUser = async (values: any) => {
|
|
let success = await trailwayLogin({
|
|
username: values.userName,
|
|
password: values.password,
|
|
}).then((res) => {
|
|
return res.data.success;
|
|
});
|
|
return success;
|
|
};
|
|
|
|
return (
|
|
<div className="login">
|
|
<div className="login-form">
|
|
<div className="login-logo">
|
|
<span>地铁可视化</span>
|
|
<PwaInstaller />
|
|
</div>
|
|
<Form onFinish={handleSubmit} style={{ maxWidth: '300px' }}>
|
|
<FormItem
|
|
name="userName"
|
|
rules={[{ required: true, message: '请输入用户名!' }]}
|
|
>
|
|
<Input prefix={<UserOutlined size={13} />} placeholder="Username" />
|
|
</FormItem>
|
|
<FormItem name="password" rules={[{ required: true, message: '请输入密码!' }]}>
|
|
<Input
|
|
prefix={<LockOutlined size={13} />}
|
|
type="password"
|
|
placeholder="Password"
|
|
/>
|
|
</FormItem>
|
|
<FormItem>
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
className="login-form-button"
|
|
style={{ width: '100%' }}
|
|
>
|
|
登录
|
|
</Button>
|
|
</FormItem>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|