added login logout, passing user object to store & localStorage

client/src/components/App.js

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Link } from 'react-router';
+import { connect } from 'react-redux';
 
-const App = (props) => (
-  <div>
-    <p>
-      <Link to={'/posts'}>Posts</Link> |&nbsp;
-      <Link to={'/categories'}>Categories</Link> |&nbsp;
-      <Link to={'/users'}>Users</Link>
-    </p>
-    <hr />
-    {props.children}
-  </div>
-);
+import { getUser, logout } from '../store/api';
 
-export default App;
+export class App extends Component {
+  logout = () => this.props.logout(this.props.user);
+
+  render() {
+    return (
+      <div>
+        <p>
+          <Link to={'/posts'}>Posts</Link> |&nbsp;
+          <Link to={'/categories'}>Categories</Link> |&nbsp;
+          <Link to={'/users'}>Users</Link> |&nbsp;
+          <Link to={'/login'}>Log in </Link> |&nbsp;
+          <Link onClick={this.logout}>Logout </Link>
+        </p>
+        <hr />
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+export const mapStateToProps = (state) => ({
+  user: getUser(state),
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  logout: (payload) => dispatch(logout('auth', payload)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

client/src/components/Auth/Login.js

@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+import LoginForm from './LoginForm';
+import { login } from '../../store/api';
+
+export class Login extends Component {
+  onSubmit = (values) => this.props.login(values);
+
+  render() {
+    return (
+      <div>
+        <LoginForm onSubmit={this.onSubmit}/>
+      </div>
+    )
+  }
+};
+
+export const mapStateToProps = (state) => ({
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  login: (payload) => dispatch(login('auth', payload)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

client/src/components/Auth/LoginForm.js

@@ -0,0 +1,37 @@
+import React, { Component, PropTypes } from 'react';
+import { isEmpty } from 'lodash';
+import { Field, reduxForm } from 'redux-form';
+
+import { InputField, required } from '../Forms';
+
+class LoginForm extends Component {
+  render() {
+    const { handleSubmit, pristine, reset, submitting } = this.props;
+
+    return (
+      <form onSubmit={handleSubmit}>
+        <div>
+          <Field name="email" component={InputField} />
+          <Field name="password" component={InputField} type='password' />
+        </div>
+        <div>
+          <button type="submit" disabled={submitting}>Submit</button>
+        </div>
+      </form>
+    );
+  }
+}
+
+const validate = values => {
+  const errors = required(values,
+    'email',
+    'password',
+  );
+  return errors;
+};
+
+export default reduxForm({
+  enableReinitialize: true,
+  form: 'login',
+  validate,
+})(LoginForm);

client/src/components/Auth/index.js

@@ -0,0 +1 @@
+export Login from './Login';

client/src/components/Routes.js

@@ -5,6 +5,7 @@ import App from './App';
 import { PostList, PostEdit } from './Posts';
 import { CategoryList, CategoryEdit } from './Categories';
 import { UserList, UserEdit } from './Users';
+import { Login } from './Auth';
 
 export default class Routes extends PureComponent {
   static propTypes = {
@@ -25,6 +26,7 @@ export default class Routes extends PureComponent {
           <Route path="/categories/:id" component={CategoryEdit}/>
           <Route path="/users" component={UserList}/>
           <Route path="/users/:id" component={UserEdit}/>
+          <Route path="/login" component={Login}/>
         </Route>
       </Router>
     );

client/src/store/api/actions.js

@@ -5,6 +5,8 @@ import client, {
   CREATE,
   UPDATE,
   DELETE,
+  AUTH_LOGIN,
+  AUTH_LOGOUT,
 } from './client';
 
 export const STARTED = 'STARTED';
@@ -39,3 +41,5 @@ export const fetchMany = createAsyncAction(GET_MANY);
 export const createResource = createAsyncAction(CREATE);
 export const updateResource = createAsyncAction(UPDATE);
 export const deleteResource = createAsyncAction(DELETE);
+export const login = createAsyncAction(AUTH_LOGIN);
+export const logout = createAsyncAction(AUTH_LOGOUT);

client/src/store/api/client.js

@@ -9,6 +9,7 @@ import {
   values,
   keys,
   zipObject,
+  pick,
 } from 'lodash';
 
 import { denormalize, normalize } from './normalize';
@@ -19,6 +20,8 @@ export const GET_MANY = 'GET_MANY';
 export const CREATE = 'CREATE';
 export const UPDATE = 'UPDATE';
 export const DELETE = 'DELETE';
+export const AUTH_LOGIN = 'AUTH_LOGIN';
+export const AUTH_LOGOUT = 'AUTH_LOGOUT';
 
 const client = axios.create({
   baseURL: '/',
@@ -91,6 +94,21 @@ export default (request, payload, meta) => {
         url: withParams(`${url}/${payload.id}`),
         method: 'DELETE',
       }).then(response => normalizeResponse({ data: payload }));
+    case AUTH_LOGIN:
+      return client({
+        url: 'auth/sign_in',
+        method: 'POST',
+        data: payload,
+      }).then(response => ({
+        ...response.data.data,
+        ...pick(response.headers, ['access-token', 'client']),
+      }));
+    case AUTH_LOGOUT:
+      return client({
+        url: 'auth/sign_out',
+        method: 'DELETE',
+        data: payload,
+      });
     default:
       throw `No client handler for ${request}`;
   }

client/src/store/api/reducer.js

@@ -15,6 +15,8 @@ import {
   CREATE,
   UPDATE,
   DELETE,
+  AUTH_LOGIN,
+  AUTH_LOGOUT,
 } from './client';
 
 import {
@@ -24,7 +26,9 @@ import {
   actionType,
 } from './actions';
 
-const initialState = {};
+const initialState = {
+  user: JSON.parse(localStorage.getItem('user') || '{}'),
+};
 
 const addNormalized = (newState, payload) => {
   keys(payload.normalized).forEach(key => {
@@ -67,6 +71,16 @@ export default (state = initialState, action) => {
       );
       return newState;
     }
+    case actionType(AUTH_LOGIN, SUCCESS): {
+      localStorage.setItem('user', JSON.stringify(payload));
+      newState = imm.set(newState, ['user'], payload);
+      return newState;
+    }
+    case actionType(AUTH_LOGOUT, SUCCESS): {
+      localStorage.removeItem('user');
+      newState = imm.set(newState, ['user'], {});
+      return newState;
+    }
     default:
       return state
   }

client/src/store/api/selectors.js

@@ -1,5 +1,7 @@
 import { get, isEmpty } from 'lodash';
 
+export const getUser = (state) => get(state, ['api', 'user']) || {};
+
 export const getOne = (state, key, id) => get(state, ['api', key, 'byId', id]) || {};
 
 export const getMap = (state, key) => get(state, ['api', key, 'byId']) || {};