Merge branch 'main' into 469-security-implementation-2

SeattleColleges · Jul 1, 2024 · 9946200 · 9946200
2 parents 710086f + 6252049
commit 9946200
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 20 deletions.
diff --git a/components/DrawerComp.tsx b/components/DrawerComp.tsx
@@ -1,7 +1,11 @@
 import React, { useEffect } from 'react';
-import { Drawer, List, ListItem, ListItemText, Box, Link as MuiLink } from '@mui/material';
+import { Drawer, List, ListItem, ListItemText, Box, Link as MuiLink, useTheme } from '@mui/material';
 import useAuth from '../hooks/useAuth';
 import { useRouter } from 'next/navigation';
+import ThemeToggle from './ThemeToggle';
+import Image from "next/image";
+import blue_vertical_nsc_logo from 'public/images/blue_vertical_nsc_logo.png'
+import white_vertical_nsc_logo from 'public/images/white_vertical_nsc_logo.png'
 
 interface DrawerCompProps {
   isOpen: boolean;
@@ -13,6 +17,13 @@ const DrawerComp: React.FC<DrawerCompProps> = ({ isOpen, toggleDrawer }) => {
   const { isAuth, user } = useAuth(); 
   const router = useRouter();
 
+  const { palette } = useTheme();
+
+  const darkImagePath = white_vertical_nsc_logo;
+  const lightImagePath = blue_vertical_nsc_logo;
+  const imagePath = palette.mode === "dark" ? darkImagePath : lightImagePath;
+  const toggleColor = palette.mode === "dark" ? palette.primary.contrastText : palette.primary.main;
+
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -49,35 +60,47 @@ const DrawerComp: React.FC<DrawerCompProps> = ({ isOpen, toggleDrawer }) => {
       <Box
         onClick={() => toggleDrawer(false)}
         onKeyDown={() => toggleDrawer(false)}
-        sx={{ width: 150 }} // fixed width for the drawer
+        sx={{ width: 250 }}
       >
-        <List>
-        <ListItem component={MuiLink} href="/">
-            <MuiLink>
-              <ListItemText primary="Home" />
+        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2, mt: 2 }}>
+          <Image
+            src={imagePath.src}
+            alt="North Seattle College Logo"
+            width={150}
+            height={50}
+            style={{ borderRadius: "10px" }}
+          />
+        </Box>
+        <List sx={{ m: 1 }}>
+        <ListItem component={MuiLink} href="/" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+            <MuiLink sx={{ textDecoration: 'none' }}>
+              <ListItemText primary="Events" />
             </MuiLink>
           </ListItem>
           {isAuth && user ? (
             <Box display="flex" flexDirection="column" alignItems="start">
               {user.role === 'admin' ? (
-                <ListItem component={MuiLink} href="/admin" onClick={() => toggleDrawer(false)}>
-                  <ListItemText primary="Dashboard" />
+                <ListItem component={MuiLink} href="/admin" onClick={() => toggleDrawer(false)} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+                  <ListItemText primary="My Account" />
                 </ListItem>
               ) : user.role === 'creator' ? (
-                <ListItem component={MuiLink} href="/creator" onClick={() => toggleDrawer(false)}>
-                  <ListItemText primary="Dashboard" />
+                <ListItem component={MuiLink} href="/creator" onClick={() => toggleDrawer(false)} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+                  <ListItemText primary="My Account" />
                 </ListItem>
               ) : null}
-              <ListItem component={MuiLink} href="/auth/sign-in" onClick={handleSignOut}>
+              <ListItem component={MuiLink} href="/auth/sign-in" onClick={handleSignOut} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                 <ListItemText primary="Sign Out" />
               </ListItem>
             </Box>
           ) : (
-            <ListItem component={MuiLink} href="/auth/sign-in">
+            <ListItem component={MuiLink} href="/auth/sign-in" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
               <ListItemText primary="Sign In" />
             </ListItem>
           )}
         </List>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', p: 2, color: toggleColor }}>
+          <ThemeToggle />
+        </Box>
       </Box>
     </Drawer>
   );

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -4,15 +4,19 @@ import Link from 'next/link';
 import Image from 'next/image';
 import white_nsc_logo from 'public/images/white_nsc_logo.png'
 import MenuIcon from '@mui/icons-material/Menu';
