Sign-In Gate Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Sign in button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same LoginFields component and share the block's state, so an address typed in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

When you press Sign in. An empty email asks for an address, one without an at sign and a dot asks for a full address, an empty password asks for it, and a password under 8 characters says how many it needs. Each problem sits under its own field in a slot that is always there, so the dialog never moves, and the first field with a problem takes focus. The 8 characters are this demo's rule, written once as MIN_PASSWORD: your server decides what really signs a person in.

Nothing signs in. A valid email and password only set a local reader, which lifts the blur on the drawn page, changes its lock row and puts an initials avatar in its top bar; the header's button becomes Sign out, which puts the blur back. "Remember me" stores nothing. In your app, post the address and password to your sign-in endpoint in signIn, set the session in a cookie on the server (never keep the password in state longer than the request), show the server's reason under the field on a refusal and keep the dialog open.

They say they aren't connected: pressing one swaps the word "or" between the form and the rows for "Google isn't connected in this demo" and the polite status says it too. The tile holds two typed letters, not a logo. In your app a row starts your OAuth redirect, and the tile is an icon slot for the provider's own mark, used under its brand terms.

Yes. The email field is autocomplete="username" with a real email type and the password field is current-password, so managers recognise the pair. The eye button is a real button you can reach by keyboard: Enter or Space shows or hides the password, and Enter in either field submits.

Yes. The real dialog is named by its title and described by its sentence, focus starts in the email field and stays inside until it closes, and Escape, Cancel and the close button all return focus to the Sign in button. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on Sign in. One polite status message reports each result.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Sign in on top, and the fields scroll above them; the provider rows stack. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.