Refactor authentication and account management with modular UI components (#242)

web/frontend/app/features/account/components/EmailSection.tsx

@@ -0,0 +1,57 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Mail } from 'iconoir-react';
+import { useForm } from 'react-hook-form';
+import { useNavigation, useSubmit } from 'react-router';
+import FormField from '../../../components/ui/forms/FormField';
+import SubmitButton from '../../../components/ui/forms/SubmitButton';
+import { useSectionError } from '../hooks/useSectionError';
+import { updateEmailSchema, type UpdateEmailSchema } from '../schemas';
+import type { SectionProps } from '../types';
+import SectionCard from './SectionCard';
+
+const EmailSection = ({ email, open, onToggle, result }: SectionProps & { email: string }) => {
+    const navigation = useNavigation();
+    const submit = useSubmit();
+    const isSubmitting = navigation.formData?.get('intent') === 'email';
+
+    const emailForm = useForm<UpdateEmailSchema>({
+        resolver: zodResolver(updateEmailSchema),
+        defaultValues: { newEmail: email },
+    });
+
+    useSectionError(result, 'email');
+
+    return (
+        <SectionCard
+            icon={<Mail className="size-5" aria-hidden="true" />}
+            title="Email Address"
+            description="Change your email. You'll need to re-confirm the new address."
+            open={open}
+            onToggle={onToggle}
+        >
+            <form
+                className="space-y-3"
+                onSubmit={emailForm.handleSubmit((values) =>
+                    submit({ ...values, intent: 'email' }, { method: 'post' }),
+                )}
+            >
+                <FormField
+                    id="newEmail"
+                    type="email"
+                    autoComplete="email"
+                    placeholder="jane@example.com"
+                    label="New Email"
+                    error={emailForm.formState.errors.newEmail?.message}
+                    {...emailForm.register('newEmail')}
+                />
+                <SubmitButton
+                    isSubmitting={isSubmitting}
+                    idleText="Update Email"
+                    submittingText="Updating..."
+                />
+            </form>
+        </SectionCard>
+    );
+};
+
+export default EmailSection;