feat(widerruf): Widerruf und Massenwiderruf mit Dry-Run (#024)

Ein Schlüssel soll nach Projektende mit einem Klick von allen Hosts verschwinden – aber nie als „widerrufen“ gelten, solange er irgendwo noch liegt. Deshalb ein Zwischenzustand (widerrufEingeleitetAm): Verwendungen werden zum Entfernen vorgemerkt, der bestehende Dry-Run mit Hash-Sperre zeigt und schreibt die Änderungen, und erst wenn keine Verwendung mehr offen ist, setzt der Abschluss WIDERRUFEN (bzw. ROTIERT für #023). Scheitert ein Host, bleibt der Schlüssel im Zwischenzustand und die Seite nennt die offenen Ziele. Zielkonten lassen sich optional mit entfernen, aber erst nach den Schlüsseln und nie, wenn ein anderer aktiver Schlüssel sie noch nutzt. Massenwiderruf (Admin, frische Bestätigung) nutzt einen gemeinsamen Dry-Run und protokolliert je Schlüssel. Abgelaufene Schlüssel erscheinen im Filter „abgelaufen“ und bieten den Widerruf an – entfernt wird nie automatisch. Migration 20261012130000_widerruf_eingeleitet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 13:14:01 +02:00
parent 2dad8e5631
commit c6361ff3c6
26 changed files with 2334 additions and 91 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+import { Ban, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/Button";
+import type { WiderrufUebersicht } from "@/server/queries/widerruf";
+import { WiderrufFormular } from "./WiderrufFormular";
+
+/**
+ * „Widerrufen“ auf der Schluesselseite (#024): Gefahr-Knopf mit Bestaetigungsdialog. Offen/zu
+ * als Zustand wie im AusrollDialog – kein Render-Pfad liest die Ref.
+ */
+export function WiderrufKnopf({
+  uebersicht,
+  ruecksprung,
+  beschriftung = "Widerrufen",
+}: {
+  uebersicht: WiderrufUebersicht;
+  ruecksprung: string;
+  beschriftung?: string;
+}) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [offen, setOffen] = useState(false);
+  const name = uebersicht.schluessel[0]?.name ?? "";
+
+  useEffect(() => {
+    const element = dialog.current;
+    if (!element) return;
+    if (offen && !element.open) element.showModal();
+    if (!offen && element.open) element.close();
+  }, [offen]);
+
+  const schliessen = () => setOffen(false);
+  return (
+    <>
+      <Button variante="gefahr" icon={<Ban className="size-4" />} onClick={() => setOffen(true)}>
+        {beschriftung}
+      </Button>
+      <dialog
+        ref={dialog}
+        aria-labelledby="widerruf-titel"
+        onClose={schliessen}
+        className="border-border-strong bg-surface text-text rounded-karte m-auto max-h-[calc(100dvh-32px)] w-[calc(100%-32px)] max-w-2xl overflow-y-auto border p-5 backdrop:bg-black/70 sm:p-6"
+      >
+        <div className="mb-4 flex items-start justify-between gap-3">
+          <h2 id="widerruf-titel" className="font-display text-[18px] font-semibold break-words">
+            „{name}“ widerrufen?
+          </h2>
+          <button
+            type="button"
+            onClick={schliessen}
+            aria-label="Schließen"
+            className="text-muted hover:text-text hover:bg-raised rounded-feld -mt-2 -mr-2 flex size-11 shrink-0 items-center justify-center"
+          >
+            <X className="size-5" aria-hidden />
+          </button>
+        </div>
+        {offen && (
+          <WiderrufFormular uebersicht={uebersicht} ruecksprung={ruecksprung} abbrechen={schliessen} />
+        )}
+      </dialog>
+    </>
+  );
+}