Phase C: die letzten sechs Typen — PDF, Bild, Feedback und Datei-Upload

Damit sind alle 15 QR-Typen gebaut. PDF und Bild brauchen eine hochgeladene Datei. Die liegt in der Datenbank, nicht auf der Platte: damit bleibt es bei einem Volumen, das gesichert werden muss — ein zweites wird beim Sichern zu leicht vergessen. Geprueft wird der Dateiinhalt, nicht die Endung; eine Textdatei namens harmlos.pdf kommt nicht durch. SVG ist bewusst nicht erlaubt, weil es Skripte enthalten darf und von derselben Adresse wie die Anwendung ausgeliefert wuerde. Ausgeliefert wird mit nosniff und einer CSP-Sandbox, damit auch ein PDF mit Skripten nichts anrichtet. Dateien haengen am Code: wird er geloescht, geht sie mit. Eine ausgetauschte oder nie gespeicherte Datei wird nach 24 Stunden weggeraeumt. Eine fremde Datei laesst sich nicht an den eigenen Code haengen — sonst koennte man sie einem anderen Code entziehen. Feedback sammelt Note und Kommentar, ohne Name, IP oder Geraetekennung. Die Auswertung mit Durchschnitt, Verteilung und Kommentaren ist aus der Codeliste erreichbar — ein Feedback-Code ohne Auswertung waere nur die halbe Sache.
2026-08-14 23:34:28 +02:00
parent fdf6452b35
commit e296b1e6c2
32 changed files with 1819 additions and 37 deletions
@@ -0,0 +1,110 @@
+"use client";
+
+import { Icon } from "@/components/icons";
+import { FileField } from "@/components/qr-forms/file-field";
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { Field, TextArea, TextInput } from "@/components/ui";
+import { formatBytes } from "@/lib/uploads.shared";
+
+export function PdfForm({ value, onChange, error, disabled }: QrFormProps) {
+  const fileId = typeof value.fileId === "string" ? value.fileId : "";
+  const filename = typeof value.filename === "string" ? value.filename : "";
+  const size = typeof value.size === "number" ? value.size : 0;
+  const title = typeof value.title === "string" ? value.title : "";
+  const description =
+    typeof value.description === "string" ? value.description : "";
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <span className="mb-1.5 block text-sm font-medium text-slate-700">
+          PDF-Datei
+        </span>
+
+        {fileId ? (
+          <div className="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3">
+            <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-red-50 text-red-600">
+              <Icon name="document" className="size-5" />
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium text-slate-900">
+                {filename || "Dokument"}
+              </p>
+              <p className="text-xs text-slate-500">
+                {size > 0 ? formatBytes(size) : "PDF"}
+              </p>
+            </div>
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() =>
+                onChange({ ...value, fileId: "", filename: "", size: 0 })
+              }
+              aria-label="Datei entfernen"
+              className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-red-600 disabled:opacity-40"
+            >
+              <Icon name="trash" className="size-4" />
+            </button>
+          </div>
+        ) : (
+          <FileField
+            kind="pdf"
+            label="PDF auswählen"
+            disabled={disabled}
+            onUploaded={(file) =>
+              onChange({
+                ...value,
+                fileId: file.fileId,
+                filename: file.filename,
+                size: file.size,
+              })
+            }
+          />
+        )}
+
+        {error ? (
+          <p role="alert" className="mt-2 text-sm text-red-600">
+            {error}
+          </p>
+        ) : (
+          <p className="mt-2 text-sm text-slate-500">
+            Die Datei liegt anschließend hier und ist über den Code erreichbar.
+            Sie lässt sich jederzeit austauschen, ohne den Code neu zu drucken.
+          </p>
+        )}
+      </div>
+
+      <Field
+        label="Titel (optional)"
+        htmlFor="pdf-title"
+        hint="Steht über dem Dokument. Ohne Angabe gilt der Dateiname."
+      >
+        <TextInput
+          id="pdf-title"
+          value={title}
+          disabled={disabled}
+          maxLength={80}
+          placeholder="Preisliste 2026"
+          onChange={(event) => onChange({ ...value, title: event.target.value })}
+        />
+      </Field>
+
+      <Field
+        label="Kurzer Text (optional)"
+        htmlFor="pdf-description"
+        hint="Eine Zeile zur Einordnung."
+      >
+        <TextArea
+          id="pdf-description"
+          rows={2}
+          value={description}
+          disabled={disabled}
+          maxLength={300}
+          onChange={(event) =>
+            onChange({ ...value, description: event.target.value })
+          }
+        />
+      </Field>
+    </div>
+  );
+}