Verify Identity Code Delivery Login Block for React

Everything. The code is 358204 for every method, printed once under the field. The destinations are made up and typed into the file, and the hour's count is a number in the page's state that starts at one send already used, so "2 of 3 codes left this hour." is what you see first. Nothing is sent; in a product your server sends the code, keeps the count per account, and answers the same way for an address it doesn't know.

Each text message or email takes one of three codes an hour. The line under the card follows it ("1 of 3 codes left this hour."), and at none it says "No codes left this hour. It starts again at 11:00 UTC." and Send code is refused in words, with the card staying where it is. The reset is a fixed clock time, not a ticking value, so nothing on the page counts down by itself.

Nothing leaves your server for it: the app makes the code from a shared secret and the clock. Choosing it shows "Enter an app code" in place of "Send code", goes to the code field without taking one from the hour's count, and works even when the count is at none, which is the point of offering it.

This step comes before sign-in is finished, so the page shouldn't show a full number or address to someone who may not be the owner. The masked forms are enough to recognise your own. Keep the masks the same shape on every account, so they don't reveal how long a name is.

The three rows are one native radio group: Tab reaches it, the arrow keys move between the rows and choose one, and Enter sends. Each row is a label, so pressing anywhere on it chooses it. Change method returns to the group with focus on the row that was chosen.

After Send code to the first box of the code field, after a wrong code back to the first box, after Change method to the chosen row, and after a correct code to the "You're verified" heading. Nothing takes focus on load.