Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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);
Add Comment
Please, Sign In to add comment