Password Re-Entry Confirm Dialog Block for React

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

Nothing real. It compares what you type with PASSWORD ("harbour", which the hint gives away), counts three tries, and after the third locks the field until the dialog is opened again. A right password only flips local state: the Danger zone card collapses to a line saying the project was deleted in this demo, and the header's button becomes Undo delete. In your app send the password to your server's re-authentication endpoint in confirm, never compare it in the browser, rate-limit it there, and delete only on a success.

From the key events: while you type, each key press and release reports the state of Caps Lock (getModifierState), and the line under the field says "Caps Lock is on" politely. A browser reports it only once a key has been pressed, so the note can't appear before that.

Because it deletes: a destructive confirm is the destructive Button, not the Shine Button, and the gate stays one field and one sentence. The list of consequences is a different block's job (the account deactivation and deletion dialogs), and a typed project name is the one in the billing downgrade. The button is off until the field has text, and the field takes the rest of the dialog's attention.

Yes. The real alert dialog is named by its title and described by its sentence, first focus lands on Cancel, so a stray Enter cancels, and Escape and Cancel return focus to the Delete project button; Enter in the field submits. The trigger is passed to AlertDialogTrigger through render, the dialog is controlled with open and onOpenChange, and first focus is set with initialFocus. The copy shown on load moves no focus. After the project is deleted, focus goes to the header's Undo delete button.

The nudge on a wrong password is dropped: the field stays still and the line under it still says how many tries are left, so nothing depends on the movement. The dialog's own entrance respects the setting too.