From ea965971f1e6200b6b62f7b2b1835970906f8a10 Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Sun, 28 Sep 2025 16:07:39 +0200
Subject: [PATCH] Refactor Dashboard and Login components: add URL
 synchronization in Dashboard, update Login form submission handling

---
 admin/src/Layout/Dashboard.tsx | 19 +++++++++
 admin/src/Layout/Layout.tsx    |  1 +
 admin/src/Layout/Login.tsx     | 72 +++++++++++++++++-----------------
 3 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/admin/src/Layout/Dashboard.tsx b/admin/src/Layout/Dashboard.tsx
index 1b53d6d..fd37bb6 100644
--- a/admin/src/Layout/Dashboard.tsx
+++ b/admin/src/Layout/Dashboard.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useState } from "react";
+import { useEffect } from "react";
 import { Box, Heading, Text, Flex, Button } from "@chakra-ui/react";
 import Sidebar from "./Sidebar";
 import UserTable from "../components/UserTable";
@@ -17,6 +18,24 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
 
   const [activeView, setActiveView] = useState("");
 
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const raw = window.location.pathname.slice(1);
+    if (raw) {
+      setActiveView(decodeURIComponent(raw));
+    }
+  }, []);
+
+  // Sync URL when activeView changes, without reloading
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!activeView) return;
+    const desired = `/${encodeURIComponent(activeView)}`;
+    if (window.location.pathname !== desired) {
+      window.history.replaceState(null, "", desired);
+    }
+  }, [activeView]);
+
   return (
     <Flex h="100vh">
       <Sidebar
diff --git a/admin/src/Layout/Layout.tsx b/admin/src/Layout/Layout.tsx
index f5d3f74..a11efad 100644
--- a/admin/src/Layout/Layout.tsx
+++ b/admin/src/Layout/Layout.tsx
@@ -39,6 +39,7 @@ const Layout: React.FC = () => {
 
   const handleLogout = () => {
     Cookies.remove("token");
+    window.location.pathname = "/";
     setIsLoggedIn(false);
   };
 
diff --git a/admin/src/Layout/Login.tsx b/admin/src/Layout/Login.tsx
index 818c9dd..813a7e6 100644
--- a/admin/src/Layout/Login.tsx
+++ b/admin/src/Layout/Login.tsx
@@ -24,41 +24,43 @@ const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
 
   return (
     <div className="min-h-screen flex items-center justify-center p-4">
-      <Card.Root maxW="sm">
-        <Card.Header>
-          <Card.Title>Login</Card.Title>
-          <Card.Description>
-            Bitte unten Ihre Admin Zugangsdaten eingeben.
-          </Card.Description>
-        </Card.Header>
-        <Card.Body>
-          <Stack gap="4" w="full">
-            <Field.Root>
-              <Field.Label>username</Field.Label>
-              <Input
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-              />
-            </Field.Root>
-            <Field.Root>
-              <Field.Label>password</Field.Label>
-              <Input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </Field.Root>
-          </Stack>
-        </Card.Body>
-        <Card.Footer justifyContent="flex-end">
-          {isError && (
-            <MyAlert status="error" title={errorMsg} description={errorDsc} />
-          )}
-          <Button onClick={() => handleLogin()} variant="solid">
-            Login
-          </Button>
-        </Card.Footer>
-      </Card.Root>
+      <form onSubmit={(e) => e.preventDefault()}>
+        <Card.Root maxW="sm">
+          <Card.Header>
+            <Card.Title>Login</Card.Title>
+            <Card.Description>
+              Bitte unten Ihre Admin Zugangsdaten eingeben.
+            </Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <Stack gap="4" w="full">
+              <Field.Root>
+                <Field.Label>username</Field.Label>
+                <Input
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                />
+              </Field.Root>
+              <Field.Root>
+                <Field.Label>password</Field.Label>
+                <Input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </Field.Root>
+            </Stack>
+          </Card.Body>
+          <Card.Footer justifyContent="flex-end">
+            {isError && (
+              <MyAlert status="error" title={errorMsg} description={errorDsc} />
+            )}
+            <Button type="submit" onClick={() => handleLogin()} variant="solid">
+              Login
+            </Button>
+          </Card.Footer>
+        </Card.Root>
+      </form>
     </div>
   );
 };