From 5b05a14932c926fbebc276fa0b04912306497186 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Thu, 29 Jan 2026 16:04:58 +0100
Subject: [PATCH] feat: update 2FA QR code rendering with Next.js Image

- Replaced `<img>` with Next.js `<Image>` for optimized 2FA QR code rendering.
- Refined `twoFactorEnabled` check for improved readability.
---
 frontend/src/components/two-factor-setup.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/two-factor-setup.tsx b/frontend/src/components/two-factor-setup.tsx
index 8661d87..0ed3353 100644
--- a/frontend/src/components/two-factor-setup.tsx
+++ b/frontend/src/components/two-factor-setup.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Loader2, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
+import Image from "next/image";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
@@ -76,9 +77,7 @@ export function TwoFactorSetup() {
 	};
 
 	// Note: We need a way to know if 2FA is enabled.
-	// Assuming user object might have twoFactorEnabled property or similar.
-	// For now, let's assume it's on the user object (we might need to add it to the type).
-	const isEnabled = (user as any)?.twoFactorEnabled;
+	const isEnabled = user?.twoFactorEnabled;
 
 	if (step === "idle") {
 		return (
@@ -154,7 +153,14 @@ export function TwoFactorSetup() {
 				<CardContent className="flex flex-col items-center gap-6">
 					{qrCode && (
 						<div className="bg-white p-4 rounded-xl border-4 border-zinc-100">
-							<img src={qrCode} alt="QR Code 2FA" className="w-48 h-48" />
+							<Image
+								src={qrCode}
+								alt="QR Code 2FA"
+								width={192}
+								height={192}
+								className="w-48 h-48"
+								unoptimized
+							/>
 						</div>
 					)}
 					<div className="w-full space-y-2">