vinvoor: add a welcome page

vingo/database/users.go

@@ -1,10 +1,10 @@
 package database
 
 type User struct {
+	Id       int      `json:"id"`
 	Username string   `json:"username"`
 	Admin    bool     `json:"admin"`
 	Settings Settings `json:"settings"`
-	Id       int      `json:"id"`
 }
 
 var (

vinvoor/src/App.tsx

@@ -1,20 +1,33 @@
-import { Container, CssBaseline } from "@mui/material";
-import { Outlet } from "react-router-dom";
+import { Container } from "@mui/material";
+import { useContext } from "react";
+import { Navigate, Outlet } from "react-router-dom";
+import { LoadingSkeleton } from "./components/LoadingSkeleton";
 import { NavBar } from "./navbar/NavBar";
-import { ThemeProvider } from "./theme/ThemeProvider";
-import { UserProvider } from "./user/UserProvider";
+import { UserContext } from "./user/UserProvider";
+import { WelcomePage } from "./WelcomePage";
 
 export const App = () => {
+    const {
+        userState: { user, loading },
+    } = useContext(UserContext);
+
     return (
-        <ThemeProvider>
-            <CssBaseline enableColorScheme>
-                <UserProvider>
-                    <NavBar />
-                    <Container maxWidth="xl" sx={{ my: "2%" }}>
+        <>
+            <NavBar />
+            <Container maxWidth="xl" sx={{ my: "2%" }}>
+                <LoadingSkeleton loading={loading}>
+                    {user !== undefined ? (
                         <Outlet />
-                    </Container>
-                </UserProvider>
-            </CssBaseline>
-        </ThemeProvider>
+                    ) : (
+                        <>
+                            <WelcomePage />
+                            <Navigate to="/" />
+                        </>
+                    )}
+                </LoadingSkeleton>
+            </Container>
+        </>
     );
 };
+
+// TODO: Add link to the github repo

vinvoor/src/WelcomePage.tsx

@@ -0,0 +1,49 @@
+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";
+
+declare module "@mui/material/Button" {
+    interface ButtonPropsColorOverrides {
+        github: true;
+    }
+}
+
+export const WelcomePage = () => {
+    const handleClick = () => {
+        window.location.replace("https://github.com/ZeusWPI/ZeSS");
+    };
+
+    return (
+        <Box
+            textAlign="center"
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                textAlign: "center",
+                pt: 10,
+            }}
+        >
+            <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>
+            <Button
+                variant="contained"
+                color="github"
+                onClick={handleClick}
+                sx={{ mt: 3 }}
+            >
+                <GitHub sx={{ mr: 1 }} />
+                <Typography>Github Repository</Typography>
+            </Button>
+        </Box>
+    );
+};

vinvoor/src/leaderboard/LeaderboardTableToolbar.tsx

