feat(auth): enterprise authentication and user management
This commit is contained in:
Schubert Ferenc
parent
4bc8b20a21
commit
86a32a942c
36 changed files with 2239 additions and 324 deletions
235
frontend/athena/app/users/[id]/page.tsx
Normal file
235
frontend/athena/app/users/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
"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 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 [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 response = await api.get<User>(`/users/${params.id}`);
|
||||
setUser(response.data);
|
||||
} 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">
|
||||
<Button type="button" variant="outline" onClick={() => setPasswordOpen(true)}>
|
||||
<KeyRound size={16} />
|
||||
Passwort ändern
|
||||
</Button>
|
||||
<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.role} />
|
||||
<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}
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,66 +1,306 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
|
||||
import { api } from "@/lib/api";
|
||||
import { User } from "@/types/user";
|
||||
|
||||
import UserDialog from "@/components/users/UserDialog";
|
||||
import ConfirmDialog from "@/components/common/ConfirmDialog";
|
||||
import SearchInput from "@/components/common/SearchInput";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import UserFormDialog from "@/components/users/UserFormDialog";
|
||||
import UserTable from "@/components/users/UserTable";
|
||||
import { api } from "@/lib/api";
|
||||
import type { User, UserPayload, UserRole } from "@/types/user";
|
||||
|
||||
const pageSize = 10;
|
||||
|
||||
type StatusFilter = "all" | "active" | "inactive";
|
||||
|
||||
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 getSortableValue(user: User, key: string) {
|
||||
const value = user[key as keyof User];
|
||||
return typeof value === "string" ? value.toLowerCase() : value;
|
||||
}
|
||||
|
||||
export default function UsersPage() {
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [formError, setFormError] = useState("");
|
||||
const [deleteError, setDeleteError] = useState("");
|
||||
const [pending, setPending] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [roleFilter, setRoleFilter] = useState<UserRole | "all">("all");
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
|
||||
const [sortKey, setSortKey] = useState("created_at");
|
||||
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
|
||||
const [page, setPage] = useState(1);
|
||||
const [formOpen, setFormOpen] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
||||
const [deleteUser, setDeleteUser] = useState<User | null>(null);
|
||||
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const loadUsers = useCallback(async () => {
|
||||
try {
|
||||
const response = await api.get<User[]>("/users");
|
||||
setUsers(response.data);
|
||||
} catch (err) {
|
||||
setError(getErrorMessage(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadUsers();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
queueMicrotask(() => {
|
||||
void loadUsers();
|
||||
});
|
||||
}, [loadUsers]);
|
||||
|
||||
function loadUsers() {
|
||||
const filteredUsers = useMemo(() => {
|
||||
const term = search.trim().toLowerCase();
|
||||
|
||||
api
|
||||
.get<User[]>("/users/")
|
||||
.then((res) => {
|
||||
return users
|
||||
.filter((user) => {
|
||||
if (!term) {
|
||||
return true;
|
||||
}
|
||||
|
||||
console.log("API:", res.data);
|
||||
return [
|
||||
user.first_name,
|
||||
user.last_name,
|
||||
user.username,
|
||||
user.email,
|
||||
user.role,
|
||||
].some((value) => value.toLowerCase().includes(term));
|
||||
})
|
||||
.filter((user) => roleFilter === "all" || user.role === roleFilter)
|
||||
.filter((user) => {
|
||||
if (statusFilter === "all") {
|
||||
return true;
|
||||
}
|
||||
|
||||
setUsers(res.data);
|
||||
return statusFilter === "active" ? user.is_active : !user.is_active;
|
||||
})
|
||||
.sort((first, second) => {
|
||||
const firstValue = getSortableValue(first, sortKey);
|
||||
const secondValue = getSortableValue(second, sortKey);
|
||||
|
||||
})
|
||||
.catch((err) => {
|
||||
if (firstValue === secondValue) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
console.error("API Fehler:", err);
|
||||
const result = firstValue > secondValue ? 1 : -1;
|
||||
return sortDirection === "asc" ? result : -result;
|
||||
});
|
||||
}, [roleFilter, search, sortDirection, sortKey, statusFilter, users]);
|
||||
|
||||
});
|
||||
const pageCount = Math.max(1, Math.ceil(filteredUsers.length / pageSize));
|
||||
const currentPage = Math.min(page, pageCount);
|
||||
const pageUsers = filteredUsers.slice(
|
||||
(currentPage - 1) * pageSize,
|
||||
currentPage * pageSize,
|
||||
);
|
||||
|
||||
function handleSort(key: string) {
|
||||
if (sortKey === key) {
|
||||
setSortDirection((current) => (current === "asc" ? "desc" : "asc"));
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
setSortKey(key);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
|
||||
<>
|
||||
function openCreateDialog() {
|
||||
setSelectedUser(null);
|
||||
setFormError("");
|
||||
setFormOpen(true);
|
||||
}
|
||||
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
function openEditDialog(user: User) {
|
||||
setSelectedUser(user);
|
||||
setFormError("");
|
||||
setFormOpen(true);
|
||||
}
|
||||
|
||||
<h1 className="text-4xl font-bold">
|
||||
async function saveUser(payload: UserPayload) {
|
||||
setPending(true);
|
||||
setFormError("");
|
||||
|
||||
Benutzer
|
||||
try {
|
||||
if (selectedUser) {
|
||||
const response = await api.put<User>(`/users/${selectedUser.id}`, payload);
|
||||
setUsers((current) => current.map((user) => (
|
||||
user.id === selectedUser.id ? response.data : user
|
||||
)));
|
||||
} else {
|
||||
const response = await api.post<User>("/users", payload);
|
||||
setUsers((current) => [response.data, ...current]);
|
||||
}
|
||||
|
||||
</h1>
|
||||
setFormOpen(false);
|
||||
} catch (err) {
|
||||
setFormError(getErrorMessage(err));
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
<UserDialog />
|
||||
async function confirmDelete() {
|
||||
if (!deleteUser) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPending(true);
|
||||
setDeleteError("");
|
||||
|
||||
try {
|
||||
await api.delete(`/users/${deleteUser.id}`);
|
||||
setUsers((current) => current.filter((user) => user.id !== deleteUser.id));
|
||||
setDeleteUser(null);
|
||||
} catch (err) {
|
||||
setDeleteError(getErrorMessage(err));
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-slate-950">Benutzer</h1>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
{filteredUsers.length} von {users.length} Benutzern
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button type="button" onClick={openCreateDialog}>
|
||||
<Plus size={16} />
|
||||
Neuer Benutzer
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 rounded-lg border bg-white p-4 lg:flex-row lg:items-center">
|
||||
<SearchInput
|
||||
value={search}
|
||||
onChange={(value) => {
|
||||
setSearch(value);
|
||||
setPage(1);
|
||||
}}
|
||||
placeholder="Benutzer suchen"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={roleFilter}
|
||||
onChange={(event) => {
|
||||
setRoleFilter(event.target.value as UserRole | "all");
|
||||
setPage(1);
|
||||
}}
|
||||
className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
>
|
||||
<option value="all">Alle Rollen</option>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="manager">Manager</option>
|
||||
<option value="user">Benutzer</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(event) => {
|
||||
setStatusFilter(event.target.value as StatusFilter);
|
||||
setPage(1);
|
||||
}}
|
||||
className="h-8 rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
>
|
||||
<option value="all">Alle Status</option>
|
||||
<option value="active">Aktiv</option>
|
||||
<option value="inactive">Inaktiv</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<UserTable
|
||||
users={pageUsers}
|
||||
loading={loading}
|
||||
error={error}
|
||||
sortKey={sortKey}
|
||||
sortDirection={sortDirection}
|
||||
onSort={handleSort}
|
||||
onEdit={openEditDialog}
|
||||
onDelete={setDeleteUser}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-slate-600">
|
||||
<span>
|
||||
Seite {currentPage} von {pageCount}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setPage((current) => Math.max(1, current - 1))}
|
||||
>
|
||||
Zurück
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={currentPage === pageCount}
|
||||
onClick={() => setPage((current) => Math.min(pageCount, current + 1))}
|
||||
>
|
||||
Weiter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UserFormDialog
|
||||
open={formOpen}
|
||||
user={selectedUser}
|
||||
pending={pending}
|
||||
serverError={formError}
|
||||
onOpenChange={setFormOpen}
|
||||
onSubmit={saveUser}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
open={Boolean(deleteUser)}
|
||||
title="Benutzer löschen"
|
||||
description="Möchten Sie den Benutzer wirklich löschen?"
|
||||
pending={pending}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setDeleteUser(null);
|
||||
setDeleteError("");
|
||||
}
|
||||
}}
|
||||
onConfirm={confirmDelete}
|
||||
>
|
||||
{deleteUser && (
|
||||
<dl className="grid gap-2 text-sm">
|
||||
<div className="flex justify-between gap-4">
|
||||
<dt className="text-slate-500">Benutzername</dt>
|
||||
<dd className="font-medium">{deleteUser.username}</dd>
|
||||
</div>
|
||||
|
||||
<pre className="mb-6 rounded bg-black p-4 text-green-400 overflow-auto">
|
||||
|
||||
{JSON.stringify(users, null, 2)}
|
||||
|
||||
</pre>
|
||||
|
||||
<UserTable users={users} />
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
<div className="flex justify-between gap-4">
|
||||
<dt className="text-slate-500">E-Mail</dt>
|
||||
<dd className="font-medium">{deleteUser.email}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4">
|
||||
<dt className="text-slate-500">Rolle</dt>
|
||||
<dd className="font-medium">{deleteUser.role}</dd>
|
||||
</div>
|
||||
{deleteError && <p className="text-red-600">{deleteError}</p>}
|
||||
</dl>
|
||||
)}
|
||||
</ConfirmDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue