Prettied UI for the auth controls

js-frontend/src/App.js

@@ -1,13 +1,14 @@
 /**
  * Created by andrew on 12/02/16.
  */
-import { AuthGlobals } from "redux-auth/bootstrap-theme";
 
 import React from "react";
 import { Provider} from "react-redux";
 import { ReduxRouter} from "redux-router";
 import { Route, IndexRoute} from "react-router";
 import { configure, authStateReducer} from "redux-auth";
+import { AuthGlobals } from "redux-auth/bootstrap-theme";
+
 import { createStore, compose, applyMiddleware} from "redux";
 import { createHistory, createMemoryHistory} from "history";
 import { routerStateReducer, reduxReactRouter as clientRouter} from "redux-router";
@@ -15,6 +16,9 @@ import { reduxReactRouter as serverRouter } from "redux-router/server";
 import { combineReducers} from "redux";
 import thunk from "redux-thunk";
 
+import {connect} from 'react-redux';
+import {pushState} from 'redux-router';
+
 //import demoButtons from "./reducers/request-test-buttons";
 //import demoUi from "./reducers/demo-ui";
 //import Container from "./views/partials/Container";
@@ -80,29 +84,73 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
     //demoUi
   });
 
-  let store;
+  //let store;
 
-  // access control method, used above in the "account" route
-  const requireAuth = (nextState, transition, cb) => {
-    // the setTimeout is necessary because of this bug:
-    // https://github.com/rackt/redux-router/pull/62
-    // this will result in a bunch of warnings, but it doesn't seem to be a serious problem
-    setTimeout(() => {
-      debugger;
-      if (!store.getState().auth.getIn(["user", "isSignedIn"])) {
-        transition(null, "/login");
+  //// access control method, used above in the "account" route
+  //const requireAuth = (nextState, transition, cb) => {
+  //  // the setTimeout is necessary because of this bug:
+  //  // https://github.com/rackt/redux-router/pull/62
+  //  // this will result in a bunch of warnings, but it doesn't seem to be a serious problem
+  //  setTimeout(() => {
+  //    if (!store.getState().auth.getIn(["user", "isSignedIn"])) {
+  //      transition(null, "/login");
+  //    }
+  //    cb();
+  //  }, 0);
+  //};
+
+  const requireAuthentication = (Component) => {
+    class AuthenticatedComponent extends React.Component {
+
+      componentWillMount() {
+        this.checkAuth();
       }
-      cb();
-    }, 0);
+
+      componentWillReceiveProps(nextProps) {
+        this.checkAuth();
+      }
+
+      checkAuth() {
+        debugger;
+        if (!this.props.isAuthenticated) {
+          let redirectAfterLogin = this.props.location.pathname;
+          this.props.dispatch(pushState(null, `/login?next=${redirectAfterLogin}`));
+        }
+      }
+
+      render() {
+        debugger;
+        return (
+          <div>
+            {this.props.isAuthenticated === true
+              ? <Component {...this.props}/>
+              : null
+            }
+          </div>
+        )
+
+      }
+    }
+
+    const mapStateToProps = (state) => ({
+      token: state.auth.token,
+      userName: state.auth.userName,
+      isAuthenticated: state.auth.isAuthenticated
+    });
+
+    return connect(mapStateToProps)(AuthenticatedComponent);
   };
 
   // define app routes
+  //      <Route path="account" component={Account} onEnter={requireAuth} />
+
   const routes = (
     <Route path="/" component={App}>
       <IndexRoute component={Main} />
       <Route path="login" component={SignIn} />
       <Route path="register" component={SignUp} />
-      <Route path="account" component={Account} onEnter={requireAuth} />
+      <Route path="account" component={requireAuthentication(Account)} />
+      <Route path="account2" component={requireAuthentication(Account)} />
     </Route>
   );
 
@@ -116,7 +164,7 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
   }
 
   // create the redux store
-  store = compose(
+  const store = compose(
     applyMiddleware(thunk),
     reduxReactRouter({
       createHistory: createHistoryMethod,
@@ -164,6 +212,12 @@ export function initialize({cookies, isServer, currentLocation, userAgent} = {})
       global.navigator = {userAgent};
     }
 
+    if (blank) {
+      // if `blank` is true, this is an OAuth redirect and should not
+      // be rendered
+      return <noscript />;
+    }
+
     return ({
       blank,
       store,

js-frontend/src/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
     <title>Money Transfer App</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
     <!-- inject:app:css -->
     <!-- endinject -->

js-frontend/src/views/SignIn.js

@@ -5,14 +5,18 @@ import React from "react";
 import { PageHeader } from "react-bootstrap";
 import { connect } from "react-redux";
 
+// bootstrap theme
+import { EmailSignInForm } from "redux-auth/bootstrap-theme";
+
 export class SignIn extends React.Component {
   render () {
-    return (
-      <div>
-        <PageHeader>Sign In First</PageHeader>
-        <p>Unauthenticated users can't access the account page.</p>
-      </div>
-    );
+    return <EmailSignInForm />;
+    //return (
+    //  <div>
+    //    <PageHeader>Sign In First</PageHeader>
+    //    <p>Unauthenticated users can't access the account page.</p>
+    //  </div>
+    //);
   }
 }
 export default connect(({routes}) => ({routes}))(SignIn);

js-frontend/src/views/SignUp.js

@@ -5,14 +5,18 @@ import React from "react";
 import { PageHeader } from "react-bootstrap";
 import { connect } from "react-redux";
 
+import { EmailSignUpForm } from "redux-auth/bootstrap-theme"
+
 export class SignUp extends React.Component {
   render () {
-    return (
-      <div>
-        <PageHeader>Sign Up Page</PageHeader>
-        <p>Here you can register.</p>
-      </div>
-    );
+
+    return <EmailSignUpForm />;
+    //return (
+    //  <div>
+    //    <PageHeader>Sign Up Page</PageHeader>
+    //    <p>Here you can register.</p>
+    //  </div>
+    //);
   }
 }
 export default connect(({routes}) => ({routes}))(SignUp);