text: import React, { PureComponent } from 'react';
  import { connect } from 'react-redux';
  import { Redirect } from 'react-router-dom';
  import {
    Button, Form, Icon, Input, Alert, Spin
  } from 'antd';
  import Container from '~/components/Container';
  import { login } from '~/AppState';
  
  function hasErrors(fieldsError) {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
  }
  
  class LoginForm extends PureComponent {
    componentDidMount() {
      // To disabled submit button at the beginning.
      this.props.form.validateFields();
    }
  
    handleSubmit = (e) => {
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (!err) {
          this.props.dispatch(login(values));
        }
      });
    }
  
    render() {
      if (this.props.token) {
        return <Redirect to="/" />;
      }
  
      const {
        getFieldDecorator, getFieldsError, getFieldError, isFieldTouched
      } = this.props.form;
  
      // Only show error after a field is touched.
      const emailError = isFieldTouched('email') && getFieldError('email');
      const passwordError = isFieldTouched('password') && getFieldError('password');
      return (
        <Container>
          <Form onSubmit={this.handleSubmit}>
            <Form.Item
              validateStatus={emailError ? 'error' : ''}
              help={emailError || ''}
            >
              {getFieldDecorator('email', {
                rules: [{ required: true, message: 'Please input your email!' }]
              })(
                <Input prefix={<Icon type="user" />} placeholder="Email" />
              )}
            </Form.Item>
            <Form.Item
              validateStatus={passwordError ? 'error' : ''}
              help={passwordError || ''}
            >
              {getFieldDecorator('password', {
                rules: [{ required: true, message: 'Please input your Password!' }]
              })(
                <Input prefix={<Icon type="lock" />} type="password" placeholder="Password" />
              )}
            </Form.Item>
            <Form.Item>
              {this.props.isLogginIn
                ? <Spin />
                : (
                  <Button
                    type="primary"
                    htmlType="submit"
                    disabled={hasErrors(getFieldsError())}
                  >
                    Log in
                  </Button>
                )
              }
            </Form.Item>
          </Form>
          {this.props.loginError && (
            <Alert
              message="Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut."
              type="error"
              showIcon
            />
          )}
        </Container>
      );
    }
  }
  
  const Login = Form.create({ name: 'login' })(LoginForm);
  
  export default connect(state => ({
    token: state.AppState.token,
    loginError: state.AppState.loginError
  }))(Login);
  