Two-Factor Required Error Block for React

Nothing leaves the page and nothing is set up. Pressing it shows a spinner on the button for under a second, then a polite status line says what a real page would open (step 1 of the chosen method) and that this demo set up nothing; focus moves to that line because the busy button drops it. Ask the admin for more time is the same: a note that a request would go to the workspace admin. To wire it for real, start your enrolment flow from setUp and send the request from askMore.

From two typed dates (the day the grace period began and its last day) and one AS_OF day standing in for today. The segments, "6 of 14 days left" and the deadline are worked out from them with UTC day numbers, so they read the same on the server and in every time zone, and nothing reads the clock. In your app, take the dates from your workspace's policy and the date from the server.

Yes. The cells are native radio buttons inside a labelled radio group: Tab reaches the group, the arrow keys move between the three methods and choosing one is the same as clicking it. The chosen cell is a solid tint with a heavy edge and a filled dot, never colour alone, and a polite line says which method was chosen.

Because people decide faster when they can see what the work is. The Steps list previews the three steps of the chosen method and changes with it; it isn't a wizard and takes no clicks. Its three rows have the same height for every method, so choosing one never moves the page.

A sign-in challenge asks for a code you already have; this page tells someone their account is about to be locked unless they enrol a factor, and gives them a deadline and a way to ask for more time. It has no password field and no code field.

Your server decides what to send. A page that blocks access until a policy is met is usually a 403 with this screen as the body; a page that still works during the grace period would be a normal 200 with a banner. Send the real status where you render this page.