Trusted Devices Account Block for React

Edit DEVICES at the top. Each has an id, a name the person recognises, the browser and system as where, the ISO day it last signed in as used, and two booleans: code (it skips the sign-in code) and password (it also skips the password prompt, which only counts while code is true). LIMIT is how many devices an account may trust, and the meter and the count in the heading are worked out from the list. Never name a device model: name what the person would call it.

Skipping the password prompt before sensitive changes only makes sense on a device that also skips the code, since a device that always asks for a code is never fully trusted. So the second switch is disabled while the first is off, shows off, and the sentence under the table says it is unavailable while the code is asked. Turning the first off turns the second off too. Both switches are named for their device ("Skip the sign-in code on Phone").

It is written from the chosen device's two switches: for a device that skips both, that if it is lost someone could change the account's email without a code; for one that skips only the code, that someone with the password could sign in but sensitive changes still ask for it; for one that skips neither, that it asks for both. Changing a switch picks that device, so the sentence always describes what you just did. Edit consequenceOf to match the rules of your own product.

Pressing Forget swaps the button, in place, for Cancel and Confirm, with focus on Cancel; Escape or Cancel put the old button back, and Confirm removes the device from the list in the page, says so in the status line and moves focus to the next device. Nothing is sent and nothing is saved: the switches and the list live in the page. In your app, call your server in the handlers that change a device and in forget, and return a forgotten device to the sign-in prompt on its next visit.

It is a native table with a caption, column heads and a row head for each device, and every switch is named for both what it does and the device. The device name is a button that says whether it is chosen with aria-pressed; the table sits in a scrollable region that takes a tab stop, in case it ever has to scroll. Forget and its confirmation name the device, and one polite status line reports each change. The switches use checked and onCheckedChange.

The table keeps its markup and turns into one card per device: the name and where it was last used on top, then each switch on its own line with its label at the start, then Forget. The sentence under it has room for the longest of its three versions, so choosing a device never moves the page.