From e13709e96d1de8dfa4703404c3e1cd843f9b4333 Mon Sep 17 00:00:00 2001
From: karimaldeen <mhmadkarimaldeen@gmail.com>
Date: Wed, 11 Sep 2024 16:50:06 +0300
Subject: [PATCH] add route permistion by user type

---
 src/App.tsx               | 10 ++++++++--
 src/Layout/Ui/SideBar.tsx |  5 +++++
 src/Routes.tsx            |  3 +++
 src/Styles/Auth/Auth.scss | 25 ++++++++-----------------
 src/enums/UserType.ts     |  6 ++++++
 src/types/App.ts          |  4 +++-
 src/utils/RoleByType.ts   | 28 ++++++++++++++++++++++++++++
 7 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 src/enums/UserType.ts
 create mode 100644 src/utils/RoleByType.ts

diff --git a/src/App.tsx b/src/App.tsx
index d28e884..352923b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,11 +5,13 @@ import { Spin } from "antd";
 import { hasAbility } from "./utils/hasAbility";
 import { renderRoutesRecursively } from "./Components/Routes/RenderRoutesRecursively";
 import { RenderRouteElement } from "./Components/Routes/RenderRouteElement";
+import { UserTypeEnum } from "./enums/UserType";
+import { RoleByType } from "./utils/RoleByType";
 
 const Page404 = lazy(() => import("./Layout/Ui/NotFoundPage"));
 const Auth = lazy(() => import("./Pages/Auth/Page"));
