Password Policy Settings Block for React

Edit SAVED for the starting rules, BREACHED for the short list of passwords refused when that rule is on (compared in lower case) and HISTORY for the sample member's earlier passwords, newest first. AS_OF is the fixed day expiry is counted from, so the date in a verdict is that day plus the chosen days. The sentence, the counts and every verdict come from pure functions over those, so nothing is typed twice. The breached list here has eight entries standing in for a real one.

Only the first, in a fixed order: length, number, symbol, upper and lower case, the breached list, then history. The order is the order of the rules on the page, and the tester says so. A rule that is switched off is skipped, and "Used before" only fails while the history is long enough to include it: choose the last 3 and the fifth-newest sample is accepted. The status line says a short version of the verdict a moment after you stop typing, never on load and never on every key.

No. It lives in the field's state in this page, is compared in the browser with the typed lists and goes nowhere. The field is a masked Password Input with its own show button, set up as a new password so the browser doesn't fill in a saved one. In your app, never test real passwords against a policy on a server you don't control, and check breached passwords with a service that never receives the password itself, such as one that takes only a hash prefix.

Everything. Nothing is saved or enforced: Save keeps the rules in this page's state and says so. To make it real, store the rules with the account, run the same checks on the server when a password is set or changed, and use a real breached-password source. The expiry date and the history need the account's real password history, which only the server has.

Below the large breakpoint the tester sits under the rules, the rules keep their rows and the action foot is pinned to the bottom of the screen. Every control is named, the verdict has a word and a dot (solid when accepted, a ring when rejected, never colour alone) and is tied to the field as its description, and the status line is a polite live region present from the start.