Email and Password Form Block for React

Because an attacker could use it: "no such email" lets anyone test which addresses have accounts. Here a well-formed pair that does not match marks both fields aria-invalid, shows one sentence ("That email and password do not match") under the password and moves focus to the email, so the person fixes the likelier typo first. Missing or malformed input is a different case: that is reported by field ("Enter your email address."), since it says nothing about any account. Your server should answer the same way in the same time for an unknown email and a wrong password.

The password field reads getModifierState("CapsLock") on each key press and release, and forgets it when the field loses focus, so the warning only shows while you are typing there. Browsers only report the key's state when a key event arrives, so the warning can appear a keystroke late, and some systems (a few Linux setups, some remote desktops) do not report it at all; the reveal button is the fallback. The warning is a plain line in the field's description slot and in the foot's single status, never a modal or a toast.

autoComplete="username" on the email field (with type="email") and current-password on the password, with name set on both and the label tied to each field by htmlFor. The email is not rewritten as you type and the password is never trimmed. The reveal button is a real button in the tab order, with a pressed state, so it works without a pointer.

Everything. One demo account is typed in the file (ACCOUNT) and checked in the browser, and a good pair waits 700 milliseconds, clears the password and says "Signed in, in this demo. Nothing was sent." In your app post the pair from submit over HTTPS, set the session cookie on the server, and keep the generic wording for any refusal. Add rate limiting and a lockout on the server; the form cannot do that for you.

One polite status in the foot, present from load: the Caps Lock warning, a refusal ("Not signed in: that pair does not match.") or the result, each once. The failure sentence and the empty-field messages sit under their fields and are part of each field's description, so they are read when the field is focused; the button stays enabled so nothing is hidden from people who cannot see why it was off. After a good sign-in the result takes focus, because the busy button disables itself while it works.

Register the two fields and keep the generic failure as a form-level error. With react-hook-form, use register for the email and Controller for the password input, and set the failure with setError("root", ...) from the submit handler, then focus the email. With TanStack Form, validate each field's shape on blur and return the server's refusal from onSubmitAsync as a form-level error, so both fields can be marked invalid at once.