Skip to content

Commit a8d7871

Browse files
foyzulkarimfoyzulkarim
committed
Basic RBAC completed
1 parent dbf7fb4 commit a8d7871

21 files changed

+103
-133
lines changed

‎client/src/App.js

+27-29
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { } from 'react';
22
import './App.css';
3-
import { BrowserRouter as Router, Switch, Route, Link, Redirect, useRouteMatch, useParams, useHistory } from "react-router-dom";
4-
import { useForm } from 'react-hook-form';
3+
import { BrowserRouter as Router, Switch, Route, Link, Redirect, useHistory } from "react-router-dom";
54
import { useSelector, useDispatch } from 'react-redux';
6-
import { PostDetail, PostCreate, PostEdit, PostDelete, Posts, Home } from "./components/Posts";
5+
import { PostCreate, Posts, Home } from "./components/Posts";
76
import { Login } from "./components/Login";
87
import { Register } from "./components/Register";
98
import { Constants } from "./constants";
10-
import { usePermission, checkPermission } from "./hooks/usePermission.js";
9+
import { checkPermission } from "./utils/permissionManager.js";
1110
import { ResourceCreate, ResourceList } from "./components/Resource";
12-
import Permission from "./components/Permission";
13-
import Role from './components/Role';
11+
import { PermissionCreate } from "./components/Permission";
12+
import { RoleCreate } from './components/Role';
1413

