From dc13edf2f678cc33535fd6d9e05013a75251ac02 Mon Sep 17 00:00:00 2001
From: sysops <sysops@LenovoT14Gen5>
Date: Wed, 18 Mar 2026 01:12:07 +0100
Subject: [PATCH] fix(PROJ-25): QR-Code als PNG-Base64 anzeigen (statt
 fehlendem SVG)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backend gibt qr_code als base64-PNG zurück — Frontend war auf qr_code_svg
ausgerichtet. Fix: getTOTPSetup-Typ angepasst, img-Tag statt dangerouslySetInnerHTML.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/settings/page.tsx | 21 ++++++++++++---------
 src/lib/api.ts            |  2 +-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 068165a..c5a3a00 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -45,7 +45,7 @@ export default function SettingsPage() {
   // ── TOTP state ────────────────────────────────────────────────────────
   const [totpEnabled, setTotpEnabled] = useState(false);
   const [showSetup, setShowSetup] = useState(false);
-  const [qrSvg, setQrSvg] = useState("");
+  const [qrCode, setQrCode] = useState("");
   const [secret, setSecret] = useState("");
   const [totpCode, setTotpCode] = useState("");
   const [totpError, setTotpError] = useState("");
@@ -120,7 +120,7 @@ export default function SettingsPage() {
     setTotpLoading(true);
     try {
       const data = await getTOTPSetup();
-      setQrSvg(data.qr_code_svg);
+      setQrCode(data.qr_code || "");
       setSecret(data.secret);
       setShowSetup(true);
       setTotpCode("");
@@ -140,7 +140,7 @@ export default function SettingsPage() {
       setTotpEnabled(true);
       setShowSetup(false);
       setTotpSuccess("2FA wurde erfolgreich aktiviert.");
-      setQrSvg("");
+      setQrCode("");
       setSecret("");
       setTotpCode("");
     } catch (err) {
@@ -332,12 +332,15 @@ export default function SettingsPage() {
                   Scannen Sie den QR-Code mit Ihrer Authenticator-App und geben
                   Sie den angezeigten Code ein.
                 </p>
-                {qrSvg && (
-                  <div
-                    className="flex justify-center p-4 bg-white rounded-lg border w-fit mx-auto"
-                    dangerouslySetInnerHTML={{ __html: qrSvg }}
-                    aria-label="TOTP QR-Code"
-                  />
+                {qrCode && (
+                  <div className="flex justify-center p-4 bg-white rounded-lg border w-fit mx-auto">
+                    <img
+                      src={`data:image/png;base64,${qrCode}`}
+                      alt="TOTP QR-Code"
+                      width={200}
+                      height={200}
+                    />
+                  </div>
                 )}
                 {secret && (
                   <div className="space-y-1">
diff --git a/src/lib/api.ts b/src/lib/api.ts
index b96eedb..9bd59cf 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -823,7 +823,7 @@ export async function changeEmail(
 
 // ── TOTP / 2FA ────────────────────────────────────────────────────────────
 
-export async function getTOTPSetup(): Promise<{ secret: string; otpauth_url: string; qr_code_svg: string }> {
+export async function getTOTPSetup(): Promise<{ secret: string; otpauth_url: string; qr_code: string }> {
   return request<{ secret: string; otpauth_url: string; qr_code_svg: string }>("/api/auth/totp/setup");
 }