Client: admin init
This commit is contained in:
parent
22178c5b23
commit
edddfd0678
30
mpwo_client/src/components/Admin/index.jsx
Normal file
30
mpwo_client/src/components/Admin/index.jsx
Normal file
@ -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)
|
@ -2,10 +2,11 @@ import React from 'react'
|
|||||||
import { Redirect, Route, Switch } from 'react-router-dom'
|
import { Redirect, Route, Switch } from 'react-router-dom'
|
||||||
|
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
import Admin from './Admin'
|
||||||
import Dashboard from './Dashboard'
|
import Dashboard from './Dashboard'
|
||||||
import Logout from './User/Logout'
|
import Logout from './User/Logout'
|
||||||
import NavBar from './NavBar'
|
import NavBar from './NavBar'
|
||||||
import NotFound from './NotFound'
|
import NotFound from './Others/NotFound'
|
||||||
import Profile from './User/Profile'
|
import Profile from './User/Profile'
|
||||||
import ProfileEdit from './User/ProfileEdit'
|
import ProfileEdit from './User/ProfileEdit'
|
||||||
import UserForm from './User/UserForm'
|
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} />
|
<Route component={NotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</div>
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react'
|
|||||||
import { Helmet } from 'react-helmet'
|
import { Helmet } from 'react-helmet'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
|
|
||||||
class Logout extends React.Component {
|
class DashBoard extends React.Component {
|
||||||
componentDidMount() {}
|
componentDidMount() {}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
@ -20,4 +20,4 @@ export default connect(
|
|||||||
state => ({
|
state => ({
|
||||||
user: state.user,
|
user: state.user,
|
||||||
})
|
})
|
||||||
)(Logout)
|
)(DashBoard)
|
||||||
|
@ -33,6 +33,18 @@ function NavBar (props) {
|
|||||||
Dashboard
|
Dashboard
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
{props.user.isAdmin && (
|
||||||
|
<li className="nav-item">
|
||||||
|
<Link
|
||||||
|
className="nav-link"
|
||||||
|
to={{
|
||||||
|
pathname: '/admin',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Admin
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
<ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||||
{!props.user.isAuthenticated && (
|
{!props.user.isAuthenticated && (
|
||||||
|
26
mpwo_client/src/components/Others/AccessDenied.jsx
Normal file
26
mpwo_client/src/components/Others/AccessDenied.jsx
Normal file
@ -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)
|
@ -84,7 +84,7 @@ const user = (state = initial.user, action) => {
|
|||||||
case 'LOGOUT':
|
case 'LOGOUT':
|
||||||
window.localStorage.removeItem('authToken')
|
window.localStorage.removeItem('authToken')
|
||||||
return initial.user
|
return initial.user
|
||||||
case 'PROFILE_SUCCESS':
|
case 'PROFILE_SUCCESS':
|
||||||
return {
|
return {
|
||||||
id: action.message.data.id,
|
id: action.message.data.id,
|
||||||
username: action.message.data.username,
|
username: action.message.data.username,
|
||||||
|
Loading…
Reference in New Issue
Block a user