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
68
frontend/athena/app/api/login/route.ts
Normal file
68
frontend/athena/app/api/login/route.ts
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
import {
|
||||
getHermesUrl,
|
||||
readJson,
|
||||
setAuthCookie,
|
||||
upstreamConfigurationErrorResponse,
|
||||
upstreamUnavailableResponse,
|
||||
} from "@/lib/server/hermes";
|
||||
import { assertSameOrigin } from "@/lib/server/request-guards";
|
||||
|
||||
type HermesLoginResponse = {
|
||||
access_token: string;
|
||||
expires_in: number;
|
||||
user: {
|
||||
id: number;
|
||||
username: string;
|
||||
email: string;
|
||||
};
|
||||
};
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const originError = assertSameOrigin(request);
|
||||
|
||||
if (originError) {
|
||||
return originError;
|
||||
}
|
||||
|
||||
const credentials = await request.json();
|
||||
const hermesUrl = getHermesUrl();
|
||||
|
||||
if (!hermesUrl) {
|
||||
return upstreamConfigurationErrorResponse();
|
||||
}
|
||||
|
||||
let hermesResponse: Response;
|
||||
|
||||
try {
|
||||
hermesResponse = await fetch(`${hermesUrl}/auth/login`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify(credentials),
|
||||
cache: "no-store",
|
||||
});
|
||||
} catch {
|
||||
return upstreamUnavailableResponse();
|
||||
}
|
||||
|
||||
const data = await readJson(hermesResponse);
|
||||
|
||||
if (!hermesResponse.ok) {
|
||||
return NextResponse.json(data, {
|
||||
status: hermesResponse.status,
|
||||
});
|
||||
}
|
||||
|
||||
const loginData = data as HermesLoginResponse;
|
||||
const response = NextResponse.json({
|
||||
user: loginData.user,
|
||||
});
|
||||
|
||||
setAuthCookie(response, loginData.access_token, loginData.expires_in);
|
||||
|
||||
return response;
|
||||
}
|
||||
18
frontend/athena/app/api/logout/route.ts
Normal file
18
frontend/athena/app/api/logout/route.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
import { clearAuthCookie } from "@/lib/server/hermes";
|
||||
import { assertSameOrigin } from "@/lib/server/request-guards";
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const originError = assertSameOrigin(request);
|
||||
|
||||
if (originError) {
|
||||
return originError;
|
||||
}
|
||||
|
||||
const response = NextResponse.json({ ok: true });
|
||||
|
||||
clearAuthCookie(response);
|
||||
|
||||
return response;
|
||||
}
|
||||
87
frontend/athena/app/api/users/[id]/route.ts
Normal file
87
frontend/athena/app/api/users/[id]/route.ts
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import { NextRequest } from "next/server";
|
||||
|
||||
import {
|
||||
clearAuthCookie,
|
||||
getAccessToken,
|
||||
getHermesUrl,
|
||||
hermesJsonResponse,
|
||||
unauthorizedResponse,
|
||||
upstreamConfigurationErrorResponse,
|
||||
upstreamUnavailableResponse,
|
||||
} from "@/lib/server/hermes";
|
||||
import { assertSameOrigin } from "@/lib/server/request-guards";
|
||||
|
||||
type Params = {
|
||||
params: Promise<{
|
||||
id: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
async function proxyUserRequest(request: NextRequest, { params }: Params) {
|
||||
const token = await getAccessToken();
|
||||
|
||||
if (!token) {
|
||||
return unauthorizedResponse();
|
||||
}
|
||||
|
||||
const hermesUrl = getHermesUrl();
|
||||
|
||||
if (!hermesUrl) {
|
||||
return upstreamConfigurationErrorResponse();
|
||||
}
|
||||
|
||||
const { id } = await params;
|
||||
const action = request.nextUrl.searchParams.get("action");
|
||||
const path = action === "password" ? `/users/${id}/password` : `/users/${id}`;
|
||||
|
||||
let hermesResponse: Response;
|
||||
|
||||
try {
|
||||
hermesResponse = await fetch(`${hermesUrl}${path}`, {
|
||||
method: request.method,
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: request.method === "GET" || request.method === "DELETE"
|
||||
? undefined
|
||||
: await request.text(),
|
||||
cache: "no-store",
|
||||
});
|
||||
} catch {
|
||||
return upstreamUnavailableResponse();
|
||||
}
|
||||
|
||||
if (hermesResponse.status === 401) {
|
||||
const response = await hermesJsonResponse(hermesResponse);
|
||||
clearAuthCookie(response);
|
||||
return response;
|
||||
}
|
||||
|
||||
return hermesJsonResponse(hermesResponse);
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest, context: Params) {
|
||||
return proxyUserRequest(request, context);
|
||||
}
|
||||
|
||||
export async function PUT(request: NextRequest, context: Params) {
|
||||
const originError = assertSameOrigin(request);
|
||||
|
||||
if (originError) {
|
||||
return originError;
|
||||
}
|
||||
|
||||
return proxyUserRequest(request, context);
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest, context: Params) {
|
||||
const originError = assertSameOrigin(request);
|
||||
|
||||
if (originError) {
|
||||
return originError;
|
||||
}
|
||||
|
||||
return proxyUserRequest(request, context);
|
||||
}
|
||||
65
frontend/athena/app/api/users/route.ts
Normal file
65
frontend/athena/app/api/users/route.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { NextRequest } from "next/server";
|
||||
|
||||
import {
|
||||
clearAuthCookie,
|
||||
getAccessToken,
|
||||
getHermesUrl,
|
||||
hermesJsonResponse,
|
||||
unauthorizedResponse,
|
||||
upstreamConfigurationErrorResponse,
|
||||
upstreamUnavailableResponse,
|
||||
} from "@/lib/server/hermes";
|
||||
import { assertSameOrigin } from "@/lib/server/request-guards";
|
||||
|
||||
async function proxyUsersRequest(request: NextRequest) {
|
||||
const token = await getAccessToken();
|
||||
|
||||
if (!token) {
|
||||
return unauthorizedResponse();
|
||||
}
|
||||
|
||||
const hermesUrl = getHermesUrl();
|
||||
|
||||
if (!hermesUrl) {
|
||||
return upstreamConfigurationErrorResponse();
|
||||
}
|
||||
|
||||
let hermesResponse: Response;
|
||||
|
||||
try {
|
||||
hermesResponse = await fetch(`${hermesUrl}/users${request.nextUrl.search}`, {
|
||||
method: request.method,
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: request.method === "GET" ? undefined : await request.text(),
|
||||
cache: "no-store",
|
||||
});
|
||||
} catch {
|
||||
return upstreamUnavailableResponse();
|
||||
}
|
||||
|
||||
if (hermesResponse.status === 401) {
|
||||
const response = await hermesJsonResponse(hermesResponse);
|
||||
clearAuthCookie(response);
|
||||
return response;
|
||||
}
|
||||
|
||||
return hermesJsonResponse(hermesResponse);
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
return proxyUsersRequest(request);
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const originError = assertSameOrigin(request);
|
||||
|
||||
if (originError) {
|
||||
return originError;
|
||||
}
|
||||
|
||||
return proxyUsersRequest(request);
|
||||
}
|
||||
|
|
@ -1,24 +1,20 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
async function handleLogin(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
setError("");
|
||||
|
||||
const response = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/auth/login`,
|
||||
{
|
||||
try {
|
||||
const response = await fetch("/api/login", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
|
|
@ -26,15 +22,20 @@ export default function LoginPage() {
|
|||
username,
|
||||
password,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
window.location.href = "/dashboard";
|
||||
return;
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
router.push("/dashboard");
|
||||
return;
|
||||
setError(data.detail ?? "Login fehlgeschlagen");
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError("Technischer Fehler");
|
||||
}
|
||||
|
||||
setError("Benutzername oder Passwort ist falsch.");
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -63,12 +64,11 @@ export default function LoginPage() {
|
|||
/>
|
||||
|
||||
{error && (
|
||||
<p className="mb-4 text-red-600">
|
||||
{error}
|
||||
</p>
|
||||
<p className="mb-4 text-red-600">{error}</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded bg-blue-600 p-3 text-white hover:bg-blue-700"
|
||||
>
|
||||
Anmelden
|
||||
|
|
@ -76,4 +76,4 @@ export default function LoginPage() {
|
|||
</form>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function HomePage() {
|
||||
redirect("/login");
|
||||
}
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
|
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import LogoutButton from "@/components/LogoutButton";
|
||||
|
||||
export default function Header() {
|
||||
|
||||
return (
|
||||
|
|
@ -10,14 +12,20 @@ export default function Header() {
|
|||
|
||||
</h1>
|
||||
|
||||
<div className="font-semibold">
|
||||
<div className="flex items-center gap-4">
|
||||
|
||||
<span className="font-semibold">
|
||||
|
||||
admin.schubert
|
||||
|
||||
</span>
|
||||
|
||||
<LogoutButton />
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
33
frontend/athena/components/LogoutButton.tsx
Normal file
33
frontend/athena/components/LogoutButton.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { LogOut } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function LogoutButton() {
|
||||
const router = useRouter();
|
||||
|
||||
async function handleLogout() {
|
||||
await fetch("/api/logout", {
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
router.push("/login");
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleLogout}
|
||||
aria-label="Abmelden"
|
||||
title="Abmelden"
|
||||
>
|
||||
<LogOut size={16} />
|
||||
Abmelden
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ const menu = [
|
|||
{
|
||||
icon: LayoutDashboard,
|
||||
name: "Dashboard",
|
||||
href: "/",
|
||||
href: "/dashboard",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
|
|
@ -83,4 +83,4 @@ export default function Sidebar() {
|
|||
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
67
frontend/athena/components/common/ConfirmDialog.tsx
Normal file
67
frontend/athena/components/common/ConfirmDialog.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
title: string;
|
||||
description: string;
|
||||
confirmLabel?: string;
|
||||
pending?: boolean;
|
||||
children?: ReactNode;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onConfirm: () => void;
|
||||
};
|
||||
|
||||
export default function ConfirmDialog({
|
||||
open,
|
||||
title,
|
||||
description,
|
||||
confirmLabel = "Löschen",
|
||||
pending = false,
|
||||
children,
|
||||
onOpenChange,
|
||||
onConfirm,
|
||||
}: Props) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{children && <div className="rounded-lg border bg-slate-50 p-3">{children}</div>}
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={pending}
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={onConfirm}
|
||||
disabled={pending}
|
||||
>
|
||||
{pending ? "Wird gelöscht..." : confirmLabel}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
117
frontend/athena/components/common/DataTable.tsx
Normal file
117
frontend/athena/components/common/DataTable.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export type DataTableColumn<T> = {
|
||||
key: string;
|
||||
label: string;
|
||||
sortable?: boolean;
|
||||
className?: string;
|
||||
render: (row: T) => ReactNode;
|
||||
};
|
||||
|
||||
type Props<T> = {
|
||||
columns: DataTableColumn<T>[];
|
||||
rows: T[];
|
||||
rowKey: (row: T) => string | number;
|
||||
sortKey: string;
|
||||
sortDirection: "asc" | "desc";
|
||||
loading?: boolean;
|
||||
error?: string;
|
||||
emptyTitle: string;
|
||||
emptyDescription: string;
|
||||
onSort: (key: string) => void;
|
||||
};
|
||||
|
||||
export default function DataTable<T>({
|
||||
columns,
|
||||
rows,
|
||||
rowKey,
|
||||
sortKey,
|
||||
sortDirection,
|
||||
loading = false,
|
||||
error,
|
||||
emptyTitle,
|
||||
emptyDescription,
|
||||
onSort,
|
||||
}: Props<T>) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border bg-white">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[920px] text-sm">
|
||||
<thead className="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
<tr>
|
||||
{columns.map((column) => {
|
||||
const active = sortKey === column.key;
|
||||
const SortIcon = active
|
||||
? sortDirection === "asc"
|
||||
? ArrowUp
|
||||
: ArrowDown
|
||||
: ArrowUpDown;
|
||||
|
||||
return (
|
||||
<th key={column.key} className={column.className ?? "px-4 py-3"}>
|
||||
{column.sortable ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-1 text-xs uppercase tracking-wide"
|
||||
onClick={() => onSort(column.key)}
|
||||
>
|
||||
{column.label}
|
||||
<SortIcon size={14} />
|
||||
</Button>
|
||||
) : (
|
||||
column.label
|
||||
)}
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-4 py-12 text-center text-slate-500">
|
||||
Daten werden geladen...
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading && error && (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-4 py-12 text-center text-red-600">
|
||||
{error}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading && !error && rows.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="px-4 py-12 text-center">
|
||||
<p className="font-medium text-slate-900">{emptyTitle}</p>
|
||||
<p className="mt-1 text-slate-500">{emptyDescription}</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!loading && !error && rows.map((row) => (
|
||||
<tr key={rowKey(row)} className="border-t hover:bg-slate-50">
|
||||
{columns.map((column) => (
|
||||
<td key={column.key} className={column.className ?? "px-4 py-3"}>
|
||||
{column.render(row)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
frontend/athena/components/common/SearchInput.tsx
Normal file
29
frontend/athena/components/common/SearchInput.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
"use client";
|
||||
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
export default function SearchInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Suchen",
|
||||
}: Props) {
|
||||
return (
|
||||
<div className="relative w-full max-w-sm">
|
||||
<Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
|
||||
<Input
|
||||
value={value}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
frontend/athena/components/common/StatusBadge.tsx
Normal file
20
frontend/athena/components/common/StatusBadge.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Props = {
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
export default function StatusBadge({ active }: Props) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex h-6 items-center rounded-full px-2 text-xs font-medium",
|
||||
active
|
||||
? "bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20"
|
||||
: "bg-slate-100 text-slate-600 ring-1 ring-slate-500/20",
|
||||
)}
|
||||
>
|
||||
{active ? "Aktiv" : "Inaktiv"}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ services:
|
|||
|
||||
environment:
|
||||
NODE_ENV: production
|
||||
NEXT_PUBLIC_API_URL: https://api.funktechnik-schubert.de
|
||||
HERMES_INTERNAL_URL: https://api.funktechnik-schubert.de
|
||||
AUTH_COOKIE_SECURE: true
|
||||
ATHENA_PUBLIC_ORIGIN: https://crm.funktechnik-schubert.de
|
||||
|
||||
ports:
|
||||
- "3001:3000"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import axios from "axios";
|
||||
|
||||
export const api = axios.create({
|
||||
baseURL: "http://localhost:8000",
|
||||
});
|
||||
baseURL: "/api",
|
||||
});
|
||||
|
|
|
|||
103
frontend/athena/lib/server/hermes.ts
Normal file
103
frontend/athena/lib/server/hermes.ts
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { cookies } from "next/headers";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
const ACCESS_TOKEN_COOKIE = "access_token";
|
||||
const DEFAULT_COOKIE_MAX_AGE_SECONDS = 60 * 60;
|
||||
|
||||
export function getHermesUrl() {
|
||||
return process.env.HERMES_INTERNAL_URL?.replace(/\/$/, "") ?? null;
|
||||
}
|
||||
|
||||
export async function getAccessToken() {
|
||||
const cookieStore = await cookies();
|
||||
return cookieStore.get(ACCESS_TOKEN_COOKIE)?.value;
|
||||
}
|
||||
|
||||
function isSecureCookieEnabled() {
|
||||
if (process.env.AUTH_COOKIE_SECURE) {
|
||||
return process.env.AUTH_COOKIE_SECURE !== "false";
|
||||
}
|
||||
|
||||
return process.env.NODE_ENV === "production";
|
||||
}
|
||||
|
||||
function normalizeMaxAge(maxAge?: number) {
|
||||
if (typeof maxAge !== "number" || !Number.isFinite(maxAge) || maxAge <= 0) {
|
||||
return DEFAULT_COOKIE_MAX_AGE_SECONDS;
|
||||
}
|
||||
|
||||
return Math.floor(maxAge);
|
||||
}
|
||||
|
||||
export function setAuthCookie(response: NextResponse, token: string, maxAge: number) {
|
||||
response.cookies.set({
|
||||
name: ACCESS_TOKEN_COOKIE,
|
||||
value: token,
|
||||
httpOnly: true,
|
||||
secure: isSecureCookieEnabled(),
|
||||
sameSite: "lax",
|
||||
path: "/",
|
||||
maxAge: normalizeMaxAge(maxAge),
|
||||
});
|
||||
}
|
||||
|
||||
export function clearAuthCookie(response: NextResponse) {
|
||||
response.cookies.set({
|
||||
name: ACCESS_TOKEN_COOKIE,
|
||||
value: "",
|
||||
httpOnly: true,
|
||||
secure: isSecureCookieEnabled(),
|
||||
sameSite: "lax",
|
||||
path: "/",
|
||||
maxAge: 0,
|
||||
});
|
||||
}
|
||||
|
||||
export function unauthorizedResponse() {
|
||||
return NextResponse.json(
|
||||
{ detail: "Nicht authentifiziert" },
|
||||
{ status: 401 },
|
||||
);
|
||||
}
|
||||
|
||||
export function upstreamUnavailableResponse() {
|
||||
return NextResponse.json(
|
||||
{ detail: "Hermes ist nicht erreichbar" },
|
||||
{ status: 502 },
|
||||
);
|
||||
}
|
||||
|
||||
export function upstreamConfigurationErrorResponse() {
|
||||
return NextResponse.json(
|
||||
{ detail: "Hermes ist nicht konfiguriert" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
|
||||
export async function readJson(response: Response) {
|
||||
const text = await response.text();
|
||||
|
||||
if (!text) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(text);
|
||||
} catch {
|
||||
return { detail: text };
|
||||
}
|
||||
}
|
||||
|
||||
export async function hermesJsonResponse(response: Response) {
|
||||
if (response.status === 204) {
|
||||
return new NextResponse(null, {
|
||||
status: 204,
|
||||
});
|
||||
}
|
||||
|
||||
const body = await readJson(response);
|
||||
|
||||
return NextResponse.json(body, {
|
||||
status: response.status,
|
||||
});
|
||||
}
|
||||
56
frontend/athena/lib/server/request-guards.ts
Normal file
56
frontend/athena/lib/server/request-guards.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
function normalizeOrigin(origin: string) {
|
||||
return origin.replace(/\/$/, "");
|
||||
}
|
||||
|
||||
function getConfiguredOrigins() {
|
||||
return (process.env.ATHENA_PUBLIC_ORIGIN ?? "")
|
||||
.split(",")
|
||||
.map((origin) => origin.trim())
|
||||
.filter(Boolean)
|
||||
.map(normalizeOrigin);
|
||||
}
|
||||
|
||||
function getForwardedOrigin(request: NextRequest) {
|
||||
const forwardedHost = request.headers.get("x-forwarded-host");
|
||||
|
||||
if (!forwardedHost) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const forwardedProto = request.headers.get("x-forwarded-proto") ?? "https";
|
||||
const firstHost = forwardedHost.split(",")[0]?.trim();
|
||||
const firstProto = forwardedProto.split(",")[0]?.trim();
|
||||
|
||||
if (!firstHost || !firstProto) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return `${firstProto}://${firstHost}`;
|
||||
}
|
||||
|
||||
export function assertSameOrigin(request: NextRequest) {
|
||||
const origin = request.headers.get("origin");
|
||||
|
||||
if (!origin) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const requestOrigins = [
|
||||
request.nextUrl.origin,
|
||||
getForwardedOrigin(request),
|
||||
...getConfiguredOrigins(),
|
||||
]
|
||||
.filter((value): value is string => Boolean(value))
|
||||
.map(normalizeOrigin);
|
||||
|
||||
if (!requestOrigins.includes(normalizeOrigin(origin))) {
|
||||
return NextResponse.json(
|
||||
{ detail: "Ungültiger Ursprung der Anfrage" },
|
||||
{ status: 403 },
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
export function proxy(request: NextRequest) {
|
||||
const token = request.cookies.get("access_token");
|
||||
const isLoginPage = request.nextUrl.pathname === "/login";
|
||||
|
||||
if (!token) {
|
||||
if (isLoginPage && token) {
|
||||
return NextResponse.redirect(new URL("/dashboard", request.url));
|
||||
}
|
||||
|
||||
if (!isLoginPage && !token) {
|
||||
return NextResponse.redirect(new URL("/login", request.url));
|
||||
}
|
||||
|
||||
|
|
@ -12,7 +17,8 @@ export function middleware(request: NextRequest) {
|
|||
|
||||
export const config = {
|
||||
matcher: [
|
||||
"/login",
|
||||
"/dashboard/:path*",
|
||||
"/users/:path*",
|
||||
],
|
||||
};
|
||||
};
|
||||
|
|
@ -1,5 +1,23 @@
|
|||
export type UserRole = "admin" | "manager" | "user";
|
||||
|
||||
export interface User {
|
||||
id: number;
|
||||
username: string;
|
||||
email: string;
|
||||
}
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
username: string;
|
||||
email: string;
|
||||
role: UserRole;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export type UserPayload = {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
username: string;
|
||||
email: string;
|
||||
role: UserRole;
|
||||
is_active: boolean;
|
||||
password?: string;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue