From a23753f65272dca3f0b54bed16d96512a3cbe20d Mon Sep 17 00:00:00 2001
From: schererleander <leander@schererleander.de>
Date: Fri, 26 Dec 2025 18:08:25 +0100
Subject: refactor(settings): split settings page into separate form components

---
 src/app/settings/page.tsx             |  19 +-
 src/app/settings/password-form.tsx    |   9 +-
 src/app/settings/profile-form.tsx     |  12 +-
 src/app/settings/profile-image.tsx    |   3 +-
 src/app/settings/settings-content.tsx | 537 ----------------------------------
 src/app/settings/settings-form.tsx    |   4 +
 6 files changed, 19 insertions(+), 565 deletions(-)
 delete mode 100644 src/app/settings/settings-content.tsx

(limited to 'src')

diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 75d9d3d..1baba3f 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -1,22 +1,21 @@
 import { getServerSession } from "next-auth"
-import { redirect } from "next/navigation"
-import dbConnect from "@/lib/mongodb"
-import User from "@/model/User"
 import { authOptions } from "@/lib/auth"
-import SettingsContent from "./settings-content"
+import { SettingsForm } from "./settings-form"
+import { getUserProfile } from "@/services/user.service"
 
 export default async function SettingsPage() {
   const session = await getServerSession(authOptions)
-
+  
   if (!session?.user?.email) {
-    redirect("/login")
+    // This case should be handled by middleware, but for type safety:
+    return null 
   }
 
-  await dbConnect()
-  const user = await User.findOne({ email: session.user.email }).lean() as any
+  const user = await getUserProfile(session.user.email)
 
   if (!user) {
-    redirect("/login")
+    // This case suggests a data inconsistency (session exists but user not in DB)
+    return null
   }
 
   // Sanitize user object for client component
@@ -27,5 +26,5 @@ export default async function SettingsPage() {
     twoFactorEnabled: !!user.twoFactorEnabled,
   }
 
-  return <SettingsContent initialUser={initialUser} />
+  return <SettingsForm user={initialUser} />
 }
diff --git a/src/app/settings/password-form.tsx b/src/app/settings/password-form.tsx
index 2377408..f56ae9e 100644
--- a/src/app/settings/password-form.tsx
+++ b/src/app/settings/password-form.tsx
@@ -16,7 +16,6 @@ export function PasswordForm() {
   const [showCurrentPassword, setShowCurrentPassword] = useState(false)
   const [showNewPassword, setShowNewPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
 
   const form = useForm<PasswordChangeInput>({
     resolver: zodResolver(passwordChangeSchema),
@@ -28,8 +27,6 @@ export function PasswordForm() {
   })
 
   const onSubmit = async (data: PasswordChangeInput) => {
-    setIsLoading(true)
-
     try {
       const response = await fetch("/api/user/password", {
         method: "PATCH",
@@ -51,8 +48,6 @@ export function PasswordForm() {
       form.reset()
     } catch {
       toast.error("An unexpected error occurred")
-    } finally {
-      setIsLoading(false)
     }
   }
 
@@ -169,8 +164,8 @@ export function PasswordForm() {
             <div className="text-xs text-muted-foreground">
               Password must contain at least 8 characters with uppercase, lowercase, and a number.
             </div>
-            <Button type="submit" disabled={isLoading}>
-              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            <Button type="submit" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
               <Save className="mr-2 h-4 w-4" />
               Update Password
             </Button>
diff --git a/src/app/settings/profile-form.tsx b/src/app/settings/profile-form.tsx
index 6f532f0..2cd8b52 100644
--- a/src/app/settings/profile-form.tsx
+++ b/src/app/settings/profile-form.tsx
@@ -4,8 +4,8 @@ import { useState } from "react"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { Loader2, User, Save } from "lucide-react"
-import { toast } from "sonner"
 import { Session } from "next-auth"
+import { toast } from "sonner"
 
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -22,8 +22,6 @@ interface ProfileFormProps {
 }
 
 export function ProfileForm({ user, update }: ProfileFormProps) {
-  const [isLoading, setIsLoading] = useState(false)
-
   const form = useForm<UpdateProfileInput>({
     resolver: zodResolver(updateProfileSchema),
     defaultValues: {
@@ -33,8 +31,6 @@ export function ProfileForm({ user, update }: ProfileFormProps) {
   })
 
   const onSubmit = async (data: UpdateProfileInput) => {
-    setIsLoading(true)
-
     try {
       const response = await fetch("/api/user/profile", {
         method: "PATCH",
@@ -57,8 +53,6 @@ export function ProfileForm({ user, update }: ProfileFormProps) {
       toast.success("Profile updated successfully!")
     } catch {
       toast.error("An unexpected error occurred")
-    } finally {
-      setIsLoading(false)
     }
   }
 
@@ -102,8 +96,8 @@ export function ProfileForm({ user, update }: ProfileFormProps) {
                 </FormItem>
               )}
             />
-            <Button type="submit" disabled={isLoading}>
-              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            <Button type="submit" disabled={form.formState.isSubmitting}>
+              {form.formState.isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
               <Save className="mr-2 h-4 w-4" />
               Save Changes
             </Button>
diff --git a/src/app/settings/profile-image.tsx b/src/app/settings/profile-image.tsx
index 7b4114d..73c7e7a 100644
--- a/src/app/settings/profile-image.tsx
+++ b/src/app/settings/profile-image.tsx
@@ -97,7 +97,7 @@ export function ProfileImage({ user, update }: ProfileImageProps) {
         </CardTitle>
         <CardDescription>
           Upload or update your profile picture
-        </CardDescription>
+				</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="flex items-center space-x-6">
@@ -136,7 +136,6 @@ export function ProfileImage({ user, update }: ProfileImageProps) {
             
             <p className="text-xs text-muted-foreground">
               Supported formats: JPEG, PNG, WebP, GIF. Maximum size: 10MB.
-              Images will be resized to 400x400 pixels.
             </p>
             
             <input
diff --git a/src/app/settings/settings-content.tsx b/src/app/settings/settings-content.tsx
deleted file mode 100644
index 8916b9e..0000000
--- a/src/app/settings/settings-content.tsx
+++ /dev/null
@@ -1,537 +0,0 @@
-"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>
-  )
-}
diff --git a/src/app/settings/settings-form.tsx b/src/app/settings/settings-form.tsx
index 477473d..8b09cdf 100644
--- a/src/app/settings/settings-form.tsx
+++ b/src/app/settings/settings-form.tsx
@@ -5,12 +5,14 @@ import { Separator } from "@/components/ui/separator"
 import { ProfileForm } from "./profile-form"
 import { ProfileImage } from "./profile-image"
 import { PasswordForm } from "./password-form"
+import { TwoFactorForm } from "./two-factor-form"
 
 interface SettingsFormProps {
   user: {
     name?: string | null
     email?: string | null
     image?: string | null
+    twoFactorEnabled: boolean
   }
 }
 
@@ -31,6 +33,8 @@ export function SettingsForm({ user }: SettingsFormProps) {
         <Separator />
         <ProfileImage user={user} update={update} />
         <Separator />
+        <TwoFactorForm twoFactorEnabled={user.twoFactorEnabled} />
+        <Separator />
         <PasswordForm />
       </div>
     </div>
-- 
cgit v1.3.1