vinvoor: pieter post deed ambetant

ZeusWPI · Jul 17, 2024 · 77e6dac · 77e6dac
1 parent 0deb98a
commit 77e6dac
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 63 deletions.
diff --git a/vinvoor/src/WelcomePage.tsx b/vinvoor/src/WelcomePage.tsx
@@ -2,7 +2,7 @@ import { GitHub } from "@mui/icons-material";
 import { Box, Button, Typography } from "@mui/material";
 import { ShakerOutline } from "mdi-material-ui";
 import { TypographyG } from "./components/TypographyG";
-import { UnstyledLink } from "./components/UnstyledLink";
+import { Login } from "./user/Login";
 
 declare module "@mui/material/Button" {
     interface ButtonPropsColorOverrides {
@@ -29,12 +29,10 @@ export const WelcomePage = () => {
         >
             <TypographyG variant="h3">Welcome to Vinvoor!</TypographyG>
             <TypographyG variant="h4">Log in to start scanning</TypographyG>
-            <UnstyledLink to="/login">
-                <Button variant="contained">
-                    <Typography>Log in with Zauth</Typography>
-                    <ShakerOutline sx={{ ml: 1 }} />
-                </Button>
-            </UnstyledLink>
+            <Login variant="contained">
+                <Typography>Log in with Zauth</Typography>
+                <ShakerOutline sx={{ ml: 1 }} />
+            </Login>
             <Button
                 variant="contained"
                 color="github"
@@ -47,3 +45,10 @@ export const WelcomePage = () => {
         </Box>
     );
 };
+
+// <UnstyledLink to="/login">
+//     <Button variant="contained">
+//         <Typography>Log in with Zauth</Typography>
+//         <ShakerOutline sx={{ ml: 1 }} />
+//     </Button>
+// </UnstyledLink>
diff --git a/vinvoor/src/components/UnstyledLink.tsx b/vinvoor/src/components/UnstyledLink.tsx
@@ -2,5 +2,7 @@ import { FC } from "react";
 import { Link, LinkProps } from "react-router-dom";
 
 export const UnstyledLink: FC<LinkProps> = (props) => {
-    return <Link {...props} style={{ textDecoration: "none" }} />;
+    return (
+        <Link {...props} style={{ color: "inherit", textDecoration: "none" }} />
+    );
 };
diff --git a/vinvoor/src/main.tsx b/vinvoor/src/main.tsx
@@ -24,6 +24,10 @@ const router = createBrowserRouter([
         element: <App />,
         errorElement: <ErrorPage />,
         children: [
+            {
+                path: "login",
+                element: <Login />,
+            },
             {
                 path: "logout",
                 element: <Logout />,
@@ -38,11 +42,6 @@ const router = createBrowserRouter([
             },
         ],
     },
-    {
-        path: "/login",
-        element: <Login />,
-        errorElement: <ErrorPage />,
-    },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

diff --git a/vinvoor/src/navbar/NavBar.tsx b/vinvoor/src/navbar/NavBar.tsx
@@ -1,4 +1,6 @@
+import LeaderboardIcon from "@mui/icons-material/Leaderboard";
 import { AppBar, Box, Container, Toolbar } from "@mui/material";
+import { CreditCardMultipleOutline } from "mdi-material-ui";
 import { useContext } from "react";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { UserContext } from "../user/UserProvider";
@@ -7,8 +9,17 @@ import { NavBarPages } from "./NavBarPages";
 import { NavBarSandwich } from "./NavBarSandwich";
 import { NavBarUserMenu } from "./NavBarUserMenu";
 
-const pages = ["Cards", "Leaderboard"];
-const settings = ["Logout"];
+export interface PageIcon {
+    page: string;
+    icon: JSX.Element;
+}
+
+const navBarPages: PageIcon[] = [
+    { page: "Cards", icon: <CreditCardMultipleOutline sx={{ mr: ".3rem" }} /> },
+    { page: "Leaderboard", icon: <LeaderboardIcon sx={{ mr: ".3rem" }} /> },
+];
+
+const userMenuPages: PageIcon[] = [];
 
 export const NavBar = () => {
     const {
@@ -21,7 +32,13 @@ export const NavBar = () => {
     };
 
     return (
-        <AppBar position="static">
+        <AppBar
+            position="static"
+            sx={{
+                background:
+                    "rgb(255,164,0) linear-gradient(45deg, rgba(255,164,0,1) 0%, rgba(255,127,0,1) 100%)",
+            }}
+        >
             <Container maxWidth="xl">
                 <Toolbar disableGutters>
                     {/* Display either the ZeSS logo or a sandwich menu */}
@@ -31,7 +48,7 @@ export const NavBar = () => {
 
                         {user && (
                             <NavBarSandwich
-                                pages={pages}
+                                pageIcons={navBarPages}
                                 sx={{ display: screenSize.mobile }}
                             />
                         )}
@@ -42,7 +59,7 @@ export const NavBar = () => {
                     <Box sx={{ flexGrow: 1 }}>
                         {user && (
                             <NavBarPages
-                                pages={pages}
+                                pageIcons={navBarPages}
                                 sx={{ display: screenSize.desktop }}
                             />
                         )}
@@ -54,7 +71,7 @@ export const NavBar = () => {
 
                     <Box sx={{ flexGrow: 0 }}>
                         <DarkModeToggle />
-                        <NavBarUserMenu settings={settings} />
+                        <NavBarUserMenu pageIcons={userMenuPages} />
                     </Box>
                 </Toolbar>
             </Container>

diff --git a/vinvoor/src/navbar/NavBarLogo.tsx b/vinvoor/src/navbar/NavBarLogo.tsx
@@ -1,4 +1,5 @@
 import { Box, Button, SxProps, Theme, Typography } from "@mui/material";
+import { HexagonSlice6 } from "mdi-material-ui";
 import { FC } from "react";
 import { UnstyledLink } from "../components/UnstyledLink";
 
@@ -18,6 +19,7 @@ export const NavBarLogo: FC<NavBarLogoProps> = ({ sx }) => {
                         color: "white",
                     }}
                 >
+                    <HexagonSlice6 sx={{ mr: ".3rem" }} />
                     <Typography
                         variant="h6"
                         sx={{

diff --git a/vinvoor/src/navbar/NavBarPages.tsx b/vinvoor/src/navbar/NavBarPages.tsx
@@ -1,23 +1,25 @@
 import { Box, Button, SxProps, Theme, Typography } from "@mui/material";
 import { FC } from "react";
 import { UnstyledLink } from "../components/UnstyledLink";
+import { PageIcon } from "./NavBar";
 
 interface NavBarPagesProps {
-    pages: readonly string[];
+    pageIcons: readonly PageIcon[];
     sx?: SxProps<Theme>;
 }
 
-export const NavBarPages: FC<NavBarPagesProps> = ({ pages, sx }) => {
+export const NavBarPages: FC<NavBarPagesProps> = ({ pageIcons, sx }) => {
     return (
         <Box sx={{ ...sx }}>
-            {pages.map((page) => (
+            {pageIcons.map(({ page, icon }) => (
                 <UnstyledLink key={page} to={page.toLowerCase()}>
                     <Button
-                        color="inherit"
                         sx={{
                             color: "white",
                         }}
                     >
+                        {icon}
+
                         <Typography>{page}</Typography>
                     </Button>
                 </UnstyledLink>

diff --git a/vinvoor/src/navbar/NavBarSandwich.tsx b/vinvoor/src/navbar/NavBarSandwich.tsx
@@ -10,13 +10,14 @@ import {
 } from "@mui/material";
 import { FC, MouseEvent, useState } from "react";
 import { UnstyledLink } from "../components/UnstyledLink";
+import { PageIcon } from "./NavBar";
 
 interface NavBarSandwichProps {
-    pages: readonly string[];
+    pageIcons: readonly PageIcon[];
     sx?: SxProps<Theme>;
 }
 
-export const NavBarSandwich: FC<NavBarSandwichProps> = ({ pages, sx }) => {
+export const NavBarSandwich: FC<NavBarSandwichProps> = ({ pageIcons, sx }) => {
     const [anchorElNav, setAnchorElNav] = useState<undefined | HTMLElement>(
         undefined
     );
@@ -48,9 +49,10 @@ export const NavBarSandwich: FC<NavBarSandwichProps> = ({ pages, sx }) => {
                 open={Boolean(anchorElNav)}
                 onClose={handleCloseNavMenu}
             >
-                {pages.map((page) => (
+                {pageIcons.map(({ page, icon }) => (
                     <UnstyledLink key={page} to={page.toLowerCase()}>
                         <MenuItem onClick={handleCloseNavMenu}>
+                            {icon}
                             <Typography>{page}</Typography>
                         </MenuItem>
                     </UnstyledLink>

diff --git a/vinvoor/src/navbar/NavBarUserMenu.tsx b/vinvoor/src/navbar/NavBarUserMenu.tsx
@@ -1,14 +1,18 @@
 import { AccountCircle } from "@mui/icons-material";
 import { Button, Menu, MenuItem, Typography } from "@mui/material";
+import ExitRun from "mdi-material-ui/ExitRun";
 import { FC, MouseEvent, useContext, useState } from "react";
 import { UnstyledLink } from "../components/UnstyledLink";
+import { Login } from "../user/Login";
+import { Logout } from "../user/Logout";
 import { UserContext } from "../user/UserProvider";
+import { PageIcon } from "./NavBar";
 
 interface NavBarUserMenuProps {
-    settings: readonly string[];
+    pageIcons: readonly PageIcon[];
 }
 
-export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ settings }) => {
+export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
     const {
         userState: { user },
     } = useContext(UserContext);
@@ -29,17 +33,14 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ settings }) => {
             {user ? (
                 <>
                     <Button
-                        color="inherit"
                         onClick={handleOpenUserMenu}
                         sx={{
                             textTransform: "none",
                             color: "white",
                         }}
                     >
                         <AccountCircle sx={{ mr: "3px" }} />
-                        <Typography variant="h6" sx={{ color: "white" }}>
-                            {user.username}
-                        </Typography>
+                        <Typography variant="h6">{user.username}</Typography>
                     </Button>
                     <Menu
                         sx={{ mt: "45px" }}
@@ -56,31 +57,26 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ settings }) => {
                         open={Boolean(anchorElUser)}
                         onClose={handleCloseUserMenu}
                     >
-                        {settings.map((setting) => (
-                            <UnstyledLink
-                                key={setting}
-                                to={setting.toLowerCase()}
-                            >
+                        {pageIcons.map(({ page, icon }) => (
+                            <UnstyledLink key={page} to={page.toLowerCase()}>
                                 <MenuItem onClick={handleCloseUserMenu}>
-                                    <Typography>{setting}</Typography>
+                                    {icon}
+                                    <Typography>{page}</Typography>
                                 </MenuItem>
                             </UnstyledLink>
                         ))}
+                        <MenuItem>
+                            <Logout>
+                                <ExitRun sx={{ mr: ".3rem" }} />
+                                <Typography>Logout</Typography>
+                            </Logout>
+                        </MenuItem>
                     </Menu>
                 </>
             ) : (
-                <UnstyledLink to="login">
-                    <Button
-                        color="inherit"
-                        size="large"
-                        sx={{
-                            textTransform: "none",
-                            color: "white",
-                        }}
-                    >
-                        <Typography>Login</Typography>
-                    </Button>
-                </UnstyledLink>
+                <Login sx={{ color: "inherit", size: "large" }}>
+                    <Typography>Login</Typography>
+                </Login>
             )}
         </>
     );

diff --git a/vinvoor/src/user/Login.tsx b/vinvoor/src/user/Login.tsx
@@ -1,11 +1,16 @@
-import { useEffect } from "react";
+import { Button, ButtonProps } from "@mui/material";
+import { FC } from "react";
 
-export const Login = () => {
+export const Login: FC<ButtonProps> = (props) => {
     const baseUrl = import.meta.env.VITE_BASE_URL;
 
-    useEffect(() => {
-        window.location.replace(`${baseUrl}/login`);
-    }, []);
+    const handleClick = () => {
+        const form = document.createElement("form");
+        form.method = "POST";
+        form.action = `${baseUrl}/login`;
+        document.body.appendChild(form);
+        form.submit();
+    };
 
-    return <></>;
+    return <Button onClick={handleClick} {...props} />;
 };
diff --git a/vinvoor/src/user/Logout.tsx b/vinvoor/src/user/Logout.tsx
@@ -1,11 +1,16 @@
-import { useEffect } from "react";
+import { Button, ButtonProps } from "@mui/material";
+import { FC } from "react";
 
-export const Logout = () => {
-    const baseUrl = import.meta.env.VITE_BASE_URL;
+export const Logout: FC<ButtonProps> = (props) => {
+    const apiUrl = import.meta.env.VITE_API_URL;
 
-    useEffect(() => {
-        window.location.replace(`${baseUrl}/logout`);
-    }, []);
+    const handleClick = () => {
+        const form = document.createElement("form");
+        form.method = "POST";
+        form.action = `${apiUrl}/logout`;
+        document.body.appendChild(form);
+        form.submit();
+    };
 
-    return <></>;
+    return <Button onClick={handleClick} {...props} />;
 };