/**
 * 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';

const FormItem = Form.Item;
type RegisterProps = {
    setAlitaState: (param: any) => void;
    auth: any;
} & RouteComponentProps &
    FormProps;

const Register = (props: RegisterProps) => {
    return (
        <div className="login">
            <div className="login-form">
                <div className="login-logo">
                    <span>用户注册</span>
                </div>
                <Form 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
                        name="passwordConfirm"
                        rules={[{ required: true, message: '请再次输入密码!' }]}
                    >
                        <Input
                            prefix={<LockOutlined size={13} />}
                            type="password"
                            placeholder="Password Confirm"
                        />
                    </FormItem>
                    <FormItem>
                        <Button
                            type="primary"
                            htmlType="submit"
                            className="Register-form-button"
                            style={{ width: '100%' }}
                        >
                            注册
                        </Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    );
};

export default Register;
