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

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

@@ -0,0 +1,82 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { User } 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 { updateProfileSchema, type UpdateProfileSchema } from '../schemas';
+import type { SectionProps } from '../types';
+import SectionCard from './SectionCard';
+
+const ProfileSection = ({
+    firstName,
+    lastName,
+    dateOfBirth,
+    open,
+    onToggle,
+    result,
+}: SectionProps & { firstName: string; lastName: string; dateOfBirth: string }) => {
+    const navigation = useNavigation();
+    const submit = useSubmit();
+    const isSubmitting = navigation.formData?.get('intent') === 'profile';
+
+    const profileForm = useForm<UpdateProfileSchema>({
+        resolver: zodResolver(updateProfileSchema),
+        defaultValues: { firstName, lastName, dateOfBirth },
+    });
+
+    useSectionError(result, 'profile');
+
+    return (
+        <SectionCard
+            icon={<User className="size-5" aria-hidden="true" />}
+            title="Profile"
+            description="Update your name and date of birth."
+            open={open}
+            onToggle={onToggle}
+        >
+            <form
+                className="space-y-3"
+                onSubmit={profileForm.handleSubmit((values) =>
+                    submit({ ...values, intent: 'profile' }, { method: 'post' }),
+                )}
+            >
+                <div className="grid grid-cols-2 gap-3">
+                    <FormField
+                        id="firstName"
+                        type="text"
+                        autoComplete="given-name"
+                        placeholder="Jane"
+                        label="First Name"
+                        error={profileForm.formState.errors.firstName?.message}
+                        {...profileForm.register('firstName')}
+                    />
+                    <FormField
+                        id="lastName"
+                        type="text"
+                        autoComplete="family-name"
+                        placeholder="Doe"
+                        label="Last Name"
+                        error={profileForm.formState.errors.lastName?.message}
+                        {...profileForm.register('lastName')}
+                    />
+                </div>
+                <FormField
+                    id="dateOfBirth"
+                    type="date"
+                    label="Date of Birth"
+                    error={profileForm.formState.errors.dateOfBirth?.message}
+                    {...profileForm.register('dateOfBirth')}
+                />
+                <SubmitButton
+                    isSubmitting={isSubmitting}
+                    idleText="Update Profile"
+                    submittingText="Updating..."
+                />
+            </form>
+        </SectionCard>
+    );
+};
+
+export default ProfileSection;