app-base-web/src/library/user-login/index.js

web development common base package.

import React from 'react';
import { Form, Row, Col, Button, Input, message, Spin } from 'antd';
import UtilString from '../util-string';
import api from '../util-axios';

export default class FormLogin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        }
    }
    componentDidMount() {
        api.setUser(null);
    }

    onLogin = (values) => {
        let me = this;
        values.password = UtilString.md5(values.password);
        this.setState({
            loading: true
        })
        let onErr=function(rs) {
            me.setState({
                loading: false
            })
            message.error(rs.msg);
        };
        this.props.onLogin(values, onErr);
    }

    toRegister = (e) => {
        // Router.push("/user/userRegister")
        this.props.onRegister();
    }
    toForget = (e) => {
        // Router.push("/user/userForget")
        this.props.onForget();
    }
    render() {
        return (
            <Spin wrapperClassName="app-spin" spinning={this.state.loading}>
                <div className="userLogin">
                    <div className="loginContainer">
                        <img src="/static/logo.png" className="userLogo" />
                        <Row className="loginForm">
                            <Col span={16} className="formBack"></Col>
                            <Col span={8} className="formContainer">
                                <Form onFinish={this.onLogin} className="formLogin">
                                    <p className="formTitle">{this.props.title}</p>
                                    <div className="ant-form-item-label" >用户名</div>
                                    <div className="ant-form-item-field"><Form.Item
                                        name="loginName"
                                        rules={[{ required: true, message: '请输入账号 / 手机 / 邮箱地址' }]} >
                                        <Input className="loginInput" prefix={<i className="iconfont icon-user"></i>} placeholder="请输入账号 / 手机 / 邮箱地址" />
                                    </Form.Item></div>
                                    <div className="ant-form-item-label">密码</div>
                                    <div className="ant-form-item-field"><Form.Item
                                        name="password"
                                        rules={[{ required: true, message: '请输入登录密码！' }]}
                                    >
                                        <Input className="loginInput" prefix={<i className="iconfont icon-password"></i>} type="password" placeholder="请输入登录密码" />
                                    </Form.Item></div>
                                    <div style={{ paddingLeft: "0!important", paddingRight: "0!important" }}>
                                        <Button className="btnLogin" htmlType="submit" ><span className="iconfont icon-yes"></span>登录</Button>
                                    </div>
                                    {/* <Row className="op">
                                        <Col span={8} style={{ textAlign: "right" }}><a onClick={this.toForget}>>&nbsp;忘记密码</a></Col>
                                    </Row> */}
                                </Form>
                            </Col>
                        </Row>
                    </div>
                    {/* <p className="copyRight">Copyright@横琴国际知识产权交易中心有限公司.All Rights Reserved</p> */}
                </div>
            </Spin>
        );
    }
}