From 70ce8a4b2216806f4782c3acffe2ef5f9d0ab52a Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Thu, 21 Nov 2024 23:10:35 +0530 Subject: [PATCH 1/2] Issue feat:Add role authorization --- public/locales/en/common.json | 8 +- src/components/AddNewCenters.tsx | 16 +-- src/components/AreaSelection.tsx | 133 +++++++++--------- src/components/RouteGuard.tsx | 18 +-- src/components/layouts/FullLayout.tsx | 125 ++-------------- src/components/layouts/sidebar/MenuItems.js | 14 ++ src/pages/login.tsx | 2 +- src/pages/unauthorized.tsx | 61 ++++++++ .../workspace/content/up-review/index.tsx | 22 +++ src/utils/app.constant.ts | 1 + 10 files changed, 196 insertions(+), 204 deletions(-) create mode 100644 src/pages/unauthorized.tsx create mode 100644 src/pages/workspace/content/up-review/index.tsx diff --git a/public/locales/en/common.json b/public/locales/en/common.json index bd22e405..4e3924e2 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -137,8 +137,12 @@ "ASSIGNED_TEAM_LEADERS": "{{assignedTeamLeaderNames}} and more..", "CONTINUE": "Continue", "DESCRIPTION": "Description", - "PAGE_NOT_FOUND": "Page Not Found", - "ALREADY_EXIST": "Cohort name already exist.Please provide another name" + "ALREADY_EXIST": "Cohort name already exist.Please provide another name", + "PAGE_NOT_FOUND": "Page not found", + "ACCESS_DENIED": "Access Denied", + "YOU_DONT_HAVE_PERMISSION_TO_ACCESS_THIS_PAGE": "You don't have access to this page", + "RETURN_TO_LOGIN": "Return to Login" + }, "LOGIN_PAGE": { "USERNAME": "Username", diff --git a/src/components/AddNewCenters.tsx b/src/components/AddNewCenters.tsx index e5a75d22..da5e891c 100644 --- a/src/components/AddNewCenters.tsx +++ b/src/components/AddNewCenters.tsx @@ -121,11 +121,11 @@ const AddNewCenters: React.FC = ({ const getAddLearnerFormData = async () => { const admin = localStorage.getItem("adminInfo"); if (admin) { - const stateField = JSON.parse(admin).customFields.find( + const stateField = JSON.parse(admin).customFields?.find( (field: any) => field.label === "STATES" ); - if (!stateField.value.includes(",")) { - setStateDefaultValueForCenter(stateField.value); + if (!stateField?.value.includes(",")) { + setStateDefaultValueForCenter(stateField?.value); } else { setStateDefaultValueForCenter(t("COMMON.ALL_STATES")); } @@ -164,7 +164,7 @@ const AddNewCenters: React.FC = ({ ) => { const formData = data?.formData; console.log("selectedBlockCohortId", selectedBlockCohortId); - const bmgsData = JSON.parse(localStorage.getItem("BMGSData") ?? ""); + const bmgsData = JSON?.parse(localStorage.getItem("BMGSData") ?? ""); if (selectedBlockCohortId) { const parentId = selectedBlockCohortId; const cohortDetails: CohortDetails = { @@ -188,20 +188,20 @@ const AddNewCenters: React.FC = ({ }; Object.entries(formData).forEach(([fieldKey, fieldValue]) => { - const fieldSchema = schema.properties[fieldKey]; + const fieldSchema = schema?.properties[fieldKey]; const fieldId = fieldSchema?.fieldId; if (fieldId !== null) { cohortDetails?.customFields?.push({ fieldId: fieldId, - value: formData.cohort_type, + value: formData?.cohort_type, }); } if (bmgsData) { cohortDetails?.customFields?.push({ - fieldId: bmgsData.board.fieldId, - value: bmgsData.board.boardName, + fieldId: bmgsData?.board.fieldId, + value: bmgsData?.board.boardName, }); cohortDetails?.customFields?.push({ fieldId: bmgsData.medium.fieldId, diff --git a/src/components/AreaSelection.tsx b/src/components/AreaSelection.tsx index 397525c0..b985ca1f 100644 --- a/src/components/AreaSelection.tsx +++ b/src/components/AreaSelection.tsx @@ -78,7 +78,7 @@ const AreaSelection: React.FC = ({ isMediumScreen, isCenterSelection = false, inModal = false, - handleCenterChangeWrapper = () => {}, + handleCenterChangeWrapper = () => { }, stateDefaultValue, blockDefaultValue, districtDefaultValue, @@ -117,15 +117,15 @@ const AreaSelection: React.FC = ({ }, }} > - {userType && !reAssignModal && inModal===false && ( + {userType && !reAssignModal && inModal === false && ( - {userType=== Role.CONTENT_CREATOR?t("SIDEBAR.SCTA"):userType} + {userType === Role.CONTENT_CREATOR ? t("SIDEBAR.SCTA") : userType} )} - { ( = ({ /> - - { - ( - <> - district.label)} - codes={districts?.map((district) => district.value)} - tagName={t("FACILITATORS.DISTRICT")} - selectedCategories={selectedDistrict} - onCategoryChange={handleDistrictChangeWrapper} - disabled={ - districts?.length <= 0 || - (selectedState.length === 0 && - stateDefaultValue === t("COMMON.ALL_STATES")) - } - overall={!inModal} - defaultValue={ - reAssignModal - ? districtDefaultValue - : selectedState.length > 0 && districts?.length === 0 - ? t("COMMON.NO_DISTRICTS") - : t("COMMON.ALL_DISTRICTS") - } - /> - - - {shouldRenderSelectCheckmarks &&( + 0 ? blocks.map((block) => block.label) : [] - // blocks.map((block) => block.label) - - )} - codes={ - - blocks?.length > 0 ? blocks?.map((block) => block.value) : [] - // blocks?.map((block) => block.value) - } - tagName={t("FACILITATORS.BLOCK")} - selectedCategories={capitalizeFirstLetterOfEachWordInArray( - selectedBlock - )} - onCategoryChange={handleBlockChangeWrapper} + names={districts?.map((district) => district.label)} + codes={districts?.map((district) => district.value)} + tagName={t("FACILITATORS.DISTRICT")} + selectedCategories={selectedDistrict} + onCategoryChange={handleDistrictChangeWrapper} disabled={ - blocks?.length <= 0 || - selectedDistrict?.length === 0 || - selectedDistrict[0] === t("COMMON.ALL_DISTRICTS") + districts?.length <= 0 || + (selectedState.length === 0 && + stateDefaultValue === t("COMMON.ALL_STATES")) } overall={!inModal} defaultValue={ - selectedDistrict?.length > 0 && (blocks?.length === 0) - ? t("COMMON.NO_BLOCKS") - : t("COMMON.ALL_BLOCKS") + reAssignModal + ? districtDefaultValue + : selectedState.length > 0 && districts?.length === 0 + ? t("COMMON.NO_DISTRICTS") + : t("COMMON.ALL_DISTRICTS") } /> - )} - - ) - } + + + {shouldRenderSelectCheckmarks && ( + 0 ? blocks.map((block) => block.label) : [] + // blocks.map((block) => block.label) + + )} + codes={ + + blocks?.length > 0 ? blocks?.map((block) => block.value) : [] + // blocks?.map((block) => block.value) + } + tagName={t("FACILITATORS.BLOCK")} + selectedCategories={capitalizeFirstLetterOfEachWordInArray( + selectedBlock + )} + onCategoryChange={handleBlockChangeWrapper} + disabled={ + blocks?.length <= 0 || + selectedDistrict?.length === 0 || + selectedDistrict[0] === t("COMMON.ALL_DISTRICTS") + } + overall={!inModal} + defaultValue={ + selectedDistrict?.length > 0 && (blocks?.length === 0) + ? t("COMMON.NO_BLOCKS") + : t("COMMON.ALL_BLOCKS") + } + /> + )} + {isCenterSelection && ( @@ -260,7 +255,7 @@ const AreaSelection: React.FC = ({ /> )} - + )} diff --git a/src/components/RouteGuard.tsx b/src/components/RouteGuard.tsx index df73a785..a2d40b21 100644 --- a/src/components/RouteGuard.tsx +++ b/src/components/RouteGuard.tsx @@ -67,17 +67,17 @@ const RouteGuard: React.FC<{ children: React.ReactNode }> = ({ children }) => { }); // Clear all local storage - localStorage.clear(); + // localStorage.clear(); - // Re-add the keys to keep with their values - keysToKeep.forEach((key: string) => { - if (valuesToKeep[key] !== null) { - // Check if the key exists and has a value - localStorage.setItem(key, valuesToKeep[key]); - } - }); + // // Re-add the keys to keep with their values + // keysToKeep.forEach((key: string) => { + // if (valuesToKeep[key] !== null) { + // // Check if the key exists and has a value + // localStorage.setItem(key, valuesToKeep[key]); + // } + // }); } - router.push("/logout"); + router.push("/unauthorized"); } } }, [router.pathname]); diff --git a/src/components/layouts/FullLayout.tsx b/src/components/layouts/FullLayout.tsx index 4c886a58..280ac5c8 100644 --- a/src/components/layouts/FullLayout.tsx +++ b/src/components/layouts/FullLayout.tsx @@ -1,143 +1,39 @@ -// import React, { useState } from "react"; -// import { -// useMediaQuery, -// Container, -// Box, -// ThemeProvider, -// createTheme, -// Theme, -// styled, -// } from "@mui/material"; -// import Header from "./header/Header"; -// import Sidebar from "./sidebar/Sidebar"; -// import Footer from "./footer/Footer"; -// import * as theme from '../theme/theme'; -// import Dashboard from "@/pages/dashboard"; -// import Facilitators from "@/pages/Faciliator"; -// import about from "@/pages/about"; -// const MainWrapper = styled("div")(() => ({ -// display: "flex", -// minHeight: "100vh", -// overflow: "hidden", -// width: "100%", -// })); - -// const PageWrapper = styled("div")(({ theme }: { theme: Theme }) => ({ -// display: "flex", -// flex: "1 1 auto", -// overflow: "hidden", -// backgroundColor: theme.palette.background.default, -// [theme.breakpoints.up("lg")]: { -// paddingTop: "64px", -// }, -// [theme.breakpoints.down("lg")]: { -// paddingTop: "64px", -// }, -// })); - -// type RouteKey = '/' | '/manage-users' | '/course-planner' | '/cohorts' | '/about'; - -// const componentMapping: Record = { -// "/": Dashboard, -// "/manage-users": Facilitators, -// "/course-planner": Dashboard, -// "/cohorts": Dashboard, -// "/about": about -// }; - -// interface FullLayoutProps { -// children?: React.ReactNode; -// } - -// const FullLayout: React.FC = () => { -// const [isSidebarOpen, setSidebarOpen] = useState(true); -// const [isMobileSidebarOpen, setMobileSidebarOpen] = useState(false); -// const [activeComponent, setActiveComponent] = useState("/"); - -// const lgUp = useMediaQuery((theme: any) => theme.breakpoints.up("lg")); - -// const ActiveComponent = componentMapping[activeComponent]; - -// return ( -// -// -//
setMobileSidebarOpen(true)} -// /> -// setMobileSidebarOpen(false)} -// // onMenuItemClick={(href: RouteKey) => setActiveComponent(href)} -// /> -// -// -// -// -// -//