Phone Not Verified Error Block for React

Everything. Send the code waits a moment and then shows "Demo code: 482913" under the field and says nothing was texted; the code is the constant DEMO_CODE. A wrong code names the problem and keeps focus in the field, an incomplete one asks for all six digits, and Verify the number before the code is sent says to send it first. The right code waits under a second, then flips the three locked rows to unlocked and moves focus to Start over. To wire it for real, send the SMS from send and check the code on your server in verify; never put the real code in the page.

It is six slots that take digits only: typing fills them in turn, Backspace goes back, and pasting a code fills them all. The field is named by its question and described by the demo-code line and by any problem, and it keeps its order in right-to-left languages. It is one input drawn as six slots, with a single value; anything that isn't a digit is dropped as it is typed or pasted.

Because every text costs money and invites abuse, and people press twice when nothing arrives at once. The button shows the seconds in its label, drains a fill behind it and never changes size, and a screen reader hears one announcement when it starts. The label changes to "Send it again" after the first send. In your app, match the wait to your provider's rate limit.

By shape and word: a closed padlock and "Locked" in medium weight, an open padlock and "Unlocked", a tick and "Available" for browsing, which never needed the number. The count beside the heading says how many are still locked and is read as text.

Because the page may be seen by someone other than its owner: it shows the last four digits, enough to recognise the number. Mask on the server, and never echo a full number back to a page that isn't signed in.

The steps come first and the Verify button is on the first screen; the list of what's locked comes after them, in the same reading order as on a wide screen.