Changeset e599341 for components/Navbar.tsx

Timestamp:

12/28/25 00:07:22 (7 months ago)

Author:

Mihail <mihail2.naumov@…>

Branches:

main

Children:

9c87509

Parents:

f7c0b0d

Message:

Added frontend elements

File:

• components/Navbar.tsx (modified) (2 diffs)

components/Navbar.tsx

@@ -4 +4 @@
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import InputBase from "@mui/material/InputBase";
 import Box from "@mui/material/Box";
-import { styled } from "@mui/material/styles";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import {
+    Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, ListItemText
+} from "@mui/material";
+
+import MemoryIcon from '@mui/icons-material/Memory';
+import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
+import StorageIcon from '@mui/icons-material/Storage';
+import SdStorageIcon from '@mui/icons-material/SdStorage';
+import RouterIcon from '@mui/icons-material/Router';
+import LanIcon from '@mui/icons-material/Lan';
+import SpeakerIcon from '@mui/icons-material/Speaker';
+import AlbumIcon from '@mui/icons-material/Album';
+import SdCardIcon from '@mui/icons-material/SdCard';
+import CableIcon from '@mui/icons-material/Cable';
+
 import LogoUrl from '../assets/projectlogo.png';
-import {onGetAuthState} from "../pages/+Layout.telefunc";
+import { onGetAuthState } from "../pages/+Layout.telefunc";
 
+import ComponentDialog from "./ComponentDialog";
 
-type AuthState = { isLoggedIn: boolean; username: string | null };
+type AuthState = { isLoggedIn: boolean; username: string | null; isAdmin?: boolean };
+
+const COMPONENT_CATEGORIES = [
+    { id: 'cpu', label: 'Processors', icon: <MemoryIcon fontSize="small" /> },
+    { id: 'gpu', label: 'Graphics Cards', icon: <DeveloperBoardIcon fontSize="small" /> },
+    { id: 'motherboard', label: 'Motherboards', icon: <DeveloperBoardIcon fontSize="small" /> },
+    { id: 'memory', label: 'Memory (RAM)', icon: <SdStorageIcon fontSize="small" /> },
+    { id: 'storage', label: 'Storage', icon: <StorageIcon fontSize="small" /> },
+    { id: 'case', label: 'Cases', icon: <StorageIcon fontSize="small" /> },
+    { id: 'power_supply', label: 'Power Supplies', icon: <StorageIcon fontSize="small" /> },
+    { id: 'cooler', label: 'Cooling', icon: <StorageIcon fontSize="small" /> },
+
+    // Peripherals / Accessories (Missing ones)
+    { id: 'network_adapter', label: 'Network Adapters (WiFi)', icon: <RouterIcon fontSize="small" /> },
+    { id: 'network_card', label: 'Network Cards (Ethernet)', icon: <LanIcon fontSize="small" /> },
+    { id: 'sound_card', label: 'Sound Cards', icon: <SpeakerIcon fontSize="small" /> },
+    { id: 'optical_drive', label: 'Optical Drives', icon: <AlbumIcon fontSize="small" /> },
+    { id: 'memory_card', label: 'Memory Cards', icon: <SdCardIcon fontSize="small" /> },
+    { id: 'cables', label: 'Cables', icon: <CableIcon fontSize="small" /> },
+];
+
 
 export default function Navbar() {
     const [auth, setAuth] = useState<AuthState | null>(null);
+    const [openLogoutDialog, setOpenLogoutDialog] = useState(false);
 
-    const handleLogout = async (e: React.MouseEvent) => { // funkcija za logout da go resetira auth state, za da ne go pise username-ot u navbar, plus te vrakja na login nazad
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const openMenu = Boolean(anchorEl);
+
+    const [browserOpen, setBrowserOpen] = useState(false);
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+    const handleComponentsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleMenuClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleCategorySelect = (categoryId: string) => {
+        setSelectedCategory(categoryId);
+        setBrowserOpen(true);
+        handleMenuClose();
+    };
+
+    const handleLogoutClick = (e: React.MouseEvent) => {
         e.preventDefault();
+        setOpenLogoutDialog(true);
+    };
 
-        setAuth({ isLoggedIn: false, username: null });
-        window.location.href = "/api/auth/signout?callbackUrl=/auth/login";
+    const confirmLogout = async () => {
+        setAuth({ isLoggedIn: false, username: null, isAdmin: false });
+        setOpenLogoutDialog(false);
+        const csrfRes = await fetch("/api/auth/csrf");
+        const { csrfToken } = await csrfRes.json();
+        await fetch("/api/auth/signout", {
+            method: "POST",
+            headers: { "Content-Type": "application/x-www-form-urlencoded" },
+            body: new URLSearchParams({ csrfToken: csrfToken, callbackUrl: "/" }),
+        });
+        window.location.href = "/";
     };
 
@@ -26 +95 @@
         let active = true;
         onGetAuthState()
-            .then((data) => active && setAuth({ isLoggedIn: data.isLoggedIn, username: data.username }))
-            .catch(() => active && setAuth({ isLoggedIn: false, username: null }));
+            .then((data) => active && setAuth({
+                isLoggedIn: data.isLoggedIn,
+                username: data.username,
+                isAdmin: data.isAdmin
+            }))
+            .catch(() => active && setAuth({ isLoggedIn: false, username: null, isAdmin: false }));
         return () => { active = false; };
     }, []);
 
