shadcn.io is not affiliated with official shadcn/ui
Recovery Email Confirmation Login Block for Solid
A recovery step for a casual game that shows the address on file masked and asks for the full address before it sends a code, then takes the six-digit code, with a helpdesk note for anyone without access.
Installation
Overview
Make people prove they know the address before a code goes to it, with this recovery email login block for Solid with Ark UI. It's the recovery step of a Mossquest sign-in, a casual game: the page's side rails run the full height and one band crosses it, with a centred column that starts near the top because a note opens downward. A framed line shows the address on file with most of it hidden. Under it, an Input asks for the full address; a match sends the code, and a mismatch says "That does not match the address we have." with focus on the field. The button is never disabled. The code goes in a six-digit Input OTP, and a done result ends the flow. "I don't have access to that email" opens a short helpdesk note in a Collapsible. It's built from Input, Input OTP, Collapsible, Field, Button, Shine Button and Guides, with a CSS entrance only. For account recovery and any step that confirms a destination first.
FAQ
What stays in the page, and what are the demo values?
Everything. The address on file is marta.enlund@glenpost.example, printed once under the field as the demo address, and the code is 740215, printed once under the code field. Nothing is sent and nothing is changed: the done result says a real product would ask for a new password next, and the helpdesk address in the note is a reserved example one. In a product your server checks the address and sends the code.
Why type the address when it is already shown?
The mask shows only the first and last letter of the name and the start and end of the domain, so typing the whole address proves you already know it, which a stranger who found the page can't do. It doesn't prove you can read that mailbox; the code does that. A real product should also answer the same way whether or not an account exists, so the page can't be used to find out who has one.
How does the address match?
Capitals and spaces at either end are ignored, so " MARTA.Enlund@glenpost.example " matches, and everything else must be the same. An empty field says "Type the full address to continue." and a different address gets the mismatch sentence. Both put focus back in the field, keep the button in place and leave the page the same height.
How is the mask made?
By a small helper from the typed address: the name's first and last letters with three stars between, and the domain's first letter, four stars and its ending. It is the same length for every address on purpose, so it doesn't give away how long the name is.
What does the helpdesk note do?
It is a disclosure for people who can't reach the address: it says where to write, from any other address, with a player name and the day they joined, and how long a reply takes. Nothing is sent from the page. The link is part of the form, so it gives way, with the form, to the done result.
What happens after the code?
A correct code shows "Your account is back" and takes focus, with the masked address and what comes next; Start over returns to the first step with the field empty and focused. A wrong code is named ("That code didn't match. Try the demo code.") and Use a different address returns to the first step with the field empty. The three steps share one space, so the page doesn't change height.