Skip to content

Commit

Permalink
refactor: refact login form comp
Browse files Browse the repository at this point in the history
  • Loading branch information
chenghao committed Sep 16, 2020
1 parent c169ff5 commit 75228a3
Showing 1 changed file with 63 additions and 85 deletions.
148 changes: 63 additions & 85 deletions src/components/pages/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
* Created by hao.cheng on 2017/4/16.
*/
import React from 'react';
import { Button } from 'antd';
// import { PwaInstaller } from '../widget';
import { Button, Form, Input } from 'antd';
import { PwaInstaller } from '../widget';
import { connectAlita } 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';

// const FormItem = Form.Item;
const FormItem = Form.Item;
type LoginProps = {
setAlitaState: (param: any) => void;
auth: any;
Expand All @@ -30,95 +31,72 @@ class Login extends React.Component<LoginProps> {
history.push('/');
}
}
handleSubmit = (e: React.FormEvent) => {
// e.preventDefault();
// this.props.form!.validateFields((err, values) => {
// if (!err) {
// console.log('Received values of form: ', values);
// const { setAlitaState } = this.props;
// if (values.userName === 'admin' && values.password === 'admin')
// setAlitaState({ funcName: 'admin', stateName: 'auth' });
// if (values.userName === 'guest' && values.password === 'guest')
// setAlitaState({ funcName: 'guest', stateName: 'auth' });
// }
// });
const { setAlitaState } = this.props;
setAlitaState({ funcName: 'admin', stateName: 'auth' });
handleSubmit = (values: any) => {
if (this.checkUser(values)) {
this.props.setAlitaState({ funcName: values.userName, stateName: 'auth' });
}
};
checkUser = (values: any) => {
const users = [
['admin', 'admin'],
['guest', 'guest'],
];
return users.some((user) => user[0] === values.userName && user[1] === values.password);
};
gitHub = () => {
window.location.href =
'https://github.com/login/oauth/authorize?client_id=792cdcd244e98dcd2dee&redirect_uri=http://localhost:3006/&scope=user&state=reactAdmin';
};
render() {
// const { getFieldDecorator } = this.props.form!;
// return (
// <div className="login">
// <div className="login-form">
// <div className="login-logo">
// <span>React Admin</span>
// <PwaInstaller />
// </div>
// <Form onSubmit={this.handleSubmit} style={{ maxWidth: '300px' }}>
// <FormItem>
// {getFieldDecorator('userName', {
// rules: [{ required: true, message: '请输入用户名!' }],
// })(
// <Input
// prefix={<Icon type="user" style={{ fontSize: 13 }} />}
// placeholder="管理员输入admin, 游客输入guest"
// />
// )}
// </FormItem>
// <FormItem>
// {getFieldDecorator('password', {
// rules: [{ required: true, message: '请输入密码!' }],
// })(
// <Input
// prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
// type="password"
// placeholder="管理员输入admin, 游客输入guest"
// />
// )}
// </FormItem>
// <FormItem>
// {getFieldDecorator('remember', {
// valuePropName: 'checked',
// initialValue: true,
// })(<Checkbox>记住我</Checkbox>)}
// <span className="login-form-forgot" style={{ float: 'right' }}>
// 忘记密码
// </span>
// <Button
// type="primary"
// htmlType="submit"
// className="login-form-button"
// style={{ width: '100%' }}
// >
// 登录
// </Button>
// <p style={{ display: 'flex', justifyContent: 'space-between' }}>
// <span>或 现在就去注册!</span>
// <span onClick={this.gitHub}>
// <Icon type="github" />
// (第三方登录)
// </span>
// </p>
// </FormItem>
// </Form>
// </div>
// </div>
return (
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
}}
>
<Button type="primary" onClick={this.handleSubmit}>
点击登录
</Button>
<div className="login">
<div className="login-form">
<div className="login-logo">
<span>React Admin</span>
<PwaInstaller />
</div>
<Form onFinish={this.handleSubmit} style={{ maxWidth: '300px' }}>
<FormItem
name="userName"
rules={[{ required: true, message: '请输入用户名!' }]}
>
<Input
prefix={<UserOutlined size={13} />}
placeholder="管理员输入admin, 游客输入guest"
/>
</FormItem>
<FormItem
name="password"
rules={[{ required: true, message: '请输入密码!' }]}
>
<Input
prefix={<LockOutlined size={13} />}
type="password"
placeholder="管理员输入admin, 游客输入guest"
/>
</FormItem>
<FormItem>
<span className="login-form-forgot" style={{ float: 'right' }}>
忘记密码
</span>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
style={{ width: '100%' }}
>
登录
</Button>
<p style={{ display: 'flex', justifyContent: 'space-between' }}>
<span>或 现在就去注册!</span>
<span onClick={this.gitHub}>
<GithubOutlined />
(第三方登录)
</span>
</p>
</FormItem>
</Form>
</div>
</div>
);
}
Expand Down

0 comments on commit 75228a3

Please sign in to comment.