255 lines
8 KiB
TypeScript
255 lines
8 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import type { FormEvent } from "react";
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import { ArrowLeft, KeyRound, Pencil } from "lucide-react";
|
|
|
|
import StatusBadge from "@/components/common/StatusBadge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import UserFormDialog from "@/components/users/UserFormDialog";
|
|
import { api } from "@/lib/api";
|
|
import { hasPermission } from "@/lib/permissions";
|
|
import type { CurrentUser, Role } from "@/types/rbac";
|
|
import type { User, UserPayload } from "@/types/user";
|
|
|
|
function getErrorMessage(error: unknown) {
|
|
if (typeof error === "object" && error !== null && "response" in error) {
|
|
const response = (error as { response?: { data?: { detail?: string } } }).response;
|
|
return response?.data?.detail ?? "Aktion konnte nicht abgeschlossen werden";
|
|
}
|
|
|
|
return "Aktion konnte nicht abgeschlossen werden";
|
|
}
|
|
|
|
function formatDateTime(value: string) {
|
|
return new Intl.DateTimeFormat("de-DE", {
|
|
dateStyle: "medium",
|
|
timeStyle: "short",
|
|
}).format(new Date(value));
|
|
}
|
|
|
|
export default function UserDetailPage() {
|
|
const params = useParams<{ id: string }>();
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [roles, setRoles] = useState<Role[]>([]);
|
|
const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
const [formOpen, setFormOpen] = useState(false);
|
|
const [formError, setFormError] = useState("");
|
|
const [passwordOpen, setPasswordOpen] = useState(false);
|
|
const [password, setPassword] = useState("");
|
|
const [passwordError, setPasswordError] = useState("");
|
|
|
|
const loadUser = useCallback(async () => {
|
|
try {
|
|
const [userResponse, meResponse] = await Promise.all([
|
|
api.get<User>(`/users/${params.id}`),
|
|
api.get<CurrentUser>("/me"),
|
|
]);
|
|
setUser(userResponse.data);
|
|
setCurrentUser(meResponse.data);
|
|
|
|
if (hasPermission(meResponse.data, "roles.read")) {
|
|
const rolesResponse = await api.get<Role[]>("/roles");
|
|
setRoles(rolesResponse.data);
|
|
} else {
|
|
setRoles([userResponse.data.primary_role]);
|
|
}
|
|
} catch (err) {
|
|
setError(getErrorMessage(err));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [params.id]);
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
void loadUser();
|
|
});
|
|
}, [loadUser]);
|
|
|
|
async function saveUser(payload: UserPayload) {
|
|
if (!user) {
|
|
return;
|
|
}
|
|
|
|
setPending(true);
|
|
setFormError("");
|
|
|
|
try {
|
|
const response = await api.put<User>(`/users/${user.id}`, payload);
|
|
setUser(response.data);
|
|
setFormOpen(false);
|
|
} catch (err) {
|
|
setFormError(getErrorMessage(err));
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
async function savePassword(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
|
|
if (!user || password.length < 8) {
|
|
setPasswordError("Passwort muss mindestens 8 Zeichen lang sein");
|
|
return;
|
|
}
|
|
|
|
setPending(true);
|
|
setPasswordError("");
|
|
|
|
try {
|
|
const response = await api.put<User>(`/users/${user.id}?action=password`, {
|
|
password,
|
|
});
|
|
setUser(response.data);
|
|
setPassword("");
|
|
setPasswordOpen(false);
|
|
} catch (err) {
|
|
setPasswordError(getErrorMessage(err));
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return <div className="rounded-lg border bg-white p-8 text-slate-500">Benutzer wird geladen...</div>;
|
|
}
|
|
|
|
if (error || !user) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<Link
|
|
href="/users"
|
|
className="inline-flex h-8 items-center justify-center rounded-lg border border-border bg-background px-2.5 text-sm font-medium hover:bg-muted"
|
|
>
|
|
Zurück
|
|
</Link>
|
|
<div className="rounded-lg border bg-white p-8 text-red-600">
|
|
{error || "Benutzer nicht gefunden"}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<Link
|
|
href="/users"
|
|
className="inline-flex items-center gap-2 text-sm text-slate-500 hover:text-slate-900"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
Zurück zur Benutzerliste
|
|
</Link>
|
|
<h1 className="mt-3 text-3xl font-bold text-slate-950">{user.username}</h1>
|
|
<p className="mt-1 text-sm text-slate-500">{user.email}</p>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
{hasPermission(currentUser, "users.password.update") && (
|
|
<Button type="button" variant="outline" onClick={() => setPasswordOpen(true)}>
|
|
<KeyRound size={16} />
|
|
Passwort ändern
|
|
</Button>
|
|
)}
|
|
{hasPermission(currentUser, "users.update") && (
|
|
<Button type="button" onClick={() => setFormOpen(true)}>
|
|
<Pencil size={16} />
|
|
Bearbeiten
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<section className="rounded-lg border bg-white p-6">
|
|
<h2 className="text-lg font-semibold">Informationen</h2>
|
|
<dl className="mt-6 grid gap-5 md:grid-cols-2">
|
|
<Detail label="Vorname" value={user.first_name || "-"} />
|
|
<Detail label="Nachname" value={user.last_name || "-"} />
|
|
<Detail label="Benutzername" value={user.username} />
|
|
<Detail label="E-Mail" value={user.email} />
|
|
<Detail label="Rolle" value={user.primary_role.display_name} />
|
|
<div>
|
|
<dt className="text-sm text-slate-500">Status</dt>
|
|
<dd className="mt-1"><StatusBadge active={user.is_active} /></dd>
|
|
</div>
|
|
<Detail label="Erstellt" value={formatDateTime(user.created_at)} />
|
|
<Detail label="Aktualisiert" value={formatDateTime(user.updated_at)} />
|
|
</dl>
|
|
</section>
|
|
|
|
<UserFormDialog
|
|
open={formOpen}
|
|
user={user}
|
|
pending={pending}
|
|
serverError={formError}
|
|
roles={roles}
|
|
onOpenChange={setFormOpen}
|
|
onSubmit={saveUser}
|
|
/>
|
|
|
|
<Dialog open={passwordOpen} onOpenChange={setPasswordOpen}>
|
|
<DialogContent>
|
|
<form onSubmit={savePassword} className="space-y-5">
|
|
<DialogHeader>
|
|
<DialogTitle>Passwort ändern</DialogTitle>
|
|
<DialogDescription>
|
|
Das Passwort wird serverseitig mit pwdlib gehasht.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label>Neues Passwort</Label>
|
|
<Input
|
|
type="password"
|
|
value={password}
|
|
aria-invalid={Boolean(passwordError)}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
/>
|
|
{passwordError && <p className="text-xs text-red-600">{passwordError}</p>}
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
disabled={pending}
|
|
onClick={() => setPasswordOpen(false)}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button type="submit" disabled={pending || password.length < 8}>
|
|
{pending ? "Speichern..." : "Speichern"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Detail({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div>
|
|
<dt className="text-sm text-slate-500">{label}</dt>
|
|
<dd className="mt-1 font-medium text-slate-950">{value}</dd>
|
|
</div>
|
|
);
|
|
}
|