RBAC-05: web/rbac-admin next.js-frontend (rollen+gruppen-verwaltung, audit-verlauf) auf shl-01

2026-08-28 23:43:09 +02:00
parent bd80f0cb16
commit fbcc9db8f1
8 changed files with 476 additions and 0 deletions
@@ -0,0 +1,183 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { TextField, SelectField, useToast } from "@nexarch/shl";
+import {
+  ApiError,
+  Group,
+  Role,
+  addGroupMember,
+  createGroup,
+  fetchGroups,
+  removeGroupMember,
+  setGroupRole,
+} from "../../lib/api";
+
+export default function GroupsPage() {
+  const { push } = useToast();
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const reload = () =>
+    fetchGroups()
+      .then(setGroups)
+      .catch(() => setLoadError("Gruppen konnten nicht geladen werden. Sind Sie als Tenant-Admin angemeldet?"));
+
+  useEffect(() => {
+    reload();
+  }, []);
+
+  const [newGroupName, setNewGroupName] = useState("");
+  const [createError, setCreateError] = useState<string | null>(null);
+
+  async function onCreate(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setCreateError(null);
+    try {
+      await createGroup(newGroupName);
+      setNewGroupName("");
+      push("Gruppe angelegt.", "success");
+      await reload();
+    } catch (err) {
+      setCreateError(err instanceof ApiError ? err.message : "Gruppe konnte nicht angelegt werden.");
+    }
+  }
+
+  if (loadError) {
+    return (
+      <main style={{ maxWidth: 640, margin: "40px auto", padding: "0 16px" }}>
+        <p role="alert">{loadError}</p>
+      </main>
+    );
+  }
+
+  return (
+    <main style={{ maxWidth: 640, margin: "40px auto", padding: "0 16px" }}>
+      <h1>Gruppen &amp; Abteilungen</h1>
+
+      <section aria-labelledby="neue-gruppe-heading">
+        <h2 id="neue-gruppe-heading">Neue Gruppe anlegen</h2>
+        <form onSubmit={onCreate} noValidate>
+          <TextField
+            label="Gruppenname"
+            required
+            value={newGroupName}
+            onChange={(e) => setNewGroupName(e.target.value)}
+          />
+          {createError && (
+            <p role="alert" style={{ color: "var(--shl-color-danger)" }}>
+              {createError}
+            </p>
+          )}
+          <button type="submit">Anlegen</button>
+        </form>
+      </section>
+
+      <section aria-labelledby="gruppenliste-heading">
+        <h2 id="gruppenliste-heading">Bestehende Gruppen</h2>
+        {groups.length === 0 ? (
+          <p>Keine Gruppen vorhanden.</p>
+        ) : (
+          groups.map((g) => <GroupCard key={g.ID} group={g} onChanged={reload} onNotice={(t) => push(t, "success")} />)
+        )}
+      </section>
+    </main>
+  );
+}
+
+function GroupCard({
+  group,
+  onChanged,
+  onNotice,
+}: {
+  group: Group;
+  onChanged: () => void;
+  onNotice: (text: string) => void;
+}) {
+  const [role, setRole] = useState<Role>(group.Role || "user");
+  const [newMemberId, setNewMemberId] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSetRole() {
+    setError(null);
+    try {
+      await setGroupRole(group.ID, role);
+      onNotice("Gruppenrolle gesetzt.");
+      onChanged();
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "Gruppenrolle konnte nicht gesetzt werden.");
+    }
+  }
+
+  async function onAddMember(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    try {
+      await addGroupMember(group.ID, newMemberId);
+      setNewMemberId("");
+      onNotice("Mitglied hinzugefügt.");
+      onChanged();
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "Mitglied konnte nicht hinzugefügt werden.");
+    }
+  }
+
+  async function onRemoveMember(userId: string) {
+    setError(null);
+    try {
+      await removeGroupMember(group.ID, userId);
+      onNotice("Mitglied entfernt.");
+      onChanged();
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "Mitglied konnte nicht entfernt werden.");
+    }
+  }
+
+  return (
+    <div style={{ border: "1px solid var(--shl-color-border)", borderRadius: 8, padding: 16, marginBottom: 16 }}>
+      <h3>{group.Name}</h3>
+
+      <div style={{ display: "flex", alignItems: "flex-end", gap: 8 }}>
+        <SelectField label="Gruppenrolle" value={role} onChange={(e) => setRole(e.target.value as Role)}>
+          <option value="user">Benutzer</option>
+          <option value="tenant_admin">Tenant-Admin</option>
+        </SelectField>
+        <button type="button" onClick={onSetRole}>
+          Setzen
+        </button>
+      </div>
+
+      <h4>Mitglieder</h4>
+      {group.members.length === 0 ? (
+        <p>Keine Mitglieder.</p>
+      ) : (
+        <ul>
+          {group.members.map((userId) => (
+            <li key={userId}>
+              {userId}{" "}
+              <button type="button" onClick={() => onRemoveMember(userId)}>
+                Entfernen
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <form onSubmit={onAddMember} noValidate>
+        <TextField
+          label="Benutzer-ID hinzufügen"
+          required
+          value={newMemberId}
+          onChange={(e) => setNewMemberId(e.target.value)}
+        />
+        <button type="submit">Hinzufügen</button>
+      </form>
+
+      {error && (
+        <p role="alert" style={{ color: "var(--shl-color-danger)" }}>
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}