From 7dd098aab95d1d9175ca33daa50544efa4c3ab51 Mon Sep 17 00:00:00 2001
From: Samuel Weibel <samuel.weibel@gmail.com>
Date: Fri, 17 Jan 2025 16:07:40 +0000
Subject: [PATCH] Add login page when trying to access a restricted page Fixes
 #88

---
 .../src/components/dashboard/LoginButton.tsx  |   4 +-
 express/frontend/src/contexts/UserContext.tsx |   8 +-
 express/frontend/src/router.tsx               | 113 +++++++++++-------
 3 files changed, 78 insertions(+), 47 deletions(-)

diff --git a/express/frontend/src/components/dashboard/LoginButton.tsx b/express/frontend/src/components/dashboard/LoginButton.tsx
index ddf5703..9acc1e5 100644
--- a/express/frontend/src/components/dashboard/LoginButton.tsx
+++ b/express/frontend/src/components/dashboard/LoginButton.tsx
@@ -1,7 +1,7 @@
 import { useUserContext } from "../../contexts/UserContext";
 import { CardButton } from "../CardButton";
 
-export function LoginButton() {
+export function LoginButton({ variant }: { variant?: string }) {
 	const { login } = useUserContext();
-	return <CardButton text="Login" onClick={login} />;
+	return <CardButton text="Login" onClick={login} variant={variant} />;
 }
diff --git a/express/frontend/src/contexts/UserContext.tsx b/express/frontend/src/contexts/UserContext.tsx
index fd2689a..49da6cc 100644
--- a/express/frontend/src/contexts/UserContext.tsx
+++ b/express/frontend/src/contexts/UserContext.tsx
@@ -27,11 +27,17 @@ export function useUserContext() {
 	return context;
 }
 
+export class UserTokenMissingError extends Error {
+	constructor() {
+		super("User token missing");
+	}
+}
+
 export function useUserToken() {
 	const { user } = useUserContext();
 	const token = user?.token;
 	if (!token) {
-		throw new Error("User token missing");
+		throw new UserTokenMissingError();
 	}
 	return token;
 }
diff --git a/express/frontend/src/router.tsx b/express/frontend/src/router.tsx
index 147c019..be53bf8 100644
--- a/express/frontend/src/router.tsx
+++ b/express/frontend/src/router.tsx
@@ -1,14 +1,16 @@
-import { createBrowserRouter } from "react-router-dom";
+import { Paper, Typography } from "@mui/material";
+import { createBrowserRouter, useRouteError } from "react-router-dom";
 import { App } from "./App";
 import { Dashboard } from "./components/dashboard/Dashboard";
-import { UserProvider } from "./contexts/UserContext";
+import { LoginButton } from "./components/dashboard/LoginButton";
+import { UserProvider, UserTokenMissingError } from "./contexts/UserContext";
 import { AdapterDashboard } from "./tools/adapter/AdapterDashboard";
 import { AdapterDetails } from "./tools/adapter/AdapterDetails";
 import { AdapterRatings } from "./tools/adapter/AdapterRatings";
-import { Statistics } from "./tools/adapter/statistics/Statistics";
 import { CreateReleaseDialog } from "./tools/adapter/releases/CreateReleaseDialog";
 import { Releases } from "./tools/adapter/releases/Releases";
 import { UpdateRepositoriesDialog } from "./tools/adapter/releases/UpdateRepositoriesDialog";
+import { Statistics } from "./tools/adapter/statistics/Statistics";
 import { AdapterCheck } from "./tools/AdapterCheck";
 import { StartCreateAdapter } from "./tools/create-adapter/StartCreateAdapter";
 import { Wizard } from "./tools/create-adapter/Wizard";
@@ -24,66 +26,89 @@ export const router = createBrowserRouter([
 
 		children: [
 			{
-				path: "/create-adapter",
+				path: "/",
+				errorElement: <ErrorBoundary />,
 				children: [
 					{
-						index: true,
-						element: <StartCreateAdapter />,
+						path: "/create-adapter",
+						children: [
+							{
+								index: true,
+								element: <StartCreateAdapter />,
+							},
+							{
+								path: "wizard",
+								element: <Wizard />,
+							},
+						],
 					},
 					{
-						path: "wizard",
-						element: <Wizard />,
-					},
-				],
-			},
-			{
-				path: "/adapter-check",
-				element: <AdapterCheck />,
-			},
-			{
-				path: "/adapter/:name",
-				element: <AdapterDetails />,
-				children: [
-					{
-						index: true,
-						element: <AdapterDashboard />,
+						path: "/adapter-check",
+						element: <AdapterCheck />,
 					},
 					{
-						path: "releases",
-						element: <Releases />,
+						path: "/adapter/:name",
+						element: <AdapterDetails />,
 						children: [
 							{
-								path: "~release",
-								element: <CreateReleaseDialog />,
+								index: true,
+								element: <AdapterDashboard />,
 							},
 							{
-								path: "~to-latest",
-								element: (
-									<UpdateRepositoriesDialog action="to-latest" />
-								),
+								path: "releases",
+								element: <Releases />,
+								children: [
+									{
+										path: "~release",
+										element: <CreateReleaseDialog />,
+									},
+									{
+										path: "~to-latest",
+										element: (
+											<UpdateRepositoriesDialog action="to-latest" />
+										),
+									},
+									{
+										path: "~to-stable/:version",
+										element: (
+											<UpdateRepositoriesDialog action="to-stable" />
+										),
+									},
+								],
 							},
 							{
-								path: "~to-stable/:version",
-								element: (
-									<UpdateRepositoriesDialog action="to-stable" />
-								),
+								path: "statistics",
+								element: <Statistics />,
+							},
+							{
+								path: "ratings",
+								element: <AdapterRatings />,
 							},
 						],
 					},
 					{
-						path: "statistics",
-						element: <Statistics />,
-					},
-					{
-						path: "ratings",
-						element: <AdapterRatings />,
+						index: true,
+						element: <Dashboard />,
 					},
 				],
 			},
-			{
-				index: true,
-				element: <Dashboard />,
-			},
 		],
 	},
 ]);
+
+function ErrorBoundary() {
+	let error = useRouteError();
+	if (error instanceof UserTokenMissingError) {
+		return (
+			<Paper sx={{ padding: 2 }}>
+				<Typography variant="h4">Not logged in</Typography>
+				<p>You need to be logged in to access this page.</p>
+				<p>
+					<LoginButton variant="contained" />
+				</p>
+			</Paper>
+		);
+	}
+
+	throw error;
+}