feat(2fa): implement google authenticator 2fa

- add otplib and qrcode dependencies
- update user model with 2fa fields
- add twoFactorCode to validation schema
- implement api routes for setup, enable, disable
- add 2fa verification in auth flow
- add 2fa management ui in settings
- implement 2fa challenge in login page

4 files changed, 769 insertions, 73 deletions

diff --git a/src/app/api/user/2fa/route.ts b/src/app/api/user/2fa/route.ts
new file mode 100644
index 0000000..c5fcf83
--- /dev/null
+++ b/src/app/api/user/2fa/route.ts
@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getServerSession } from "next-auth"
+import { authenticator } from "otplib"
+import QRCode from "qrcode"
+import dbConnect from "@/lib/mongodb"
+import User from "@/model/User"
+import { authOptions } from "@/lib/auth"
+
+export async function POST(req: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const { code, secret } = await req.json()
+
+    if (!code || !secret) {
+      return NextResponse.json(
+        { error: "Code and secret are required" },
+        { status: 400 }
+      )
+    }
+
+    const isValid = authenticator.check(code, secret)
+
+    if (!isValid) {
+      return NextResponse.json(
+        { error: "Invalid two-factor code" },
+        { status: 400 }
+      )
+    }
+
+    await dbConnect()
+    await User.findByIdAndUpdate(session.user.id, {
+      twoFactorEnabled: true,
+      twoFactorSecret: secret,
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("2FA enable error:", error)
+    return NextResponse.json(
+      { error: "Failed to enable two-factor authentication" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE() {
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    await dbConnect()
+    await User.findByIdAndUpdate(session.user.id, {
+      twoFactorEnabled: false,
+      $unset: { twoFactorSecret: 1 },
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("2FA disable error:", error)
+    return NextResponse.json(
+      { error: "Failed to disable two-factor authentication" },
+      { status: 500 }
+    )
+  }
+}
+
+// Generate new secret and QR code for setup
+export async function PUT() {
+  try {
+    const session = await getServerSession(authOptions)
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const secret = authenticator.generateSecret()
+    const otpauth = authenticator.keyuri(
+      session.user.email,
+      "Next-Boilerplate",
+      secret
+    )
+    const qrCode = await QRCode.toDataURL(otpauth)
+
+    return NextResponse.json({ secret, qrCode })
+  } catch (error) {
+    console.error("2FA setup error:", error)
+    return NextResponse.json(
+      { error: "Failed to generate two-factor setup" },
+      { status: 500 }
+    )
+  }
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index ae89e63..c8a80f1 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -22,11 +22,14 @@ export default function SignInPage() {
   const [error, setError] = useState("")
   const router = useRouter()
 
+  const [showTwoFactor, setShowTwoFactor] = useState(false)
+
   const form = useForm<LoginInput>({
     resolver: zodResolver(loginSchema),
     defaultValues: {
       email: "",
       password: "",
+      twoFactorCode: "",
     },
   })
 
@@ -38,11 +41,17 @@ export default function SignInPage() {
       const result = await signIn("credentials", {
         email: data.email,
         password: data.password,
+        twoFactorCode: data.twoFactorCode,
         redirect: false,
       })
 
       if (result?.error) {
-        setError("Invalid email or password")
+        if (result.error === "2FA_REQUIRED") {
+          setShowTwoFactor(true)
+          // Don't clear password here so user can just enter code
+        } else {
+          setError(result.error)
+        }
       } else if (result?.ok) {
         router.push("/")
         router.refresh()
@@ -62,7 +71,9 @@ export default function SignInPage() {
         <CardHeader className="space-y-1">
           <CardTitle className="text-2xl text-center">Sign In</CardTitle>
           <CardDescription className="text-center">
-            Enter your email and password to access your account
+            {showTwoFactor 
+              ? "Enter the code from your authenticator app"
+              : "Enter your email and password to access your account"}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -74,76 +85,117 @@ export default function SignInPage() {
 
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="email"
-                        placeholder="john@example.com"
-                        autoComplete="email"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <div className="relative">
+              {!showTwoFactor ? (
+                <>
+                  <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="email"
+                            placeholder="john@example.com"
+                            autoComplete="email"
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Password</FormLabel>
+                        <FormControl>
+                          <div className="relative">
+                            <Input
+                              type={showPassword ? "text" : "password"}
+                              placeholder="Enter your password"
+                              autoComplete="current-password"
+                              {...field}
+                            />
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                              onClick={() => setShowPassword(!showPassword)}
+                            >
+                              {showPassword ? (
+                                <EyeOff className="h-4 w-4" />
+                              ) : (
+                                <Eye className="h-4 w-4" />
+                              )}
+                            </Button>
+                          </div>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </>
+              ) : (
+                <FormField
+                  control={form.control}
+                  name="twoFactorCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Two-Factor Code</FormLabel>
+                      <FormControl>
                         <Input
-                          type={showPassword ? "text" : "password"}
-                          placeholder="Enter your password"
-                          autoComplete="current-password"
+                          placeholder="000000"
+                          autoComplete="one-time-code"
+                          maxLength={6}
                           {...field}
+                          autoFocus
                         />
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                          onClick={() => setShowPassword(!showPassword)}
-                        >
-                          {showPassword ? (
-                            <EyeOff className="h-4 w-4" />
-                          ) : (
-                            <Eye className="h-4 w-4" />
-                          )}
-                        </Button>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+              
               <Button type="submit" className="w-full" disabled={isLoading}>
                 {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                Sign In
+                {showTwoFactor ? "Verify" : "Sign In"}
               </Button>
             </form>
           </Form>
 
-          <div className="text-center text-sm">
-            <span className="text-muted-foreground">Don&apos;t have an account? </span>
-            <Link href="/signup" className="text-primary hover:underline font-medium">
-              Sign up
-            </Link>
-          </div>
+          {!showTwoFactor && (
+            <>
+              <div className="text-center text-sm">
+                <span className="text-muted-foreground">Don&apos;t have an account? </span>
+                <Link href="/signup" className="text-primary hover:underline font-medium">
+                  Sign up
+                </Link>
+              </div>
 
-          <div className="text-center">
-            <Button variant="link" className="text-sm text-muted-foreground">
-              Forgot your password?
-            </Button>
-          </div>
+              <div className="text-center">
+                <Button variant="link" className="text-sm text-muted-foreground">
+                  Forgot your password?
+                </Button>
+              </div>
+            </>
+          )}
+          
+          {showTwoFactor && (
+             <div className="text-center">
+                <Button 
+                  variant="link" 
+                  className="text-sm text-muted-foreground"
+                  onClick={() => setShowTwoFactor(false)}
+                >
+                  Back to login
+                </Button>
+              </div>
+          )}
         </CardContent>
       </Card>
     </div>
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 5d5fd92..75d9d3d 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -1,21 +1,31 @@
-import { redirect } from "next/navigation"
 import { getServerSession } from "next-auth"
-
-import Navbar from "@/components/Navbar"
+import { redirect } from "next/navigation"
+import dbConnect from "@/lib/mongodb"
+import User from "@/model/User"
 import { authOptions } from "@/lib/auth"
-import { SettingsForm } from "@/app/settings/settings-form"
+import SettingsContent from "./settings-content"
 
 export default async function SettingsPage() {
   const session = await getServerSession(authOptions)
 
-  if (!session?.user) {
+  if (!session?.user?.email) {
     redirect("/login")
   }
 
-  return (
-    <div className="min-h-screen bg-background">
-      <Navbar />
-      <SettingsForm user={session.user} />
-    </div>
-  )
+  await dbConnect()
+  const user = await User.findOne({ email: session.user.email }).lean() as any
+
+  if (!user) {
+    redirect("/login")
+  }
+
+  // Sanitize user object for client component
+  const initialUser = {
+    name: user.name,
+    email: user.email,
+    image: user.profileImage?.url || null,
+    twoFactorEnabled: !!user.twoFactorEnabled,
+  }
+
+  return <SettingsContent initialUser={initialUser} />
 }
diff --git a/src/app/settings/settings-content.tsx b/src/app/settings/settings-content.tsx
new file mode 100644
index 0000000..8916b9e
--- /dev/null
+++ b/src/app/settings/settings-content.tsx
@@ -0,0 +1,537 @@
+"use client"
+
+import { useState } from "react"
+import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
+import { Shield, Loader2, Copy } from "lucide-react"
+import { toast } from "sonner"
+import Image from "next/image"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Separator } from "@/components/ui/separator"
+import Navbar from "@/components/Navbar"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Camera, Lock, Save, Trash2, Upload, User } from "lucide-react"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { updateProfileSchema, updatePasswordSchema, type UpdateProfileInput } from "@/lib/validation"
+import { z } from "zod"
+
+// Re-using existing types and schemas from previous implementation
+const passwordChangeSchema = updatePasswordSchema.extend({
+  confirmPassword: z.string()
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"],
+})
+
+type ProfileFormData = UpdateProfileInput
+type PasswordFormData = z.infer<typeof passwordChangeSchema>
+
+interface SettingsContentProps {
+  initialUser: {
+    name: string
+    email: string
+    image: string | null
+    twoFactorEnabled: boolean
+  }
+}
+
+export default function SettingsContent({ initialUser }: SettingsContentProps) {
+  const { update } = useSession()
+  const router = useRouter()
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState(initialUser.twoFactorEnabled)
+  const [is2FALoading, setIs2FALoading] = useState(false)
+  const [setupData, setSetupData] = useState<{ secret: string;qrCode: string } | null>(null)
+  const [verificationCode, setVerificationCode] = useState("")
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  
+  // Existing state for other forms
+  const [isLoading, setIsLoading] = useState(false)
+  const [isImageLoading, setIsImageLoading] = useState(false)
+  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(initialUser.image)
+  
+  const profileForm = useForm<ProfileFormData>({
+    resolver: zodResolver(updateProfileSchema),
+    defaultValues: {
+      name: initialUser.name,
+      email: initialUser.email,
+    },
+  })
+
+  const passwordForm = useForm<PasswordFormData>({
+    resolver: zodResolver(passwordChangeSchema),
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+    },
+  })
+
+  // 2FA Handlers
+  const start2FASetup = async () => {
+    setIs2FALoading(true)
+    try {
+      const res = await fetch("/api/user/2fa", { method: "PUT" })
+      const data = await res.json()
+      if (data.error) throw new Error(data.error)
+      setSetupData(data)
+      setIsDialogOpen(true)
+    } catch (error) {
+      toast.error("Failed to start 2FA setup")
+    } finally {
+      setIs2FALoading(false)
+    }
+  }
+
+  const verifyAndEnable2FA = async () => {
+    if (verificationCode.length !== 6) {
+      toast.error("Please enter a 6-digit code")
+      return
+    }
+
+    setIs2FALoading(true)
+    try {
+      const res = await fetch("/api/user/2fa", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          code: verificationCode,
+          secret: setupData?.secret,
+        }),
+      })
+      const data = await res.json()
+      
+      if (data.error) throw new Error(data.error)
+      
+      setTwoFactorEnabled(true)
+      setIsDialogOpen(false)
+      toast.success("Two-factor authentication enabled")
+      router.refresh()
+    } catch (error) {
+      toast.error("Invalid verification code")
+    } finally {
+      setIs2FALoading(false)
+      setVerificationCode("")
+    }
+  }
+
+  const disable2FA = async () => {
+    if (!confirm("Are you sure you want to disable 2FA? This will make your account less secure.")) return
+
+    setIs2FALoading(true)
+    try {
+      const res = await fetch("/api/user/2fa", { method: "DELETE" })
+      const data = await res.json()
+      
+      if (data.error) throw new Error(data.error)
+      
+      setTwoFactorEnabled(false)
+      toast.success("Two-factor authentication disabled")
+      router.refresh()
+    } catch (error) {
+      toast.error("Failed to disable 2FA")
+    } finally {
+      setIs2FALoading(false)
+    }
+  }
+
+  const copyToClipboard = () => {
+    if (setupData?.secret) {
+      navigator.clipboard.writeText(setupData.secret)
+      toast.success("Secret copied to clipboard")
+    }
+  }
+
+  // Existing Handlers (Profile, Password, Image)
+  const onProfileSubmit = async (data: ProfileFormData) => {
+    setIsLoading(true)
+    try {
+      const response = await fetch("/api/user/profile", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      })
+      const result = await response.json()
+      if (!response.ok) {
+        toast.error(result.error || "Failed to update profile")
+        return
+      }
+      await update({ name: data.name, email: data.email })
+      toast.success("Profile updated successfully!")
+    } catch {
+      toast.error("An unexpected error occurred")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const onPasswordSubmit = async (data: PasswordFormData) => {
+    setIsLoading(true)
+    try {
+      const response = await fetch("/api/user/password", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          currentPassword: data.currentPassword,
+          newPassword: data.newPassword,
+        }),
+      })
+      const result = await response.json()
+      if (!response.ok) {
+        toast.error(result.error || "Failed to update password")
+        return
+      }
+      toast.success("Password updated successfully!")
+      passwordForm.reset()
+    } catch {
+      toast.error("An unexpected error occurred")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0]
+      if (!file) return
+      setIsImageLoading(true)
+      try {
+        const formData = new FormData()
+        formData.append('image', file)
+        const response = await fetch('/api/user/profile-image', {
+          method: 'POST',
+          body: formData,
+        })
+        const result = await response.json()
+        if (!response.ok) {
+          toast.error(result.error || 'Failed to upload image')
+          return
+        }
+        setProfileImageUrl(result.profileImage.url)
+        toast.success('Profile image uploaded successfully!')
+        await update({ image: result.profileImage.url })
+      } catch {
+        toast.error('An unexpected error occurred')
+      } finally {
+        setIsImageLoading(false)
+      }
+    }
+  
+    const handleImageDelete = async () => {
+      setIsImageLoading(true)
+      try {
+        const response = await fetch('/api/user/profile-image', { method: 'DELETE' })
+        const result = await response.json()
+        if (!response.ok) {
+          toast.error(result.error || 'Failed to delete image')
+          return
+        }
+        setProfileImageUrl(null)
+        toast.success('Profile image deleted successfully!')
+        await update({ image: null })
+      } catch {
+        toast.error('An unexpected error occurred')
+      } finally {
+        setIsImageLoading(false)
+      }
+    }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar />
+      
+      <div className="container mx-auto px-4 py-8 max-w-2xl">
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold">Account Settings</h1>
+            <p className="text-muted-foreground">
+              Manage your account information and security settings
+            </p>
+          </div>
+
+          {/* Profile Information */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <User className="mr-2 h-5 w-5" />
+                Profile Information
+              </CardTitle>
+              <CardDescription>Update your personal information</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form {...profileForm}>
+                <form onSubmit={profileForm.handleSubmit(onProfileSubmit)} className="space-y-4">
+                  <FormField
+                    control={profileForm.control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Full Name</FormLabel>
+                        <FormControl>
+                          <Input placeholder="John Doe" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={profileForm.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Email Address</FormLabel>
+                        <FormControl>
+                          <Input type="email" placeholder="john@example.com" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <Button type="submit" disabled={isLoading}>
+                    {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    <Save className="mr-2 h-4 w-4" />
+                    Save Changes
+                  </Button>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+
+          <Separator />
+
+          {/* Profile Image */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Camera className="mr-2 h-5 w-5" />
+                Profile Image
+              </CardTitle>
+              <CardDescription>Upload or update your profile picture</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center space-x-6">
+                <Avatar className="h-24 w-24">
+                  <AvatarImage src={profileImageUrl || undefined} alt="Profile" />
+                  <AvatarFallback className="text-lg">
+                    {initialUser.name.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                
+                <div className="flex-1 space-y-3">
+                  <div className="flex items-center space-x-3">
+                    <div className="relative">
+                        <Button
+                        disabled={isImageLoading}
+                        variant="outline"
+                        className="relative"
+                        >
+                        {isImageLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        <Upload className="mr-2 h-4 w-4" />
+                        {profileImageUrl ? 'Change Image' : 'Upload Image'}
+                        <input
+                            type="file"
+                            accept="image/jpeg,image/jpg,image/png,image/webp,image/gif"
+                            onChange={handleImageUpload}
+                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                        />
+                        </Button>
+                    </div>
+                    
+                    {profileImageUrl && (
+                      <Button
+                        onClick={handleImageDelete}
+                        disabled={isImageLoading}
+                        variant="outline"
+                        className="text-destructive hover:text-destructive"
+                      >
+                        {isImageLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Remove
+                      </Button>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    Supported formats: JPEG, PNG, WebP, GIF. Maximum size: 10MB.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Separator />
+
+          {/* Two-Factor Authentication */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Shield className="mr-2 h-5 w-5" />
+                Two-Factor Authentication
+              </CardTitle>
+              <CardDescription>
+                Add an extra layer of security to your account
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="space-y-1">
+                  <p className="font-medium">Status: {twoFactorEnabled ? "Enabled" : "Disabled"}</p>
+                  <p className="text-sm text-muted-foreground">
+                    {twoFactorEnabled 
+                      ? "Your account is secured with 2FA." 
+                      : "Protect your account by enabling 2FA."}
+                  </p>
+                </div>
+                {twoFactorEnabled ? (
+                  <Button 
+                    variant="destructive" 
+                    onClick={disable2FA} 
+                    disabled={is2FALoading}
+                  >
+                    {is2FALoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    Disable 2FA
+                  </Button>
+                ) : (
+                  <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+                    <DialogTrigger asChild>
+                      <Button onClick={start2FASetup} disabled={is2FALoading}>
+                        {is2FALoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        Enable 2FA
+                      </Button>
+                    </DialogTrigger>
+                    <DialogContent className="sm:max-w-md">
+                      <DialogHeader>
+                        <DialogTitle>Set up Two-Factor Authentication</DialogTitle>
+                        <DialogDescription>
+                          Scan the QR code with your authenticator app (like Google Authenticator or Authy).
+                        </DialogDescription>
+                      </DialogHeader>
+                      
+                      {setupData && (
+                        <div className="flex flex-col items-center space-y-4 py-4">
+                          <div className="relative w-48 h-48">
+                            <Image 
+                              src={setupData.qrCode} 
+                              alt="2FA QR Code" 
+                              fill
+                              style={{ objectFit: "contain" }}
+                            />
+                          </div>
+                          
+                          <div className="flex items-center space-x-2">
+                            <code className="bg-muted px-2 py-1 rounded text-sm">
+                              {setupData.secret}
+                            </code>
+                            <Button size="icon" variant="ghost" onClick={copyToClipboard}>
+                              <Copy className="h-4 w-4" />
+                            </Button>
+                          </div>
+
+                          <div className="w-full space-y-2">
+                            <Label htmlFor="code">Verification Code</Label>
+                            <Input
+                              id="code"
+                              placeholder="Enter 6-digit code"
+                              value={verificationCode}
+                              onChange={(e) => setVerificationCode(e.target.value.slice(0, 6))}
+                              maxLength={6}
+                            />
+                          </div>
+
+                          <Button 
+                            className="w-full" 
+                            onClick={verifyAndEnable2FA}
+                            disabled={verificationCode.length !== 6 || is2FALoading}
+                          >
+                            {is2FALoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            Verify & Enable
+                          </Button>
+                        </div>
+                      )}
+                    </DialogContent>
+                  </Dialog>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Separator />
+
+          {/* Password Change */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Lock className="mr-2 h-5 w-5" />
+                Change Password
+              </CardTitle>
+              <CardDescription>
+                Update your password to keep your account secure
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Form {...passwordForm}>
+                <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4">
+                  <FormField
+                    control={passwordForm.control}
+                    name="currentPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Current Password</FormLabel>
+                        <FormControl>
+                          <Input type="password" placeholder="Enter current password" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={passwordForm.control}
+                    name="newPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>New Password</FormLabel>
+                        <FormControl>
+                          <Input type="password" placeholder="Enter new password" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={passwordForm.control}
+                    name="confirmPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Confirm New Password</FormLabel>
+                        <FormControl>
+                          <Input type="password" placeholder="Confirm new password" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <Button type="submit" disabled={isLoading}>
+                    {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    <Save className="mr-2 h-4 w-4" />
+                    Update Password
+                  </Button>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}