Merge pull request #121 from jes708/restrict-unauth

Redirect unauthenticated users to always go to the home screen. Authe…

Author: jes708

browser/js/actions/AuthActions.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import axios from 'axios'
+import { replace } from 'react-router-redux'
 
 export const AUTH_LOGIN_REQUEST = 'AUTH_LOGIN_REQUEST'
 export const AUTH_LOGIN_SUCCESS = 'AUTH_LOGIN_SUCCESS'
@@ -12,6 +13,10 @@ export const AUTH_USER_REQUEST = 'AUTH_USER_REQUEST'
 export const AUTH_USER_RECEIVED = 'AUTH_USER_RECEIVED'
 export const AUTH_NO_USER = 'AUTH_NO_USER'
 
+export function userReceived (user) {
+  return { type: AUTH_USER_RECEIVED, user }
+}
+
 export const login = (credentials) => (dispatch) => {
   dispatch({ type: AUTH_LOGIN_REQUEST })
 
@@ -51,16 +56,18 @@ export const getLoggedInUser = () => (dispatch, getState) => {
     return axios.get('/session')
     .then(res => res.data)
     .then(resData => dispatch(userReceived(resData.user)))
-    .catch(() => dispatch({ type: AUTH_NO_USER }))
+    .catch(() => {
+      dispatch({ type: AUTH_NO_USER })
+      dispatch(replace('/'))
+    })
   }
 }
 
 export const logout = () => (dispatch) => {
   return axios.get('/logout')
-  .then(() => dispatch({ type: AUTH_LOGOUT_SUCCESS }))
+  .then(() => {
+    dispatch({ type: AUTH_LOGOUT_SUCCESS })
+    dispatch(replace('/'))
+  })
   .catch(err => dispatch({ type: AUTH_LOGOUT_FAILURE }))
 }
-
-export function userReceived (user) {
-  return { type: AUTH_USER_RECEIVED, user }
-}

browser/js/components/GraderAssessments.js

@@ -35,7 +35,8 @@ class GraderAssessments extends Component {
   }
 
   componentWillMount () {
-    this.props.dispatch(getUserAssessments())
+    const { dispatch, isFetchingUser } = this.props
+    if (!isFetchingUser) dispatch(getUserAssessments())
   }
 
   handleSelectAssessment (assessmentId) {
@@ -171,15 +172,19 @@ class GraderAssessments extends Component {
   }
 
   render () {
-    return (
-      <div style={Object.assign({}, styles.gradingPane, styles.paperStyle)}>
-        <div style={styles.content}>
-          {this.renderToggleFormButton()}
-          {this.renderSearchBar()}
-          {this.renderForm()}
+    const { isUserFetching } = this.props
+
+    if (!isUserFetching) {
+      return (
+        <div style={Object.assign({}, styles.gradingPane, styles.paperStyle)}>
+          <div style={styles.content}>
+            {this.renderToggleFormButton()}
+            {this.renderSearchBar()}
+            {this.renderForm()}
+          </div>
         </div>
-      </div>
-    )
+      )
+    } else return (<div></div>)
   }
 }
 
@@ -196,6 +201,7 @@ const mapStateToProps = state => {
   const { isFetching } = assessments
   const { user } = session
   return {
+    isFetchingUser: session.isFetching,
     isFetching,
     assessments: getAllAssessments(assessments.byId),
     user

browser/js/config/routes.js

@@ -6,17 +6,19 @@ import App from '../containers/App'
 import Home from '../containers/Home'
 // import Grade from '../containers/Grade'
 import {AnnotatedGrade as Grade} from '../containers/Grade'
-import AuthForm from '../shared/AuthForm'
 import TestAnnotate from '../components/Annotator/test.js'
 import TestComponent from '../components/test/TestComponent'
+import NotFound from '../shared/NotFound'
 
 const routes = (
   <Route path='/' component={App}>
     <IndexRoute component={Home} />
     <Route path='grade' component={Grade} />
     <Route path='/test/annotate' component={TestAnnotate} />
     <Route path='/test/component' component={TestComponent} />
+    <Route path='*' component={NotFound} />
   </Route>
 );
 
 export default routes;
+

browser/js/containers/Home/index.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
 import GitHubInvert from '../../shared/GitHubInvert'
 import Paper from 'material-ui/Paper'
 import { blue300, blue600 } from 'material-ui/styles/colors'
@@ -51,14 +52,32 @@ const styles = {
   }
 }
 
-export default function Home () {
-  return (
-    <div style={styles.paperStyle}>
-        <div style={styles.header}>CodeGenius</div>
-        <hr style={styles.hr} />
-        <p style={styles.p}>CodeGenius optimizes the process of evaluating student code assessments<br />so you can get all of your grading done in one sitting.</p>
-      <GitHubInvert style={styles.button} href='/auth/github' />
-    </div>
-  )
+class Home extends Component {
+  render () {
+    const { isFetching } = this.props
+
+    if (!isFetching) {
+      return (
+        <div style={styles.paperStyle}>
+          <div style={styles.header}>CodeGenius</div>
+          <hr style={styles.hr} />
+          <p style={styles.p}>CodeGenius optimizes the process of evaluating student code assessments<br />so you can get all of your grading done in one sitting.</p>
+          <GitHubInvert style={styles.button} href='/auth/github' />
+        </div>
+      )
+    } else {
+      return (<div style={{textAlign: 'center'}}></div>)
+    }
+  }
 }
 
+const mapStateToProps = (state) => {
+  const { session } = state
+
+  return {
+    isFetching: session.isFetching
+  }
+}
+
+export default connect(mapStateToProps)(Home)
+

browser/js/shared/Navbar/index.js

@@ -2,6 +2,7 @@
 
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
+import { push } from 'react-router-redux'
 import getState from 'redux'
 import { Link } from 'react-router'
 import FlatButton from 'material-ui/FlatButton'
@@ -31,23 +32,26 @@ const styles = {
 }
 
 const NAV_ITEMS = [
-  { label: 'Home', path: '/', auth: true },
-  { label: 'Grade', path: 'grade', auth: true },
-  { label: 'Members Only', path: 'membersOnly', auth: true }
+  { label: 'Grade', path: '/grade', auth: true }
 ]
 
 class Navbar extends Component {
   componentWillMount () {
-    this.props.dispatch(getLoggedInUser())
+    const { user, dispatch } = this.props
+
+    if (!user) {
+      dispatch(getLoggedInUser())
+    }
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.user) this.context.router.push('/grade')
+    const { user, pathname, dispatch } = nextProps
+
+    if (user && pathname === '/') dispatch(push('/grade'))
   }
 
   handleLogout () {
     this.props.dispatch(logout())
-    this.context.router.push('/')
   }
 
   renderNavItems () {
@@ -112,9 +116,10 @@ Navbar.contextTypes = {
 }
 
 const mapStateToProps = state => {
-  const { session } = state
+  const { session, routing } = state
   return {
     user: session.user,
+    pathname: routing.locationBeforeTransitions.pathname
   }
 }
 

browser/js/shared/NotFound.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import React from 'react'
+
+const NotFound = (props) => {
+  return (
+    <div style={{textAlign: 'center', marginTop: '100px'}}>
+      <h1>404</h1>
+      <h3>Page Not Found</h3>
+    </div>
+  )
+}
+
+export default NotFound