Self-Service Password Reset Login Block for React

Everything. The new password never leaves the field's state, a good press waits 700 milliseconds and shows "Password changed" in the form's place, and nothing is stored, sent or checked against a server. In a product, send the new password and the single-use token from the link to your endpoint over HTTPS, check the rules again on the server (a page can be edited), compare the password with a breached-password list there, and end the other sessions of the account.

By counting rules, not by guessing entropy. Each of the four required rules met fills a segment (twelve or more characters, upper and lower case letters, a number, none of the account's own words or a few common ones), and a symbol adds a fifth only when all four are met. The word under the bar follows the count: None yet, Weak, Fair, Good (all four required rules) and Strong (with the symbol). It is a plain local rule set and says nothing about whether a password has been leaked.

Because a ticked requirement and a missing one must not differ by colour alone. A met rule is a filled circle with a check and the words in a heavier weight; a missing one is an empty circle with a minus. A hidden sentence after each line reads "Met" or "Not met yet", and the meter's segments are filled or outlined, with the word beside them.

The button stays enabled. The first missing required rule is named under the new password ("Add a number.") and in the status line, and focus goes to that field; the confirm field is checked too, and says "The two passwords don't match." or "Type it again to confirm." The symbol is a bonus, so leaving it out never blocks.

Only after a pause. The page waits 600 milliseconds after the last key and then says the verdict once ("Strength: Good. 4 of 5 required rules met."), and says nothing again until the verdict changes, so a screen reader isn't talking over every keystroke. The confirm line is a visible note, not a live region.

Under the form, after the button. The meter stays under the new password field so the feedback is beside what is being typed, and the problem line names the rule that blocks the press, so the list is a reference rather than a step you have to scroll to.