Split Product Sketch 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, if you ticked Remember me, "Stays signed in on this device"; a polite status message says nothing was sent. Sign out brings the form back with your email still filled in. To wire it for real, post the email, the password and the Remember me choice to your auth endpoint where the code says so (a server action or your auth library's sign-in call), keep the busy state until it answers, then redirect, or show its error under the field it concerns. Forgot password and Create an account are # links to point at your own routes.

A disabled button can't explain itself, and keyboard users can't reach it. Here it stays enabled: pressing it with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first, which reads its problem out. Typing clears that field's problem. The browser's own validation bubbles are turned off with noValidate, so the messages look the same in every browser, and each field keeps a line for its problem even when there is none, so a problem never pushes the page.

Edit the typed lines of the basket (name, note, quantity and price in cents). The item count and the total are worked out from them, so the picture can't disagree with itself, and each row's icon is a child you can swap for another. The sketch is decoration: it is hidden from screen readers, and what it shows is said in the line under it, so keep that line true when you change the picture. Fit it to your own product by drawing its real screen from your own components.

It sets one choice and shows its effect in the result, as a real form would send it: ticked, the sign-in lasts on this device; unticked, only until the tab closes. Nothing is stored. When you wire it up, pass the value to your auth call so the session cookie gets the longer or the shorter lifetime. The checkbox is a real labelled control in the foreground tones, so the Shine Button stays the only primary-colored element.

The form comes first in the markup, so Tab order and the reading order for a screen reader start with the sign-in and the heading, and on a phone, where the side is gone, nothing has to be reordered. The side is placed at the start of the band with two grid classes (lg:col-start-1 lg:row-start-1) and the divider is its end border. It follows the page direction, so in a right-to-left layout the side sits at the right.

The sketch is hidden below 1024 px (max-lg:hidden), so a phone shows the product's mark, the heading, the form and the Sign in button, which ends on the first screen, with the page's rails and band intact. The sketch is a picture of the product, not part of signing in, so nothing is lost; if you want a proof on phones, add a line under the form.