Lockout Recovery Login Block for React

Everything. The four routes, their times and the count of requests (two of five left when the page opens) are typed constants; starting a route waits 700 milliseconds, takes one request and shows "Recovery started" in the page's place. Nothing is sent. In a product, check what the account really has on file instead of asking, rate-limit by account and network on the server, and start the route there; the page only shows the choice.

By a pure function of the ticked boxes. Each route needs one thing (a backup code, a phone, an email) except the helpdesk, which needs nothing. The routes you can use come first, fastest first (a backup code, then a text, then email, then a person), and the ones you can't follow in the same order. The best one is the card; the rest are the numbered list under it. Nothing is random and nothing reads a clock.

It clears the other three boxes and leaves only the helpdesk, whose typed reply time ("about 4 working hours") appears on the card. Ticking any of the others clears it again, so the two statements can't both be on. With nothing ticked the card says so and offers the helpdesk too, because a person can check who you are when nothing else works.

The count under the button starts at two of five. Each started route takes one, and Start over keeps the count. At none left the button still answers: a message in words names it ("No requests left today. They come back at 00:00 UTC.") with an alert icon, and focus stays where it was. The count is local to the page and resets on a reload.

No. The card's title, time and sentence have reserved lines, the other routes are always three rows, and the result replaces the chooser in the same space. A glyph and words (a check and "Also available", or a minus and what it needs) mark each route, so nothing depends on colour.

Every cell is a labelled checkbox in tab order; Space ticks it, and the best route's card updates and is announced in the polite status line ("Best for you: Reset by email, about 3 minutes."). The Start this route button, next in tab order, starts the route.