fix(core): improve error message on reset password page

bigcommerce · Oct 29, 2024 · 4a09ddc · 4a09ddc
1 parent 630e2ed
commit 4a09ddc
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/.changeset/eighty-tomatoes-give.md b/.changeset/eighty-tomatoes-give.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+improve error message on reset password page
diff --git a/core/app/[locale]/(default)/(auth)/login/forgot-password/_actions/reset-password.ts b/core/app/[locale]/(default)/(auth)/login/forgot-password/_actions/reset-password.ts
@@ -10,6 +10,22 @@ const ResetPasswordSchema = z.object({
   email: z.string().email(),
 });
 
+const processZodErrors = (err: z.ZodError) => {
+  const { fieldErrors, formErrors } = err.flatten((issue: z.ZodIssue) => ({
+    message: issue.message,
+  }));
+
+  if (formErrors.length > 0) {
+    return formErrors.join('\n');
+  }
+
+  return Object.entries(fieldErrors)
+    .map(([, errorList]) => {
+      return `${errorList?.map(({ message }) => message).join('\n')}`;
+    })
+    .join('\n');
+};
+
 const ResetPasswordMutation = graphql(`
   mutation ResetPassword($input: RequestResetPasswordInput!, $reCaptcha: ReCaptchaV2Input) {
     customer {
@@ -69,7 +85,14 @@ export const resetPassword = async ({
       error: result.errors.map((error) => error.message).join('\n'),
     };
   } catch (error: unknown) {
-    if (error instanceof Error || error instanceof z.ZodError) {
+    if (error instanceof z.ZodError) {
+      return {
+        status: 'error',
+        error: processZodErrors(error),
+      };
+    }
+
+    if (error instanceof Error) {
       return { status: 'error', error: error.message };
     }
 

diff --git a/...[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx b/...[locale]/(default)/(auth)/login/forgot-password/_components/reset-password-form/index.tsx
@@ -80,7 +80,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
   };
 
   const handleEmailValidation = (e: ChangeEvent<HTMLInputElement>) => {
-    const validationStatus = e.target.validity.valueMissing;
+    const validationStatus = e.target.validity.valueMissing || e.target.validity.typeMismatch;
 
     setIsEmailValid(!validationStatus);
   };
@@ -122,7 +122,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
   return (
     <>
       {formStatus?.status === 'error' && (
-        <Message className="mb-8 w-full" variant={formStatus.status}>
+        <Message className="mb-8 w-full whitespace-pre" variant={formStatus.status}>
           <p>{formStatus.message}</p>
         </Message>
       )}
@@ -144,11 +144,17 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
             />
           </FieldControl>
           <FieldMessage
-            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-gray-500"
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
             match="valueMissing"
           >
             {t('emailValidationMessage')}
           </FieldMessage>
+          <FieldMessage
+            className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs text-error"
+            match="typeMismatch"
+          >
+            {t('emailValidationMessage')}
+          </FieldMessage>
         </Field>
 
         {reCaptchaSettings?.isEnabledOnStorefront && (
@@ -162,7 +168,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
               sitekey={reCaptchaSettings.siteKey}
             />
             {!isReCaptchaValid && (
-              <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-red-200">
+              <span className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error">
                 {t('recaptchaText')}
               </span>
             )}