LoginForm.jsx

import React from 'react';
import { Form, Input, Button, Message, Image, Card } from 'semantic-ui-react';
import { browserHistory } from 'react-router';
import Server from '../lib/Server';

export default class LoginForm extends React.Component {

  static propTypes = {
    type: React.PropTypes.string.isRequired,
    imgSrc: React.PropTypes.string,
    imgSize: React.PropTypes.string,
    header: React.PropTypes.string,
  };

  static defaultProps = {
    imgSrc: '',
    imgSize: 'small',
    header: 'Login',
  };

  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = { email: '', password: '', errorFlag: false };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event, name) {
    this.setState({ [name]: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = {
      type: this.props.type,
      email: this.state.email,
      password: this.state.password,
    };
    Server.post('api/login/', data).then(() => {
      browserHistory.push('/home');
    }, () => {
      this.setState({ errorFlag: true });
    });
  }

  render = () => (

    <div className="formLogin" >


      <Form onSubmit={e => this.handleSubmit(e)} error={this.state.errorFlag}>
        <div className="formHeader">
          <Image src={`./assets/img/${this.props.imgSrc}`} size={this.props.imgSize} verticalAlign="middle" /> <span>{ this.props.header }</span>
        </div>
        <Form.Group widths="equal">
          <Form.Field required>
            <label htmlFor="id"> Email </label>
            <Input type="text" id="email" icon="user" iconPosition="left" placeholder="email" onChange={e => this.handleChange(e, 'email')} required />
          </Form.Field>
        </Form.Group>

        <Form.Group widths="equal">
          <Form.Field required>
            <label htmlFor="password"> Password </label>
            <Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required />
          </Form.Field>
        </Form.Group>

        <Button type="submit" fluid color="blue">Login</Button>
        <Message
          error
          content="Login gagal: email atau password salah."
        />

      </Form>


    </div>

  )
}