Mockup login page that displays if you're not logged in

web/package.json

@@ -20,11 +20,11 @@
   },
   "devDependencies": {
     "typescript": "^5.8.2",
-    "@types/node": "^20.17.24",
-    "@types/react": "^19.0.11",
+    "@types/node": "^20.17.27",
+    "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    "eslint": "^9.22.0",
+    "eslint": "^9.23.0",
     "eslint-config-next": "15.1.0",
-    "@eslint/eslintrc": "^3.3.0"
+    "@eslint/eslintrc": "^3.3.1"
   }
 }

web/src/app/_components/loginpage.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { Button } from "@mui/material"
+import "./styles/loginpage.scss"
+
+let logged_in: boolean = false
+
+function login() {
+	//This would instead send you to the auth page
+	window.location.reload()
+}
+
+export default function LoginPage() {
+	return <main className="login-page">
+		<section>
+			<h1>Login to continue</h1>
+			<Button variant="outlined" className="login-button" onClick={login}>Login</Button>
+		</section>
+	</main>
+}
+
+export {
+	logged_in
+}

web/src/app/_components/styles/loginpage.scss

@@ -0,0 +1,21 @@
+.login-page {
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.login-button {
+		margin-inline: auto;
+		width: 70%;
+		height: 40px;
+	}
+
+	h1 {
+		font-size: 2.3rem;
+	}
+
+	section {
+		display: grid;
+	}
+}

web/src/app/_components/webpage.tsx

@@ -1,8 +1,16 @@
+"use client"
+
 import Header from "./header";
+import LoginPage from "./loginpage"
+
+import { logged_in } from "./loginpage";
 
 export default function Webpage({children}: Readonly<{children?: React.ReactNode}>) {
-    return (<>
-        <Header/>
-        {children}
-    </>)
+	if (logged_in) {
+		return <>
+			<Header/>
+			{children}
+		</>
+	}
+	return <LoginPage/>
 }