Two-Factor Methods Account Block for React

Edit METHODS at the top: each has an id, a name, a role (primary, backup or off), the days it was added, last used and tested (ISO, empty when never), and a detail such as a key's name or the last four digits of a number. TESTS holds, for each method, what to do and the six digits that pass in this demo; ABOUT is the line a method that isn't set up shows. The count in the header, the band at the foot and the badges are all worked out from the roles, so they stay true as methods change.

Test opens the row's code field with focus in it and says which code to type ("In this demo the code is 482 913"): a real server would never print it, but a demo that couldn't be passed would prove nothing. On the sixth digit the code is checked; a match closes the field, marks the row "Worked on 14 Oct" and says so in the status line, and a miss says what happened and keeps the digits so they can be fixed. Nothing is sent or stored. In your app, post the code to your server in typeCode and write the day it returns.

A person with two-factor on and no method could never sign in again, so the Remove button of the only method is marked aria-disabled and the row says "Your only method, so it can't be removed." The button keeps its place and focus. With two or more, Remove opens an alert dialog (no outside click closes it, Escape and Keep it do); removing the primary method promotes the other one, and the row turns to Not set up with its Set up button, which takes focus. The trigger is passed to AlertDialogTrigger through render.

Add a method opens the first method that isn't set up (and says so when all three are). Set up opens that row's field: a made-up QR code and setup key for the app (copy it with the button; it opens nothing), a name for a key, a number with its country code for text, with the problem shown under the field and focus kept in it. Adding makes the row a Backup, or the Primary when there was none, and says that nothing was registered or sent. Enrolment proper, with a real secret and a verification step, belongs to your sign-in flow.

The rows are a list named for them. Roles and test results are words and icons, never colour. Test and Set up say whether their field is open with aria-expanded and move focus into it; closing it returns focus to the button. The code field is named by its question and described by the demo code and the problem, and the QR code has a text alternative next to the key it holds. The status line is polite and present from the start. The code field is the Input OTP built on a single input and takes one string, kept to digits by the handler.

Each row keeps its icon, name, role and history, with its buttons dropping under them; an open field takes the row's full width, and the QR code sits above the key. The sentence about the set and the foot's status share one line whose space is reserved, so a result never moves the rows.