login.jsx

import React from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import globalConfig from '../../config'
import ajax from '../../utils/ajax'
import Logger from '../../utils/Logger'
import { Button, message } from 'antd'
import './index.less'
import { loginSuccessCreator } from '../../redux/Login.js'
import { SetAuth } from '../../utils/ajax'

const logger = Logger.getLogger('Login')

class Login extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      username: '',  // 当前输入的用户名
      password: '',  // 当前输入的密码
      requesting: false, // 当前是否正在请求服务端接口, 防止重复点击
    }
    this.handleUsernameInput = this.handleUsernameInput.bind(this)
    this.handlePasswordInput = this.handlePasswordInput.bind(this)
    this.handleUsernameInput = this.handleUsernameInput.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleUsernameInput(e) {
    this.setState({ username: e.target.value });
  };

  handlePasswordInput(e) {
    this.setState({ password: e.target.value });
  };

  /**
   * 处理表单的submit事件
   *
   * @param e
   */
  async handleSubmit(e) {
    // 防止跳转
    e.preventDefault();
    this.setState({ requesting: true });
    const hide = message.loading('Authorizing...', 0);

    const username = this.state.username;
    const password = this.state.password;
    logger.debug('username = %s, password = %s', username, password);

    try {
      // 服务端验证
      const res = await ajax.login(username, password);
      hide();
      logger.debug('login validate return: result %o', res);

      if (res.success) {
        message.success('Login Successful!');
        this.props.handleLoginSuccess(res.data.data);
      } else {
        message.error(`Login Failed: ${res.message}, Please Contact Maintainer`);
        this.setState({ requesting: false });
      }
    } catch (exception) {
      hide();
      message.error(`Incorrect Network: ${exception.message}`);
      logger.error('login error, %o', exception);
      this.setState({ requesting: false });
    }
  }

  render() {
    let text = globalConfig.name
    if (globalConfig.debug) {
      text = "[" + text + "]"
    }
    return (
      <div id="loginDIV">
        <div className="login">
          <h1>{text}</h1>
          <form onSubmit={this.handleSubmit}>
            <input className="login-input" type="text" value={this.state.username}
              onChange={this.handleUsernameInput} placeholder="Username" required="required" />
            <input className="login-input" type="password" value={this.state.password}
              onChange={this.handlePasswordInput} placeholder="Password" required="required" />
            <button className="btn btn-primary btn-block btn-large"
              type="submit" disabled={this.state.requesting}>
              Login
            </button>
          </form>
        </div>

      </div>
    );
  }

}

const mapDispatchToProps = (dispatch) => {
  return {
    handleLoginSuccess: bindActionCreators(loginSuccessCreator, dispatch),
  };
};

export default connect(null, mapDispatchToProps)(Login);