feat(frontend): Login + Benutzerverwaltung (Modul 1)

/login: Formular gegen AuthProvider (Access-Token im Memory, Refresh
per httpOnly-Cookie), Fehlermeldung bei falschen Zugangsdaten.

(app)/layout.tsx: geschuetztes Layout, leitet ohne Session zu /login um,
Header mit Nutzer-E-Mail + Abmelden. settings/layout.tsx: zusaetzliches
Admin-Gate fuer /settings/users.

/settings/users: Liste, Anlegen-Dialog (shadcn/Base UI Dialog+Select),
Deaktivieren - alles ueber TanStack Query gegen die Users-API.

proxy.ts (Next 16 Nachfolger von middleware.ts): optimistische
Cookie-Praesenz-Pruefung fuer /login und /settings/*, echte
Autorisierung bleibt serverseitig (RolesGuard).

Backend-Fixes waehrend Browser-Verifikation gefunden und behoben:
- CORS fehlte komplett (app.enableCors, FRONTEND_ORIGIN) - jeder
  Cross-Origin-Request von :3000 nach :3001 wurde geblockt.
- React-StrictMode-Doppel-Effect liess zwei parallele Refresh-Aufrufe
  laufen; da Refresh-Tokens rotierend/einmalig sind, gewann einer und
  der andere bekam 401 -> Nutzer flog nach jedem Reload aus der Session.
  Fix: AbortController im Session-Restore-Effect.
- Manifest verwies auf nicht existente PNG-Icons (404); durch
  public/icon.svg ersetzt.

7 Vitest-Tests (Login-Formular, Users-Liste, JWT-Decode), Lint,
Typecheck und Build gruen. Kompletter Flow (Login, Reload-Persistenz,
Benutzer anlegen/deaktivieren, Abmelden, Redirect ohne Session) live
im Browser gegen den echten Server verifiziert.
This commit is contained in:
Nick Szaunig committed 2026-08-21 08:45:37 +02:00
1 parent 370102387f
commit 029484f9d5
23 files changed
+758 -10

No files matched your search

+17
View File
@@ -0,0 +1,17 @@
import { apiFetch } from "@/lib/auth/api-client";
import { CreateUserInput, User } from "./types";
export function fetchUsers(): Promise<User[]> {
return apiFetch<User[]>("/users");
}
export function createUser(input: CreateUserInput): Promise<User> {
return apiFetch<User>("/users", {
method: "POST",
body: JSON.stringify(input),
});
}
export function deactivateUser(id: string): Promise<User> {
return apiFetch<User>(`/users/${id}/deactivate`, { method: "POST" });
}
+18
View File
@@ -0,0 +1,18 @@
export type Role = "ADMIN" | "BEEKEEPER" | "STAFF" | "READONLY" | "API_CLIENT";
export interface User {
id: string;
email: string;
name: string;
role: Role;
isActive: boolean;
createdAt: string;
deactivatedAt: string | null;
}
export interface CreateUserInput {
email: string;
password: string;
name: string;
role: Role;
}