Trusted Device Management Login Block for React

Everything. The four devices and the day trust began are typed constants, forgetting and trusting change the page's state only, and no cookie is written. In a product, give each trusted browser a random token in an HttpOnly cookie and keep a record on your server with the day trust began; the expiry is that day plus 30 days. Forget deletes the record (and signs that device out of the shortcut), and Trust this browser creates a new one after the person has passed the full sign-in.

From two typed days, never the clock: the demo's own today and the day each device's trust began. Days remaining are 30 minus the days elapsed, and the meter is that number over 30. Because the day is typed, the page reads the same whenever it is opened. Trusting this browser again sets its day to the demo's today, so its meter reads 30 days.

Forgetting removes the shortcut, so the next sign-in from that device asks for a code again. It opens an alert dialog: Cancel, labelled Keep trusting, takes the first focus, Escape also keeps the device, and the confirm names the device ("Forget iPhone"). It is the destructive style with text tuned to read at AA in both themes.

Undo is always in the foot and brings back the most recently forgotten device in its old place, one press per device. When nothing is left, a designed empty state takes the list's space, and the panel does not change height because an unseen copy of the full list holds it. Trust this browser then brings this browser back with a fresh meter.

The session limit is a gate that blocks the sign-in until a screen is given up. The account area's trusted devices page is the full manager, used after you are in, with a switch per device. This is the pre-sign-in choice about this browser: how long each device keeps skipping the code, forget one, trust this one.

Yes. Each Forget button is named for its device ("Forget iPhone", an icon alone on a phone), the meters are decorative because the words say the same thing, and the status line announces each change. After a device leaves the list, focus moves to Undo, which is always present.