Multi-Factor Authentication Settings Block for React

Edit GROUPS at the top: each role has how many people hold it and the ones who haven't set a second step up, each as initials and a name. The counts, the coverage figure, the people drawn and the reminder label are all worked out from those, and SCOPES says which roles each choice covers. AS_OF is the fixed day the grace period is counted from. In your app, read both from your directory rather than typing them.

The people in scope who have a second step set up, out of the people in scope: all 42 for everyone, the 6 owners and admins for the second choice. For nobody, nothing is required, so it counts the people who use one without being asked and says so in its title, and there is no one to remind. The people drawn are the ones still missing, with their names kept for screen readers, and the room for them is reserved so the panel doesn't change height when the scope does.

A policy that allows no method would lock everyone out, so unticking the last one is refused: the box stays ticked, a message under the list says why, the status line says it too and focus returns to the box. You can tick another method first and then untick the one you wanted gone. The SMS note is always visible rather than a tooltip, so it reads the same by keyboard and by touch.

Everything. Nothing is enforced, saved or sent: the policy lives in this page's state, Save only says what it kept, and Remind says "Reminder queued in this demo. Nothing was sent." once and then that one is already queued. To make it real, store the policy with the workspace, ask for a second step at sign-in once the start day passes, send the reminder from your server and read the coverage from your identity data.

The three choice cells stack, the methods keep their rows, the sentence reserves its lines and the action foot is pinned to the bottom of the screen. The choice cells are native radio buttons in a group, so the arrow keys move between them, every checkbox is named and described by its hint, the meter is hidden from assistive technology and restated by its figure, and the status line is a polite live region present from the start.