fix(form): display store password complexity requirements in registration form tooltip (#2814)

Author: matthewvolk

.changeset/sixty-toes-leave.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Shoppers will now see the store's actual password complexity requirements in the tooltip on the new customer registration form, preventing confusion and failed registration attempts. The schema() function in core/vibes/soul/form/dynamic-form/schema.ts now accepts an optional second parameter passwordComplexity to enable dynamic password validation. The DynamicForm, DynamicFormSection components and their associated server actions also accept an optional passwordComplexity prop that flows through to the schema. Action Required: If you have custom registration or password forms and want to use store-specific password complexity settings, fetch passwordComplexitySettings from the GraphQL API (under site.settings.customers.passwordComplexitySettings) and pass it to your DynamicFormSection component and maintain it in your server action's state. If you don't pass it, password validation defaults to: minimum 8 characters, at least one number, and at least one special character. Conflict Resolution: If merging into custom forms, ensure the passwordComplexity prop is threaded through: Page → DynamicFormSection → DynamicForm → useActionState → schema(). In server actions, add passwordComplexity?: Parameters<typeof schema>[1] to your state type and include it in all return statements to maintain state consistency.

core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts

@@ -335,19 +335,26 @@ function parseRegisterCustomerInput(
 }
 
 export async function registerCustomer<F extends Field>(
-  prevState: { lastResult: SubmissionResult | null; fields: Array<F | FieldGroup<F>> },
+  prevState: {
+    lastResult: SubmissionResult | null;
+    fields: Array<F | FieldGroup<F>>;
+    passwordComplexity?: Parameters<typeof schema>[1];
+  },
   formData: FormData,
 ) {
   const t = await getTranslations('Auth.Register');
   const locale = await getLocale();
   const cartId = await getCartId();
 
-  const submission = parseWithZod(formData, { schema: schema(prevState.fields) });
+  const submission = parseWithZod(formData, {
+    schema: schema(prevState.fields, prevState.passwordComplexity),
+  });
 
   if (submission.status !== 'success') {
     return {
       lastResult: submission.reply(),
       fields: prevState.fields,
+      passwordComplexity: prevState.passwordComplexity,
     };
   }
 
@@ -369,6 +376,7 @@ export async function registerCustomer<F extends Field>(
           formErrors: response.data.customer.registerCustomer.errors.map((error) => error.message),
         }),
         fields: prevState.fields,
+        passwordComplexity: prevState.passwordComplexity,
       };
     }
 
@@ -390,19 +398,22 @@ export async function registerCustomer<F extends Field>(
           formErrors: error.errors.map(({ message }) => message),
         }),
         fields: prevState.fields,
+        passwordComplexity: prevState.passwordComplexity,
       };
     }
 
     if (error instanceof Error) {
       return {
         lastResult: submission.reply({ formErrors: [error.message] }),
         fields: prevState.fields,
+        passwordComplexity: prevState.passwordComplexity,
       };
     }
 
     return {
       lastResult: submission.reply({ formErrors: [t('somethingWentWrong')] }),
       fields: prevState.fields,
+      passwordComplexity: prevState.passwordComplexity,
     };
   }
 

core/app/[locale]/(default)/(auth)/register/page-data.ts

