feat: dashboard: add email field to account settings (#2612)

fixes https://github.com/nhost/nhost/issues/2561

.changeset/wet-shoes-argue.md

@@ -0,0 +1,5 @@
+---
+'@nhost/dashboard': minor
+---
+
+feat: enable users to update their email address from the account settings page

dashboard/src/features/account/settings/components/EmailSetting/EmailSetting.tsx

@@ -0,0 +1,80 @@
+import { Form } from '@/components/form/Form';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { Input } from '@/components/ui/v2/Input';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useNhostClient, useUserData } from '@nhost/nextjs';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  email: Yup.string().label('Email').email().required(),
+});
+
+export type EmailSettingFormValues = Yup.InferType<typeof validationSchema>;
+
+export default function EmailSetting() {
+  const nhost = useNhostClient();
+  const { email } = useUserData();
+
+  const form = useForm<EmailSettingFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: { email },
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { register, formState } = form;
+  const isDirty = Object.keys(formState.dirtyFields).length > 0;
+
+  async function handleSubmit(formValues: EmailSettingFormValues) {
+    await execPromiseWithErrorToast(
+      async () => {
+        await nhost.auth.changeEmail({
+          newEmail: formValues.email,
+          options: {
+            redirectTo: `${window.location.origin}/account`,
+          },
+        });
+        form.reset({ email: formValues.email });
+      },
+      {
+        loadingMessage: 'Updating your email...',
+        successMessage:
+          'Please check your inbox. Follow the link to finalize changing your email.',
+        errorMessage:
+          'An error occurred while trying to update your email. Please try again.',
+      },
+    );
+  }
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleSubmit}>
+        <SettingsContainer
+          title="Update your email"
+          slotProps={{
+            submitButton: {
+              disabled: !isDirty,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="grid grid-flow-row lg:grid-cols-5"
+        >
+          <Input
+            {...register('email')}
+            className="col-span-2"
+            id="email"
+            spellCheck="false"
+            autoCapitalize="none"
+            type="email"
+            label="Email"
+            hideEmptyHelperText
+            fullWidth
+            helperText={formState.errors.email?.message}
+            error={Boolean(formState.errors.email)}
+          />
+        </SettingsContainer>
+      </Form>
+    </FormProvider>
+  );
+}

dashboard/src/features/account/settings/components/EmailSetting/index.ts

@@ -0,0 +1,2 @@
+export * from './EmailSetting';
+export { default as EmailSetting } from './EmailSetting';

dashboard/src/pages/account/index.tsx

@@ -3,6 +3,7 @@ import { RetryableErrorBoundary } from '@/components/presentational/RetryableErr
 import { AccountSettingsLayout } from '@/features/account/settings/components/AccountSettingsLayout';
 import { DeleteAccount } from '@/features/account/settings/components/DeleteAccount';
 import { DisplayNameSetting } from '@/features/account/settings/components/DisplayNameSetting';
+import { EmailSetting } from '@/features/account/settings/components/EmailSetting';
 import { PasswordSettings } from '@/features/account/settings/components/PasswordSettings';
 import { PATSettings } from '@/features/account/settings/components/PATSettings';
 import { SocialProvidersSettings } from '@/features/account/settings/components/SocialProvidersSettings';
@@ -18,6 +19,10 @@ export default function AccountSettingsPage() {
         <DisplayNameSetting />
       </RetryableErrorBoundary>
 
+      <RetryableErrorBoundary>
+        <EmailSetting />
+      </RetryableErrorBoundary>
+
       <RetryableErrorBoundary>
         <PasswordSettings />
       </RetryableErrorBoundary>