Get app working against deployed service

website/src/App.js

@@ -1,18 +1,26 @@
-import React, { Component, Fragment } from 'react'
-import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRoute, DefaultRoute } from './Auth'
-import { Home } from './Home'
-import { Profile } from './Profile'
-import { Users } from './Users'
-import { Teams } from './Teams'
-import { System } from './System'
-import { HeaderButton, HeaderText, Column, Row, Text, Box } from 'ui'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
-import logoImage from 'images/logo.png'
-import { versionInfo } from './version'
-import { sizeInfo, colorInfo } from 'ui/style'
-import { api } from 'src/API'
-import PropTypes from 'prop-types'
-import autobind from 'autobind-decorator'
+import React, { Component, Fragment } from "react"
+import {
+  Login,
+  Logout,
+  ResetPassword,
+  ForgotPassword,
+  ConfirmEmail,
+  ProtectedRoute,
+  DefaultRoute,
+} from "./Auth"
+import { Home } from "./Home"
+import { Profile } from "./Profile"
+import { Users } from "./Users"
+import { Teams } from "./Teams"
+import { System } from "./System"
+import { HeaderButton, HeaderText, Column, Row, Text, Box } from "ui"
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
+import logoImage from "images/logo.png"
+import { versionInfo } from "./version"
+import { sizeInfo, colorInfo } from "ui/style"
+import { api } from "src/API"
+import PropTypes from "prop-types"
+import autobind from "autobind-decorator"
 
 export class App extends Component {
   static propTypes = {
@@ -22,18 +30,18 @@ export class App extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      loggedInUser: api.loggedInUser
+      loggedInUser: api.loggedInUser,
     }
   }
 
   componentDidMount() {
-    api.addListener('login', this.handleUpdate)
-    api.addListener('logout', this.handleUpdate)
+    api.addListener("login", this.handleUpdate)
+    api.addListener("logout", this.handleUpdate)
   }
 
   componentWillUnmount() {
-    api.removeListener('login', this.handleUpdate)
-    api.removeListener('logout', this.handleUpdate)
+    api.removeListener("login", this.handleUpdate)
+    api.removeListener("logout", this.handleUpdate)
   }
 
   @autobind
@@ -43,15 +51,15 @@ export class App extends Component {
 
   handleLogout() {
     // We have to use window here because App does not have history in it's props
-    window.location.replace('/logout')
+    window.location.replace("/logout")
   }
 
   handleHome() {
-    window.location.replace('/')
+    window.location.replace("/")
   }
 
   handleProfile() {
-    window.location.replace('/profile')
+    window.location.replace("/profile")
   }
 
   @autobind
@@ -73,20 +81,25 @@ export class App extends Component {
       )
       headerButtonsRight = (
         <Fragment>
-          <HeaderButton icon='profile' onClick={this.handleProfile} />
-          <HeaderButton icon='logout' onClick={this.handleLogout} />
+          <HeaderButton icon="profile" onClick={this.handleProfile} />
+          <HeaderButton icon="logout" onClick={this.handleLogout} />
         </Fragment>
       )
     }
 
     return (
-      <Router basename='/'>
-        <Column minHeight='100vh'>
-          <Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
-            <Box background={colorInfo.headerButtonBackground}
-              borderBottom={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
-              style={{ boxSizing: 'content' }}>
-              <Row minWidth='100vw'>
+      <Router basename="/">
+        <Column minHeight="100vh">
+          <Column.Item
+            height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
+            <Box
+              background={colorInfo.headerButtonBackground}
+              borderBottom={{
+                width: sizeInfo.headerBorderWidth,
+                color: colorInfo.headerBorder,
+              }}
+              style={{ boxSizing: "content" }}>
+              <Row minWidth="100vw">
                 <Row.Item>{headerButtonsLeft}</Row.Item>
                 <Row.Item grow />
                 <Row.Item>{headerButtonsRight}</Row.Item>
@@ -94,21 +107,62 @@ export class App extends Component {
             </Box>
           </Column.Item>
           <Switch>
-            <Route exact path='/login' component={Login} />
-            <Route exact path='/logout' component={Logout} />
-            <Route exact path='/confirm-email' component={ConfirmEmail} />
-            <Route exact path='/reset-password' component={ResetPassword} />
-            <Route exact path='/forgot-password' component={ForgotPassword} />
-            <ProtectedRoute exact path='/profile' render={props => (<Profile {...props} changeTitle={this.handleChangeTitle} />)} />
-            <ProtectedRoute exact admin path='/users' render={props => (<Users {...props} changeTitle={this.handleChangeTitle} />)} />
-            <ProtectedRoute exact admin path='/teams' render={props => (<Teams {...props} changeTitle={this.handleChangeTitle} />)} />
-            <ProtectedRoute exact admin path='/system' render={props => (<System {...props} changeTitle={this.handleChangeTitle} />)} />
-            <ProtectedRoute exact admin path='/home' render={props => (<Home {...props} changeTitle={this.handleChangeTitle} />)} />
+            <Route exact path="/login" component={Login} />
+            <Route exact path="/logout" component={Logout} />
+            <Route exact path="/confirm-email" component={ConfirmEmail} />
+            <Route exact path="/reset-password" component={ResetPassword} />
+            <Route exact path="/forgot-password" component={ForgotPassword} />
+            <ProtectedRoute
+              exact
+              path="/profile"
+              render={(props) => (
+                <Profile {...props} changeTitle={this.handleChangeTitle} />
+              )}
+            />
+            <ProtectedRoute
+              exact
+              admin
+              path="/users"
+              render={(props) => (
+                <Users {...props} changeTitle={this.handleChangeTitle} />
+              )}
+            />
+            <ProtectedRoute
+              exact
+              admin
+              path="/teams"
+              render={(props) => (
+                <Teams {...props} changeTitle={this.handleChangeTitle} />
+              )}
+            />
+            <ProtectedRoute
+              exact
+              admin
+              path="/system"
+              render={(props) => (
+                <System {...props} changeTitle={this.handleChangeTitle} />
+              )}
+            />
+            <ProtectedRoute
+              exact
+              admin
+              path="/home"
+              render={(props) => (
+                <Home {...props} changeTitle={this.handleChangeTitle} />
+              )}
+            />
             <DefaultRoute />
           </Switch>
           <Column.Item>
-            <Box background={colorInfo.headerButtonBackground} borderTop={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
-              <Text color='dimmed' margin={sizeInfo.footerTextMargin}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
+            <Box
+              background={colorInfo.headerButtonBackground}
+              borderTop={{
+                width: sizeInfo.headerBorderWidth,
+                color: colorInfo.headerBorder,
+              }}>
+              <Text color="dimmed" margin={sizeInfo.footerTextMargin}>
+                {"v" + versionInfo.fullVersion} {versionInfo.copyright}
+              </Text>
             </Box>
           </Column.Item>
         </Column>

website/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
   version: '1.0.0',
-  fullVersion: '1.0.0-20180407.3',
+  fullVersion: '1.0.0-20180408.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',