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:
@@ -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
@@ -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");
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user