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

@@ -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.
+	const isEnabled = user?.twoFactorEnabled;
-	// 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;
 
 	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">