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
|
|
@ -1,133 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
import { api } from "@/lib/api";
|
||||
|
||||
export default function UserDialog() {
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const [username, setUsername] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
async function saveUser() {
|
||||
|
||||
console.log("Speichern geklickt");
|
||||
|
||||
try {
|
||||
|
||||
const response = await api.post("/users/", {
|
||||
username,
|
||||
email,
|
||||
password,
|
||||
});
|
||||
|
||||
console.log(response.data);
|
||||
|
||||
setOpen(false);
|
||||
|
||||
window.location.reload();
|
||||
|
||||
} catch (error) {
|
||||
|
||||
console.error(error);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<>
|
||||
|
||||
<Button onClick={() => setOpen(true)}>
|
||||
|
||||
+ Neuer Benutzer
|
||||
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
|
||||
<DialogContent>
|
||||
|
||||
<DialogHeader>
|
||||
|
||||
<DialogTitle>
|
||||
|
||||
Neuer Benutzer
|
||||
|
||||
</DialogTitle>
|
||||
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
|
||||
<div>
|
||||
|
||||
<Label>Benutzername</Label>
|
||||
|
||||
<Input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<Label>E-Mail</Label>
|
||||
|
||||
<Input
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<Label>Passwort</Label>
|
||||
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
|
||||
<Button onClick={saveUser}>
|
||||
|
||||
Speichern
|
||||
|
||||
</Button>
|
||||
|
||||
</DialogFooter>
|
||||
|
||||
</DialogContent>
|
||||
|
||||
</Dialog>
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
253
frontend/athena/components/users/UserFormDialog.tsx
Normal file
253
frontend/athena/components/users/UserFormDialog.tsx
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import type { FormEvent, ReactNode } from "react";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { User, UserPayload, UserRole } from "@/types/user";
|
||||
|
||||
const roles: Array<{ value: UserRole; label: string }> = [
|
||||
{ value: "admin", label: "Admin" },
|
||||
{ value: "manager", label: "Manager" },
|
||||
{ value: "user", label: "Benutzer" },
|
||||
];
|
||||
|
||||
const emptyForm: UserPayload = {
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
username: "",
|
||||
email: "",
|
||||
role: "user",
|
||||
is_active: true,
|
||||
password: "",
|
||||
};
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
user?: User | null;
|
||||
pending?: boolean;
|
||||
serverError?: string;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSubmit: (payload: UserPayload) => Promise<void>;
|
||||
};
|
||||
|
||||
export default function UserFormDialog({
|
||||
open,
|
||||
user,
|
||||
pending = false,
|
||||
serverError,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: Props) {
|
||||
const isEditing = Boolean(user);
|
||||
const initialForm = user
|
||||
? {
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
role: user.role,
|
||||
is_active: user.is_active,
|
||||
password: "",
|
||||
}
|
||||
: emptyForm;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
{open && (
|
||||
<UserForm
|
||||
key={user?.id ?? "new"}
|
||||
initialForm={initialForm}
|
||||
isEditing={isEditing}
|
||||
pending={pending}
|
||||
serverError={serverError}
|
||||
onCancel={() => onOpenChange(false)}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function UserForm({
|
||||
initialForm,
|
||||
isEditing,
|
||||
pending,
|
||||
serverError,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
}: {
|
||||
initialForm: UserPayload;
|
||||
isEditing: boolean;
|
||||
pending: boolean;
|
||||
serverError?: string;
|
||||
onCancel: () => void;
|
||||
onSubmit: (payload: UserPayload) => Promise<void>;
|
||||
}) {
|
||||
const [form, setForm] = useState<UserPayload>(initialForm);
|
||||
|
||||
const errors = useMemo(() => {
|
||||
return {
|
||||
username: form.username.trim().length < 3
|
||||
? "Mindestens 3 Zeichen"
|
||||
: "",
|
||||
email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)
|
||||
? ""
|
||||
: "Gültige E-Mail erforderlich",
|
||||
password: !isEditing && (form.password?.length ?? 0) < 8
|
||||
? "Mindestens 8 Zeichen"
|
||||
: "",
|
||||
};
|
||||
}, [form.email, form.password, form.username, isEditing]);
|
||||
|
||||
const isValid = Object.values(errors).every((error) => !error);
|
||||
|
||||
function updateField<K extends keyof UserPayload>(key: K, value: UserPayload[K]) {
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
[key]: value,
|
||||
}));
|
||||
}
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!isValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
...form,
|
||||
password: form.password?.trim() || undefined,
|
||||
};
|
||||
|
||||
await onSubmit(payload);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEditing ? "Benutzer bearbeiten" : "Benutzer erstellen"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Stammdaten, Rolle und Status des Benutzers verwalten.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field label="Vorname">
|
||||
<Input
|
||||
value={form.first_name}
|
||||
onChange={(event) => updateField("first_name", event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Nachname">
|
||||
<Input
|
||||
value={form.last_name}
|
||||
onChange={(event) => updateField("last_name", event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Benutzername" error={errors.username}>
|
||||
<Input
|
||||
value={form.username}
|
||||
aria-invalid={Boolean(errors.username)}
|
||||
onChange={(event) => updateField("username", event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="E-Mail" error={errors.email}>
|
||||
<Input
|
||||
type="email"
|
||||
value={form.email}
|
||||
aria-invalid={Boolean(errors.email)}
|
||||
onChange={(event) => updateField("email", event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Rolle">
|
||||
<select
|
||||
value={form.role}
|
||||
onChange={(event) => updateField("role", event.target.value as UserRole)}
|
||||
className="h-8 w-full 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"
|
||||
>
|
||||
{roles.map((role) => (
|
||||
<option key={role.value} value={role.value}>
|
||||
{role.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
|
||||
<Field label="Status">
|
||||
<label className="flex h-8 items-center gap-2 rounded-lg border px-2.5 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.is_active}
|
||||
onChange={(event) => updateField("is_active", event.target.checked)}
|
||||
/>
|
||||
Aktiv
|
||||
</label>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={isEditing ? "Neues Passwort" : "Passwort"}
|
||||
error={errors.password}
|
||||
>
|
||||
<Input
|
||||
type="password"
|
||||
value={form.password ?? ""}
|
||||
aria-invalid={Boolean(errors.password)}
|
||||
onChange={(event) => updateField("password", event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{serverError && <p className="text-sm text-red-600">{serverError}</p>}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={pending}
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={!isValid || pending}>
|
||||
{pending ? "Speichern..." : "Speichern"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
error,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
error?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<Label>{label}</Label>
|
||||
{children}
|
||||
{error && <p className="text-xs text-red-600">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,63 +1,133 @@
|
|||
"use client";
|
||||
|
||||
import { User } from "@/types/user";
|
||||
import Link from "next/link";
|
||||
import { Edit, Eye, Trash2 } from "lucide-react";
|
||||
|
||||
import DataTable, { type DataTableColumn } from "@/components/common/DataTable";
|
||||
import StatusBadge from "@/components/common/StatusBadge";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import type { User } from "@/types/user";
|
||||
|
||||
type Props = {
|
||||
users: User[];
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
sortKey: string;
|
||||
sortDirection: "asc" | "desc";
|
||||
onSort: (key: string) => void;
|
||||
onEdit: (user: User) => void;
|
||||
onDelete: (user: User) => void;
|
||||
};
|
||||
|
||||
export default function UserTable({ users }: Props) {
|
||||
function formatDate(value: string) {
|
||||
return new Intl.DateTimeFormat("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
export default function UserTable({
|
||||
users,
|
||||
loading,
|
||||
error,
|
||||
sortKey,
|
||||
sortDirection,
|
||||
onSort,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: Props) {
|
||||
const columns: DataTableColumn<User>[] = [
|
||||
{
|
||||
key: "first_name",
|
||||
label: "Vorname",
|
||||
sortable: true,
|
||||
render: (user) => user.first_name || "-",
|
||||
},
|
||||
{
|
||||
key: "last_name",
|
||||
label: "Nachname",
|
||||
sortable: true,
|
||||
render: (user) => user.last_name || "-",
|
||||
},
|
||||
{
|
||||
key: "username",
|
||||
label: "Benutzername",
|
||||
sortable: true,
|
||||
render: (user) => <span className="font-medium text-slate-900">{user.username}</span>,
|
||||
},
|
||||
{
|
||||
key: "email",
|
||||
label: "E-Mail",
|
||||
sortable: true,
|
||||
render: (user) => user.email,
|
||||
},
|
||||
{
|
||||
key: "role",
|
||||
label: "Rolle",
|
||||
sortable: true,
|
||||
render: (user) => user.role,
|
||||
},
|
||||
{
|
||||
key: "is_active",
|
||||
label: "Status",
|
||||
sortable: true,
|
||||
render: (user) => <StatusBadge active={user.is_active} />,
|
||||
},
|
||||
{
|
||||
key: "created_at",
|
||||
label: "Erstellt",
|
||||
sortable: true,
|
||||
render: (user) => formatDate(user.created_at),
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
label: "Aktionen",
|
||||
className: "px-4 py-3 text-right",
|
||||
render: (user) => (
|
||||
<div className="flex justify-end gap-2">
|
||||
<Link
|
||||
href={`/users/${user.id}`}
|
||||
className={buttonVariants({ variant: "ghost", size: "icon-sm" })}
|
||||
title="Details"
|
||||
>
|
||||
<Eye size={16} />
|
||||
</Link>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
title="Bearbeiten"
|
||||
onClick={() => onEdit(user)}
|
||||
>
|
||||
<Edit size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="icon-sm"
|
||||
title="Löschen"
|
||||
onClick={() => onDelete(user)}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border bg-white shadow">
|
||||
|
||||
<table className="w-full">
|
||||
|
||||
<thead className="bg-slate-100">
|
||||
|
||||
<tr>
|
||||
|
||||
<th className="p-4 text-left">ID</th>
|
||||
<th className="p-4 text-left">Benutzername</th>
|
||||
<th className="p-4 text-left">E-Mail</th>
|
||||
<th className="p-4 text-center">Aktionen</th>
|
||||
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{users.map((user) => (
|
||||
|
||||
<tr
|
||||
key={user.id}
|
||||
className="border-t hover:bg-slate-50"
|
||||
>
|
||||
|
||||
<td className="p-4">{user.id}</td>
|
||||
<td className="p-4">{user.username}</td>
|
||||
<td className="p-4">{user.email}</td>
|
||||
|
||||
<td className="p-4 text-center">
|
||||
|
||||
<button className="mr-3 rounded bg-blue-600 px-3 py-1 text-white hover:bg-blue-700">
|
||||
Bearbeiten
|
||||
</button>
|
||||
|
||||
<button className="rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700">
|
||||
Löschen
|
||||
</button>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
))}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={users}
|
||||
rowKey={(user) => user.id}
|
||||
sortKey={sortKey}
|
||||
sortDirection={sortDirection}
|
||||
loading={loading}
|
||||
error={error}
|
||||
emptyTitle="Keine Benutzer gefunden"
|
||||
emptyDescription="Passe Suche oder Filter an oder erstelle einen neuen Benutzer."
|
||||
onSort={onSort}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue