Skip to content

Commit

Permalink
refactor: simplify and scale the ACL logic for admin and non-admin roles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amenu-sh
Amenu-sh committed Oct 23, 2024
1 parent bae70ea commit b861c07
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 55 deletions.
19 changes: 19 additions & 0 deletions src/Components/route-guard/admin-required.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from "react";
import { Navigate } from "react-router-dom";
import { useAuth } from "../../context/auth-context";

interface AdminRequiredProps {
children: React.ReactNode;
}

const AdminRequired: React.FC<AdminRequiredProps> = ({ children }) => {
const { user } = useAuth();

if (!user || user.role !== "Admin") {
return <Navigate to="/anauthorized" />;
}

return <>{children}</>;
};

export default AdminRequired;
20 changes: 20 additions & 0 deletions src/Components/route-guard/anauthorized.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { useNavigate } from "react-router-dom";
import Navbar from "../nav-bar/nav-bar";
import LeftsideBar from "../leftside-bar/leftside-bar";
import OrganiziationConfig from "../settings-dropdown/organization-configuration";

const Anauthorized = () => {
const navigate = useNavigate();

return (
<>
<Navbar />
<div className="flex flex-row">
<LeftsideBar />
<OrganiziationConfig />
</div>
</>
);
};

export default Anauthorized;
27 changes: 27 additions & 0 deletions src/Components/settings-dropdown/organization-configuration.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, { useEffect, useState } from "react";
import { useAuth } from "../../context/auth-context";

const OrganiziationConfig = () => {
const { user } = useAuth();
const organizationId = user.organization._id;
const [organizationName, setOrganizationName] = useState<string>("");
useEffect(() => {
console.log(user);
setOrganizationName(user.organization.name);
}, [organizationId]);
return (
<div className="flex-grow mx-auto align-middle text-left p-4 pr-8">
<h2 className="text-2xl font-bold mb-2.5">Organization Settings</h2>
<p className="text-gray-600 text-sm">View your current settings.</p>
<div className="flex flex-col mt-5">
<h3 className="text-lg font-semibold">General</h3>
<div className="flex flex-col gap-2.5 border-b py-2.5 border-gray-300 text-base">
<span className="text-[#96ACC1]">Organization Name:</span>
<span className="text-gray-700">{organizationName}</span>
</div>
</div>
</div>
);
};

export default OrganiziationConfig;
101 changes: 49 additions & 52 deletions src/Components/settings-dropdown/setting-index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Navbar from "../nav-bar/nav-bar";
import LeftsideBar from "../leftside-bar/leftside-bar";
import { getEmailSettings } from "../../services/email-settings-service";
import "./settings.css";
import OrganiziationConfig from "./organization-configuration";

