69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import {X} from "lucide-react";
|
|
import {useNavigate} from "react-router-dom";
|
|
import type {LoginResponse} from "../api/dtos/LoginResponse.ts";
|
|
import {getUserUrl} from "../routes.ts";
|
|
import Button from "./basics/Button.tsx";
|
|
import {ButtonType} from "./basics/BasicButtonDefinitions.ts";
|
|
import type {UserDto} from "../api/dtos/UserDto.ts";
|
|
|
|
/**
|
|
* Overlay settings menu that displays current user info
|
|
* and provides navigation to user management.
|
|
*/
|
|
type SettingsMenuProps = {
|
|
onClose: () => void;
|
|
};
|
|
|
|
export function SettingsMenu({onClose}: SettingsMenuProps) {
|
|
const navigate = useNavigate();
|
|
const storedSession = localStorage.getItem("session");
|
|
const loginData: LoginResponse | null = storedSession
|
|
? JSON.parse(storedSession)
|
|
: null;
|
|
const user = loginData?.userData;
|
|
|
|
const formatUserName = (user: UserDto) => {
|
|
const parts = [];
|
|
if (user.firstName) parts.push(user.firstName);
|
|
if (user.lastName) parts.push(user.lastName);
|
|
return parts.length > 0 ? parts.join(" ") : user.userName;
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/40 flex justify-end z-50">
|
|
<div className="bg-white dark:bg-gray-800 w-80 p-6 shadow-xl flex flex-col">
|
|
{/* Close button */}
|
|
<button
|
|
onClick={onClose}
|
|
className="self-end text-gray-500 hover:text-gray-800"
|
|
>
|
|
<X/>
|
|
</button>
|
|
|
|
<h2 className="text-xl font-semibold mb-4">Einstellungen</h2>
|
|
|
|
{user ? (
|
|
<>
|
|
<p className="text-gray-800 dark:text-gray-100 font-medium">
|
|
{formatUserName(user)}
|
|
</p>
|
|
<p className="text-gray-600 dark:text-gray-400 text-sm mb-6">
|
|
{user.role === "admin" ? "Administrator" : "Benutzer"}
|
|
</p>
|
|
|
|
<Button
|
|
onClick={() => {
|
|
navigate(getUserUrl());
|
|
onClose();
|
|
}}
|
|
buttonType={ButtonType.PrimaryButton}
|
|
text={"Benutzerverwaltung"}
|
|
/>
|
|
</>
|
|
) : (
|
|
<p className="text-gray-500">Nicht eingeloggt</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|