Email Verification Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. A countdown would age the preview, so in the copy the Timer is stopped at 30 seconds. The Verify email button opens the real Dialog, modal, with its focus trap, Escape and focus return, and there the clock runs from open. The copy stays closed until a reload. Both show the same VerifyFields component and share the block's state, so digits typed in the copy are there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

CODES holds the codes this demo accepts, one per request, and the dialog shows the current one under the slots, since nothing is emailed. Digits go in one at a time or as a paste; anything that isn't a digit is dropped, and when all six are in the code is checked at once, with no button to press. A wrong code keeps the digits on screen and marks the slots with their border and a message: "That code doesn't match. Tries remaining: 2." Editing clears it. After ATTEMPTS misses the slots lock and the message asks for a new code. The value is one string with a maximum length of six.

The Timer counts down COOLDOWN, 30 seconds, and Resend code is aria-disabled until it finishes: pressing it early says when it will work instead of doing nothing. The digits are in one line beside the button and are not read out every second; a polite message says when you can resend. Resend makes the next code, clears the slots, gives back the three attempts and restarts the clock. Under reduced motion the digits still change, since they are the information. In your app start the wait when your server sends the code and keep the count in a place the server can check too.

Here the code is checked against CODES, a right one shows the result and flips the drawn badge to Verified, Done closes the dialog and the header's button becomes Email verified, and a polite status message says nothing was sent. Use a different email checks the shape of the address, makes a new code and restarts the clock. In your app have your server send the code by email, check it there in check, count the attempts there too, and keep the dialog open with a busy state until it answers.

The real dialog is named by its title, which follows the step, and described by its sentence. Focus starts in the first slot, then moves where the step needs it: to the address field for a different email, back to the first slot for the code, and to the result when the code is right. Escape, Cancel and the close button return focus to the Verify email button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. A verified address has nothing left to verify, so pressing the button then says so and the dialog stays shut.

The copy shown on load docks to the foot of the frame as a bottom sheet, its actions pinned at the bottom, and the slots shrink a little so all six fit at 320 pixels. The real dialog keeps the Dialog's own phone layout, a sheet from the bottom that scrolls inside itself.