Skip to content

Commit

Permalink
Merge pull request #347 from GTBitsOfGood/joseph-admin-verification
Browse files Browse the repository at this point in the history 
Implement Admin Request Management
  • Loading branch information
@SamratSahoo
SamratSahoo authored Feb 22, 2025
2 parents 199618e + bfe4478 commit b8cc453
Show file tree
Hide file tree
Showing 19 changed files with 821 additions and 94 deletions.
47 changes: 42 additions & 5 deletions web/components/HOC/PageAccess.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@ import { useAuth } from "../../context/auth";
import { Pages } from "../../utils/consts";
import { Role } from "../../utils/types/account";
import React from "react";
import { Center, Spinner } from "@chakra-ui/react";
import { Box, Text, Center, Flex, Spinner } from "@chakra-ui/react";
import { useRouter } from "next/router";
import PageNotFoundError from "../404";
import Head from "next/head";
import Navbar from "../Navbar";

const unrestricted = new Set([Role.Volunteer, Role.ContentCreator, Role.Admin]);
const restricted = new Set([Role.Admin]);

const pageAccess: Record<Pages, Set<Role>> = {
[Pages.ONBOARDING]: unrestricted,
[Pages.ACCESS_MANAGEMENT]: restricted,
[Pages.REQUEST_MANAGEMENT]: restricted,
[Pages.PROFILE]: unrestricted,
[Pages.FEED]: unrestricted,
[Pages.RESOURCES]: unrestricted,
Expand All @@ -23,6 +25,7 @@ const pageAccess: Record<Pages, Set<Role>> = {
const pageTitles: Record<Pages, string> = {
[Pages.ONBOARDING]: "Onboarding",
[Pages.ACCESS_MANAGEMENT]: "Access Management",
[Pages.REQUEST_MANAGEMENT]: "Request Management",
[Pages.PROFILE]: "Profile",
[Pages.FEED]: "Feed",
[Pages.RESOURCES]: "Resources",
Expand Down Expand Up @@ -56,10 +59,44 @@ const pageAccessHOC = <P extends object>(Component: React.FC<P>) => {
if (!authorized) {
return (
<>
<Head>
<title>Page Not Found</title>
</Head>
<PageNotFoundError />
<Navbar />
<Flex display="flex" bgColor="bg-primary" justifyContent="center">
<Box
width={{ base: "100%", lg: "80%" }}
p={8}
bgColor="white"
borderRadius={{ base: 0, lg: 12 }}
mt={{ base: "65px", lg: 100 }}
mb={{ base: 0, lg: 50 }}
>
<Box w="100%" textAlign="left">
<Text
fontSize="2xl"
fontWeight="bold"
lineHeight="24px"
letterSpacing="wide"
>
Sorry!
</Text>
</Box>
<Flex
direction="column"
bgColor="white"
borderRadius={12}
paddingTop={2}
width="100%"
marginTop={{ md: "6px", lg: "20px" }}
>
<Box w="100%" textAlign="left" marginBottom={4}>
<Text fontSize="xl" fontWeight="normal" lineHeight="20px">
Your request to join our platform has been received, and
admins have been notified of the request. Once your request
has been approved, please visit our website again!
</Text>
</Box>
</Flex>
</Box>
</Flex>
</>
);
}
Expand Down
186 changes: 122 additions & 64 deletions web/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,9 @@ import { auth } from "../utils/firebase/firebaseClient";
interface AvatarProps {
user: typeof auth.currentUser | null;
onMenuClose: () => void;
authorized: boolean;
}
function Avatar({ user, onMenuClose }: AvatarProps) {
function Avatar({ user, onMenuClose, authorized }: AvatarProps) {
const { userData } = useAuth();
const router = useRouter();
const isMd = useBreakpointValue({
Expand All @@ -54,7 +55,9 @@ function Avatar({ user, onMenuClose }: AvatarProps) {
p={{ base: 0, md: 4 }}
_hover={{ bgColor: "white" }}
_active={{ bgColor: "white" }}
borderLeft={{ md: "1px solid black" }}
borderLeft={
authorized ? { md: "1px solid black" } : { md: "0px solid black" }
}
borderRadius={0}
onClick={isOpen ? onClose : onMenuClose}
rightIcon={isMd ? <ChevronDownIcon /> : undefined}
Expand Down Expand Up @@ -84,15 +87,17 @@ function Avatar({ user, onMenuClose }: AvatarProps) {
</Text>
<Text fontSize="sm">{user?.email}</Text>
</Box>
<Link
as={NextLink}
href={Pages.PROFILE}
style={{ textDecoration: "none" }}
>
<MenuItem icon={<Icon boxSize={5} as={BsPerson} />}>
Profile
</MenuItem>
</Link>
{authorized && (
<Link
as={NextLink}
href={Pages.PROFILE}
style={{ textDecoration: "none" }}
>
<MenuItem icon={<Icon boxSize={5} as={BsPerson} />}>
Profile
</MenuItem>
</Link>
)}
<MenuDivider />
<MenuItem
icon={<Icon boxSize={5} as={PiSignOut} />}
Expand Down Expand Up @@ -123,11 +128,17 @@ export default function Navbar() {

const visible = navbarVisiblity[router.pathname as Pages] ?? false;

if (!loading && visible && userData && !userData.hasCompletedOnboarding) {
if (
!loading &&
visible &&
userData &&
authorized &&
!userData.hasCompletedOnboarding
) {
return <></>;
}

if (loading || !authorized || !visible) {
if (!user || loading || !visible) {
return <></>;
}

Expand Down Expand Up @@ -178,21 +189,25 @@ export default function Navbar() {
alignItems="center"
spacing={10}
>
<Link
as={NextLink}
href={Pages.FEED}
_hover={{
textDecoration: "underline",
textDecorationColor:
router.pathname === Pages.FEED ? "text-primary" : "black",
}}
>
<Text
color={router.pathname === Pages.FEED ? "text-primary" : "black"}
{authorized && (
<Link
as={NextLink}
href={Pages.FEED}
_hover={{
textDecoration: "underline",
textDecorationColor:
router.pathname === Pages.FEED ? "text-primary" : "black",
}}
>
Feed
</Text>
</Link>
<Text
color={
router.pathname === Pages.FEED ? "text-primary" : "black"
}
>
Feed
</Text>
</Link>
)}
{role === Role.Admin && (
<>
<Link
Expand All @@ -216,6 +231,27 @@ export default function Navbar() {
Access Management
</Text>
</Link>
<Link
as={NextLink}
href={Pages.REQUEST_MANAGEMENT}
_hover={{
textDecoration: "underline",
textDecorationColor:
router.pathname === Pages.REQUEST_MANAGEMENT
? "text-primary"
: "black",
}}
>
<Text
color={
router.pathname === Pages.REQUEST_MANAGEMENT
? "text-primary"
: "black"
}
>
Request Management
</Text>
</Link>
<Link
as={NextLink}
href={Pages.USERS}
Expand All @@ -235,43 +271,61 @@ export default function Navbar() {
</Link>
</>
)}
<Link
as={NextLink}
href={Pages.RESOURCES}
_hover={{
textDecoration: "underline",
textDecorationColor:
router.pathname === Pages.RESOURCES ? "text-primary" : "black",
}}
>
<Text
color={
router.pathname === Pages.RESOURCES ? "text-primary" : "black"
}
>
Resources
</Text>
</Link>
<Avatar user={user} onMenuClose={onMenuClose} />
{authorized && (
<>
<Link
as={NextLink}
href={Pages.RESOURCES}
_hover={{
textDecoration: "underline",
textDecorationColor:
router.pathname === Pages.RESOURCES
? "text-primary"
: "black",
}}
>
<Text
color={
router.pathname === Pages.RESOURCES
? "text-primary"
: "black"
}
>
Resources
</Text>
</Link>
</>
)}
<Avatar
user={user}
onMenuClose={onMenuClose}
authorized={authorized}
/>
</Stack>

<Box display={{ base: "block", md: "none" }}>
<Avatar user={user} onMenuClose={onMenuClose} />
<Avatar
user={user}
onMenuClose={onMenuClose}
authorized={authorized}
/>
</Box>
</Flex>

{isMenuOpen ? (
<Box display={{ md: "none" }} p={2}>
<Stack spacing={4}>
<Link as={NextLink} href={Pages.FEED} onClick={onMenuClose}>
<Text
color={
router.pathname === Pages.FEED ? "text-primary" : "black"
}
>
Feed
</Text>
</Link>
{authorized && (
<Link as={NextLink} href={Pages.FEED} onClick={onMenuClose}>
<Text
color={
router.pathname === Pages.FEED ? "text-primary" : "black"
}
>
Feed
</Text>
</Link>
)}
{role === Role.Admin && (
<>
<Link
Expand Down Expand Up @@ -300,15 +354,19 @@ export default function Navbar() {
</Link>
</>
)}
<Link as={NextLink} href={Pages.RESOURCES} onClick={onMenuClose}>
<Text
color={
router.pathname === Pages.RESOURCES ? "text-primary" : "black"
}
>
Resources
</Text>
</Link>
{authorized && (
<Link as={NextLink} href={Pages.RESOURCES} onClick={onMenuClose}>
<Text
color={
router.pathname === Pages.RESOURCES
? "text-primary"
: "black"
}
>
Resources
</Text>
</Link>
)}
</Stack>
</Box>
) : null}
Expand Down
Loading

0 comments on commit b8cc453

Please sign in to comment.