Maintenance Mode Settings Block for React

Edit SAVED at the top: whether it is on, the first and last day with an hour each, the headline, the message and the bypass addresses. AS_OF is the fixed current day a window can't start before, HOURS the hours the selects offer, and MAX_BYPASS, MAX_HEADLINE and MAX_MESSAGE the limits. The sentence under the title, the hours count and the time the page says people are back are worked out from those.

Click the headline or the message, or press its pencil button (the keyboard route), and a field takes its place at the same size: Enter or a click away keeps the change, Escape drops it, and an empty headline or message puts the saved text back and says it can't be empty. The page updates as you type, the unsaved count follows, and the status line says when a headline or message was updated. The drawn page is a region named for what it shows.

It holds up to five IPv4 addresses or ranges, and the popover refuses anything else with a message under the field (press Enter or a comma to add one, Backspace or the chip's button to remove it). The count shows on the Bypass button and in the sentence. Escape closes the popover and returns focus to the button. Nothing here lets anyone in or keeps anyone out.

Everything. Nobody is locked out and no page is served: the window, the copy and the addresses live in this page's state, and the live store is a drawing. To make it real, save the plan on your server, serve the maintenance page (with a 503 status and a Retry-After header) to everyone outside the bypass list while the window is open, and check the bypass list against the address your server sees behind your proxies.

The bar wraps into rows (the switch and Bypass, then each end of the window with its hour), the drawn page keeps its height and the foot is pinned to the bottom of the screen with the one primary. The switch, the date fields, the hour selects and the popover's field are all named, dates and hours are in UTC and say so in their labels, the status line is a polite live region present from the start, and with the switch off the maintenance copy is hidden from assistive technology rather than only from sight.