login-form.js

import React from 'react';
import { Form, Input, Button, Col, Icon } from 'antd';
import { Logger } from 'aws-amplify';
import { intlShape, injectIntl } from 'react-intl';
import styled from 'styled-components'; 

import * as t from '../../i18n';

const logger = new Logger('Form:Login', 'DEBUG');

const StyledForm = styled(Form)`
  width: 200px;
  margin: auto;

  .login-button {
    width: 100%;
    float: right;
  }

  .ant-form-item {
    margin-bottom: 5px;
  }
`;

class Login extends React.Component {
  state = { confirmDirty: false }

  onSubmit = (e) => {
    e.preventDefault();
    const { validateFields } = this.props.form;

    validateFields((err, values) => {
      if (err) { return; }

      this.props.onSubmit(values);
    });
  }

  render() {
    const { form, centered, initialValues, status } = this.props;
    const { getFieldDecorator } = form;

    return (
      <StyledForm centered={centered} status={status}>
        <Form.Item>
          {
            getFieldDecorator('email')
            (<Input placeholder="Email" placeholder={this.props.intl.formatMessage({
              id: 'signin.placeholder_email'
            })} />)
          }
        </Form.Item>
        <Form.Item>
            {
              getFieldDecorator('password', {
                rules: [
                  {required: true, message: 'Please input your password!'},
                ]
            })(<Input type="password" placeholder={this.props.intl.formatMessage({
              id: 'signin.placeholder_password'
            })} />)
            }
        </Form.Item>
        <Form.Item>
          <Button
            ghost
            className="login-button"
            type={ status === "error" ? "danger" : "primary" }
            onClick={this.onSubmit}
          >{status === "loading" ? <Icon type="loading" /> : t.signin.confirm }</Button>
        </Form.Item>
      </StyledForm>
    );
  }
}


Login.propTypes = {
  intl: intlShape.isRequired
}
export default Form.create()(injectIntl(Login));