Kg login auth

client/package.json

@@ -24,6 +24,7 @@
     "react-router": "~3.0.2",
     "react-router-redux": "^4.0.8",
     "redux": "^3.6.0",
+    "redux-auth-wrapper": "^1.0.0",
     "redux-form": "^6.6.1",
     "redux-thunk": "^2.2.0"
   },

client/src/components/App.js

@@ -1,21 +1,29 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
+import { isEmpty } from 'lodash';
 
 import { getUser, logout } from '../store/api';
 
 export class App extends Component {
-  logout = () => this.props.logout(this.props.user);
+  logout = (e) => {
+    e.preventDefault();
+    this.props.logout(this.props.user);
+  }
 
   render() {
+    const { user } = this.props;
     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>
+          {
+            isEmpty(user)
+              ? <Link to={'/login'}>Log in</Link>
+              : <a href="/" onClick={this.logout}>Logout</a>
+          }
         </p>
         <hr />
         {this.props.children}

client/src/components/Auth/Login.js

@@ -1,11 +1,12 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { replace } from 'react-router-redux';
 
 import LoginForm from './LoginForm';
 import { login } from '../../store/api';
 
 export class Login extends Component {
-  onSubmit = (values) => this.props.login(values);
+  onSubmit = (values) => this.props.login(values).then(this.props.redirect);
 
   render() {
     return (
@@ -16,11 +17,11 @@ export class Login extends Component {
   }
 };
 
-export const mapStateToProps = (state) => ({
-});
+export const mapStateToProps = (state) => ({});
 
-export const mapDispatchToProps = (dispatch) => ({
+export const mapDispatchToProps = (dispatch, props) => ({
   login: (payload) => dispatch(login('auth', payload)),
+  redirect: () => dispatch(replace(props.location.query.redirect || '/')),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Login);

client/src/components/Routes.js

@@ -1,12 +1,16 @@
 import React, { PureComponent, PropTypes } from 'react';
-import { Router, Route, IndexRoute } from 'react-router';
+import { Router, Route, IndexRoute, browserHistory } from 'react-router';
+import { UserAuthWrapper } from 'redux-auth-wrapper';
 
+import { getUser } from '../store/api';
 import App from './App';
 import { PostList, PostEdit } from './Posts';
 import { CategoryList, CategoryEdit } from './Categories';
 import { UserList, UserEdit } from './Users';
 import { Login } from './Auth';
 
+const UserIsAuthenticated = UserAuthWrapper({ authSelector: getUser });
+
 export default class Routes extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
@@ -17,7 +21,7 @@ export default class Routes extends PureComponent {
 
     return (
       <Router history={history}>
-        <Route path="/" component={App}>
+        <Route path="/" component={UserIsAuthenticated(App)}>
           <IndexRoute component={PostList}/>
           <Route path="/posts" component={PostList}/>
           <Route path="/posts/new" component={PostEdit}/>
@@ -26,8 +30,8 @@ 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>
+        <Route path="/login" component={Login}/>
       </Router>
     );
   }