PDF-Viewer-Modal fuer Bankkarte-/Ausweis-Dokument

Neue Komponente PdfViewerModal (Modal + iframe auf viewUrl(documentPath), inkl. Neuer-Tab/Download-Links). Buttons: - Vertragsansicht (ContractDetail): im Card-Header von Bankkarte/Ausweis - Vertrag bearbeiten (ContractForm): neben dem Label Bankkarte/Ausweis Button erscheint NUR wenn ein documentPath hinterlegt/gewaehlt ist. Nutzt den bestehenden /api/files/download-Endpoint (Per-File-Ownership-Check) - kein neuer Zugriffspfad. iframe (nicht embed/object wegen object-src 'none'); same-origin via CSP default-src 'self' erlaubt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-08-13 13:15:57 +02:00
parent b2b1cb3387
commit 06d51cf680
4 changed files with 141 additions and 3 deletions
@@ -0,0 +1,55 @@
+import Modal from './Modal';
+import { viewUrl, fileUrl } from '../../utils/fileUrl';
+import { ExternalLink, Download } from 'lucide-react';
+
+interface PdfViewerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  /** Relativer Upload-Pfad des Dokuments (documentPath). */
+  path: string | null | undefined;
+}
+
+/**
+ * Zeigt ein hochgeladenes PDF (Bankkarte/Ausweis) inline in einem Modal.
+ *
+ * Die Datei wird über `viewUrl(path)` geladen → `/api/files/download` mit
+ * `disposition=inline` und Token als Query-Param (iframe/GET, kein
+ * Authorization-Header möglich). Der Backend-Controller macht weiterhin den
+ * Per-File-Ownership-Check – hier wird kein neuer Zugriffspfad geöffnet.
+ */
+export default function PdfViewerModal({ isOpen, onClose, title, path }: PdfViewerModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} size="xl">
+      {path ? (
+        <div className="space-y-3">
+          <div className="flex justify-end gap-4 text-sm">
+            <a
+              href={viewUrl(path)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800"
+            >
+              <ExternalLink className="w-4 h-4" /> In neuem Tab öffnen
+            </a>
+            <a
+              href={fileUrl(path)}
+              className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800"
+            >
+              <Download className="w-4 h-4" /> Herunterladen
+            </a>
+          </div>
+          <iframe
+            src={viewUrl(path)}
+            title={title}
+            className="w-full h-[75vh] border border-gray-200 rounded bg-gray-50"
+          />
+        </div>
+      ) : (
+        <p className="text-sm text-gray-500">Kein Dokument hinterlegt.</p>
+      )}
+    </Modal>
+  );
+}