refactor(settings): split settings page into separate form components

1 files changed, 4 insertions, 0 deletions

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>