password-strength-on-set-update

name	password-strength-on-set-update
description	On every page where a password can be set or updated, include the PasswordStrengthMeter component.

Password strength on set/update

When to use: When adding or changing any form or page where a user can set a new password or update their password (signup, create user, create admin, change password, reset password, etc.).

Rule

Include the PasswordStrengthMeter component (from @boilerplate/ui) on every page where a password can be set or updated:

• Place it directly after the new password input field (the field that is being set or changed). For "change password" flows with current + new + confirm, the meter goes after the new-password field and before the confirm field.
• Pass the current value of the new-password field: <PasswordStrengthMeter password={newPassword} />.
• Always render the meter (do not condition on password !== ''). When empty, the component still shows requirements and an empty bar so the user sees it is present; when they type, the strength updates. Hiding the meter when the field is empty makes the page look like it has no strength indicator.

Where it applies

• Signup / create account: After the password (or main password) field.
• Create user (management): UserForm create mode — after password input.
• Edit user – change password: UserForm edit mode — after new password input.
• Create admin (management): AdminForm — after password input.
• Edit admin – change password: AdminForm edit mode — after password input (when shown).
• Settings – change password: Management-web SettingsContent and web SettingsPageContent — after new password input.
• Reset password: ResetPasswordForm — after new password input (already present in UI package).

References

• Component: packages/ui/src/components/form/PasswordStrengthMeter/
• Examples: UserForm.tsx, AdminForm.tsx, SignupForm.tsx, ResetPasswordForm.tsx, SettingsContent.tsx, SettingsPageContent.tsx.