15-
export const PrivateRoute = ({ component: Component, ...rest }) => {
14+
export const PrivateRoute = ({ component: Component, name: resource, ...rest }) => {
1615

1716
const userContext = useSelector(state => {
1817
return state.userContext;
1918
});
2019

21-
const isAllowed = checkPermission(Component.name, userContext);
20+
const isAllowed = checkPermission(resource, userContext);
2221

2322
return (
2423
<Route {...rest} render={props => {
@@ -74,18 +73,18 @@ const App = () => {
7473
//console.log('userContext', userContext);
7574

7675
let links = [
77-
{ name: 'link-posts', url: '/posts', text: 'Posts' },
78-
{ name: 'link-post-create', url: '/post-create', text: 'Create post' },
79-
{ name: 'link-permission-create', url: '/permission-create', text: 'Create permission' },
80-
{ name: 'link-role-create', url: '/role-create', text: 'Create role' },
81-
{ name: 'link-resource-create', url: '/resource-create', text: 'Create resource' },
82-
{ name: 'link-resource-list', url: '/resource-list', text: 'List resource' },
76+
{ name: 'link-posts', url: '/posts', text: 'Posts', component: Posts },
77+
{ name: 'link-post-create', url: '/post-create', text: 'Create post', component: PostCreate },
78+
{ name: 'link-permission-create', url: '/permission-create', text: 'Create permission', component: PermissionCreate },
79+
{ name: 'link-role-create', url: '/role-create', text: 'Create role', component: RoleCreate },
80+
{ name: 'link-resource-create', url: '/resource-create', text: 'Create resource', component: ResourceCreate },
81+
{ name: 'link-resource-list', url: '/resource-list', text: 'List resource', component: ResourceList },
8382
];
8483

85-
let routes = [
86-
{ path: '/resource-create', component: ResourceCreate },
87-
{ path: '/resource-list', component: ResourceList }
88-
]
84+
// let routes = [
85+
// { path: '/resource-create', component: ResourceCreate },
86+
// { path: '/resource-list', component: ResourceList }
87+
// ]
8988

9089
return (
9190
<Router>
@@ -99,7 +98,7 @@ const App = () => {
9998
<>
10099
{
101100
links.map((link, index) => {
102-
return <Link key={index} to={link.url} className="list-group-item list-group-item-action bg-light">{link.text}</Link>
101+
return checkPermission(link.name, userContext) && <Link key={index} to={link.url} className="list-group-item list-group-item-action bg-light">{link.text}</Link>
103102
})
104103
}
105104
</>
@@ -114,21 +113,20 @@ const App = () => {
114113

115114
<div className="container">
116115
<Switch>
117-
<PrivateRoute path="/post-detail/:id" component={PostDetail}></PrivateRoute>
116+
{/* <PrivateRoute path="/post-detail/:id" component={PostDetail}></PrivateRoute>
118117
<PrivateRoute path="/post-create" component={PostCreate}></PrivateRoute>
119118
<PrivateRoute path="/post-edit/:id" component={PostEdit}></PrivateRoute>
120119
<PrivateRoute path="/post-delete/:id" component={PostDelete}></PrivateRoute>
121-
<PrivateRoute path="/posts" component={Posts}></PrivateRoute>
122-
<Route path="/login" component={Login}></Route>
123-
<Route path="/register" component={Register}></Route>
124-
<Route path="/basic" component={ResourceCreate}></Route>
125-
<Route path="/permission-create" component={Permission}></Route>
126-
<Route path="/role-create" component={Role}></Route>
120+
<PrivateRoute path="/posts" component={Posts}></PrivateRoute> */}
121+
{/* <Route path="/permission-create" component={PermissionCreate}></Route>
122+
<Route path="/role-create" component={RoleCreate}></Route> */}
127123
{
128-
routes.map(route => {
129-
return <Route path={route.path} component={route.component}></Route>;
124+
links.map(route => {
125+
return <PrivateRoute key={route.name} path={route.url} component={route.component} name={route.name}></PrivateRoute>;
130126
})
131127
}
128+
<Route path="/login" component={Login}></Route>
129+
<Route path="/register" component={Register}></Route>
132130
<Route path="/"><Home /></Route>
133131
</Switch>
134132
</div>

‎client/src/components/Login.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React, { useState, useEffect } from 'react';
2-
import { BrowserRouter as Router, Switch, Route, Link, Redirect, useRouteMatch, useParams, useHistory } from "react-router-dom";
1+
import React from 'react';
2+
import { Redirect, useHistory } from "react-router-dom";
33
import { useForm } from 'react-hook-form';
44
import { useSelector, useDispatch } from 'react-redux';
55
import { Constants } from "../constants";
66

77
export const Login = () => {
88
let history = useHistory();
99
let dispatch = useDispatch();
10-
const { register, handleSubmit, watch, errors } = useForm();
10+
const { register, handleSubmit, errors } = useForm();
1111

1212
let submitData = (data) => {
1313
dispatch({

‎client/src/components/Permission.js

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
2-
import Select from 'react-select';
3-
import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams, useHistory } from "react-router-dom";
2+
import { useHistory } from "react-router-dom";
43
import { Formik, Form, Field, ErrorMessage } from 'formik';
54
import * as Yup from 'yup';
65
import { useSelector, useDispatch } from 'react-redux';
7-
import { useState, useEffect } from 'react';
6+
import { useEffect } from 'react';
87

98
const PermissionSchema = Yup.object().shape({
109
resourceId: Yup.string()
@@ -13,7 +12,7 @@ const PermissionSchema = Yup.object().shape({
1312
.required('Hey input the value!')
1413
});
1514

16-
const Permission = () => {
15+
export const PermissionCreate = () => {
1716

1817
let history = useHistory();
1918
let dispatch = useDispatch();
@@ -56,7 +55,7 @@ const Permission = () => {
5655
<Field as="select" name="resourceId" className="col-sm-8">
5756
<option value="" key=""></option>
5857
{
59-
resourceContext.resourceList.map(({ id, name }, index) => {
58+
resourceContext.resourceList.map(({ id, name }) => {
6059
return <option value={id} key={id}>{name}</option>;
6160
})
6261
}
@@ -68,7 +67,7 @@ const Permission = () => {
6867
<Field as="select" name="roleId" className="col-sm-8">
6968
<option value="" key=""></option>
7069
{
71-
roleContext.roleList.map(({ id, name }, index) => {
70+
roleContext.roleList.map(({ id, name }) => {
7271
return <option value={id} key={id}>{name}</option>;
7372
})
7473
}
@@ -90,6 +89,3 @@ const Permission = () => {
9089
</div >
9190
);
9291
};
93-
94-
95-
export default Permission;

‎client/src/components/Posts.js

+15-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState, useEffect } from 'react';
2-
//import './App.css';
3-
import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams, useHistory } from "react-router-dom";
2+
import { Switch, Route, Link, useRouteMatch, useParams, useHistory } from "react-router-dom";
43
import { useForm } from 'react-hook-form';
54
import { useSelector, useDispatch } from 'react-redux';
65

@@ -13,7 +12,7 @@ export const Home = () => {
1312
export const PostCreate = () => {
1413
let history = useHistory();
1514
let dispatch = useDispatch();
16-
const { register, handleSubmit, watch, errors } = useForm();
15+
const { register, handleSubmit, errors } = useForm();
1716

1817
const [location, setLocation] = useState({});
1918

@@ -69,9 +68,9 @@ export const PostCreate = () => {
6968
)
7069
};
7170

72-
export const PostEdit = (props) => {
71+
export const PostEdit = () => {
7372
let history = useHistory();
74-
const { register, handleSubmit, watch, errors } = useForm();
73+
const { register, handleSubmit, errors } = useForm();
7574
let { id } = useParams();
7675
let dispatch = useDispatch();
7776

@@ -98,7 +97,7 @@ export const PostEdit = (props) => {
9897

9998
useEffect(() => {
10099
fetchData(id);
101-
}, [id])
100+
}, []);
102101

103102
const post = useSelector(state => {
104103
return state.posts.selectedPost;
@@ -139,8 +138,8 @@ export const PostEdit = (props) => {
139138
)
140139
};
141140

142-
export const PostDelete = (props) => {
143-
const { register, handleSubmit, watch, errors } = useForm();
141+
export const PostDelete = () => {
142+
const { handleSubmit } = useForm();
144143
let { id } = useParams();
145144
let history = useHistory();
146145
let dispatch = useDispatch();
@@ -151,7 +150,7 @@ export const PostDelete = (props) => {
151150

152151
useEffect(() => {
153152
fetchData(id);
154-
}, [id])
153+
}, [])
155154

156155
const post = useSelector(state => {
157156
return state.posts.selectedPost;
@@ -163,7 +162,7 @@ export const PostDelete = (props) => {
163162
history.push('/posts');
164163
}
165164

166-
const onSubmit = data => {
165+
const onSubmit = () => {
167166
deleteData();
168167
};
169168

@@ -186,14 +185,14 @@ export const PostSummary = (post) => {
186185
<h3>{post.title}</h3>
187186
<img src={post.imgUrl} style={{ height: "50px", width: "50px" }} alt="post img" className="pull-left thumb margin10 img-thumbnail"></img>
188187
<p>{post.emText}</p>
189-
<Link to={location => `/post-detail/${post.id}`}>Detail</Link> &nbsp;
190-
<Link to={location => `/post-edit/${post.id}`}>Edit</Link> &nbsp;
191-
<Link to={location => `/post-delete/${post.id}`}>Delete</Link> &nbsp;
188+
<Link to={() => `/post-detail/${post.id}`}>Detail</Link> &nbsp;
189+
<Link to={() => `/post-edit/${post.id}`}>Edit</Link> &nbsp;
190+
<Link to={() => `/post-delete/${post.id}`}>Delete</Link> &nbsp;
192191
</div>
193192
)
194193
}
195194

196-
export const Comments = (props) => {
195+
export const Comments = () => {
197196

198197
let { id } = useParams();
199198
let dispatch = useDispatch();
@@ -249,7 +248,7 @@ export const Comments = (props) => {
249248
export const CommentCreate = () => {
250249
let history = useHistory();
251250
let dispatch = useDispatch();
252-
const { register, handleSubmit, watch, errors } = useForm();
251+
const { register, handleSubmit } = useForm();
253252

254253
let { id } = useParams();
255254

@@ -291,7 +290,7 @@ export const CommentCreate = () => {
291290
)
292291
};
293292

294-
export const PostDetail = (props) => {
293+
export const PostDetail = () => {
295294

296295
let { id } = useParams();
297296

‎client/src/components/Register.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React, { useState, useEffect } from 'react';
2-
import { BrowserRouter as Router, Switch, Route, Link, Redirect, useRouteMatch, useParams, useHistory } from "react-router-dom";
1+
import React from 'react';
2+
import { Redirect, useHistory } from "react-router-dom";
33
import { useForm } from 'react-hook-form';
44
import { useSelector, useDispatch } from 'react-redux';
55
import { Constants } from "../constants";
66

77
export const Register = () => {
88
let history = useHistory();
99
let dispatch = useDispatch();
10-
const { register, handleSubmit, watch, errors, setError } = useForm();
10+
const { register, handleSubmit, errors, setError } = useForm();
1111

1212
let submitData = (data) => {
1313
dispatch({
@@ -16,7 +16,7 @@ export const Register = () => {
1616
}
1717

1818
const onSubmit = data => {
19-
if (data.password != data.confirmpassword) {
19+
if (data.password !== data.confirmpassword) {
2020
setError("password", "notMatch", "Password and Confirm Password are mismatched");
2121
return;
2222
}

‎client/src/components/Resource.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
2-
import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams, useHistory } from "react-router-dom";
2+
import { useHistory } from "react-router-dom";
33
import { Formik, Form, Field, ErrorMessage } from 'formik';
44
import * as Yup from 'yup';
55
import { useSelector, useDispatch } from 'react-redux';
66
import { Table, Row, Col } from 'react-bootstrap';
7-
import { useState, useEffect } from 'react';
7+
import { useEffect } from 'react';
88

99
const ResourceSchema = Yup.object().shape({
1010
name: Yup.string()

‎client/src/components/Role.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams, useHistory } from "react-router-dom";
2+
import { useHistory } from "react-router-dom";
33
import { Formik, Form, Field, ErrorMessage } from 'formik';
44
import * as Yup from 'yup';
5-
import { useSelector, useDispatch } from 'react-redux';
5+
import { useDispatch } from 'react-redux';
66

77
const RoleSchema = Yup.object().shape({
88
name: Yup.string()
@@ -11,7 +11,7 @@ const RoleSchema = Yup.object().shape({
1111
.required('Hey input the value!')
1212
});
1313

14-
const Role = () => {
14+
export const RoleCreate = () => {
1515

1616
let history = useHistory();
1717
let dispatch = useDispatch();
@@ -48,6 +48,3 @@ const Role = () => {
4848
</div>
4949
);
5050
};
51-
52-
53-
export default Role;

‎client/src/hooks/usePermission.js

-26
This file was deleted.

‎client/src/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import * as serviceWorker from './serviceWorker';
66

77
import { Provider } from "react-redux";
88
import { createStore, applyMiddleware } from "redux";
9-
import promise from "redux-promise";
109
import createSagaMiddleware from "redux-saga";
1110

1211
import reducers from "./reducers";

‎client/src/reducers/permissionReducer.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Constants } from "../constants";
21
const initialState = {
32
permissionList: []
43
};

‎client/src/reducers/resourceReducer.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { Constants } from "../constants";
21
const initialState = {
32
resourceList: [],
4-
selectedResource: {},
3+
selectedResource: {},
54
notificationText: ''
65
};
76

@@ -25,7 +24,7 @@ export default (state = initialState, action) => {
2524
return {
2625
...state,
2726
selectedPost: action.payload.data
28-
};
27+
};
2928
case 'CLEAR_SELECTION':
3029
return {
3130
...state,

0 commit comments

Comments
 (0)