-
 const App = () => {
+
   return (
     <Routes>
       <Route
@@ -31,10 +33,14 @@ const App = () => {
         }
       />
 
+
       {renderRoutesRecursively(menuItems)}
 
       {CrudRoute.map((route) => {
-        const useAbility = hasAbility(route.abilities, route.abilities_value);
+        const useAbility = hasAbility(route.abilities, route.abilities_value);        
+        if(!RoleByType(route)){
+          return false ;
+      }
         if (!useAbility) {
           return false;
         }
diff --git a/src/Layout/Ui/SideBar.tsx b/src/Layout/Ui/SideBar.tsx
index 8c6c4bb..4810cd9 100644
--- a/src/Layout/Ui/SideBar.tsx
+++ b/src/Layout/Ui/SideBar.tsx
@@ -12,6 +12,7 @@ import { MenuItem } from "../../Components/Layout/SideBar/MenuItem";
 import { CiMenuBurger, CiSettings } from "react-icons/ci";
 import { IoIosMenu } from "react-icons/io";
 import { HiMenuAlt2, HiMenuAlt3 } from "react-icons/hi";
+import { RoleByType } from "../../utils/RoleByType";
 
 const SideBar = ({
   isOpen,
@@ -49,6 +50,10 @@ const SideBar = ({
           if (!useAbility) {
             return <React.Fragment key={index}></React.Fragment>;
           }
+          if(!RoleByType(item)){
+          
+            return <React.Fragment key={index}></React.Fragment> ;
+        }
           return (
             <MenuItem
               key={index}
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 2f7fb54..56946b6 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -29,6 +29,7 @@ import { hasAbility } from "./utils/hasAbility";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
 import { ParamsEnum } from "./enums/params";
 import { TbCategory } from "react-icons/tb";
+import { UserTypeEnum } from "./enums/UserType";
 
 export const menuItems: TMenuItem[] = [
   {
@@ -40,6 +41,7 @@ export const menuItems: TMenuItem[] = [
     abilities: ABILITIES_ENUM?.PASS,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
+    type:UserTypeEnum?.PASS
   },
   {
     header: "page_header.grade",
@@ -80,6 +82,7 @@ export const menuItems: TMenuItem[] = [
     abilities: ABILITIES_ENUM?.STUDENT,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
+    type:UserTypeEnum.RE_SELLER
   },
   {
     header: "page_header.reSeller",
diff --git a/src/Styles/Auth/Auth.scss b/src/Styles/Auth/Auth.scss
index 9cd98d7..521cdde 100644
--- a/src/Styles/Auth/Auth.scss
+++ b/src/Styles/Auth/Auth.scss
@@ -18,23 +18,14 @@
       align-items: center;
       justify-content: center;
       color: var(--white);
-      h1 {
-        font-size: 1.5vw;
-        font-weight: 400;
-      }
-      p {
-        font-size: 1vw;
-        font-weight: 200;
-      }
+ 
     }
   }
 
   .AuthForm {
-    img {
-      width: 5vw;
-    }
-    height: 30vw;
-    width: 40vw;
+  
+    height: 440px;
+    width: 600px;
     min-width: 300px;
 
     box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.2);
@@ -42,7 +33,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 3vw;
+    padding: 40px;
     border-radius: 10px;
     gap: 10px;
     .AuthInput {
@@ -52,13 +43,13 @@
       .Input {
         border-radius: 5px !important;
         border-color: rgba(128, 128, 128, 0.152);
-        height: 3vw;
+        height: 40px;
       }
     }
     .AuthSelect {
       min-width: 100% !important;
       .Select {
-        height: 3vw;
+        height: 40px;
       }
       .ant-select-single.ant-select-lg {
         width: 100%;
@@ -78,7 +69,7 @@
     }
   }
   .form-label {
-    font-size: 1vw;
+    font-size: 20px;
     color: #202c4b;
   }
 }
diff --git a/src/enums/UserType.ts b/src/enums/UserType.ts
new file mode 100644
index 0000000..f998e27
--- /dev/null
+++ b/src/enums/UserType.ts
@@ -0,0 +1,6 @@
+export enum UserTypeEnum {
+    ADMIN = "admin",
+    RE_SELLER = "reseller",
+    PASS="pass"
+  }
+  
\ No newline at end of file
diff --git a/src/types/App.ts b/src/types/App.ts
index 8a39e8d..78d409f 100644
--- a/src/types/App.ts
+++ b/src/types/App.ts
@@ -2,6 +2,7 @@ import { ReactElement, LazyExoticComponent, ReactNode } from "react";
 import { Mark_State, Payment_type, term_type } from "./Item";
 import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../enums/abilities";
 import dayjs from "dayjs";
+import { UserTypeEnum } from "../enums/UserType";
 
 export type ChildrenType = {
   children: ReactNode;
@@ -15,6 +16,7 @@ type TMenuItemBase = {
   withOutLayout?: boolean;
   abilities: ABILITIES_ENUM;
   abilities_value: ABILITIES_VALUES_ENUM;
+  type?:UserTypeEnum 
   prevPath: number;
 };
 
@@ -38,6 +40,7 @@ export type TCrudRoute = {
   element: ReactElement | LazyExoticComponent<any>;
   abilities: ABILITIES_ENUM;
   abilities_value: ABILITIES_VALUES_ENUM;
+  type?:UserTypeEnum
   prevPath: number;
 };
 
@@ -48,7 +51,6 @@ export interface CardData {
   percentage: number;
   Good?: boolean;
 }
-
 export const nationalities: { value: string; label: string }[] = [
   { label: "select.nationalities.Afghan", value: "Afghan" },
   { label: "select.nationalities.Albanian", value: "Albanian" },
diff --git a/src/utils/RoleByType.ts b/src/utils/RoleByType.ts
new file mode 100644
index 0000000..02139c0
--- /dev/null
+++ b/src/utils/RoleByType.ts
@@ -0,0 +1,28 @@
+import { USER_KEY } from "../config/AppKey";
+import { UserTypeEnum } from "../enums/UserType";
+import { getLocalStorage } from "./LocalStorage";
+
+export const RoleByType = (item: { type?: string }):boolean=>{
+    const type =  item?.type ?? UserTypeEnum.ADMIN;
+    const LocalType = getLocalStorage(USER_KEY)?.type ?? undefined ;
+    const isAdmin =  LocalType === UserTypeEnum.ADMIN ;
+    const isReSeller =  LocalType === UserTypeEnum.RE_SELLER;
+    const isAdminRoute =  type === UserTypeEnum.ADMIN ;
+    const isReSellerRoute =  type === UserTypeEnum.RE_SELLER;
+        console.log(LocalType);
+        
+    if(!LocalType){
+        return false
+    }
+    if(type === UserTypeEnum.PASS) { return true } ; 
+
+    if(isAdmin && isReSellerRoute ){
+            return false ;
+    }
+
+    if(isReSeller && !isReSellerRoute ){
+        return false ;
+}
+
+    return true;
+}
\ No newline at end of file