Privacy Notice Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed and the notice version you read, and a polite status message says nothing was sent; Sign out brings the form back. For real, post the email, the password and the version of the notice that was read from the submit handler where the code says so, keep the busy state until the server answers and show its error under the field it concerns. The notice version and the rows of "What Meadowpath keeps" are typed constants at the top of the file: replace them with the values your policy states.

Each is a button with aria-expanded and aria-controls pointing at its sentence, named "Why we ask for your email" or "Why we ask for your password" for assistive technology while showing the short words. Pressing it shows the sentence under the field and pressing again hides it; the sentence stays while you type. The space for it is always reserved: it is the same two lines the field's problem uses, so nothing moves when you open one, press Sign in or fix a field. If the field has a problem showing, opening its reason replaces the problem line until the next press of Sign in.

Ask for what the law and your lawyer say, and say it plainly. Reading a notice is usually not a consent to process data; consent is for optional uses like marketing, which should be separate and never pre-ticked. This block shows a required confirmation box because the plan asks for one: the box is never pre-ticked, pressing Sign in without it marks it and says so, and the version you store with the sign-in is the one that was on screen. Drop the box if you only need to link the notice.

From KEPT, a typed list at the top of the file, and NOTICE, the version and its effective day. They are example values for a fictional portal: replace them with what your own notice says, and keep the summary short, with a link to the full text. A summary that disagrees with the notice is worse than none, so change both together.

Yes. Tab runs through the email, its Why we ask button, the password, its show and hide toggle and Why we ask button, the checkbox and its link, Sign in and the quiet link, then the summary. Enter in a field signs in. Each problem is tied to its field with aria-describedby, focus goes to the first problem, and after signing in it moves to the result's heading while a polite status message says what happened. Pressing anywhere on the checkbox's row ticks it.

The summary moves under the form behind a rule, so the form and Sign in come first and end on the first screen. The Why we ask buttons stay at the end of the label rows, and their sentences use the reserved lines under each field, so the page keeps its height as you read them.