Alert Banner Login Block for React

The window, the title and the Details text are typed constants, and the dismissed state lives only in the page: reload and the notice is back. Sign-in waits under a spinner for less than a second, then shows "You're signed in" and a polite status message says nothing was sent. To make it real, fetch the active incident or maintenance window from your status service or a feature flag when the page renders, remember the dismissal per incident (session storage is enough) so a new incident shows again, and post the form to your auth endpoint where the code says so.

An alert interrupts a screen reader the moment it appears, and a scheduled window isn't urgent. The notice is a plain note that is read in its place, and the block's one polite status message speaks only what you do: hiding or showing the notice, then the sign-in result. An outage that is happening now is different: that one deserves an alert and, if sign-in is down, a way to keep people from trying.

The page is centered, so a notice that left the layout would shift the heading and the fields. Dismissing keeps the notice's room and only hides it, out of reach of the keyboard and screen readers, and the form stays where it was. Focus moves to "Show it" at the foot, and showing the notice moves focus back to its dismiss button, so Tab continues from the right place.

It opens on a press, Enter or Space, closes on Escape or a press outside, and returns focus to the Details button. It holds a title, two sentences about what pauses (creating databases and restoring backups) and what does not (sign-in and running databases) and a link to the status page; point the link at yours.

The window is stored as two UTC instants and formatted with Intl.DateTimeFormat in UTC, so the server and every visitor's time zone print the same words, and the notice says UTC so nobody guesses. To show a visitor's local time too, compute it after mount and add it as a second line, so the first paint never differs from the server's.

A disabled button can't explain itself, and keyboard users can't reach it. Pressing Sign in with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first. Typing clears that field's problem, and each field keeps a line for its problem even when there is none, so nothing moves when one appears.