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={() => (
+              isLoggedIn() ? (
+                <Redirect to="/" />
+              ) : (
                 <UserForm
                   formType={'Register'}
                 />
+              )
             )}
           />
           <Route
             exact path="/login"
             render={() => (
+              isLoggedIn() ? (
+                <Redirect to="/" />
+              ) : (
                 <UserForm
                   formType={'Login'}
                 />
+              )
             )}
           />
           <Route exact path="/logout" component={Logout} />

mpwo_client/src/components/User/Form.jsx

@@ -5,6 +5,10 @@ export default function Form (props) {
   return (
     <div>
       <h1>{props.formType}</h1>
+      <div className="container">
+      <div className="row">
+        <div className="col-md-3" />
+        <div className="col-md-6">
           <hr /><br />
           <form onSubmit={event =>
             props.handleUserFormSubmit(event, props.formType)}
@@ -48,5 +52,9 @@ export default function Form (props) {
             />
           </form>
         </div>
+        <div className="col-md-3" />
+      </div>
+    </div>
+    </div>
   )
 }

mpwo_client/src/components/User/UserForm.jsx

@@ -1,11 +1,17 @@
 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>
+      {isLoggedIn() ? (
+        <Redirect to="/" />
+      ) : (
         <div>
           { props.message !== '' && (
             <code>{props.message}</code>
@@ -18,6 +24,8 @@ function UserForm(props) {
               props.onHandleUserFormSubmit(event, formType)}
           />
         </div>
+      )}
+    </div>
   )
 }
 export default connect(

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