chore(core): revert auth page changes

bigcommerce · Dec 9, 2024 · 00c8d07 · 00c8d07
1 parent ab616d1
commit 00c8d07
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 36 deletions.
diff --git a/core/app/[locale]/(default)/(auth)/change-password/_actions/change-password.ts b/core/app/[locale]/(default)/(auth)/change-password/_actions/change-password.ts
@@ -62,28 +62,30 @@ export const changePassword = async (_previousState: unknown, formData: FormData
     const result = response.data.customer.resetPassword;
 
     if (result.errors.length === 0) {
-      return { status: 'success', messages: [''] };
+      return { status: 'success', message: '' };
     }
 
     return {
       status: 'error',
-      messages: result.errors.map((error) => error.message),
+      message: result.errors.map((error) => error.message).join('\n'),
     };
   } catch (error: unknown) {
     if (error instanceof ZodError) {
       return {
         status: 'error',
-        messages: error.issues.map(({ path, message }) => `${path.toString()}: ${message}.`),
+        message: error.issues
+          .map(({ path, message }) => `${path.toString()}: ${message}.`)
+          .join('\n'),
       };
     }
 
     if (error instanceof Error) {
       return {
         status: 'error',
-        messages: [error.message],
+        message: error.message,
       };
     }
 
-    return { status: 'error', messages: [t('Errors.error')] };
+    return { status: 'error', message: t('Errors.error') };
   }
 };
diff --git a/core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx b/core/app/[locale]/(default)/(auth)/change-password/_components/change-password-form.tsx
@@ -18,7 +18,6 @@ import { Message } from '~/components/ui/message';
 import { useRouter } from '~/i18n/routing';
 
 import { useAccountStatusContext } from '../../../account/(tabs)/_components/account-status-provider';
