373 lines
11 KiB
TypeScript
373 lines
11 KiB
TypeScript
import {
|
|
Badge,
|
|
Button,
|
|
Flex,
|
|
Heading,
|
|
Stack,
|
|
Text,
|
|
CloseButton,
|
|
Dialog,
|
|
Portal,
|
|
HStack,
|
|
IconButton,
|
|
Menu,
|
|
Box,
|
|
} from "@chakra-ui/react";
|
|
import { PasswordInput } from "@/components/ui/password-input";
|
|
import Cookies from "js-cookie";
|
|
import { useAtom } from "jotai";
|
|
import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
|
|
import { useNavigate } from "react-router-dom";
|
|
import {
|
|
CircleUserRound,
|
|
RotateCcwKey,
|
|
Code,
|
|
LifeBuoy,
|
|
LogOut,
|
|
CalendarPlus,
|
|
MoreVertical,
|
|
} from "lucide-react";
|
|
import { useUserContext } from "@/states/Context";
|
|
import { useState } from "react";
|
|
import MyAlert from "./myChakra/MyAlert";
|
|
|
|
const API_BASE =
|
|
(import.meta as any).env?.VITE_BACKEND_URL ||
|
|
import.meta.env.VITE_BACKEND_URL ||
|
|
"http://localhost:8002";
|
|
|
|
export const Header = () => {
|
|
const navigate = useNavigate();
|
|
const userData = useUserContext();
|
|
|
|
// Error handling states
|
|
const [isMsg, setIsMsg] = useState(false);
|
|
const [msgStatus, setMsgStatus] = useState<"error" | "success">("error");
|
|
const [msgTitle, setMsgTitle] = useState("");
|
|
const [msgDescription, setMsgDescription] = useState("");
|
|
|
|
const [oldPassword, setOldPassword] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
|
|
const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
|
|
const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
|
|
|
|
// Dialog control
|
|
const [isPwOpen, setPwOpen] = useState(false);
|
|
|
|
const changePassword = async () => {
|
|
if (newPassword !== confirmPassword) {
|
|
setMsgTitle("Passwortänderung fehlgeschlagen");
|
|
setMsgDescription("Passwörter stimmen nicht überein");
|
|
setMsgStatus("error");
|
|
setIsMsg(true);
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE}/api/changePassword`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${Cookies.get("token")}`,
|
|
},
|
|
body: JSON.stringify({ oldPassword, newPassword }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
setMsgTitle("Passwortänderung fehlgeschlagen");
|
|
setMsgDescription("Bitte überprüfen Sie Ihre Eingaben");
|
|
setMsgStatus("error");
|
|
setIsMsg(true);
|
|
return;
|
|
}
|
|
|
|
setMsgTitle("Passwort erfolgreich geändert");
|
|
setMsgDescription("Ihr Passwort wurde erfolgreich geändert");
|
|
setMsgStatus("success");
|
|
setIsMsg(true);
|
|
|
|
setOldPassword("");
|
|
setNewPassword("");
|
|
setConfirmPassword("");
|
|
};
|
|
|
|
const username = userData?.username
|
|
? userData.username[0].toUpperCase() + userData.username.slice(1)
|
|
: "User";
|
|
|
|
const logout = () => {
|
|
Cookies.remove("token");
|
|
setIsLoggedIn(false);
|
|
setTriggerLogout(true);
|
|
};
|
|
|
|
return (
|
|
<Stack
|
|
as="header"
|
|
gap={3}
|
|
className="mb-6"
|
|
position="relative"
|
|
pr={{ base: 10, md: 0 }} // Platz für den Mobile-Button rechts
|
|
>
|
|
{/* Mobile: Drei-Punkte-Button, vertikal zentriert im Header */}
|
|
<Box
|
|
display={{ base: "block", md: "none" }}
|
|
position="absolute"
|
|
top="50%"
|
|
right="0"
|
|
transform="translateY(-50%)"
|
|
zIndex={2}
|
|
>
|
|
<Menu.Root>
|
|
<Menu.Trigger asChild>
|
|
<IconButton
|
|
aria-label="Aktionen"
|
|
variant="solid"
|
|
colorScheme="teal"
|
|
size="md"
|
|
borderRadius="full"
|
|
boxShadow="md"
|
|
>
|
|
<MoreVertical size={20} />
|
|
</IconButton>
|
|
</Menu.Trigger>
|
|
<Menu.Positioner>
|
|
<Menu.Content>
|
|
<Menu.Item
|
|
value="create-loan"
|
|
onSelect={() => navigate("/", { replace: true })}
|
|
children={
|
|
<HStack gap={3}>
|
|
<CalendarPlus size={16} />
|
|
<Text as="span">Ausleihe erstellen</Text>
|
|
</HStack>
|
|
}
|
|
/>
|
|
<Menu.Item
|
|
value="my-loans"
|
|
onSelect={() => navigate("/my-loans", { replace: true })}
|
|
children={
|
|
<HStack gap={3}>
|
|
<CircleUserRound size={16} />
|
|
<Text as="span">Meine Ausleihen</Text>
|
|
</HStack>
|
|
}
|
|
/>
|
|
<Menu.Item
|
|
value="change-password"
|
|
onSelect={() => setPwOpen(true)}
|
|
children={
|
|
<HStack gap={3}>
|
|
<RotateCcwKey size={16} />
|
|
<Text as="span">Passwort ändern</Text>
|
|
</HStack>
|
|
}
|
|
/>
|
|
<Menu.Item
|
|
value="help"
|
|
onSelect={() =>
|
|
window.open(
|
|
"https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki",
|
|
"_blank",
|
|
"noopener,noreferrer"
|
|
)
|
|
}
|
|
children={
|
|
<HStack gap={3}>
|
|
<LifeBuoy size={16} />
|
|
<Text as="span">Hilfe</Text>
|
|
</HStack>
|
|
}
|
|
/>
|
|
<Menu.Item
|
|
value="source-code"
|
|
onSelect={() =>
|
|
window.open(
|
|
"https://git.the1s.de/Matthias-Claudius-Schule/borrow-system",
|
|
"_blank",
|
|
"noopener,noreferrer"
|
|
)
|
|
}
|
|
children={
|
|
<HStack gap={3}>
|
|
<Code size={16} />
|
|
<Text as="span">Source Code</Text>
|
|
</HStack>
|
|
}
|
|
/>
|
|
<Menu.Separator />
|
|
<Menu.Item
|
|
value="logout"
|
|
onSelect={logout}
|
|
children={
|
|
<HStack gap={3} color="red.500">
|
|
<LogOut size={16} />
|
|
<Text as="span">Logout</Text>
|
|
</HStack>
|
|
}
|
|
/>
|
|
</Menu.Content>
|
|
</Menu.Positioner>
|
|
</Menu.Root>
|
|
</Box>
|
|
|
|
<Flex
|
|
direction={{ base: "column", md: "row" }}
|
|
align={{ base: "stretch", md: "center" }}
|
|
justify="space-between"
|
|
gap={4}
|
|
>
|
|
{/* Left: Title + user info */}
|
|
<Stack gap={1}>
|
|
{/* Titelzeile ohne Mobile-Menu (wurde nach oben verlegt) */}
|
|
<Flex align="center" justify="space-between" gap={2}>
|
|
<Heading
|
|
size="2xl"
|
|
className="tracking-tight text-slate-900 dark:text-slate-100"
|
|
>
|
|
Home
|
|
</Heading>
|
|
</Flex>
|
|
|
|
<HStack gap={3} align="center" flexWrap="wrap">
|
|
<Text fontSize="md" className="text-slate-600 dark:text-slate-400">
|
|
Willkommen zurück, {username}!
|
|
</Text>
|
|
<Badge variant="subtle" px={2} py={1} borderRadius="full">
|
|
Rolle: {userData?.role ?? "—"}
|
|
</Badge>
|
|
</HStack>
|
|
</Stack>
|
|
|
|
{/* Right: Actions */}
|
|
{/* Desktop actions */}
|
|
<HStack
|
|
gap={2}
|
|
align="center"
|
|
justify="flex-end"
|
|
flexWrap="wrap"
|
|
display={{ base: "none", md: "flex" }}
|
|
>
|
|
<Button
|
|
colorScheme="teal"
|
|
onClick={() => navigate("/", { replace: true })}
|
|
>
|
|
<HStack gap={2}>
|
|
<CalendarPlus size={18} />
|
|
<Text as="span">Ausleihe erstellen</Text>
|
|
</HStack>
|
|
</Button>
|
|
|
|
<Button onClick={() => navigate("/my-loans", { replace: true })}>
|
|
<HStack gap={2}>
|
|
<CircleUserRound size={18} />
|
|
<Text as="span">Meine Ausleihen</Text>
|
|
</HStack>
|
|
</Button>
|
|
|
|
<Button variant="ghost" onClick={() => setPwOpen(true)}>
|
|
<HStack gap={2}>
|
|
<RotateCcwKey size={18} />
|
|
<Text as="span">Passwort ändern</Text>
|
|
</HStack>
|
|
</Button>
|
|
|
|
<a
|
|
href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki"
|
|
target="_blank"
|
|
>
|
|
<Button variant="ghost">
|
|
<HStack gap={2}>
|
|
<LifeBuoy size={18} />
|
|
<Text as="span">Hilfe</Text>
|
|
</HStack>
|
|
</Button>
|
|
</a>
|
|
|
|
<a
|
|
href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
|
|
target="_blank"
|
|
>
|
|
<Button variant="ghost">
|
|
<HStack gap={2}>
|
|
<Code size={18} />
|
|
<Text as="span">Source Code</Text>
|
|
</HStack>
|
|
</Button>
|
|
</a>
|
|
|
|
<Button onClick={logout} variant="outline" colorScheme="red">
|
|
<HStack gap={2}>
|
|
<LogOut size={18} />
|
|
<Text as="span">Logout</Text>
|
|
</HStack>
|
|
</Button>
|
|
</HStack>
|
|
</Flex>
|
|
|
|
{/* Passwort-Dialog (kontrolliert) */}
|
|
<Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
|
|
<Portal>
|
|
<Dialog.Backdrop />
|
|
<Dialog.Positioner>
|
|
<Dialog.Content maxW="md">
|
|
<Dialog.Header>
|
|
<Dialog.Title>Passwort ändern</Dialog.Title>
|
|
</Dialog.Header>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
changePassword();
|
|
}}
|
|
>
|
|
<Dialog.Body>
|
|
<Stack gap={3}>
|
|
<PasswordInput
|
|
value={oldPassword}
|
|
onChange={(e) => setOldPassword(e.target.value)}
|
|
placeholder="Altes Passwort"
|
|
/>
|
|
<PasswordInput
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
placeholder="Neues Passwort"
|
|
/>
|
|
<PasswordInput
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
placeholder="Neues Passwort wiederholen"
|
|
/>
|
|
</Stack>
|
|
</Dialog.Body>
|
|
<Dialog.Footer>
|
|
<Stack w="100%" gap={3}>
|
|
{isMsg && (
|
|
<MyAlert
|
|
status={msgStatus}
|
|
title={msgTitle}
|
|
description={msgDescription}
|
|
/>
|
|
)}
|
|
<HStack justify="flex-end" gap={2}>
|
|
<Dialog.ActionTrigger asChild>
|
|
<Button variant="outline">Abbrechen</Button>
|
|
</Dialog.ActionTrigger>
|
|
<Button type="submit" colorScheme="teal">
|
|
Speichern
|
|
</Button>
|
|
</HStack>
|
|
</Stack>
|
|
</Dialog.Footer>
|
|
</form>
|
|
<Dialog.CloseTrigger asChild>
|
|
<CloseButton size="sm" />
|
|
</Dialog.CloseTrigger>
|
|
</Dialog.Content>
|
|
</Dialog.Positioner>
|
|
</Portal>
|
|
</Dialog.Root>
|
|
</Stack>
|
|
);
|
|
};
|