@@ -9,7 +9,9 @@ interface LeaderboardTableToolbarProps {}
 export const LeaderboardTableToolbar: FC<
     LeaderboardTableToolbarProps
 > = ({}) => {
-    const { user } = useContext(UserContext);
+    const {
+        userState: { user },
+    } = useContext(UserContext);
 
     return (
         <Toolbar sx={{ p: { xs: 1, sm: 2 }, m: { xs: 1, sm: 2 } }}>

vinvoor/src/main.tsx

@@ -2,26 +2,25 @@ import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
+import { CssBaseline } from "@mui/material";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { App } from "./App.tsx";
 import { Cards } from "./cards/Cards.tsx";
 import { ErrorPage } from "./errors/ErrorPage.tsx";
 import { Leaderboard } from "./leaderboard/Leaderboard.tsx";
+import { ThemeProvider } from "./theme/ThemeProvider";
 import { Login } from "./user/Login.tsx";
 import { Logout } from "./user/Logout.tsx";
+import { UserProvider } from "./user/UserProvider.tsx";
 
 const router = createBrowserRouter([
     {
         path: "/",
         element: <App />,
         errorElement: <ErrorPage />,
         children: [
-            {
-                path: "login",
-                element: <Login />,
-            },
             {
                 path: "logout",
                 element: <Logout />,
@@ -36,10 +35,21 @@ const router = createBrowserRouter([
             },
         ],
     },
+    {
+        path: "/login",
+        element: <Login />,
+        errorElement: <ErrorPage />,
+    },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <RouterProvider router={router} />
+        <ThemeProvider>
+            <CssBaseline enableColorScheme>
+                <UserProvider>
+                    <RouterProvider router={router} />
+                </UserProvider>
+            </CssBaseline>
+        </ThemeProvider>
     </React.StrictMode>
 );

vinvoor/src/navbar/NavBar.tsx

@@ -11,7 +11,9 @@ const pages = ["Cards", "Leaderboard"];
 const settings = ["Logout"];
 
 export const NavBar = () => {
-    const { user } = useContext(UserContext);
+    const {
+        userState: { user },
+    } = useContext(UserContext);
 
     const screenSize = {
         mobile: { xs: "flex", md: "none" },

vinvoor/src/navbar/NavBarUserMenu.tsx

@@ -9,7 +9,9 @@ interface NavBarUserMenuProps {
 }
 
 export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ settings }) => {
-    const { user } = useContext(UserContext);
+    const {
+        userState: { user },
+    } = useContext(UserContext);
     const [anchorElUser, setAnchorElUser] = useState<HTMLElement | undefined>(
         undefined
     );

vinvoor/src/theme/theme.ts

@@ -9,6 +9,9 @@ export const lightTheme = createTheme({
         secondary: {
             main: "#002379",
         },
+        github: {
+            main: "#FFF4F2",
+        },
     },
 });
 
@@ -21,6 +24,9 @@ export const darkTheme = createTheme({
         secondary: {
             main: "#002379",
         },
+        github: {
+            main: "#996860",
+        },
     },
     components: {
         MuiAppBar: {
@@ -32,3 +38,13 @@ export const darkTheme = createTheme({
         },
     },
 });
+
+declare module "@mui/material/styles" {
+    interface Palette {
+        github: Palette["primary"];
+    }
+
+    interface PaletteOptions {
+        github?: PaletteOptions["primary"];
+    }
+}

vinvoor/src/user/Login.tsx

@@ -4,7 +4,7 @@ export const Login = () => {
     const baseUrl = import.meta.env.VITE_BASE_URL;
 
     useEffect(() => {
-        window.location.href = `${baseUrl}/login`;
+        window.location.replace(`${baseUrl}/login`);
     }, []);
 
     return <></>;

vinvoor/src/user/Logout.tsx

@@ -4,7 +4,7 @@ export const Logout = () => {
     const baseUrl = import.meta.env.VITE_BASE_URL;
 
     useEffect(() => {
-        window.location.href = `${baseUrl}/logout`;
+        window.location.replace(`${baseUrl}/logout`);
     }, []);
 
     return <></>;

vinvoor/src/user/UserProvider.tsx

@@ -15,33 +15,60 @@ interface UserProviderProps {
     children: ReactNode;
 }
 
-interface UserContextProps {
+interface UserState {
     user: User | undefined;
-    setUser: Dispatch<SetStateAction<User | undefined>>;
+    loading: boolean;
+    error: Error | undefined;
 }
 
-export const UserContext = createContext<UserContextProps>({
+interface UserContextProps {
+    userState: UserState;
+    setUserState: Dispatch<SetStateAction<UserState>>;
+}
+
+const defaultUserState: UserState = {
     user: undefined,
-    setUser: () => {},
+    loading: true,
+    error: undefined,
+};
+
+export const UserContext = createContext<UserContextProps>({
+    userState: defaultUserState,
+    setUserState: () => {},
 });
 
 export const UserProvider: FC<UserProviderProps> = ({ children }) => {
-    const [user, setUser] = useState<User | undefined>(undefined);
+    const [userState, setUserState] = useState<UserState>(defaultUserState);
 
     useEffect(() => {
         const sessionId = Cookies.get("session_id");
 
         if (!sessionId) {
+            setUserState({
+                user: undefined,
+                loading: false,
+                error: new Error("No session ID"),
+            });
+
             return;
         }
 
+        let newUserState = { ...userState };
+
         fetchApi("user")
-            .then((data) => setUser(data))
-            .catch(() => Cookies.remove("session_id"));
+            .then((data) => (newUserState.user = data))
+            .catch((error) => {
+                Cookies.remove("session_id");
+                newUserState.error = error;
+            })
+            .finally(() => {
+                newUserState.loading = false;
+                setUserState(newUserState);
+            });
     }, []);
 
     return (
-        <UserContext.Provider value={{ user, setUser }}>
+        <UserContext.Provider value={{ userState, setUserState }}>
             {children}
         </UserContext.Provider>
     );