-import { SubmitMessagesList } from '../../../account/(tabs)/_components/submit-messages-list';
 import { changePassword } from '../_actions/change-password';
 
 interface Props {
@@ -51,13 +50,19 @@ export const ChangePasswordForm = ({ customerId, customerToken }: Props) => {
   const router = useRouter();
   const [state, formAction] = useActionState(changePassword, {
     status: 'idle',
-    messages: [''],
+    message: '',
   });
 
   const [newPassword, setNewPasssword] = useState('');
   const [isConfirmPasswordValid, setIsConfirmPasswordValid] = useState(true);
   const { setAccountState } = useAccountStatusContext();
 
+  let messageText = '';
+
+  if (state.status === 'error') {
+    messageText = state.message;
+  }
+
   const handleNewPasswordChange = (e: ChangeEvent<HTMLInputElement>) =>
     setNewPasssword(e.target.value);
   const handleConfirmPasswordValidation = (e: ChangeEvent<HTMLInputElement>) => {
@@ -67,15 +72,15 @@ export const ChangePasswordForm = ({ customerId, customerToken }: Props) => {
   };
 
   if (state.status === 'success') {
-    setAccountState({ status: 'success', messages: [t('confirmChangePassword')] });
+    setAccountState({ status: 'success', message: t('confirmChangePassword') });
     router.push('/login');
   }
 
   return (
     <>
       {state.status === 'error' && (
         <Message className="mb-8 w-full text-gray-500" variant={state.status}>
-          <SubmitMessagesList messages={state.messages} />
+          <p>{messageText}</p>
         </Message>
       )}
 

diff --git a/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx b/core/app/[locale]/(default)/(auth)/login/_components/login-form.tsx
@@ -18,7 +18,6 @@ import {
 import { Message } from '~/components/ui/message';
 
 import { useAccountStatusContext } from '../../../account/(tabs)/_components/account-status-provider';
-import { SubmitMessagesList } from '../../../account/(tabs)/_components/submit-messages-list';
 import { login } from '../_actions/login';
 
 const SubmitButton = () => {
@@ -67,7 +66,7 @@ export const LoginForm = () => {
     <>
       {accountState.status === 'success' && (
         <Message className="col-span-full mb-8 w-full text-gray-500" variant={accountState.status}>
-          <SubmitMessagesList messages={accountState.messages} />
+          <p>{accountState.message}</p>
         </Message>
       )}
 

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
@@ -16,12 +16,14 @@ const processZodErrors = (err: z.ZodError) => {
   }));
 
   if (formErrors.length > 0) {
-    return formErrors.map(({ message }) => message);
+    return formErrors.join('\n');
   }
 
-  return Object.entries(fieldErrors).flatMap(([, errorList]) => {
-    return errorList?.map(({ message }) => message) ?? [''];
-  });
+  return Object.entries(fieldErrors)
+    .map(([, errorList]) => {
+      return `${errorList?.map(({ message }) => message).join('\n')}`;
+    })
+    .join('\n');
 };
 
 const ResetPasswordMutation = graphql(`
@@ -80,20 +82,20 @@ export const resetPassword = async ({
 
     return {
       status: 'error',
-      errors: result.errors.map((error) => error.message),
+      error: result.errors.map((error) => error.message).join('\n'),
     };
   } catch (error: unknown) {
     if (error instanceof z.ZodError) {
       return {
         status: 'error',
-        errors: processZodErrors(error),
+        error: processZodErrors(error),
       };
     }
 
     if (error instanceof Error) {
-      return { status: 'error', errors: [error.message] };
+      return { status: 'error', error: error.message };
     }
 
-    return { status: 'error', errors: [t('Errors.error')] };
+    return { status: 'error', error: t('Errors.error') };
   }
 };
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
@@ -5,11 +5,7 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
-import {
-  AccountState as FormStatus,
-  useAccountStatusContext,
-} from '~/app/[locale]/(default)/account/(tabs)/_components/account-status-provider';
-import { SubmitMessagesList } from '~/app/[locale]/(default)/account/(tabs)/_components/submit-messages-list';
+import { useAccountStatusContext } from '~/app/[locale]/(default)/account/(tabs)/_components/account-status-provider';
 import { type FragmentOf } from '~/client/graphql';
 import { Button } from '~/components/ui/button';
 import {
@@ -32,6 +28,11 @@ interface Props {
   reCaptchaSettings?: FragmentOf<typeof ResetPasswordFormFragment>;
 }
 
+interface FormStatus {
+  status: 'success' | 'error';
+  message: string;
+}
+
 const SubmitButton = () => {
   const t = useTranslations('Login.ForgotPassword.Form');
 
@@ -64,7 +65,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
   const router = useRouter();
 
   useEffect(() => {
-    setAccountState({ status: 'idle', messages: [''] });
+    setAccountState({ status: 'idle' });
   }, [setAccountState]);
 
   const onReCatpchaChange = (token: string | null) => {
@@ -106,13 +107,13 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
 
       setAccountState({
         status: 'success',
-        messages: [t('confirmResetPassword', { email: customerEmail?.toString() })],
+        message: t('confirmResetPassword', { email: customerEmail?.toString() }),
       });
       router.push('/login');
     }
 
     if (submit.status === 'error') {
-      setFormStatus({ status: 'error', messages: submit.errors ?? [''] });
+      setFormStatus({ status: 'error', message: submit.error ?? '' });
     }
 
     reCaptchaRef.current?.reset();
@@ -122,7 +123,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
     <>
       {formStatus?.status === 'error' && (
         <Message className="mb-8 w-full whitespace-pre" variant={formStatus.status}>
-          <SubmitMessagesList messages={formStatus.messages} />
+          <p>{formStatus.message}</p>
         </Message>
       )}
 

diff --git a/core/app/[locale]/(default)/(auth)/register/_components/register-customer-form.tsx b/core/app/[locale]/(default)/(auth)/register/_components/register-customer-form.tsx
@@ -5,10 +5,7 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCaptcha from 'react-google-recaptcha';
 
-import {
-  AccountState as FormStatus,
-  useAccountStatusContext,
-} from '~/app/[locale]/(default)/account/(tabs)/_components/account-status-provider';
+import { useAccountStatusContext } from '~/app/[locale]/(default)/account/(tabs)/_components/account-status-provider';
 import { ExistingResultType } from '~/client/util';
 import {
   Checkboxes,
@@ -38,11 +35,16 @@ import { Button } from '~/components/ui/button';
 import { Field, Form, FormSubmit } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
 
-import { SubmitMessagesList } from '../../../account/(tabs)/_components/submit-messages-list';
+import { SubmitErrorsList } from '../../../account/(tabs)/_components/submit-errors-list';
 import { login } from '../_actions/login';
 import { registerCustomer } from '../_actions/register-customer';
 import { getRegisterCustomerQuery } from '../page-data';
 
+interface FormStatus {
+  status: 'success' | 'error';
+  messages: string[];
+}
+
 type CustomerFields = ExistingResultType<typeof getRegisterCustomerQuery>['customerFields'];
 type AddressFields = ExistingResultType<typeof getRegisterCustomerQuery>['addressFields'];
 
@@ -223,7 +225,7 @@ export const RegisterCustomerForm = ({
     const submit = await registerCustomer({ formData, reCaptchaToken });
 
     if (submit.status === 'success') {
-      setAccountState({ status: 'success', messages: [''] });
+      setAccountState({ status: 'success' });
 
       await login(formData);
     }
@@ -240,9 +242,9 @@ export const RegisterCustomerForm = ({
 
   return (
     <>
-      {formStatus && formStatus.status !== 'idle' && (
+      {formStatus && (
         <Message className="mb-8" variant={formStatus.status}>
-          <SubmitMessagesList messages={formStatus.messages} />
+          <SubmitErrorsList errors={formStatus.messages} />
         </Message>
       )}
       <Form action={onSubmit} onClick={preSubmitFieldsValidation} ref={form}>