shadcn.io is not affiliated with official shadcn/ui
Lockout Recovery Login Block for Vue
A recovery chooser for a utility account where ticking what you still have (email, phone, a backup code or none) ranks the ways back in live, with a daily request count.
Installation
Overview
Let people tell you what they still have, and pick the quickest way in from it, with this lockout recovery login block for Vue with Ark UI. It's the recovery chooser of a Wattleigh Energy account: the page's side rails run the full height and one band crosses it, holding a centred column. A framed group of four Checkbox cells asks what you still have (my email, my phone, a backup code, none of these), and a card names the best route for the ticked set with how long it takes, with the other routes under it in order, each with a glyph and words for "also available" or what it needs. "None of these" clears the others and leaves the helpdesk, with its typed average reply. Start this route spends one of the day's five recovery requests and, at none left, says so in words. It's built from Checkbox, Label, Button, Shine Button and Guides, with a CSS entrance only. For account recovery where the right route depends on what the person can still reach.
FAQ
What stays in the page, and how do I wire it for real?
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.
How are the routes ranked?
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.
What does None of these do?
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.
What happens when the day's requests run out?
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.
Does the page move as I tick boxes?
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.