Added Permission List in view

Author: foyzulkarim

client/src/App.js

@@ -1,4 +1,4 @@
-import React, {  } from 'react';
+import React, { } from 'react';
 import './App.css';
 import { BrowserRouter as Router, Switch, Route, Link, Redirect, useHistory } from "react-router-dom";
 import { useSelector, useDispatch } from 'react-redux';
@@ -8,7 +8,7 @@ import { Register } from "./components/Register";
 import { Constants } from "./constants";
 import { checkPermission } from "./utils/permissionManager.js";
 import { ResourceCreate, ResourceList } from "./components/Resource";
-import { PermissionCreate } from "./components/Permission";
+import { PermissionCreate, PermissionList } from "./components/Permission";
 import { RoleCreate } from './components/Role';
 
 export const PrivateRoute = ({ component: Component, name: resource, ...rest }) => {
@@ -76,6 +76,7 @@ const App = () => {
  { name: 'link-posts', url: '/posts', text: 'Posts', component: Posts },
  { name: 'link-post-create', url: '/post-create', text: 'Create post', component: PostCreate },
  { name: 'link-permission-create', url: '/permission-create', text: 'Create permission', component: PermissionCreate },
+ { name: 'link-permission-list', url: '/permission-list', text: 'List permissions', component: PermissionList },
  { name: 'link-role-create', url: '/role-create', text: 'Create role', component: RoleCreate },
  { name: 'link-resource-create', url: '/resource-create', text: 'Create resource', component: ResourceCreate },
  { name: 'link-resource-list', url: '/resource-list', text: 'List resource', component: ResourceList },

client/src/components/Permission.js

@@ -4,6 +4,7 @@ import { Formik, Form, Field, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 import { useSelector, useDispatch } from 'react-redux';
 import { useEffect } from 'react';
+import { Table, Row, Col } from 'react-bootstrap';
 
 const PermissionSchema = Yup.object().shape({
  resourceId: Yup.string()
@@ -89,3 +90,53 @@ export const PermissionCreate = () => {
  </div >
  );
 };
+
+
+export const PermissionList = () => {
+
+ let dispatch = useDispatch();
+
+ const permissionContext = useSelector(state => {
+ return state.permissionContext;
+ });
+
+ useEffect(() => {
+ dispatch({ type: "FETCH_PERMISSION" });
+ }, []);
+
+ return (
+ <>
+ <Row>
+ <h2>Permission List {permissionContext.permissionList.length}</h2>
+ </Row>
+ <Row>
+ <Col>
+ <Table striped bordered hover>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Resource</th>
+ <th>Role</th>
+ <th>Is allowed</th>
+ </tr>
+ </thead>
+ <tbody>
+ {
+ permissionContext.permissionList.map((resource, index) => {
+ return (
+ <tr>
+ <td>{index + 1}</td>
+ <td>{resource.resourceName}</td>
+ <td>{resource.roleName}</td>
+ <td>{resource.isAllowed.toString()}</td>
+ </tr>
+ )
+ })
+ }
+ </tbody>
+ </Table>
+ </Col>
+ </Row>
+ </>
+ );
+}

client/src/components/Posts.js

@@ -2,6 +2,20 @@ import React, { useState, useEffect } from 'react';
 import { Switch, Route, Link, useRouteMatch, useParams, useHistory } from "react-router-dom";
 import { useForm } from 'react-hook-form';
 import { useSelector, useDispatch } from 'react-redux';
+import { checkPermission } from "../utils/permissionManager.js";
+
+export const SecuedLink = ({ resource, text, url }) => {
+
+ const userContext = useSelector(state => {
+ return state.userContext;
+ });
+
+ console.log('SecuedLink ', resource, text, url);
+
+ const isAllowed = checkPermission(resource, userContext);
+
+ return (isAllowed && <Link to={() => url}>{text}</Link>)
+}
 
 export const Home = () => {
  return (
@@ -188,6 +202,7 @@ export const PostSummary = (post) => {
  <Link to={() => `/post-detail/${post.id}`}>Detail</Link> &nbsp;
  <Link to={() => `/post-edit/${post.id}`}>Edit</Link> &nbsp;
  <Link to={() => `/post-delete/${post.id}`}>Delete</Link> &nbsp;
+ <SecuedLink resource='link-post-delete' url={ `/post-delete/${post.id}`} text='Delete'></SecuedLink>
  </div>
  )
 }

client/src/components/Resource.js

@@ -83,7 +83,7 @@ export const ResourceList = () => {
  {
  resourceContext.resourceList.map((resource, index) => {
  return (
- <tr>
+ <tr key={index}>
  <td>{index + 1}</td>
  <td>{resource.name}</td>
  </tr>

server/AuthWebApplication/AuthWebApplication/Controllers/ApplicationPermissionsController.cs

@@ -7,6 +7,7 @@
 using Microsoft.EntityFrameworkCore;
 using AuthWebApplication.Models;
 using AuthWebApplication.Models.Db;
+using AuthWebApplication.Models.ViewModels;
 
 namespace AuthWebApplication.Controllers
 {
@@ -23,9 +24,9 @@ public ApplicationPermissionsController(SecurityDbContext context)
 
  // GET: api/ApplicationPermissions
  [HttpGet]
- public async Task<ActionResult<IEnumerable<ApplicationPermission>>> GetPermissions()
+ public async Task<ActionResult<IEnumerable<ApplicationPermissionViewModel>>> GetPermissions()
  {
- return await _context.Permissions.ToListAsync();
+ return await _context.Permissions.Include(x=>x.Role).Include(x=>x.Resource).Select(x=>new ApplicationPermissionViewModel(x)).ToListAsync();
  }
 
  // GET: api/ApplicationPermissions/5

server/AuthWebApplication/AuthWebApplication/Models/ViewModels/ApplicationPermissionViewModel.cs

@@ -0,0 +1,33 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace AuthWebApplication.Models.ViewModels
+{
+ public class ApplicationPermissionViewModel
+ {
+ public ApplicationPermissionViewModel(ApplicationPermission permission)
+ {
+ this.Id = permission.Id;
+ this.RoleId = permission.RoleId;
+ this.ResourceId = permission.ResourceId;
+ this.RoleId = permission.RoleId;
+ this.RoleName = permission.Role.Name;
+ this.ResourceName = permission.Resource.Name;
+ this.IsAllowed = permission.IsAllowed.ToString();
+ }
+
+ public string Id { get; set; }
+
+ public string RoleId { get; set; }
+
+ public string ResourceId { get; set; }
+
+ public string RoleName { get; set; }
+
+ public string ResourceName { get; set; }
+
+ public string IsAllowed { get; set; }
+ }
+}