Client: handle user authentication

mpwo_client/src/actions/index.js

@@ -33,6 +33,7 @@ export function getProfile(dispatch) {
     .then(ret => {
       if (ret.status === 'success') {
         dispatch(ProfileSuccess(ret))
+        // window.location.href = '/'
       } else {
         dispatch(ProfileError(ret.message))
       }
@@ -95,7 +96,7 @@ export function handleUserFormSubmit(event, formType) {
   event.preventDefault()
   return (dispatch, getState) => {
     const state = getState()
-    let { formData } = state.formData
+    const { formData } = state.formData
     formData.formData = state.formData.formData
     if (formType === 'Login') {
       dispatch(login(formData.formData))

mpwo_client/src/components/App.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import { Route, Switch } from 'react-router-dom'
+import { Redirect, Route, Switch } from 'react-router-dom'
 
 import './App.css'
 import Dashboard from './Dashboard'
 import Logout from './Logout'
 import NavBar from './NavBar'
 import UserForm from './User/UserForm'
+import { isLoggedIn } from '../utils'
 
 export default class App extends React.Component {
+
   constructor(props) {
     super(props)
     this.props = props
@@ -18,21 +20,38 @@ export default class App extends React.Component {
       <div className="App">
         <NavBar />
         <Switch>
-          <Route exact path="/" component={Dashboard} />
+          <Route
+            exact path="/"
+            render={() => (
+              isLoggedIn() ? (
+                <Dashboard />
+              ) : (
+                <Redirect to="/login" />
+              )
+            )}
+          />
           <Route
             exact path="/register"
             render={() => (
-              <UserForm
+              isLoggedIn() ? (
-                formType={'Register'}
+                <Redirect to="/" />
-              />
+              ) : (
+                <UserForm
+                  formType={'Register'}
+                />
+              )
             )}
           />
           <Route
             exact path="/login"
             render={() => (
-              <UserForm
+              isLoggedIn() ? (
-                formType={'Login'}
+                <Redirect to="/" />
-              />
+              ) : (
+                <UserForm
+                  formType={'Login'}
+                />
+              )
             )}
           />
           <Route exact path="/logout" component={Logout} />

mpwo_client/src/components/User/Form.jsx

@@ -5,48 +5,56 @@ export default function Form (props) {
   return (
     <div>
       <h1>{props.formType}</h1>
-      <hr /><br />
+      <div className="container">
-      <form onSubmit={event =>
+      <div className="row">
-          props.handleUserFormSubmit(event, props.formType)}
+        <div className="col-md-3" />
-      >
+        <div className="col-md-6">
-        {props.formType === 'Register' &&
+          <hr /><br />
+          <form onSubmit={event =>
+            props.handleUserFormSubmit(event, props.formType)}
+          >
+          {props.formType === 'Register' &&
+            <div className="form-group">
+              <input
+                name="username"
+                className="form-control input-lg"
+                type="text"
+                placeholder="Enter a username"
+                required
+                onChange={props.onHandleFormChange}
+              />
+            </div>
+          }
           <div className="form-group">
             <input
-              name="username"
+              name="email"
               className="form-control input-lg"
-              type="text"
+              type="email"
-              placeholder="Enter a username"
+              placeholder="Enter an email address"
               required
               onChange={props.onHandleFormChange}
             />
-          </div>
+            </div>
-        }
+            <div className="form-group">
-        <div className="form-group">
+              <input
-          <input
+                name="password"
-            name="email"
+                className="form-control input-lg"
-            className="form-control input-lg"
+                type="password"
-            type="email"
+                placeholder="Enter a password"
-            placeholder="Enter an email address"
+                required
-            required
+                onChange={props.onHandleFormChange}
-            onChange={props.onHandleFormChange}
+              />
-          />
+            </div>
+            <input
+              type="submit"
+              className="btn btn-primary btn-lg btn-block"
+              value="Submit"
+            />
+          </form>
         </div>
-        <div className="form-group">
+        <div className="col-md-3" />
-          <input
+      </div>
-            name="password"
+    </div>
-            className="form-control input-lg"
-            type="password"
-            placeholder="Enter a password"
-            required
-            onChange={props.onHandleFormChange}
-          />
-        </div>
-        <input
-          type="submit"
-          className="btn btn-primary btn-lg btn-block"
-          value="Submit"
-        />
-      </form>
     </div>
   )
 }

mpwo_client/src/components/User/UserForm.jsx

@@ -1,22 +1,30 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { Redirect } from 'react-router-dom'
 
 import Form from './Form'
 import { handleFormChange, handleUserFormSubmit } from '../../actions'
+import { isLoggedIn } from '../../utils'
 
 function UserForm(props) {
   return (
     <div>
-     {props.message !== '' && (
+      {isLoggedIn() ? (
-       <code>{props.message}</code>
+        <Redirect to="/" />
-     )}
+      ) : (
-     <Form
+        <div>
-        formType={props.formType}
+          { props.message !== '' && (
-        userForm={props.formData}
+            <code>{props.message}</code>
-        onHandleFormChange={event => props.onHandleFormChange(event)}
+          )}
-        handleUserFormSubmit={(event, formType) =>
+          <Form
-            props.onHandleUserFormSubmit(event, formType)}
+            formType={props.formType}
-     />
+            userForm={props.formData}
+            onHandleFormChange={event => props.onHandleFormChange(event)}
+            handleUserFormSubmit={(event, formType) =>
+              props.onHandleUserFormSubmit(event, formType)}
+          />
+        </div>
+      )}
     </div>
   )
 }

mpwo_client/src/index.js

@@ -24,7 +24,7 @@ export const store = createStore(
   )
 )
 
-if (window.localStorage.getItem('authToken') !== null) {
+if (window.localStorage.authToken !== null) {
   store.dispatch(loadProfile())
 }
 

mpwo_client/src/utils.js

@@ -0,0 +1 @@
+export const isLoggedIn = () => !!window.localStorage.authToken