platform-bi-web/src/components/common/login/login.jsx

import React from 'react'
import Login from 'ant-design-pro/lib/Login'
import { Alert, Checkbox, Icon } from 'antd'
import { Redirect } from 'dva/router'
import { connect } from 'dva'
import './login.less'

const { UserName, Password, Submit } = Login;

class LoginComponent extends React.Component {

    constructor(props) {
        super(props);
        const { main } = props;
        const { currentUser, autoLogin } = main;
        const { account, password } = currentUser;

        this.state = {
            notice: '',
            currentUserName: account,
            currentPassword: password,
            autoLogin: autoLogin,
            redirectToReferrer: false,
            fetching: false
        }
    }

    onSubmit = (err, values) => {
        this.setState({
            notice: '',
        }, () => {
            if (!err && !!values.username && !!values.password) {
                this.login(values.username, values.password);
            }
        });
    }
    changeAutoLogin = (e) => {
        this.setState({
            autoLogin: e.target.checked,
        });
    }

    login = (username, password) => {
        const { dispatch } = this.props;
        const { autoLogin } = this.state;

        this.setState({
            fetching: true
        })
        dispatch({ type: 'main/login', username, password, autoLogin })
        .then((d) => {
            this.setState({
                notice: '',
                redirectToReferrer: d,
                fetching: false
            })
        }).catch((r) => {
            this.setState({
                notice: r.err+'' || r.data.msg+'',
                fetching: false
            });
        })
    };

    render() {
        const { from } = this.props.location.state || { from: { pathname: "/" } };
        const { currentUserName, currentPassword, notice, autoLogin, fetching, redirectToReferrer } = this.state;

        if (redirectToReferrer) {
            return <Redirect to={from} />;
        }

        return (
            <div className='login-container'>
                <div className='login-body'>
                    <div className='login-header'></div>
                    <div className='login-text'>登录</div>
                    <Login
                        className='login-content'
                        onSubmit={this.onSubmit}
                    >
                        {
                            notice &&
                            <Alert style={{ marginBottom: 24 }} message={notice} type="error" showIcon closable />
                        }
                        <UserName
                            name="username"
                            disabled={fetching}
                            placeholder='输入用户名'
                            // defaultValue={autoLogin ? defaultAccount : ''}
                            defaultValue={currentUserName}
                            onChange={() => {
                                this.setState({
                                    notice: ''
                                });
                            }}
                            rules={[{
                                required: true,
                                whitespace: true,
                                message: '用户名不能为空！'
                            }]}
                            onPressEnter={(e) => {
                                document.getElementsByClassName('antd-pro-login-submit')[0].click();
                            }}
                        />
                        <Password
                            name="password"
                            disabled={fetching}
                            placeholder='输入密码'
                            defaultValue={autoLogin ? currentPassword : ''}
                            onChange={() => {
                                this.setState({
                                    notice: ''
                                });
                            }}
                            rules={[{
                                required: true,
                                whitespace: true,
                                message: "密码不能为空！",
                            }]}
                            onPressEnter={(e) => {
                                document.getElementsByClassName('antd-pro-login-submit')[0].click();
                            }}
                        />
                        <div>
                            <Checkbox className='checkbox-remember' defaultChecked={autoLogin} onChange={this.changeAutoLogin}>记住密码</Checkbox>
                            {/* <a style={{ float: 'right' }} href="">忘记密码</a> */}
                        </div>
                        <Submit disabled={fetching}>
                            {fetching && <Icon type="loading" theme="outlined" />}
                            {fetching ? '登录中...' : '登录'}
                        </Submit>
                        <div>
                            {/* <Link to="/register">
                                <span style={{ float: 'right' }}>注册</span>
                            </Link> */}
                        </div>
                    </Login>
                </div>
            </div>
        );
    }
}

export default connect(({ main }) => ({ main }))(LoginComponent);