Change Password Account Block for React

Edit the constants at the top. NEEDS names the five requirements in the order the line reports the first one missing, and metOf says which a password meets; change both together and the count ("3 of 5"), the line and the refusal on submit all follow, since they are worked out from them. SESSIONS, APP_PASSWORDS and DEVICES are what the account holds besides this session: the box titles and the closing sentence are built from them, so they stay true. DEFAULTS says which boxes start ticked.

Nothing leaves the page. The button waits less than a second, then clears the form and says in the status line that the password was updated in this demo and nothing was saved; focus moves to that line, since the button disabled itself while it worked. The button is marked aria-disabled rather than disabled while the form is incomplete, so it keeps its place; pressing it (or Enter in a field) shows each problem and moves focus to the first. In your app, post the current and new passwords to your server in submit, then end the sessions, app passwords and trusted devices the boxes name, and show the server's answer in the same line.

It can't be in a demo: any password of 8 or more characters passes, which the first band says beside the fields. A real app checks it on the server before anything changes, which is the point of asking: someone at an unlocked laptop shouldn't be able to take over the account. Keep the field's autocomplete value so a password manager can fill it.

A meter guesses; the five requirements are rules, so the line says plainly how many are met and the first one still needed, and the field's problem on submit repeats it. Nothing turns green or red: the count and the words carry it, so it reads the same in any theme and to a screen reader. The line has a reserved height, so typing never moves the fields below it.

Every field has a visible label and the show button is named; a problem sits in the line under its field, tied to it with aria-describedby, with an icon and words in the text colour. The three boxes are a fieldset with a hidden legend, each named by its title and described by its line. One polite status line is present from the start. The boxes use the Checkbox's checked and onCheckedChange, with each label tied by htmlFor.

The bands stack with their title over the fields, the three boxes keep their descriptions under them, and the foot sticks to the bottom of the screen while the form scrolls under it, with Change password and Discard side by side. From the medium breakpoint the foot is simply the last band.