Sprechende Kurz-Links: selbst vergeben, aendern, frueher gueltig halten

Schliesst Issue #1. Der Wunsch betraf den Kurz-Link, nicht das Ziel: Er soll sich von Anfang an bestimmen und spaeter aendern lassen. Beim Anlegen gibt es dafuer ein Feld, im Bearbeiten-Dialog laesst er sich aendern. Erlaubt sind Kleinbuchstaben, Ziffern, Bindestriche und „/" als Trenner — damit sind Adressen wie kunde-a/sommer moeglich. Umlaute bleiben draussen, weil sie in Adressen unleserlich kodiert werden; Gross- und Kleinschreibung ist beim Aufrufen egal. Beim Aendern bleibt die vorherige Adresse gueltig. Das ist der Kern: Auf gedruckten Codes steht die alte, und genau deren Bestand ist der Sinn eines dynamischen Codes. Frueher vergebene Adressen stehen im Dialog und lassen sich einzeln freigeben — fuer den Tippfehler, mit dem noch nichts gedruckt ist. Solange eine Adresse gehalten wird, kann sie kein anderer Code uebernehmen; sonst liessen sich fremde gedruckte Codes umlenken. Vergeben und Aendern ist standardmaessig Administratoren vorbehalten. Ein Kurz-Link ist eine oeffentliche Adresse, und wer ihn aendert, kann Aushaenge entwerten. Unter Verwaltung -> Einstellungen laesst sich das fuer Bearbeiter freigeben; ohne das Recht erscheint das Feld gar nicht, Codes anlegen und deren Ziel aendern geht weiterhin. Eigene Aktion in der Policy statt Teil von codes:update, weil sie mehr wiegt. Technisch: /r und /s sind Sammelrouten, weil ein Kurz-Link „/" enthalten darf. Die Eindeutigkeit gilt zusaetzlich auf der kleingeschriebenen Form; die Migration bricht ab, falls der Bestand das nicht zulaesst, statt still Daten zu verlieren. Der bestehende exakte Index bleibt — er traegt den haeufigen Fall, den gescannten Code.
2026-08-17 10:41:57 +02:00
parent c38b27ca85
commit 46e7eb0b59
24 changed files with 917 additions and 49 deletions
@@ -19,6 +19,7 @@ import {
 import { ApiError, apiJson } from "@/lib/api-client";
 import type { QrCodeDto } from "@/lib/dto";
 import { qrTypes } from "@/lib/qr/registry";
+import { describeSlugProblem } from "@/lib/slug";
 import type { QrFormData } from "@/lib/qr/type-module";

 const dateFormat = new Intl.DateTimeFormat("de-DE", {
@@ -65,11 +66,19 @@ function displayName(code: QrCodeDto): string {
  return code.label?.trim() || code.summary;
 }

-export function CodesList() {
+export function CodesList({
+  /** Darf der Kurz-Link geändert werden? Sonst erscheinen die Felder nicht. */
+  maySetSlug = true,
+}: {
+  maySetSlug?: boolean;
+}) {
  const [codes, setCodes] = useState<QrCodeDto[] | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);

  const [editing, setEditing] = useState<QrCodeDto | null>(null);
+  const [editSlug, setEditSlug] = useState("");
+  /** Welche früheren Adressen gelten sollen — was hier fehlt, wird freigegeben. */
+  const [editAliases, setEditAliases] = useState<string[]>([]);
  const [editData, setEditData] = useState<QrFormData>({});
  const [editLabel, setEditLabel] = useState("");
  const [editError, setEditError] = useState<string | null>(null);
@@ -124,9 +133,19 @@ export function CodesList() {
    setEditing(code);
    setEditData(code.data);
    setEditLabel(code.label ?? "");
+    setEditSlug(code.slug);
+    setEditAliases(code.aliases);
    setEditError(null);
  };

+  const slugProblem =
+    editSlug.trim().length > 0 ? describeSlugProblem(editSlug) : null;
+  const slugGeaendert =
+    editing !== null && editSlug.trim().toLowerCase() !== editing.slug.toLowerCase();
+  const freigegeben = editing
+    ? editing.aliases.filter((alias) => !editAliases.includes(alias))
+    : [];
+
  const EditForm = editing ? qrForms[editing.type] : undefined;
  const editValidation = useMemo(
    () => (editing ? qrTypes[editing.type].validate(editData) : null),
@@ -139,12 +158,23 @@ export function CodesList() {
      setEditError(editValidation.message);
      return;
    }
+    if (slugProblem) {
+      setEditError(slugProblem);
+      return;
+    }
    setSaving(true);
    setEditError(null);
    try {
      await apiJson<{ code: QrCodeDto }>(`/api/codes/${editing.id}`, {
        method: "PATCH",
-        json: { data: editValidation.data, label: editLabel.trim() || null },
+        json: {
+          data: editValidation.data,
+          label: editLabel.trim() || null,
+          // Nur mitschicken, wenn es überhaupt bearbeitet werden durfte.
+          ...(maySetSlug
+            ? { slug: editSlug.trim(), aliases: editAliases }
+            : {}),
+        },
      });
      setEditing(null);
      await load();
@@ -539,8 +569,8 @@ export function CodesList() {
                      <button
                        type="button"
                        onClick={() => openEdit(code)}
-                        title="Ziel bearbeiten"
-                        aria-label={`Ziel von ${displayName(code)} bearbeiten`}
+                        title="Bearbeiten"
+                        aria-label={`${displayName(code)} bearbeiten`}
                        className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900"
                      >
                        <Icon name="pencil" className="size-4" />
@@ -683,7 +713,7 @@ export function CodesList() {
                  onClick={() => openEdit(code)}
                >
                  <Icon name="pencil" className="size-3.5" />
-                  Ziel bearbeiten
+                  Bearbeiten
                </Button>
                <a
                  href={`/api/codes/${code.id}/qr?format=png&download=1`}
@@ -721,7 +751,7 @@ export function CodesList() {
      {/* ------------------------------------------------------ Bearbeiten */}
      <Modal
        open={editing !== null}
-        title="Ziel bearbeiten"
+        title="Code bearbeiten"
        onClose={() => setEditing(null)}
        footer={
          <>
@@ -742,12 +772,8 @@ export function CodesList() {
        {editing ? (
          <div className="space-y-4">
            <p className="text-sm text-slate-600">
-              Der gedruckte QR-Code bleibt unverändert gültig — er zeigt weiterhin
-              auf{" "}
-              <code className="font-mono text-xs break-all">
-                {editing.shortUrl}
-              </code>
-              .
+              Das Ziel lässt sich jederzeit ändern — der gedruckte QR-Code bleibt
+              gültig, solange der Kurz-Link derselbe ist.
            </p>

            {EditForm ? (
@@ -766,6 +792,95 @@ export function CodesList() {
              </Notice>
            )}

+            {maySetSlug ? (
+            <>
+            <Field
+              label="Kurz-Link"
+              htmlFor="edit-slug"
+              hint="Kleinbuchstaben, Ziffern, Bindestriche und „/“ als Trenner."
+            >
+              <TextInput
+                id="edit-slug"
+                value={editSlug}
+                maxLength={100}
+                spellCheck={false}
+                invalid={Boolean(slugProblem)}
+                disabled={saving}
+                onChange={(event) => {
+                  setEditSlug(event.target.value);
+                  setEditError(null);
+                }}
+              />
+            </Field>
+
+            {slugProblem ? (
+              <Notice tone="error">{slugProblem}</Notice>
+            ) : slugGeaendert ? (
+              <Notice tone="info">
+                Der bisherige Kurz-Link{" "}
+                <code className="font-mono text-xs break-all">{editing.slug}</code>{" "}
+                bleibt gültig — schon gedruckte Codes funktionieren weiter. Unten
+                lässt er sich später freigeben.
+              </Notice>
+            ) : null}
+
+            {editing.aliases.length > 0 ? (
+              <div>
+                <span className="mb-1.5 block text-sm font-medium text-slate-700">
+                  Frühere Kurz-Links
+                </span>
+                <p className="mb-2 text-sm text-slate-500">
+                  Führen weiterhin auf diesen Code. Freigeben nur, wenn damit
+                  nichts gedruckt ist — die Adresse ist danach sofort tot.
+                </p>
+                <ul className="space-y-1.5">
+                  {editing.aliases.map((alias) => {
+                    const behalten = editAliases.includes(alias);
+                    return (
+                      <li
+                        key={alias}
+                        className="flex items-center justify-between gap-3 rounded-lg border border-slate-200 px-3 py-2"
+                      >
+                        <code
+                          className={
+                            behalten
+                              ? "min-w-0 font-mono text-xs break-all text-slate-700"
+                              : "min-w-0 font-mono text-xs break-all text-slate-400 line-through"
+                          }
+                        >
+                          /r/{alias}
+                        </code>
+                        <Button
+                          type="button"
+                          variant={behalten ? "ghost" : "secondary"}
+                          size="sm"
+                          disabled={saving}
+                          onClick={() =>
+                            setEditAliases((alt) =>
+                              behalten
+                                ? alt.filter((eintrag) => eintrag !== alias)
+                                : [...alt, alias],
+                            )
+                          }
+                        >
+                          {behalten ? "Freigeben" : "Doch behalten"}
+                        </Button>
+                      </li>
+                    );
+                  })}
+                </ul>
+                {freigegeben.length > 0 ? (
+                  <Notice tone="warning">
+                    {freigegeben.length === 1
+                      ? "Eine frühere Adresse wird beim Speichern freigegeben und funktioniert danach nicht mehr."
+                      : `${freigegeben.length} frühere Adressen werden beim Speichern freigegeben und funktionieren danach nicht mehr.`}
+                  </Notice>
+                ) : null}
+              </div>
+            ) : null}
+            </>
+            ) : null}
+
            <Field label="Name (optional)" htmlFor="edit-label">
              <TextInput
                id="edit-label"
@@ -22,6 +22,7 @@ import type { QrCodeDto } from "@/lib/dto";
 import { defaultDesign, designSchema, type QrDesign } from "@/lib/qr/design";
 import { qrTypes } from "@/lib/qr/registry";
 import type { QrFormData, QrTypeId } from "@/lib/qr/type-module";
+import { describeSlugProblem } from "@/lib/slug";

 type PreviewState = { dataUrl: string; content: string };

@@ -42,7 +43,14 @@ function sameData(a: unknown, b: unknown): boolean {
  return stableStringify(a) === stableStringify(b);
 }

-export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
+export function QrGenerator({
+  typeId,
+  /** Darf der Kurz-Link selbst vergeben werden? Sonst erscheint das Feld nicht. */
+  maySetSlug = true,
+}: {
+  typeId: QrTypeId;
+  maySetSlug?: boolean;
+}) {
  const qrType = qrTypes[typeId];
  const Form = qrForms[typeId];

@@ -51,6 +59,8 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
  // Typen ohne statische Variante — etwa der App-Link — starten dynamisch.
  const [isDynamic, setIsDynamic] = useState(!qrType.supportsStatic);
  const [label, setLabel] = useState("");
+  /** Selbst gewählter Kurz-Link. Leer bedeutet: einen erzeugen lassen. */
+  const [wunschSlug, setWunschSlug] = useState("");

  const [saved, setSaved] = useState<QrCodeDto | null>(null);
  const [saving, setSaving] = useState(false);
@@ -164,6 +174,11 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {

  /* ----------------------------------------------- Dynamischen Code speichern */

+  // Sofortige Rückmeldung, damit man nicht erst beim Speichern erfährt, dass
+  // ein Zeichen nicht erlaubt ist.
+  const slugProblem =
+    wunschSlug.trim().length > 0 ? describeSlugProblem(wunschSlug) : null;
+
  const hasUnsavedChanges =
    saved !== null &&
    (!sameData(saved.data, validation.ok ? validation.data : data) ||
@@ -171,7 +186,7 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
      (saved.label ?? "") !== label.trim());

  const handleSave = useCallback(async () => {
-    if (!validation.ok || !designValid) return;
+    if (!validation.ok || !designValid || slugProblem) return;
    setSaving(true);
    setSaveError(null);
    try {
@@ -180,6 +195,7 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
        data: validation.data,
        design,
        label: label.trim() || undefined,
+        slug: wunschSlug.trim() || undefined,
      };
      const result = saved
        ? await apiJson<{ code: QrCodeDto }>(`/api/codes/${saved.id}`, {
@@ -200,7 +216,7 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
    } finally {
      setSaving(false);
    }
-  }, [validation, designValid, typeId, design, label, saved]);
+  }, [validation, designValid, slugProblem, typeId, design, label, wunschSlug, saved]);

  const handleCopy = useCallback(async () => {
    if (!saved) return;
@@ -347,6 +363,27 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
                  />
                </Field>

+                {/* Nur beim Anlegen: Danach steht der Kurz-Link im
+                    Bearbeiten-Dialog, wo auch die früheren Adressen liegen. */}
+                {saved || !maySetSlug ? null : (
+                  <Field
+                    label="Kurz-Link (optional)"
+                    htmlFor="code-slug"
+                    error={slugProblem}
+                    hint="Leer lassen, dann wird einer erzeugt. Kleinbuchstaben, Ziffern, Bindestriche und „/“ als Trenner."
+                  >
+                    <TextInput
+                      id="code-slug"
+                      value={wunschSlug}
+                      maxLength={100}
+                      spellCheck={false}
+                      invalid={Boolean(slugProblem)}
+                      placeholder="z. B. sommeraktion oder kunde-a/flyer"
+                      onChange={(event) => setWunschSlug(event.target.value)}
+                    />
+                  </Field>
+                )}
+
                {saved ? (
                  <div className="space-y-3">
                    <Notice tone="success">
@@ -408,7 +445,7 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
                    <Button
                      type="button"
                      onClick={handleSave}
-                      disabled={saving || !ready}
+                      disabled={saving || !ready || Boolean(slugProblem)}
                    >
                      {saving ? "Speichert …" : "Dynamischen Code speichern"}
                    </Button>
@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+
+import { Card, CardTitle, Checkbox, Notice } from "@/components/ui";
+
+export type SettingsDto = {
+  editorsMaySetSlug: boolean;
+};
+
+export function SettingsAdmin({ initial }: { initial: SettingsDto }) {
+  const [wert, setWert] = useState(initial);
+  const [fehler, setFehler] = useState<string | null>(null);
+  const [hinweis, setHinweis] = useState<string | null>(null);
+  const [laeuft, setLaeuft] = useState(false);
+
+  // Bewusst ohne Speichern-Knopf: Ein einzelner Schalter, der erst nach einem
+  // zweiten Klick wirkt, ist eine Stolperfalle.
+  const umschalten = async (aktiv: boolean) => {
+    setLaeuft(true);
+    setFehler(null);
+    setHinweis(null);
+    const vorher = wert;
+    setWert({ ...wert, editorsMaySetSlug: aktiv });
+    try {
+      const antwort = await fetch("/api/admin/settings", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ editorsMaySetSlug: aktiv }),
+      });
+      const rumpf = await antwort.json().catch(() => null);
+      if (!antwort.ok) {
+        throw new Error(rumpf?.error ?? "Speichern nicht möglich.");
+      }
+      setWert(rumpf.settings);
+      setHinweis(
+        aktiv
+          ? "Bearbeiter dürfen Kurz-Links jetzt selbst vergeben und ändern."
+          : "Kurz-Links vergeben und ändern dürfen jetzt nur noch Administratoren.",
+      );
+    } catch (error) {
+      setWert(vorher);
+      setFehler(error instanceof Error ? error.message : String(error));
+    } finally {
+      setLaeuft(false);
+    }
+  };
+
+  return (
+    <div className="space-y-5">
+      {fehler ? <Notice tone="error">{fehler}</Notice> : null}
+      {hinweis ? <Notice tone="success">{hinweis}</Notice> : null}
+
+      <Card>
+        <CardTitle hint="Gilt für alle Gruppen dieser Installation.">
+          Kurz-Links
+        </CardTitle>
+
+        <Checkbox
+          id="editors-may-set-slug"
+          label="Bearbeiter dürfen den Kurz-Link selbst vergeben und ändern"
+          hint="Aus: Nur Administratoren. Bearbeiter legen Codes an, der Kurz-Link wird dabei erzeugt."
+          checked={wert.editorsMaySetSlug}
+          disabled={laeuft}
+          onChange={(event) => void umschalten(event.target.checked)}
+        />
+
+        <div className="mt-4 space-y-2 text-sm text-slate-600">
+          <p>
+            Ein Kurz-Link ist eine öffentliche Adresse und steht auf gedruckten
+            Codes. Wer ihn ändert, kann damit Aushänge und Flyer entwerten —
+            die vorherige Adresse bleibt zwar gültig, lässt sich aber auch
+            wieder freigeben.
+          </p>
+          <p>
+            Deshalb ist das standardmäßig Administratoren vorbehalten. In einem
+            kleinen Team, in dem alle wissen, was ein Kurz-Link bedeutet, ist
+            die Freigabe unbedenklich.
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+}