-import { AppBar, Toolbar, IconButton, Grid, Button, Drawer, List, ListItem, ListItemText, useTheme, useMediaQuery } from '@mui/material';
+import { AppBar, Toolbar, IconButton, Grid, Button, Drawer, List, ListItem, ListItemText, useTheme, useMediaQuery, Box, Tooltip, Avatar, Menu, Typography, MenuItem } from '@mui/material';
+import { useRouter } from 'next/navigation';
 import DrawerComp from './DrawerComp'; 
 import useAuth from '../hooks/useAuth'; 
 import AuthProfileMenu from './AuthProfileMenu'; 
 import ThemeToggle from './ThemeToggle';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
 export default function Navbar() {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const { isAuth, user } = useAuth();
+  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
+  const router = useRouter();
   const theme = useTheme();
   const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
 
@@ -23,6 +27,29 @@ export default function Navbar() {
     setDrawerOpen(open);
   };
 
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  const handleSignOut = () => {
+    localStorage.removeItem('token');
+    window.dispatchEvent(new CustomEvent('auth-change'));
+    router.push('/auth/sign-in');
+  };
+
+  const handleProfileClick = () => {
+    if (user?.role === 'admin') {
+      router.push('/admin');
+    } else if (user?.role === 'creator') {
+      router.push('/creator');
+    } 
+    toggleDrawer(false);
+  };
+
 
   const list = () => (
     <div role='presentation' onClick={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}>
@@ -64,17 +91,48 @@ export default function Navbar() {
               <MenuIcon />
             </IconButton>
             <Grid container spacing={2} alignItems="center" sx={{ display: { xs: 'none', md: 'flex' } }}>
-              {/* Home Link remains outside AuthProfileMenu for general access */}
+              {/* Events Link remains outside AuthProfileMenu for general access */}
               <Grid item>
                 <Link href="/" passHref>
                   <Button color="inherit" sx={{ textTransform: 'none' }}>Events</Button>
                 </Link>
               </Grid>
+
               {/* AuthProfileMenu contains Create Event and Sign Out actions */}
-              {isAuth && (
-                <Grid item>
-                  <AuthProfileMenu />
-                </Grid>
+              {isAuth && user && (
+                <Box sx={{ flexGrow: 0, display: 'flex', alignItems: 'center' }}>
+                  <Tooltip title="Open user menu">
+                    <IconButton onClick={handleOpenUserMenu} sx={{ p: 0, ml: 3, mr: 1, mt: 2, color: "white" }}>
+                      <AccountCircleIcon />
+                    </IconButton>
+                  </Tooltip>
+                  <Menu
+                    sx={{ mt: '45px' }}
+                    id="menu-appbar"
+                    anchorEl={anchorElUser}
+                    anchorOrigin={{
+                      vertical: 'top',
+                      horizontal: 'right',
+                    }}
+                    keepMounted
+                    transformOrigin={{
+                      vertical: 'top',
+                      horizontal: 'right',
+                    }}
+                    open={Boolean(anchorElUser)}
+                    onClose={handleCloseUserMenu}
+                    disableScrollLock
+                  >
+                    {isAuth && user && (user.role === "admin" || user.role === "creator") && (
+                      <MenuItem onClick={() => { handleProfileClick(); handleCloseUserMenu(); }}>
+                        <Typography textAlign="center">My Account</Typography>
+                      </MenuItem>
+                    )}
+                    <MenuItem onClick={() => { handleCloseUserMenu(); handleSignOut(); }}>
+                      <Typography textAlign="center">Sign Out</Typography>
+                    </MenuItem>
+                  </Menu>
+                </Box>
               )}
               {!isAuth && (
                 <Grid item>
@@ -83,7 +141,7 @@ export default function Navbar() {
                   </Link>
                 </Grid>
               )}
-              <Grid item>
+              <Grid item sx={{ ml: 1, mr: 1 }}>
                 <ThemeToggle />
               </Grid>
             </Grid>
@@ -93,4 +151,4 @@ export default function Navbar() {
       <DrawerComp isOpen={drawerOpen} toggleDrawer={toggleDrawer} isAuth={isAuth} />
     </AppBar>
   );
-};
+};