+    const checkDashboardUrl = auth?.isAdmin ? '/dashboard/admin' : '/dashboard/user';
     const onHoverNav = {
         color: 'inherit',
-        '&:hover': {
-            backgroundColor: '#ff8201',
-            color: 'white',
-            fontWeight: 'bold',
-        }
+        '&:hover': { backgroundColor: '#ff8201', color: 'white', fontWeight: 'bold' }
     };
 
     return (
-        <AppBar position="static" color="default" enableColorOnDark>
-            <Toolbar>
-                <Box sx={{ display: 'flex', alignItems: 'center', mr: 4 }}>
-                    <Box
-                        component="img"
-                        src={LogoUrl}
-                        alt="PC Forge Logo"
-                        sx={{ height: 40, mr: 2, cursor: 'pointer' }}
-                    />
-                    <Typography
-                        variant="h6"
-                        component="a"
-                        href="/"
-                        sx={{ textDecoration: "none", color: "inherit", fontWeight: "bold" }}
-                    >
-                        PC Forge
-                    </Typography>
-                </Box>
+        <>
+            <AppBar position="static" color="default" enableColorOnDark>
+                <Toolbar>
+                    <Box sx={{ display: 'flex', alignItems: 'center', mr: 4 }}>
+                        <Box component="img" src={LogoUrl} alt="PC Forge Logo" sx={{ height: 40, mr: 2, cursor: 'pointer' }} onClick={() => window.location.href='/'} />
+                        <Typography variant="h6" component="a" href="/" sx={{ textDecoration: "none", color: "inherit", fontWeight: "bold" }}>
+                            PC Forge
+                        </Typography>
+                    </Box>
 
-                <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2}}>
-                    <Button color="inherit" href="/forge" sx={onHoverNav}>Forge</Button>
-                    <Button color="inherit" href="/components" sx={onHoverNav}>Components</Button>
-                    <Button color="inherit" href="/completed-builds" sx={onHoverNav}>Completed Builds</Button>
-                </Box>
+                    <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
+                        <Button color="inherit" href="/forge" sx={onHoverNav}>Forge</Button>
 
-                <Box sx={{ flexGrow: 1 }} />
+                        <Button
+                            color="inherit"
+                            onClick={handleComponentsClick}
+                            endIcon={<KeyboardArrowDownIcon />}
+                            sx={onHoverNav}
+                        >
+                            Components
+                        </Button>
+                        <Menu
+                            anchorEl={anchorEl}
+                            open={openMenu}
+                            onClose={handleMenuClose}
+                            MenuListProps={{ 'aria-labelledby': 'basic-button' }}
+                        >
+                            {COMPONENT_CATEGORIES.map((cat) => (
+                                <MenuItem key={cat.id} onClick={() => handleCategorySelect(cat.id)}>
+                                    {/*<ListItemIcon>{cat.icon}</ListItemIcon>*/}
+                                    <ListItemText>{cat.label}</ListItemText>
+                                </MenuItem>
+                            ))}
+                        </Menu>
 
-                <Box sx={{ display: 'flex', gap: 1 }}>
-                    {auth?.isLoggedIn ? (
-                        <>
-                            <Button sx={onHoverNav} color="inherit" href="/dashboard/user">{auth.username}</Button>
-                            <Button sx={onHoverNav} color="inherit" onClick={handleLogout}>Logout</Button>
-                        </>
-                    ) : (
-                        <>
-                            <Button color="inherit" href="/auth/login">Login</Button>
-                            <Button color="inherit" href="/auth/register">Register</Button>
-                        </>
-                    )}
-                </Box>
-            </Toolbar>
-        </AppBar>
+                        <Button color="inherit" href="/completed-builds" sx={onHoverNav}>Completed Builds</Button>
+                    </Box>
+
+                    <Box sx={{ flexGrow: 1 }} />
+
+                    <Box sx={{ display: 'flex', gap: 1 }}>
+                        {auth?.isLoggedIn ? (
+                            <>
+                                <Button sx={onHoverNav} color="inherit" href={checkDashboardUrl}>{auth.username}</Button>
+                                <Button sx={onHoverNav} color="inherit" onClick={handleLogoutClick}>Logout</Button>
+                            </>
+                        ) : (
+                            <>
+                                <Button color="inherit" href="/auth/login">Login</Button>
+                                <Button color="inherit" href="/auth/register">Register</Button>
+                            </>
+                        )}
+                    </Box>
+                </Toolbar>
+            </AppBar>
+
+            <Dialog open={openLogoutDialog} onClose={() => setOpenLogoutDialog(false)}>
+                <DialogTitle>Confirm Logout</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>Are you sure you want to leave the Forge?</DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenLogoutDialog(false)}>Cancel</Button>
+                    <Button onClick={confirmLogout} color="error" variant="contained" autoFocus>Logout</Button>
+                </DialogActions>
+            </Dialog>
+
+            <ComponentDialog
+                open={browserOpen}
+                category={selectedCategory}
+                onClose={() => setBrowserOpen(false)}
+            />
+        </>
     );
 }