Email Not Verified Error Block for React

Nothing leaves the page. I've confirmed my email waits under a second and says it checked nothing: the link in the email is what confirms the address. Resend the email shows its 30-second count at once and, after a short wait, a polite line says a new email would go to the masked address and that nothing was sent. Update and resend replaces the address in the page and says the same. To wire it for real, call your confirmation endpoint from check, your resend endpoint from resend and your change-address endpoint from update.

It's a drawing: bars where the words would be, and one row with real words, the message from Streakwell with its subject. Each tab moves that row, because that is what happens: filters file it in Spam or Promotions. The list is hidden from assistive technology and the sentence under it says in words where to look, so nothing depends on seeing the drawing.

Because sending twice in a row confuses people (which link works?) and invites abuse. 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, not one every second. The wait is a demo of the shape: in your app, match it to your server's rate limit.

The buttons and the field are two panes in one grid cell: the unused pane is invisible and inert, so the page never changes height and a screen reader can't reach what isn't shown. Choosing Change email moves focus to the field; Cancel returns it to Change email; a bad address names the problem under the field and keeps focus there; a good one closes the pane and focus moves to the status line. The field is checked when you press the button, never disabled.

Because the page may be seen by someone who isn't the owner of the address: it shows the first two letters and the domain, enough to recognise it and not enough to learn it. Keep the address you mask on the server.

Tab reaches the folder tabs (the arrow keys move between them), then I've confirmed my email, Resend the email and Change email. Every control has a visible focus ring, and a result moves focus to the status line so it is read out.