@@ -15,6 +15,17 @@ const RegisterCustomerQuery = graphql(
     ) {
       site {
         settings {
+          customers {
+            passwordComplexitySettings {
+              minimumNumbers
+              minimumPasswordLength
+              minimumSpecialCharacters
+              requireLowerCase
+              requireNumbers
+              requireSpecialCharacters
+              requireUpperCase
+            }
+          }
           formFields {
             customer(filters: $customerFilters, sortBy: $customerSortBy) {
               ...FormFieldsFragment
@@ -68,6 +79,8 @@ export const getRegisterCustomerQuery = cache(async ({ address, customer }: Prop
   const addressFields = response.data.site.settings?.formFields.shippingAddress;
   const customerFields = response.data.site.settings?.formFields.customer;
   const countries = response.data.geography.countries;
+  const passwordComplexitySettings =
+    response.data.site.settings?.customers?.passwordComplexitySettings;
 
   if (!addressFields || !customerFields) {
     return null;
@@ -77,5 +90,6 @@ export const getRegisterCustomerQuery = cache(async ({ address, customer }: Prop
     addressFields,
     customerFields,
     countries,
+    passwordComplexitySettings,
   };
 });

core/app/[locale]/(default)/(auth)/register/page.tsx

@@ -60,7 +60,8 @@ export default async function Register({ params }: Props) {
     notFound();
   }
 
-  const { addressFields, customerFields, countries } = registerCustomerData;
+  const { addressFields, customerFields, countries, passwordComplexitySettings } =
+    registerCustomerData;
 
   const fields = transformFieldsToLayout(
     [
@@ -109,6 +110,7 @@ export default async function Register({ params }: Props) {
     <DynamicFormSection
       action={registerCustomer}
       fields={fields}
+      passwordComplexity={passwordComplexitySettings}
       submitLabel={t('cta')}
       title={t('heading')}
     />

core/vibes/soul/form/dynamic-form/index.tsx

@@ -36,14 +36,15 @@ import { SwatchRadioGroup } from '@/vibes/soul/form/swatch-radio-group';
 import { Textarea } from '@/vibes/soul/form/textarea';
 import { Button, ButtonProps } from '@/vibes/soul/primitives/button';
 
-import { Field, FieldGroup, schema } from './schema';
+import { Field, FieldGroup, PasswordComplexitySettings, schema } from './schema';
 
 type Action<S, P> = (state: Awaited<S>, payload: P) => S | Promise<S>;
 
 interface State<F extends Field> {
   fields: Array<F | FieldGroup<F>>;
   lastResult: SubmissionResult | null;
   successMessage?: ReactNode;
+  passwordComplexity?: PasswordComplexitySettings | null;
 }
 
 export type DynamicFormAction<F extends Field> = Action<State<F>, FormData>;
@@ -59,6 +60,7 @@ export interface DynamicFormProps<F extends Field> {
   onCancel?: (e: MouseEvent<HTMLButtonElement>) => void;
   onChange?: (e: FormEvent<HTMLFormElement>) => void;
   onSuccess?: (lastResult: SubmissionResult, successMessage: ReactNode) => void;
+  passwordComplexity?: PasswordComplexitySettings | null;
 }
 
 export function DynamicForm<F extends Field>({
@@ -72,13 +74,18 @@ export function DynamicForm<F extends Field>({
   onCancel,
   onChange,
   onSuccess,
+  passwordComplexity: defaultPasswordComplexity,
 }: DynamicFormProps<F>) {
-  const [{ lastResult, fields, successMessage }, formAction] = useActionState(action, {
-    fields: defaultFields,
-    lastResult: null,
-  });
+  const [{ lastResult, fields, successMessage, passwordComplexity }, formAction] = useActionState(
+    action,
+    {
+      fields: defaultFields,
+      lastResult: null,
+      passwordComplexity: defaultPasswordComplexity,
+    },
+  );
 
-  const dynamicSchema = schema(fields);
+  const dynamicSchema = schema(fields, passwordComplexity);
   const defaultValue = fields
     .flatMap((f) => (Array.isArray(f) ? f : [f]))
     .reduce<z.infer<typeof dynamicSchema>>(

core/vibes/soul/form/dynamic-form/schema.ts

@@ -1,5 +1,15 @@
 import { z } from 'zod';
 
+export interface PasswordComplexitySettings {
+  minimumNumbers?: number | null;
+  minimumPasswordLength?: number | null;
+  minimumSpecialCharacters?: number | null;
+  requireLowerCase?: boolean | null;
+  requireNumbers?: boolean | null;
+  requireSpecialCharacters?: boolean | null;
+  requireUpperCase?: boolean | null;
+}
+
 interface FormField {
   name: string;
   label?: string;
@@ -151,7 +161,8 @@ export type SchemaRawShape = Record<
   | z.ZodOptional<z.ZodArray<z.ZodString>>
 >;
 
-function getFieldSchema(field: Field) {
+// eslint-disable-next-line complexity
+function getFieldSchema(field: Field, passwordComplexity?: PasswordComplexitySettings | null) {
   let fieldSchema:
     | z.ZodString
     | z.ZodNumber
@@ -183,20 +194,67 @@ function getFieldSchema(field: Field) {
 
       break;
 
-    case 'password':
-      fieldSchema = z
-        .string()
-        .min(8, { message: 'Be at least 8 characters long' })
-        .regex(/[a-zA-Z]/, { message: 'Contain at least one letter.' })
-        .regex(/[0-9]/, { message: 'Contain at least one number.' })
-        .regex(/[^a-zA-Z0-9]/, {
+    case 'password': {
+      const minLength = passwordComplexity?.minimumPasswordLength ?? 8;
+      const minNumbers = passwordComplexity?.minimumNumbers ?? 0;
+      const minSpecialChars = passwordComplexity?.minimumSpecialCharacters ?? 0;
+      const requireLowerCase = passwordComplexity?.requireLowerCase ?? false;
+      const requireUpperCase = passwordComplexity?.requireUpperCase ?? false;
+      const requireNumbers = passwordComplexity?.requireNumbers ?? true;
+      const requireSpecialChars = passwordComplexity?.requireSpecialCharacters ?? true;
+
+      fieldSchema = z.string().trim();
+
+      fieldSchema = fieldSchema.min(minLength, {
+        message: `Be at least ${minLength} character${minLength !== 1 ? 's' : ''} long`,
+      });
+
+      if (requireLowerCase) {
+        fieldSchema = fieldSchema.regex(/[a-z]/, {
+          message: 'Contain at least one lowercase letter.',
+        });
+      }
+
+      if (requireUpperCase) {
+        fieldSchema = fieldSchema.regex(/[A-Z]/, {
+          message: 'Contain at least one uppercase letter.',
+        });
+      }
+
+      if (requireNumbers && minNumbers > 0) {
+        const numberRegex = new RegExp(`(.*[0-9]){${minNumbers},}`);
+
+        fieldSchema = fieldSchema.regex(numberRegex, {
+          message:
+            minNumbers === 1
+              ? 'Contain at least one number.'
+              : `Contain at least ${minNumbers} numbers.`,
+        });
+      } else if (requireNumbers) {
+        fieldSchema = fieldSchema.regex(/[0-9]/, {
+          message: 'Contain at least one number.',
+        });
+      }
+
+      if (requireSpecialChars && minSpecialChars > 0) {
+        const specialCharRegex = new RegExp(`(.*[^a-zA-Z0-9]){${minSpecialChars},}`);
+
+        fieldSchema = fieldSchema.regex(specialCharRegex, {
+          message:
+            minSpecialChars === 1
+              ? 'Contain at least one special character.'
+              : `Contain at least ${minSpecialChars} special characters.`,
+        });
+      } else if (requireSpecialChars) {
+        fieldSchema = fieldSchema.regex(/[^a-zA-Z0-9]/, {
           message: 'Contain at least one special character.',
-        })
-        .trim();
+        });
+      }
 
       if (field.required !== true) fieldSchema = fieldSchema.optional();
 
       break;
+    }
 
     case 'email':
       fieldSchema = z.string().email({ message: 'Please enter a valid email.' }).trim();
@@ -221,21 +279,24 @@ function getFieldSchema(field: Field) {
   return fieldSchema;
 }
 
-export function schema(fields: Array<Field | FieldGroup<Field>>) {
+export function schema(
+  fields: Array<Field | FieldGroup<Field>>,
+  passwordComplexity?: PasswordComplexitySettings | null,
+) {
   const shape: SchemaRawShape = {};
   let passwordFieldName: string | undefined;
   let confirmPasswordFieldName: string | undefined;
 
   fields.forEach((field) => {
     if (Array.isArray(field)) {
       field.forEach((f) => {
-        shape[f.name] = getFieldSchema(f);
+        shape[f.name] = getFieldSchema(f, passwordComplexity);
 
         if (f.type === 'password') passwordFieldName = f.name;
         if (f.type === 'confirm-password') confirmPasswordFieldName = f.name;
       });
     } else {
-      shape[field.name] = getFieldSchema(field);
+      shape[field.name] = getFieldSchema(field, passwordComplexity);
 
       if (field.type === 'password') passwordFieldName = field.name;
       if (field.type === 'confirm-password') confirmPasswordFieldName = field.name;

core/vibes/soul/sections/dynamic-form-section/index.tsx

@@ -1,7 +1,11 @@
 import { clsx } from 'clsx';
 
 import { DynamicForm, DynamicFormAction } from '@/vibes/soul/form/dynamic-form';
-import { Field, FieldGroup } from '@/vibes/soul/form/dynamic-form/schema';
+import {
+  Field,
+  FieldGroup,
+  PasswordComplexitySettings,
+} from '@/vibes/soul/form/dynamic-form/schema';
 import { SectionLayout } from '@/vibes/soul/sections/section-layout';
 
 interface Props<F extends Field> {
@@ -11,6 +15,7 @@ interface Props<F extends Field> {
   fields: Array<F | FieldGroup<F>>;
   submitLabel?: string;
   className?: string;
+  passwordComplexity?: PasswordComplexitySettings | null;
 }
 
 export function DynamicFormSection<F extends Field>({
@@ -20,6 +25,7 @@ export function DynamicFormSection<F extends Field>({
   fields,
   submitLabel,
   action,
+  passwordComplexity,
 }: Props<F>) {
   return (
     <SectionLayout className={clsx('mx-auto w-full max-w-4xl', className)} containerSize="lg">
@@ -33,7 +39,12 @@ export function DynamicFormSection<F extends Field>({
           )}
         </header>
       )}
-      <DynamicForm action={action} fields={fields} submitLabel={submitLabel} />
+      <DynamicForm
+        action={action}
+        fields={fields}
+        passwordComplexity={passwordComplexity}
+        submitLabel={submitLabel}
+      />
     </SectionLayout>
   );
 }