Client: admin init

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)

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>

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)

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 && (

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)

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,