SSO Config Account Block for React

Edit the constants at the top: COMPANY and DOMAIN (the domain the person types, as the admin gave it), GRACE_DAYS (how long the password keeps working and Switch back stays open), SESSIONS, and LINES, the terms, each with a term, what it says before and what it says after. The day the password stops is worked out from a fixed AS_OF day and GRACE_DAYS, never the clock. CHECKS holds the things to tick. The counts, the status line and both tenses are worked out from these.

Confirming only flips this page's state: no identity provider is contacted, no session is ended and nothing is stored, and the status line says "in this demo". To wire it, check in confirm that your server accepts the typed domain for this person's organisation, start the redirect to the company's identity provider, end the other sessions there and schedule the password to stop on the cut-off day; Switch back calls the endpoint that cancels the schedule.

Hiding the main action until it is allowed would make the page jump and leave people wondering where it went. It stays in place with aria-disabled; pressing it says what is missing and focuses the first unticked box. Moving to company sign-in can lock someone out, so the dialog also asks for the domain typed. That slows a careless press without making the careful one hard, and a wrong domain says so in words and keeps the action off. The trigger is passed to AlertDialogTrigger through render, and first focus lands in the domain field.

The boxes give way, in the same place and at the same height, to a confirmation and the day the password stops; the terms at the start switch to the past tense; and the main button becomes an outline Switch back. Pressing it puts the boxes back, unticked, and says so. The two states of each part share one grid cell, so nothing moves when you switch.

The terms are a real description list, the boxes are a group with a legend, and each box is named by its title and described by its line. The unseen state of each part is inert and hidden from assistive technology. The dialog traps focus, closes with Escape and has no outside-click close. The domain field names its problem in words with an icon, and one polite status line reports each result. Dates and the domain keep their direction in an RTL layout.

The two cells stack, terms first. The status line and the main button pin to the bottom of the screen while the boxes scroll under them, so the action is always in reach.