Forgot Password Login Block for React

Everything. The demo address with a slip, tovah.sandell@gmial.com, is printed once under the field so the hint can be seen. Sending waits 700 milliseconds and shows the result in the form's place; nothing is sent, no link is made and no timer runs on a server. In a product, post the address to your auth endpoint, answer the same way whether or not an account has it, send the link only if one does, and rate-limit the endpoint by address and by network: the page's three-link limit is typed text, not a guard.

A page that answers "no account with that address" lets anyone test a list of addresses and learn who is a customer, a teacher or a pupil. So the result is worded to be true either way ("If an account exists for ..."), and the page says that it does this. For the same reason the real timing and the real message should not differ between an address that exists and one that doesn't; a demo can't show that part, your server has to keep it.

A small function compares the part after the @ with five known mail domains (gmail.com, outlook.com, yahoo.com, icloud.com, hotmail.com). It offers a correction only when the typed domain is exactly one edit from one of them: a letter changed, one missing, one extra, or two neighbouring letters swapped. A domain that is already on the list, or far from all of them, gets no hint, so a school's own domain is never "corrected". The hint is worked out when you leave the field or press Send, never while you are still typing, and typing again clears it.

It stops at the hint, names it in the polite status line and puts focus back in the field; the button is never disabled. A second press with the same text sends what you typed, because the hint is advice and the address may really be unusual. Pressing the corrected address in the hint puts it in the field and keeps the focus there.

The first send starts a 30-second wait, so the button opens in its waiting state: the label counts down ("Wait 30s"), presses are ignored while focus stays on it, and a fill drains behind the label. Each resend says how many of the three links are used, in a typed line under the button; after the third the button still answers, now saying to look in spam or ask the school's admin. With reduced motion the fill is hidden and the count stays as text.

Back to sign in is a plain link at the start of the page in both states; in a product it points to your sign-in route. Use a different address appears once the link is sent and returns to the field, empty of any pending wait, with focus in it.