Refactor VPN proxy client implementation

src/web/ui/ConfirmationDialog.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+const FOCUSABLE = 'button:not(:disabled), [href], input:not(:disabled), [tabindex]:not([tabindex="-1"])';
+
+interface ConfirmationDialogProps {
+  open: boolean;
+  id: string;
+  kicker?: string;
+  title: string;
+  description: string;
+  cancelLabel: string;
+  confirmLabel: string;
+  busy?: boolean;
+  onCancel: () => unknown;
+  onConfirm: () => unknown;
+}
+
+export function ConfirmationDialog({
+  open,
+  id,
+  kicker,
+  title,
+  description,
+  cancelLabel,
+  confirmLabel,
+  busy = false,
+  onCancel,
+  onConfirm,
+}: ConfirmationDialogProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLElement>(null);
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const busyRef = useRef(busy);
+  const onCancelRef = useRef(onCancel);
+  busyRef.current = busy;
+  onCancelRef.current = onCancel;
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const previousFocus = document.activeElement as (Element & { focus?: () => void }) | null;
+    const background = Array.from(overlayRef.current?.parentElement?.children || [])
+      .filter((element) => !element.classList.contains('client-confirmation-popup'))
+      .map((element) => {
+        const inertElement = element as HTMLElement;
+        return { element: inertElement, inert: inertElement.inert };
+      });
+    background.forEach(({ element }) => { element.inert = true; });
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    const frame = requestAnimationFrame(() => cancelRef.current?.focus());
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !busyRef.current) {
+        event.preventDefault();
+        onCancelRef.current();
+        return;
+      }
+      if (event.key !== 'Tab') return;
+      const controls = Array.from(dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) || []);
+      if (!controls.length) return;
+      const first = controls[0];
+      const last = controls.at(-1);
+      if (!dialogRef.current?.contains(document.activeElement)) {
+        event.preventDefault();
+        first.focus();
+      } else if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener('keydown', onKeyDown);
+      background.forEach(({ element, inert }) => { element.inert = inert; });
+      document.body.style.overflow = previousOverflow;
+      requestAnimationFrame(() => previousFocus?.focus?.());
+    };
+  }, [open]);
+
+  return createPortal(
+    <div
+      ref={overlayRef}
+      className={`client-confirmation-popup${open ? ' is-open' : ''}`}
+      aria-hidden={!open}
+      inert={!open ? true : undefined}
+      onPointerDown={(event) => {
+        if (event.target === event.currentTarget && !busy) onCancel();
+      }}
+    >
+      <section
+        ref={dialogRef}
+        className="client-confirmation-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-description`}
+        aria-busy={busy}
+      >
+        {kicker && <span className="client-confirmation-kicker">{kicker}</span>}
+        <h2 id={`${id}-title`}>{title}</h2>
+        <p id={`${id}-description`}>{description}</p>
+        <div className="client-confirmation-actions">
+          <button ref={cancelRef} type="button" disabled={busy} onClick={onCancel}>{cancelLabel}</button>
+          <button className="is-danger" type="button" disabled={busy} onClick={onConfirm}>{confirmLabel}</button>
+        </div>
+      </section>
+    </div>,
+    document.querySelector('.app.client-app') || document.body,
+  );
+}