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

[matthewvolk]

What/Why?

This PR fixes an issue where the password validation tooltip during customer registration showed hardcoded password complexity requirements instead of the actual requirements configured in the store's BigCommerce Control Panel (Settings > Security & Privacy).

Solution:

• Extended the RegisterCustomerQuery GraphQL query to fetch passwordComplexitySettings from the BigCommerce API
• Modified the password validation schema to accept and apply dynamic complexity settings
• Updated the form component chain to thread password complexity settings from the server through to client-side validation
• Password validation now dynamically generates appropriate rules and error messages based on store configuration

Testing

1. Go to your store's Control Panel → Settings → Security & Privacy
2. Set custom password complexity (e.g., Minimum Characters: 10, Special Characters: 3)
3. Navigate to the registration page on your Catalyst storefront
4. Start typing in the password field with a simple password like "test"
5. Expected: The validation tooltip should immediately show your custom requirements (e.g., "Be at least 10 characters long", "Contain at least 3 special characters")
6. Enter a password that matches the tooltip requirements
7. Expected: Form validates successfully without server errors

Using the following store settings:

With password set to "a":

With password set to "a1":

With all complexity requirements met:

Migration

Breaking Changes: None - all changes are backward compatible.

What Changed: 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.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3ed08b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@bigcommerce/catalyst-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
catalyst	Ready	Preview, Comment	Jan 7, 2026 6:42pm

[matthewvolk]

I can refactor to abstract the new logic into a smaller function if we don't want this here

[jamesqquick]

testing the functionality locally and it worked correctly for me!

[chanceaclark]

What do you think about falling back to the old password complexity limits if this is null or in some weird case undefined?

[matthewvolk]

Sorry I missed this yesterday! I think it's taken care of. Basically, I have a fallback for each of the different requirements, and they should match the original hardcoded (minLength of 8, requireNumbers true, etc.). Copy/pasted below for convenience:

/**
 * Original fieldSchema for reference:
 * 
 * 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]/, {
 *     message: 'Contain at least one special character.',
 *   }
 */

// New 
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;