content: import React, { Component } from 'react';
  import jQuery from 'jquery';
  import Cookies from 'js-cookie';
  import { hashHistory } from 'react-router';
  
  class Login extends Component {
    constructor(props) {
      super(props);
      this.state = {
        hint: ''
      };
    }
    render() {
      return (
        <div className="sign-up">
          <table>
            <tr>
              <td>
                <label>Username:</label>
              </td>
              <td>
                <input type="text" ref="LoginUsername" />
              </td>
            </tr>
            <tr>
              <td>
                <label>Password:</label>
              </td>
              <td>
                <input type="password" ref="LoginPassword" />
              </td>
            </tr>
          </table>
          <div className="btn-container">
            <p>{this.state.hint}</p>
            <button className="btn btn-mid" onClick={() => this.handleClick()}>
              Log in
            </button>
          </div>
        </div>
      );
    }
  
    handleClick() {
      jQuery.ajax({
        url: '/api/user/login',
        type: 'post',
        data: {
          username: this.refs.LoginUsername.value.trim(),
          password: this.refs.LoginPassword.value.trim()
        },
        success: (data) => {
          this.setState({ hint: 'Success!' });
          Cookies.set('token', data.token);
          hashHistory.push('/');
        },
        error: () => {
          this.setState({ hint: 'Your username or password is not correct.' });
        }
      });
    }
  }
  
  export default Login;
  