Deactivate 2FA Dialog Block for React

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

problemOf says what is missing: a password of fewer than MIN_PASSWORD characters, then the unticked box. The action is aria-disabled while anything is missing, not disabled, so it keeps its place in the tab order and a press answers: the reason appears in one reserved line above the buttons, which never moves them, and focus goes to the password or the box. Editing either clears the line. The destructive colour is on that button only; the rest of the dialog stays in the theme's neutral tones.

Here any password of eight or more characters passes, nothing is checked against an account and nothing is turned off. The drawn Two-step cell flips to Off, the trusted browsers cell dims with it, the header's button becomes Turn on two-step, and a polite status message says so. In your app verify the password on your server in confirm, remove the authenticator, the backup codes and the trusted browsers there, keep the alert open with its busy state until it answers, and show a wrong password in the password's own message. Send the account owner an email when the step is turned off.

The real alert is named by its title and described by its sentence, and it opens with focus on Cancel, never on the destructive action, so a stray Enter backs out. Escape and Cancel close it and return focus to the Turn off two-step button; clicking outside does not close it, since an alert has to be answered. Cancel is the focus target through initialFocus. After a confirmed turn-off the button that opened the alert is gone, so about 300 ms later focus moves to Turn on two-step, the button that took its place. The copy shown on load moves no focus; Escape inside it and Cancel close it the same way.

It is the catalog Password Input with the current-password autofill hint, an eye button that shows or hides the characters and is a tab stop, and a hint that says what this demo accepts. The same id is on the input on every base, so its label and message are tied to it. The browser's password manager can fill it, so keep the hint and the label as they are.

The copy shown on load docks to the foot of the frame as a bottom sheet, its actions pinned at the bottom with Cancel beside Turn off verification, and the list and fields scroll above them. The real alert keeps the Alert Dialog's own layout: a centred card as wide as the screen allows, scrolling inside itself if the screen is short.