0.2.63 update

admin-ui/src/components/Layout.tsx

@@ -7,6 +7,7 @@ import { nav } from '../nav';
 import { useNotifications } from '../lib/notifications';
 import { useGateway } from '../lib/gateway';
 import { time } from '../lib/format';
+import { Confirm } from './ui';
 
 /* The shell: a top bar spanning the width, a rail down the left, and the page.
  *
@@ -105,12 +106,12 @@ export function Layout() {
   const { version, online, checkedAt, status, setMaintenance } = useGateway();
   const [railOpen, setRailOpen] = useState(false);
   const [changingAvailability, setChangingAvailability] = useState(false);
+  const [confirmingOffline, setConfirmingOffline] = useState(false);
   const location = useLocation();
   const offline = Boolean(status?.maintenance?.enabled);
 
   const toggleAvailability = async () => {
     if (changingAvailability || !status) return;
-    if (!offline && !window.confirm('Take Memby offline for every television?')) return;
     setChangingAvailability(true);
     try {
       await setMaintenance(!offline);
@@ -162,7 +163,7 @@ export function Layout() {
             aria-pressed={offline}
             disabled={!status || changingAvailability}
             title={offline ? 'Bring Memby back online' : 'Take Memby offline'}
-            onClick={() => void toggleAvailability()}
+            onClick={() => offline ? void toggleAvailability() : setConfirmingOffline(true)}
           >
             <span className="dot" />
             <b>{offline ? 'offline' : online ? 'online' : 'not responding'}</b>
@@ -182,6 +183,20 @@ export function Layout() {
       <main className="page" id="main">
         <Outlet />
       </main>
+      {confirmingOffline ? (
+        <Confirm
+          title="Take Memby offline?"
+          body="Every television will stop working immediately. Viewers will see the maintenance message configured on the Maintenance page, while this console remains available."
+          confirmLabel="Go offline"
+          destructive
+          busy={changingAvailability}
+          onConfirm={() => {
+            setConfirmingOffline(false);
+            void toggleAvailability();
+          }}
+          onCancel={() => setConfirmingOffline(false)}
+        />
+      ) : null}
     </>
   );
 }