============= Component ===============

"use strict";

import React, {PropTypes, Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";

import {login} from "actions/user";
import Header from "components/Header/header";
import Logo from "components/Logo/logo";
import FormError from "components/FormError/formError";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin(e) {
    e.preventDefault();
    this.props.onLogin(this.state.email, this.state.password);
  }

  handleChange(e, field) {
    e.preventDefault();
    this.setState(Object.assign({}, this.state, {[field]: e.target.value}));
  }

  render() {
    const loginError = this.props.error ? <FormError error={this.props.error}/> : null;
    return (
      <div className="login-page">
        <Header />
        <div className="content">
          <div className="login-wrap">
            <div className="login-form-header">
              <Logo size="25px"/>
              <div className="divider">|</div>
              <img src="/images/logo.png"/>
            </div>
            <form onSubmit={this.handleLogin}
              noValidate="novalidate">
              <div className="input-group">
                <input
                  type="text"
                  placeholder="email"
                  value={this.state.email}
                  onChange={e => this.handleChange(e, "email")}
                  required="required"
                />
              </div>
              <div className="input-group">
                <input
                  type="password"
                  placeholder="password"
                  value={this.state.password}
                  onChange={e => this.handleChange(e, "password")}
                  required="required"
                />
              </div>
              {loginError}
              <button
                type="submit"
                disabled={!(this.state.email && this.state.password)}
                className="button accent outline">
                Log In
              </button>
            </form>
            <div style={{fontStyle: "italic", margin: "20px 0"}}>- or -</div>
            <a href="#" className="button accent">Sign Up</a>
          </div>
        </div>
      </div>
    );
  }
}

Login.propTypes = {
  onLogin: PropTypes.func.isRequired,
  error: PropTypes.string
};

export default connect(state => {
  return {
    error: state.user.error
  };
}, dispatch => {
  return bindActionCreators({
    onLogin: login
  }, dispatch);
})(Login);


========= Action ==========
"use strict";

import cookie from "react-cookie";

import {BASE_URL, AUTH_COOKIE} from "constants/ApiConstants";
import {request} from "libs/api";

export const LOGIN_FAILURE = "LOGIN_FAILURE";
export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const LOGOUT = "LOGOUT";

/**
 * Login user
 * @param {String} email - user email
 * @param {String} password - user password
 * @return {function(*)} calls dispatch
 */
export function login(email, password) {
  return dispatch => {
    request(new Request(`${BASE_URL}/login`, {
      method: "POST",
      body: JSON.stringify({
        email: email,
        password: password
      }),
      headers: new Headers({
        "Content-Type": "application/json"
      })
    }), (err, data) => {
      if (err) {
        dispatch({
          type: LOGIN_FAILURE,
          payload: err
        });
      } else {
        cookie.save(AUTH_COOKIE, data.token);
        dispatch({
          type: LOGIN_SUCCESS,
          payload: data
        });
      }
    });
  };
}

==========  Store =============
"use strict";

import {DefaultState} from "../constants/StateConstants";
import {LOGIN_FAILURE, LOGIN_SUCCESS, LOGOUT} from "../actions/user";

const user = (state = DefaultState.user, action) => {
  switch (action.type) {
    case LOGIN_FAILURE:
      return Object.assign({}, state, {
        token: null,
        error: action.payload.error
      });
    case LOGIN_SUCCESS:
      return Object.assign({}, state, {
        token: action.payload.token,
        error: null
      });
    case LOGOUT:
      return Object.assign({}, state, {
        token: null,
        error: null
      });
    default:
      return state;
  }
};

export default user;