From edddfd067813e41481875153514e3dbe0a967d4e Mon Sep 17 00:00:00 2001
From: SamR1 <sam@samr1.net>
Date: Sun, 28 Jan 2018 13:01:26 +0100
Subject: [PATCH] Client: admin init

---
 mpwo_client/src/components/Admin/index.jsx    | 30 +++++++++++++++++++
 mpwo_client/src/components/App.jsx            | 15 +++++++++-
 .../src/components/Dashboard/index.jsx        |  4 +--
 mpwo_client/src/components/NavBar/index.jsx   | 12 ++++++++
 .../src/components/Others/AccessDenied.jsx    | 26 ++++++++++++++++
 .../src/components/{ => Others}/NotFound.jsx  |  0
 mpwo_client/src/reducers/index.js             |  2 +-
 7 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 mpwo_client/src/components/Admin/index.jsx
 create mode 100644 mpwo_client/src/components/Others/AccessDenied.jsx
 rename mpwo_client/src/components/{ => Others}/NotFound.jsx (100%)

diff --git a/mpwo_client/src/components/Admin/index.jsx b/mpwo_client/src/components/Admin/index.jsx
new file mode 100644
index 00000000..ec171e37
--- /dev/null
+++ b/mpwo_client/src/components/Admin/index.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { connect } from 'react-redux'
+
+import AccessDenied from './../Others/AccessDenied'
+
+class Admin extends React.Component {
+  componentDidMount() {}
+  render() {
+    const { user } = this.props
+    return (
+      <div>
+        <Helmet>
+          <title>mpwo - Admin</title>
+        </Helmet>
+        {!user.isAdmin ? (
+            <AccessDenied />
+        ) : (
+          <h1 className="page-title">Admin</h1>
+        )}
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    user: state.user,
+  })
+)(Admin)
diff --git a/mpwo_client/src/components/App.jsx b/mpwo_client/src/components/App.jsx
index 7ac929c9..666df375 100644
--- a/mpwo_client/src/components/App.jsx
+++ b/mpwo_client/src/components/App.jsx
@@ -2,10 +2,11 @@ import React from 'react'
 import { Redirect, Route, Switch } from 'react-router-dom'
 
 import './App.css'
+import Admin from './Admin'
 import Dashboard from './Dashboard'
 import Logout from './User/Logout'
 import NavBar from './NavBar'
-import NotFound from './NotFound'
+import NotFound from './Others/NotFound'
 import Profile from './User/Profile'
 import ProfileEdit from './User/ProfileEdit'
 import UserForm from './User/UserForm'
@@ -82,6 +83,18 @@ export default class App extends React.Component {
               )
             )}
           />
+          <Route
+            exact path="/admin"
+            render={() => (
+              isLoggedIn() ? (
+                <Admin />
+              ) : (
+                <UserForm
+                  formType={'Login'}
+                />
+              )
+            )}
+          />
           <Route component={NotFound} />
         </Switch>
      </div>
diff --git a/mpwo_client/src/components/Dashboard/index.jsx b/mpwo_client/src/components/Dashboard/index.jsx
index b922fb24..cfaf3bfb 100644
--- a/mpwo_client/src/components/Dashboard/index.jsx
+++ b/mpwo_client/src/components/Dashboard/index.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
-class Logout extends React.Component {
+class DashBoard extends React.Component {
   componentDidMount() {}
   render() {
     return (
@@ -20,4 +20,4 @@ export default connect(
   state => ({
     user: state.user,
   })
-)(Logout)
+)(DashBoard)
diff --git a/mpwo_client/src/components/NavBar/index.jsx b/mpwo_client/src/components/NavBar/index.jsx
index 153b4ad5..51343ecb 100644
--- a/mpwo_client/src/components/NavBar/index.jsx
+++ b/mpwo_client/src/components/NavBar/index.jsx
@@ -33,6 +33,18 @@ function NavBar (props) {
                 Dashboard
               </Link>
             </li>
+            {props.user.isAdmin && (
+            <li className="nav-item">
+              <Link
+                className="nav-link"
+                to={{
+                  pathname: '/admin',
+                }}
+              >
+                Admin
+              </Link>
+            </li>
+            )}
           </ul>
           <ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
             {!props.user.isAuthenticated && (
diff --git a/mpwo_client/src/components/Others/AccessDenied.jsx b/mpwo_client/src/components/Others/AccessDenied.jsx
new file mode 100644
index 00000000..4f156e97
--- /dev/null
+++ b/mpwo_client/src/components/Others/AccessDenied.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { connect } from 'react-redux'
+
+class AccessDenied extends React.Component {
+  componentDidMount() {}
+  render() {
+    return (
+      <div>
+        <Helmet>
+          <title>mpwo - Access denied</title>
+        </Helmet>
+        <h1 className="page-title">Access denied</h1>
+        <p className="App-center">
+          {'You don\'t have permissions to access this page.'}
+        </p>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    user: state.user,
+  })
+)(AccessDenied)
diff --git a/mpwo_client/src/components/NotFound.jsx b/mpwo_client/src/components/Others/NotFound.jsx
similarity index 100%
rename from mpwo_client/src/components/NotFound.jsx
rename to mpwo_client/src/components/Others/NotFound.jsx
diff --git a/mpwo_client/src/reducers/index.js b/mpwo_client/src/reducers/index.js
index 32a46597..bb48280e 100644
--- a/mpwo_client/src/reducers/index.js
+++ b/mpwo_client/src/reducers/index.js
@@ -84,7 +84,7 @@ const user = (state = initial.user, action) => {
     case 'LOGOUT':
       window.localStorage.removeItem('authToken')
       return initial.user
-      case 'PROFILE_SUCCESS':
+    case 'PROFILE_SUCCESS':
       return {
         id: action.message.data.id,
         username: action.message.data.username,