Password Strength Form Block for React

It is a small rule set in a pure function, scoreOf: one segment each at 8, 12 and 16 characters, one more for three kinds of character or three words, nothing at all for a password in the typed common list (a trailing number or mark does not help), and at most one segment when it contains a word from the email or repeats four or fewer different characters. That is a rough guide, not an estimator: it cannot know that a sentence from a famous book is a bad idea. For a real product use a library such as zxcvbn on the client and, whatever it says, check the password against breached lists on your server.

A checklist turns a password into a puzzle of rules and teaches people to add "1!" to the end. One sentence that names the weakest thing first (the common list, your own name, length, repeats, then variety) says what to do next and nothing else, and it is tied to the field with aria-describedby, so a screen reader reads it when the field is focused. The ladder in the side cell shows what each level means; nothing in it is a rule to tick off.

Nothing is set. The button stays enabled, the field is marked invalid, the sentence under the meter gets its alert icon, focus goes to the field and the foot says "Not set: pick a stronger password." A password has to reach Good (3 of 4 segments) and match the confirm field. Disabling the button instead would hide the reason from the people who need it most, and a disabled button cannot take focus or be read on its own.

Not one announcement per key. The level is said once, in the foot's single polite status, after you pause for about 600 milliseconds ("Strength: Good."), and the advice and the match line are read when you move to their fields. A refusal and the result are spoken at once, and after a good set the result takes focus.

Everything: the passwords live in the block's state, nothing is hashed, stored or sent, and after a good set both fields are cleared and the foot says nothing was stored. In your app derive the vault key from the password on the device (never send it as it is), send only what your design needs from submit, and show the server's answer in the same status line. Keep autoComplete="new-password" on both fields so password managers offer to save it.

Keep the typed text as the form's value and scoreOf as the rule. With react-hook-form, register both fields with Controller, put the strength and the match in a resolver, and keep the meter reading watch("password"). With TanStack Form, validate password on change with scoreOf and confirm with a listener on password, and keep the advice sentence out of the validator, so it can change without an error.