Updated account deletion process and refactor packages

The primary update was on the process of account deletion where email notifications are now sent to users. The @kit/emails was also renamed to @kit/email-templates and adjustments were accordingly made on the relevant code and configuration files. In addition, package interaction was refactored to enhance readability and ease of maintenance. Some minor alterations were made on the User Interface, and code comments were updated.

packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx

@@ -1,17 +1,23 @@
 'use client';
 
+import { useFormStatus } from 'react-dom';
+
+import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
-import { Button } from '@kit/ui/button';
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@kit/ui/dialog';
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@kit/ui/alert-dialog';
+import { Button } from '@kit/ui/button';
 import { ErrorBoundary } from '@kit/ui/error-boundary';
 import { Form, FormControl, FormItem, FormLabel } from '@kit/ui/form';
 import { Input } from '@kit/ui/input';
@@ -20,10 +26,6 @@ import { Trans } from '@kit/ui/trans';
 import { deletePersonalAccountAction } from '../../server/personal-accounts-server-actions';
 
 export function AccountDangerZone() {
-  return <DeleteAccountContainer />;
-}
-
-function DeleteAccountContainer() {
   return (
     <div className={'flex flex-col space-y-4'}>
       <div className={'flex flex-col space-y-1'}>
@@ -45,30 +47,39 @@ function DeleteAccountContainer() {
 
 function DeleteAccountModal() {
   return (
-    <Dialog>
-      <DialogTrigger asChild>
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
         <Button data-test={'delete-account-button'} variant={'destructive'}>
           <Trans i18nKey={'account:deleteAccount'} />
         </Button>
-      </DialogTrigger>
+      </AlertDialogTrigger>
 
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
+      <AlertDialogContent onEscapeKeyDown={(e) => e.preventDefault()}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
             <Trans i18nKey={'account:deleteAccount'} />
-          </DialogTitle>
-        </DialogHeader>
+          </AlertDialogTitle>
+        </AlertDialogHeader>
 
         <ErrorBoundary fallback={<DeleteAccountErrorAlert />}>
           <DeleteAccountForm />
         </ErrorBoundary>
-      </DialogContent>
-    </Dialog>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }
 
 function DeleteAccountForm() {
-  const form = useForm();
+  const form = useForm({
+    resolver: zodResolver(
+      z.object({
+        confirmation: z.string().refine((value) => value === 'DELETE'),
+      }),
+    ),
+    defaultValues: {
+      confirmation: '',
+    },
+  });
 
   return (
     <Form {...form}>
@@ -110,17 +121,25 @@ function DeleteAccountForm() {
           </FormItem>
         </div>
 
-        <div className={'flex justify-end space-x-2.5'}>
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            <Trans i18nKey={'common:cancel'} />
+          </AlertDialogCancel>
+
           <DeleteAccountSubmitButton />
-        </div>
+        </AlertDialogFooter>
       </form>
     </Form>
   );
 }
 
 function DeleteAccountSubmitButton() {
+  const { pending } = useFormStatus();
+
   return (
     <Button
+      type={'submit'}
+      disabled={pending}
       data-test={'confirm-delete-account-button'}
       name={'action'}
       value={'delete'}

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx

@@ -4,7 +4,7 @@ import type { Factor } from '@supabase/gotrue-js';
 
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
+import { ShieldCheck, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 
@@ -15,6 +15,7 @@ import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import {
   AlertDialog,
   AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogHeader,
@@ -84,6 +85,8 @@ export function MultiFactorAuthFactorsList() {
     return (
       <div className={'flex flex-col space-y-4'}>
         <Alert variant={'info'}>
+          <ShieldCheck className={'h-4'} />
+
           <AlertTitle>
             <Trans i18nKey={'account:multiFactorAuthHeading'} />
           </AlertTitle>
@@ -171,6 +174,10 @@ function ConfirmUnenrollFactorModal(
         >
           <Trans i18nKey={'account:unenrollFactorModalButtonLabel'} />
         </AlertDialogAction>
+
+        <AlertDialogCancel>
+          <Trans i18nKey={'common:cancel'} />
+        </AlertDialogCancel>
       </AlertDialogContent>
     </AlertDialog>
   );

packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx

@@ -5,6 +5,8 @@ import { useState } from 'react';
 import type { User } from '@supabase/gotrue-js';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Check } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
@@ -15,6 +17,7 @@ import { Button } from '@kit/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -38,16 +41,6 @@ export const UpdatePasswordForm = ({
   const updateUserMutation = useUpdateUser();
   const [needsReauthentication, setNeedsReauthentication] = useState(false);
 
-  const form = useForm({
-    resolver: zodResolver(
-      PasswordUpdateSchema.withTranslation(t('passwordNotMatching')),
-    ),
-    defaultValues: {
-      newPassword: '',
-      repeatPassword: '',
-    },
-  });
-
   const updatePasswordFromCredential = (password: string) => {
     const redirectTo = [window.location.origin, callbackPath].join('');
 
@@ -87,6 +80,16 @@ export const UpdatePasswordForm = ({
     updatePasswordFromCredential(newPassword);
   };
 
+  const form = useForm({
+    resolver: zodResolver(
+      PasswordUpdateSchema.withTranslation(t('passwordNotMatching')),
+    ),
+    defaultValues: {
+      newPassword: '',
+      repeatPassword: '',
+    },
+  });
+
   return (
     <Form {...form}>
       <form
@@ -95,27 +98,11 @@ export const UpdatePasswordForm = ({
       >
         <div className={'flex flex-col space-y-4'}>
           <If condition={updateUserMutation.data}>
-            <Alert variant={'success'}>
-              <AlertTitle>
-                <Trans i18nKey={'account:updatePasswordSuccess'} />
-              </AlertTitle>
-
-              <AlertDescription>
-                <Trans i18nKey={'account:updatePasswordSuccessMessage'} />
-              </AlertDescription>
-            </Alert>
+            <SuccessAlert />
           </If>
 
           <If condition={needsReauthentication}>
-            <Alert variant={'warning'}>
-              <AlertTitle>
-                <Trans i18nKey={'account:needsReauthentication'} />
-              </AlertTitle>
-
-              <AlertDescription>
-                <Trans i18nKey={'account:needsReauthenticationDescription'} />
-              </AlertDescription>
-            </Alert>
+            <NeedsReauthenticationAlert />
           </If>
 
           <FormField
@@ -164,6 +151,10 @@ export const UpdatePasswordForm = ({
                     />
                   </FormControl>
 
+                  <FormDescription>
+                    <Trans i18nKey={'account:repeatPasswordDescription'} />
+                  </FormDescription>
+
                   <FormMessage />
                 </FormItem>
               );
@@ -180,3 +171,35 @@ export const UpdatePasswordForm = ({
     </Form>
   );
 };
+
+function SuccessAlert() {
+  return (
+    <Alert variant={'success'}>
+      <Check className={'h-4'} />
+
+      <AlertTitle>
+        <Trans i18nKey={'account:updatePasswordSuccess'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'account:updatePasswordSuccessMessage'} />
+      </AlertDescription>
+    </Alert>
+  );
+}
+
+function NeedsReauthenticationAlert() {
+  return (
+    <Alert variant={'warning'}>
+      <ExclamationTriangleIcon className={'h-4'} />
+
+      <AlertTitle>
+        <Trans i18nKey={'account:needsReauthentication'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'account:needsReauthenticationDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx

@@ -64,7 +64,6 @@ export function UpdateAccountDetailsForm({
         >
           <FormField
             name={'displayName'}
-            control={form.control}
             render={({ field }) => (
               <FormItem>
                 <FormLabel>