scripte/archivmail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(PROJ-25): QR-Code als PNG-Base64 anzeigen (statt fehlendem SVG)

Browse Source 
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>
This commit is contained in:
sysops
2026-03-18 01:12:07 +01:00
parent 0fbb1924bb
commit dc13edf2f6
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/settings/page.tsx
+12 -9
View File
@@ -45,7 +45,7 @@ export default function SettingsPage() {
// ── TOTP state ──────────────────────────────────────────────────────── // ── TOTP state ────────────────────────────────────────────────────────
const [totpEnabled, setTotpEnabled] = useState(false); const [totpEnabled, setTotpEnabled] = useState(false);
const [showSetup, setShowSetup] = useState(false); const [showSetup, setShowSetup] = useState(false);
const [qrSvg, setQrSvg] = useState(""); const [qrCode, setQrCode] = useState("");
const [secret, setSecret] = useState(""); const [secret, setSecret] = useState("");
const [totpCode, setTotpCode] = useState(""); const [totpCode, setTotpCode] = useState("");
const [totpError, setTotpError] = useState(""); const [totpError, setTotpError] = useState("");
@@ -120,7 +120,7 @@ export default function SettingsPage() {
setTotpLoading(true); setTotpLoading(true);
try { try {
const data = await getTOTPSetup(); const data = await getTOTPSetup();
setQrSvg(data.qr_code_svg); setQrCode(data.qr_code || "");
setSecret(data.secret); setSecret(data.secret);
setShowSetup(true); setShowSetup(true);
setTotpCode(""); setTotpCode("");
@@ -140,7 +140,7 @@ export default function SettingsPage() {
setTotpEnabled(true); setTotpEnabled(true);
setShowSetup(false); setShowSetup(false);
setTotpSuccess("2FA wurde erfolgreich aktiviert."); setTotpSuccess("2FA wurde erfolgreich aktiviert.");
setQrSvg(""); setQrCode("");
setSecret(""); setSecret("");
setTotpCode(""); setTotpCode("");
} catch (err) { } catch (err) {
@@ -332,12 +332,15 @@ export default function SettingsPage() {
Scannen Sie den QR-Code mit Ihrer Authenticator-App und geben Scannen Sie den QR-Code mit Ihrer Authenticator-App und geben
Sie den angezeigten Code ein. Sie den angezeigten Code ein.
</p> </p>
{qrSvg && ( {qrCode && (
<div <div className="flex justify-center p-4 bg-white rounded-lg border w-fit mx-auto">
className="flex justify-center p-4 bg-white rounded-lg border w-fit mx-auto" <img
dangerouslySetInnerHTML={{ __html: qrSvg }} src={`data:image/png;base64,${qrCode}`}
aria-label="TOTP QR-Code" alt="TOTP QR-Code"
/> width={200}
height={200}
/>
</div>
)} )}
{secret && ( {secret && (
<div className="space-y-1"> <div className="space-y-1">
src/lib/api.ts
+1 -1
View File
@@ -823,7 +823,7 @@ export async function changeEmail(
// ── TOTP / 2FA ──────────────────────────────────────────────────────────── // ── 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"); return request<{ secret: string; otpauth_url: string; qr_code_svg: string }>("/api/auth/totp/setup");
} }