Expired Link Error Block for React

Nothing leaves the page. Pressing it shows a spinner on the button for under a second, then a polite status line says that a new link would be on its way to the masked address and that nothing was sent in this demo, and focus moves to that line because the busy button drops it. To wire it for real, send the reset email from request (keep the same answer whether or not the address has an account) and keep the cooldown in step with your server's rate limit.

They are constants at the top of the file: when the link was sent (SENT_AT), how long it lives (VALID_FOR) and the clock time the page was opened (NOW_AT), all in minutes after midnight UTC. The bar, the marker, the labels and the sentence are derived from them, so the drawing and the text can't disagree, and nothing reads the real clock. In your app, take the sent time and the lifetime from the token's record and the time from the server, so the server and the browser agree.

Yes, from your server: a component can't set it. An expired or used token is usually a 410 Gone (some teams use 400 or 404); send it so crawlers and monitors see an error and not a normal page. Keep the wording generic if the link could belong to someone else: this page says what happened to the link, never who it was for beyond the masked address the visitor already received.

A second press right after the first would send two emails and make the first link useless, so the page asks for a short wait. The Countdown Button shows the seconds in its label and drains a fill behind it; it never changes size, and a screen reader hears one announcement when it starts ("Ask again in 30 s"), not one every second. When the 30 seconds are over the Shine Button returns and a polite line says so.

The drawing is decoration (hidden from assistive technology) and carries a caption for screen readers that says the same thing in a sentence; the list under the heading repeats every fact as text. Nothing is shown by colour alone: the solid bar is the time the link worked, the dashed run is the time since, and the marker's cross is the page's only status colour. The axis keeps its direction in right-to-left languages.

It's a plain link to #: point it at your sign-in route. The page never calls history.back(), because someone who opened the link from an email has no page to go back to.