feat(verzeichnis): LDAP-Abgleich, Zeitplan, CSV-Import und Log (#30)

src/components/verzeichnis/quelle-formular.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useActionState, useState } from "react";
+import { KeyRound, Save, Server, ShieldAlert, ShieldCheck } from "lucide-react";
+import { FELD, KAESTCHEN } from "@/lib/formular";
+import {
+  AD_ZUORDNUNG,
+  INTERVALL_HOECHSTENS,
+  INTERVALL_MINDESTENS,
+  ZUORDNUNGS_BESCHRIFTUNG,
+  ZUORDNUNGS_FELDER,
+} from "@/lib/verzeichnis";
+import {
+  quelleAnlegenAktion,
+  quelleBearbeitenAktion,
+  type AktionsErgebnis,
+} from "@/server/actions/verzeichnis";
+import type { QuellenSicht } from "@/server/services/verzeichnis";
+
+/**
+ * Anlegen und Bearbeiten einer Verzeichnisquelle (#016).
+ *
+ * Ein Formular für beides, weil es dieselben Felder sind — mit einem
+ * Unterschied, der zählt: **beim Bearbeiten bleibt das Passwortfeld leer, und
+ * leer heißt „unverändert“.** Die Anwendung gibt das gespeicherte Passwort
+ * nirgends heraus; würde ein leeres Feld als Löschung verstanden, nähme jede
+ * Namensänderung der Quelle ihre Anmeldung.
+ */
+export function QuelleFormular({ quelle }: { quelle?: QuellenSicht }) {
+  const bearbeiten = quelle !== undefined;
+  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(
+    bearbeiten ? quelleBearbeitenAktion : quelleAnlegenAktion,
+    {},
+  );
+  const [zertifikatOffen, setzeZertifikatOffen] = useState(false);
+  const [zuordnungOffen, setzeZuordnungOffen] = useState(false);
+  const [adresse, setzeAdresse] = useState(quelle?.url ?? "");
+  const klartext = adresse.trim().startsWith("ldap://");
+
+  return (
+    <form action={aktion} className="flex flex-col gap-4">
+      {bearbeiten ? <input type="hidden" name="id" value={quelle.id} /> : null}
+
+      <label className="flex flex-col gap-1.5 text-sm">
+        <span className="text-nebentext">Name</span>
+        <input
+          name="name"
+          defaultValue={quelle?.name ?? ""}
+          required
+          placeholder="Firmen-AD"
+          className={FELD}
+        />
+      </label>
+
+      {/*
+       * Die Erklärung steht **außerhalb** des `label` und hängt über
+       * `aria-describedby` am Feld. Im `label` wäre sie Teil des Feldnamens:
+       * ein Screenreader läse „Adresse Drei Formen: ldaps:// …“ als Bezeichnung
+       * des Eingabefelds, und kein Werkzeug fände das Feld noch über seinen
+       * Namen.
+       */}
+      <div className="flex flex-col gap-1.5 text-sm">
+        <label htmlFor="quelle-url" className="text-nebentext">
+          Adresse
+        </label>
+        <input
+          id="quelle-url"
+          name="url"
+          value={adresse}
+          onChange={(ereignis) => setzeAdresse(ereignis.target.value)}
+          required
+          aria-describedby="quelle-url-hinweis"
+          placeholder="ldaps://dc01.firma.local:636"
+          className={`${FELD} mono`}
+        />
+        <span id="quelle-url-hinweis" className="text-xs text-nebentext">
+          Drei Formen: <span className="mono">ldaps://</span> (verschlüsselt ab dem ersten Byte, die richtige
+          Wahl), <span className="mono">ldap+starttls://</span> (unverschlüsselt verbunden und dann
+          hochgestuft) und <span className="mono">ldap://</span>.
+        </span>
+        {klartext ? (
+          /*
+           * Die Warnung erscheint erst, wenn sie zutrifft — eine, die immer
+           * dasteht, liest nach dem dritten Mal niemand mehr.
+           */
+          <span role="status" className="flex items-start gap-2 text-xs text-faellig">
+            <ShieldAlert className="mt-0.5 size-3.5 shrink-0" strokeWidth={2} aria-hidden="true" />
+            <span>
+              Mit <span className="mono">ldap://</span> geht auch das Bind-Passwort im Klartext über das Netz.
+              Für ein Dienstkonto im Active Directory ist das keine gute Idee.
+            </span>
+          </span>
+        ) : null}
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="text-nebentext">Anmelde-DN</span>
+          <input
+            name="bindDn"
+            defaultValue={quelle?.bindDn ?? ""}
+            required
+            placeholder="CN=laufzettel,OU=Dienstkonten,DC=firma,DC=local"
+            className={`${FELD} mono`}
+          />
+        </label>
+        <div className="flex flex-col gap-1.5 text-sm">
+          <label htmlFor="quelle-passwort" className="flex items-center gap-2 text-nebentext">
+            <KeyRound className="size-4" strokeWidth={1.75} aria-hidden="true" />
+            Passwort
+          </label>
+          <input
+            id="quelle-passwort"
+            name="bindPasswort"
+            type="password"
+            autoComplete="new-password"
+            aria-describedby="quelle-passwort-hinweis"
+            placeholder={bearbeiten ? "unverändert lassen" : ""}
+            required={!bearbeiten}
+            className={FELD}
+          />
+          <span id="quelle-passwort-hinweis" className="text-xs text-nebentext">
+            {bearbeiten
+              ? "Leer lassen behält das gespeicherte Passwort."
+              : "Wird verschlüsselt gespeichert und nie wieder angezeigt."}
+          </span>
+        </div>
+      </div>
+
+      <label className="flex flex-col gap-1.5 text-sm">
+        <span className="text-nebentext">Basis-DN</span>
+        <input
+          name="basisDn"
+          defaultValue={quelle?.basisDn ?? ""}
+          required
+          placeholder="OU=Benutzer,DC=firma,DC=local"
+          className={`${FELD} mono`}
+        />
+      </label>
+
+      <div className="flex flex-col gap-1.5 text-sm">
+        <label htmlFor="quelle-filter" className="text-nebentext">
+          Filter (optional)
+        </label>
+        <input
+          id="quelle-filter"
+          name="filter"
+          defaultValue={quelle?.filter ?? ""}
+          aria-describedby="quelle-filter-hinweis"
+          className={`${FELD} mono`}
+        />
+        <span id="quelle-filter-hinweis" className="text-xs text-nebentext">
+          Leer lassen nimmt den Standard: aktive Personenkonten. Er schließt deaktivierte Konten aus — wer aus
+          dem Ergebnis verschwindet, wird hier deaktiviert und nie gelöscht.
+        </span>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="flex flex-col gap-1.5 text-sm">
+          <span className="text-nebentext">Abgleich alle … Minuten</span>
+          <input
+            name="abgleichIntervallMinuten"
+            type="number"
+            min={INTERVALL_MINDESTENS}
+            max={INTERVALL_HOECHSTENS}
+            defaultValue={quelle?.abgleichIntervallMinuten ?? 60}
+            className={FELD}
+          />
+        </label>
+        <label className="flex min-h-11 items-center gap-2 self-end text-sm text-nebentext md:min-h-10">
+          <input
+            type="checkbox"
+            name="aktiv"
+            value="1"
+            defaultChecked={quelle?.aktiv ?? false}
+            className={KAESTCHEN}
+          />
+          Nach Zeitplan abgleichen
+        </label>
+      </div>
+
+      {/*
+       * Die Attributzuordnung ist einklappbar, aber vollständig da. Vorher stand
+       * sie nur in der Datenbank: der Kommentar im Code versprach „wer ein
+       * OpenLDAP anbindet, ändert einzelne Zeilen“, und genau das ging über die
+       * Oberfläche nicht (Reviewbefund zu #016).
+       */}
+      <details open={zuordnungOffen} onToggle={(e) => setzeZuordnungOffen(e.currentTarget.open)}>
+        <summary className="flex min-h-11 cursor-pointer list-none items-center text-sm text-nebentext hover:text-text md:min-h-10">
+          Attributzuordnung anpassen
+        </summary>
+        <p className="mt-2 max-w-prose text-xs text-nebentext">
+          Die Vorgaben sind die Attributnamen eines Active Directory. Ein OpenLDAP heißt an einigen Stellen
+          anders — dort ist die dauerhafte Kennung etwa <span className="mono">entryUUID</span>.
+        </p>
+        <div className="mt-3 grid gap-3 sm:grid-cols-2">
+          {ZUORDNUNGS_FELDER.map((feld) => (
+            <label key={feld} className="flex flex-col gap-1.5 text-sm">
+              <span className="text-nebentext">{ZUORDNUNGS_BESCHRIFTUNG[feld]}</span>
+              <input
+                name={`attr.${feld}`}
+                defaultValue={quelle?.attributZuordnung[feld] ?? AD_ZUORDNUNG[feld]}
+                placeholder={AD_ZUORDNUNG[feld]}
+                className={`${FELD} mono`}
+              />
+            </label>
+          ))}
+        </div>
+        <p className="mt-2 max-w-prose text-xs text-nebentext">
+          Die Kennung ist das eine Feld, das später nicht mehr geändert werden sollte: an ihr erkennt der
+          Abgleich eine Person wieder. Ein anderer Wert legt beim nächsten Lauf alle neu an.
+        </p>
+      </details>
+
+      <details open={zertifikatOffen} onToggle={(e) => setzeZertifikatOffen(e.currentTarget.open)}>
+        <summary className="flex min-h-11 cursor-pointer list-none items-center text-sm text-nebentext hover:text-text md:min-h-10">
+          Eigenes CA-Zertifikat hinterlegen
+        </summary>
+        {/*
+         * Der Zertifikatstext selbst kommt nicht zurück in die Oberfläche — nur
+         * die Auskunft, dass eines hinterlegt ist. Ohne diese Zeile sah das
+         * leere Feld beim Bearbeiten aus wie „kein Zertifikat“, und der Hinweis
+         * darunter behauptete es auch (Reviewbefund zu #016).
+         */}
+        {quelle?.caZertifikatVorhanden ? (
+          <p className="mt-2 flex items-start gap-2 text-xs text-erledigt">
+            <ShieldCheck className="mt-0.5 size-3.5 shrink-0" strokeWidth={2} aria-hidden="true" />
+            <span>
+              Ein CA-Zertifikat ist hinterlegt. Das Feld unten bleibt leer — Text eintragen ersetzt es, leer
+              lassen behält es.
+            </span>
+          </p>
+        ) : null}
+        <label className="mt-2 flex flex-col gap-1.5 text-sm">
+          <span className="text-nebentext">PEM</span>
+          <textarea
+            name="caZertifikatPem"
+            rows={4}
+            defaultValue=""
+            placeholder="-----BEGIN CERTIFICATE-----"
+            className={`${FELD} mono py-2`}
+          />
+          <span className="text-xs text-nebentext">
+            Nur nötig, wenn der Domänencontroller ein Zertifikat aus einer eigenen CA trägt.
+            {quelle?.caZertifikatVorhanden
+              ? " Ohne hinterlegtes Zertifikat gelten die Wurzelzertifikate des Systems."
+              : " Ohne Eintrag gelten die Wurzelzertifikate des Systems."}
+          </span>
+        </label>
+        {quelle?.caZertifikatVorhanden ? (
+          <label className="mt-2 flex min-h-11 items-center gap-2 text-sm text-nebentext md:min-h-10">
+            <input type="checkbox" name="caZertifikatEntfernen" value="1" className={KAESTCHEN} />
+            Hinterlegtes Zertifikat entfernen
+          </label>
+        ) : null}
+      </details>
+
+      {ergebnis.fehler ? (
+        <p role="alert" className="max-w-prose text-sm text-fehler">
+          {ergebnis.fehler}
+        </p>
+      ) : null}
+      {ergebnis.erfolg ? (
+        <p role="status" className="max-w-prose text-sm text-erledigt">
+          {ergebnis.erfolg}
+        </p>
+      ) : null}
+
+      <button
+        type="submit"
+        disabled={laeuft}
+        className="flex min-h-11 w-fit items-center gap-2 rounded-pille bg-akzent px-5 text-sm font-semibold text-auf-akzent disabled:pointer-events-none disabled:opacity-40 md:min-h-10"
+      >
+        {bearbeiten ? (
+          <Save className="size-[18px]" strokeWidth={2} aria-hidden="true" />
+        ) : (
+          <Server className="size-[18px]" strokeWidth={2} aria-hidden="true" />
+        )}
+        {laeuft ? "Wird gespeichert …" : bearbeiten ? "Speichern" : "Quelle anlegen"}
+      </button>
+    </form>
+  );
+}