Matthias-Claudius-Schule/borrow-system
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Dashboard and Login components: add URL synchronization in Dashboard, update Login form submission handling

Browse Source
This commit is contained in:
Theis Gaedigk
2025-09-28 16:07:39 +02:00
parent eff1f61422
commit ea965971f1
3 changed files with 57 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
admin/src/Layout/Dashboard.tsx
View File

@@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { useState } from "react"; import { useState } from "react";
import { useEffect } from "react";
import { Box, Heading, Text, Flex, Button } from "@chakra-ui/react"; import { Box, Heading, Text, Flex, Button } from "@chakra-ui/react";
import Sidebar from "./Sidebar"; import Sidebar from "./Sidebar";
import UserTable from "../components/UserTable"; import UserTable from "../components/UserTable";
@@ -17,6 +18,24 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
const [activeView, setActiveView] = useState(""); 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 ( return (
<Flex h="100vh"> <Flex h="100vh">
<Sidebar <Sidebar

1
admin/src/Layout/Layout.tsx
View File

@@ -39,6 +39,7 @@ const Layout: React.FC = () => {
const handleLogout = () => { const handleLogout = () => {
Cookies.remove("token"); Cookies.remove("token");
window.location.pathname = "/";
setIsLoggedIn(false); setIsLoggedIn(false);
}; };

72
admin/src/Layout/Login.tsx
View File

@@ -24,41 +24,43 @@ const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {
return ( return (
<div className="min-h-screen flex items-center justify-center p-4"> <div className="min-h-screen flex items-center justify-center p-4">
<Card.Root maxW="sm"> <form onSubmit={(e) => e.preventDefault()}>
<Card.Header> <Card.Root maxW="sm">
<Card.Title>Login</Card.Title> <Card.Header>
<Card.Description> <Card.Title>Login</Card.Title>
Bitte unten Ihre Admin Zugangsdaten eingeben. <Card.Description>
</Card.Description> Bitte unten Ihre Admin Zugangsdaten eingeben.
</Card.Header> </Card.Description>
<Card.Body> </Card.Header>
<Stack gap="4" w="full"> <Card.Body>
<Field.Root> <Stack gap="4" w="full">
<Field.Label>username</Field.Label> <Field.Root>
<Input <Field.Label>username</Field.Label>
value={username} <Input
onChange={(e) => setUsername(e.target.value)} value={username}
/> onChange={(e) => setUsername(e.target.value)}
</Field.Root> />
<Field.Root> </Field.Root>
<Field.Label>password</Field.Label> <Field.Root>
<Input <Field.Label>password</Field.Label>
type="password" <Input
value={password} type="password"
onChange={(e) => setPassword(e.target.value)} value={password}
/> onChange={(e) => setPassword(e.target.value)}
</Field.Root> />
</Stack> </Field.Root>
</Card.Body> </Stack>
<Card.Footer justifyContent="flex-end"> </Card.Body>
{isError && ( <Card.Footer justifyContent="flex-end">
<MyAlert status="error" title={errorMsg} description={errorDsc} /> {isError && (
)} <MyAlert status="error" title={errorMsg} description={errorDsc} />
<Button onClick={() => handleLogin()} variant="solid"> )}
Login <Button type="submit" onClick={() => handleLogin()} variant="solid">
</Button> Login
</Card.Footer> </Button>
</Card.Root> </Card.Footer>
</Card.Root>
</form>
</div> </div>
); );
}; };