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

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
+12 -9
View File
@@ -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">
+1 -1
View File
@@ -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");
}