const SettingsIndex: React.FC = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -45,11 +46,11 @@ const SettingsIndex: React.FC = () => {
<Navbar />
<div className="flex flex-row">
<LeftsideBar />

<div className="flex-grow mx-auto align-middle text-left p-4 pr-8">
<h2 className="text-2xl font-bold mb-2.5">Organization Settings</h2>
<p className="text-gray-600 text-sm">View your current settings.</p>

{/* Show Organization Name */}
<div className="flex flex-col mt-5">
<h3 className="text-lg font-semibold">General</h3>
<div className="flex flex-col gap-2.5 border-b py-2.5 border-gray-300 text-base">
Expand All @@ -58,64 +59,60 @@ const SettingsIndex: React.FC = () => {
</div>
</div>

{/* Show additional settings if the user is an admin */}
{user?.role === "Admin" && (
<div className="mt-8">
<div className="flex justify-between">
<h3 className="text-lg font-semibold">Email Settings</h3>
<div className="actionButtons">
<button
onClick={handleEdit}
className="bg-gray-600 text-white px-4 py-1 rounded-md hover:bg-blue-600"
>
Edit
</button>
{/* This is email settings-configuration section accessible Admin only */}
<div className="mt-8">
<div className="flex justify-between">
<h3 className="text-lg font-semibold">Email Settings</h3>
<div className="actionButtons">
<button
onClick={handleEdit}
className="bg-gray-600 text-white px-4 py-1 rounded-md hover:bg-blue-600"
>
Edit
</button>
</div>
</div>
<div className="mt-5">
<div className="border-b border-gray-300 grid grid-cols-2 mb-2.5">
<div className="text-base">
<p className="text-[#96ACC1]">Server:</p>
<span className="text-gray-700">{emailSettings?.server}</span>
</div>
<div className="text-base">
<p className="text-[#96ACC1]">Verified Sender Email:</p>
<span className="text-gray-700">
{emailSettings?.verified_sender_email}
</span>
</div>
</div>
<div className="mt-5">
<div className="border-b border-gray-300 grid grid-cols-2 mb-2.5">
<div className="text-base">
<p className="text-[#96ACC1]">Server:</p>
<span className="text-gray-700">
{emailSettings?.server}
</span>
</div>
<div className="text-base">
<p className="text-[#96ACC1]">Verified Sender Email:</p>
<span className="text-gray-700">
{emailSettings?.verified_sender_email}
</span>
</div>
<div className="border-b py-2.5 border-gray-300 grid grid-cols-2 mb-2.5">
<div className="text-base">
<p className="text-[#96ACC1]">Username:</p>
<span className="text-gray-700">
{emailSettings?.username}
</span>
</div>
<div className="border-b py-2.5 border-gray-300 grid grid-cols-2 mb-2.5">
<div className="text-base">
<p className="text-[#96ACC1]">Username:</p>
<span className="text-gray-700">
{emailSettings?.username}
</span>
</div>
<div className="text-base">
<p className="text-[#96ACC1]">Password:</p>
<span className="text-gray-700">
{emailSettings?.password ? "***********" : ""}
</span>
</div>
<div className="text-base">
<p className="text-[#96ACC1]">Password:</p>
<span className="text-gray-700">
{emailSettings?.password ? "***********" : ""}
</span>
</div>
<div className="border-b py-2.5 border-gray-300 grid grid-cols-2 mb-2.5">
<div className="text-base">
<p className="text-[#96ACC1]">Security Type:</p>
<span className="text-gray-700">
{emailSettings?.securityType}
</span>
</div>
<div className="text-base">
<p className="text-[#96ACC1]">Port:</p>
<span className="text-gray-700">{emailSettings?.port}</span>
</div>
</div>
<div className="border-b py-2.5 border-gray-300 grid grid-cols-2 mb-2.5">
<div className="text-base">
<p className="text-[#96ACC1]">Security Type:</p>
<span className="text-gray-700">
{emailSettings?.securityType}
</span>
</div>
<div className="text-base">
<p className="text-[#96ACC1]">Port:</p>
<span className="text-gray-700">{emailSettings?.port}</span>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</>
Expand Down
24 changes: 21 additions & 3 deletions src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import AuthRequired from "./Components/auth-required/auth-required";
import { useAuth } from "./context/auth-context";
import { checkUser, logoutUser } from "./services/auth";
import EmailConfiguration from "./Components/settings-dropdown/email-configuration";
import AdminRequired from "./Components/route-guard/admin-required";
import Anauthorized from "./Components/route-guard/anauthorized";

const HomePage = () => {
const { setUser } = useAuth();
Expand All @@ -35,10 +37,26 @@ const App = () => {
<Route element={<AuthRequired />}>
<Route path="/" element={<HomePage />} />
<Route path="/settings" element={<Settings />} />
<Route path="/anauthorized" element={<Anauthorized />} />

<Route path="/setting-index" element={<SettingsIndex />} />

<Route path="/email-configuration" element={<EmailConfiguration />} />
{/* Admin-Only Routes */}
<Route
path="/setting-index"
element={
<AdminRequired>
<SettingsIndex />
</AdminRequired>
}
/>
<Route
path="/email-configuration"
element={
<AdminRequired>
<EmailConfiguration />
</AdminRequired>
}
/>
{/* Admin-Only Routes ends here*/}
</Route>
<Route path="/login" element={<Login />} />
</Routes>
Expand Down

0 comments on commit b861c07

Please sign in to comment.