Change Password Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Change password button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same PasswordFields component and share the block's state, so what you typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

RULES lists the five rules and metOf says which a password meets, so the checklist, the meter and the word beside it all come from one source: the meter fills one step per rule, from Weak through Fair and Good to Strong. A rule's glyph changes shape when it is met, a ring becoming a tick, and its words carry the state too ("met", "not met"), so colour is never the only signal. The checklist is not a live region, which would chatter at every key. About 600 ms after you stop typing, one polite message gives the word, the count and whether the two new passwords match. Change the rules to your own policy; keep the checklist and the server's check the same list.

Here it changes nothing: the current password isn't compared with anything and nothing is stored or sent. Update closes the dialog, the drawn password row reads Updated in this demo, a polite status message says nothing was stored, and focus returns to Change password. In your app send both passwords to your server in update, check the current one there, keep the dialog open with a busy state until it answers, and show a wrong current password in that field's own message. Re-check every rule on the server, since the browser's checks can be skipped.

A disabled button leaves the tab order and says nothing about why. Here Update password is aria-disabled while anything is missing, so it can still be reached, and pressing it, or pressing Enter in a field, shows the first missing thing in one reserved line that never moves the buttons and puts focus on the field it belongs to. Editing any field clears the line.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the current password field and stays inside until it closes, and Escape, Cancel and the close button all return focus to Change password. Each field is named by its label, with the autofill hints that let a password manager fill the current password and offer a new one, and each show button is a tab stop that Enter and Space toggle. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on Change password.

The copy shown on load docks to the foot of the frame as a bottom sheet, its actions pinned at the bottom, and the fields scroll above them; the checklist is one column. The real dialog keeps the Dialog's own phone layout, a sheet from the bottom that scrolls inside itself.