feat: add confirmation dialog for relay deactivate/reactivate with explicit warnings

backend/src/api.rs

@@ -251,16 +251,22 @@ impl Api {
         }
     }
 
-    fn prepare_relay(&self, mut relay: Relay) -> std::result::Result<Relay, RelayValidationError> {
-        validate_subdomain_label(&relay.subdomain)?;
+    fn prepare_relay(&self, mut relay: Relay) -> anyhow::Result<Relay> {
+        if !relay
+            .subdomain
+            .chars()
+            .all(|c| c.is_ascii_lowercase() || c.is_ascii_digit() || c == '-')
+        {
+            return Err(anyhow!("invalid-subdomain"));
+        }
 
-        let plan = Query::get_plan(&relay.plan).ok_or(RelayValidationError::InvalidPlan)?;
+        let plan = Query::get_plan(&relay.plan).ok_or_else(|| anyhow!("invalid-plan"))?;
 
         if !plan.blossom && relay.blossom_enabled == 1 {
-            return Err(RelayValidationError::PremiumFeature);
+            return Err(anyhow!("premium-feature"));
         }
         if !plan.livekit && relay.livekit_enabled == 1 {
-            return Err(RelayValidationError::PremiumFeature);
+            return Err(anyhow!("premium-feature"));
         }
 
         if relay.schema.is_empty() {
@@ -283,96 +289,6 @@ impl Api {
     }
 }
 
-const SUBDOMAIN_LABEL_MAX_LEN: usize = 63;
-const RESERVED_SUBDOMAIN_LABELS: [&str; 2] = ["api", "admin"];
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-enum SubdomainValidationError {
-    Empty,
-    TooLong,
-    Reserved,
-    EdgeHyphen,
-    InvalidCharacters,
-}
-
-impl SubdomainValidationError {
-    fn code(self) -> &'static str {
-        match self {
-            Self::Empty => "subdomain-empty",
-            Self::TooLong => "subdomain-too-long",
-            Self::Reserved => "subdomain-reserved",
-            Self::EdgeHyphen => "subdomain-invalid-hyphen",
-            Self::InvalidCharacters => "subdomain-invalid-characters",
-        }
-    }
-
-    fn message(self) -> &'static str {
-        match self {
-            Self::Empty => "subdomain is required",
-            Self::TooLong => "subdomain must be 63 characters or fewer",
-            Self::Reserved => "subdomain is reserved",
-            Self::EdgeHyphen => "subdomain cannot start or end with a hyphen",
-            Self::InvalidCharacters => {
-                "subdomain may only contain lowercase letters, numbers, and hyphens"
-            }
-        }
-    }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-enum RelayValidationError {
-    InvalidPlan,
-    PremiumFeature,
-    Subdomain(SubdomainValidationError),
-}
-
-impl RelayValidationError {
-    fn code(self) -> &'static str {
-        match self {
-            Self::InvalidPlan => "invalid-plan",
-            Self::PremiumFeature => "premium-feature",
-            Self::Subdomain(reason) => reason.code(),
-        }
-    }
-
-    fn message(self) -> &'static str {
-        match self {
-            Self::InvalidPlan => "plan not found",
-            Self::PremiumFeature => "feature requires a paid plan",
-            Self::Subdomain(reason) => reason.message(),
-        }
-    }
-}
-
-impl From<SubdomainValidationError> for RelayValidationError {
-    fn from(value: SubdomainValidationError) -> Self {
-        Self::Subdomain(value)
-    }
-}
-
-fn validate_subdomain_label(subdomain: &str) -> std::result::Result<(), SubdomainValidationError> {
-    if subdomain.is_empty() {
-        return Err(SubdomainValidationError::Empty);
-    }
-    if subdomain.len() > SUBDOMAIN_LABEL_MAX_LEN {
-        return Err(SubdomainValidationError::TooLong);
-    }
-    if subdomain.starts_with('-') || subdomain.ends_with('-') {
-        return Err(SubdomainValidationError::EdgeHyphen);
-    }
-    if RESERVED_SUBDOMAIN_LABELS.contains(&subdomain) {
-        return Err(SubdomainValidationError::Reserved);
-    }
-    if !subdomain
-        .chars()
-        .all(|c| c.is_ascii_lowercase() || c.is_ascii_digit() || c == '-')
-    {
-        return Err(SubdomainValidationError::InvalidCharacters);
-    }
-
-    Ok(())
-}
-
 fn ok<T: Serialize>(status: StatusCode, data: T) -> Response {
     (status, Json(OkResponse { data, code: "ok" })).into_response()
 }
@@ -400,14 +316,6 @@ fn parse_bool_default(value: i64, default: i64) -> i64 {
     }
 }
 
-fn relay_validation_error_response(error: RelayValidationError) -> Response {
-    err(
-        StatusCode::UNPROCESSABLE_ENTITY,
-        error.code(),
-        error.message(),
-    )
-}
-
 fn map_unique_error(err: &anyhow::Error) -> Option<&'static str> {
     let sqlx_err = err.downcast_ref::<sqlx::Error>()?;
     let sqlx::Error::Database(db_err) = sqlx_err else {
@@ -700,9 +608,27 @@ async fn create_relay(
     };
 
     relay = match state.api.prepare_relay(relay) {
+        Err(e) if e.to_string() == "invalid-plan" => {
+            return Ok(err(
+                StatusCode::UNPROCESSABLE_ENTITY,
+                "invalid-plan",
+                "plan not found",
+            ));
+        }
         Ok(r) => r,
-        Err(e) => {
-            return Ok(relay_validation_error_response(e));
+        Err(e) if e.to_string() == "premium-feature" => {
+            return Ok(err(
+                StatusCode::UNPROCESSABLE_ENTITY,
+                "premium-feature",
+                "feature requires a paid plan",
+            ));
+        }
+        Err(_) => {
+            return Ok(err(
+                StatusCode::UNPROCESSABLE_ENTITY,
+                "invalid-relay",
+                "relay validation failed",
+            ));
         }
     };
 
@@ -786,9 +712,27 @@ async fn update_relay(
     }
 
     relay = match state.api.prepare_relay(relay) {
+        Err(e) if e.to_string() == "invalid-plan" => {
+            return Ok(err(
+                StatusCode::UNPROCESSABLE_ENTITY,
+                "invalid-plan",
+                "plan not found",
+            ));
+        }
         Ok(r) => r,
-        Err(e) => {
-            return Ok(relay_validation_error_response(e));
+        Err(e) if e.to_string() == "premium-feature" => {
+            return Ok(err(
+                StatusCode::UNPROCESSABLE_ENTITY,
+                "premium-feature",
+                "feature requires a paid plan",
+            ));
+        }
+        Err(_) => {
+            return Ok(err(
+                StatusCode::UNPROCESSABLE_ENTITY,
+                "invalid-relay",
+                "relay validation failed",
+            ));
         }
     };
 

frontend/src/components/ConfirmDialog.tsx

@@ -0,0 +1,151 @@
+import { For, Show, createEffect, createSignal } from "solid-js"
+import Modal from "@/components/Modal"
+
+type ConfirmDialogProps = {
+  open: boolean
+  title: string
+  description: string
+  /** Optional bullet points shown in a warning box below the description */
+  details?: string[]
+  confirmLabel: string
+  busyLabel?: string
+  busy?: boolean
+  tone?: "danger" | "primary"
+  onConfirm: () => void | Promise<void>
+  onClose: () => void
+}
+
+const TONE_STYLES: Record<NonNullable<ConfirmDialogProps["tone"]>, string> = {
+  danger: "bg-red-600 text-white hover:bg-red-700",
+  primary: "bg-blue-600 text-white hover:bg-blue-700",
+}
+
+const DETAIL_BOX_STYLES: Record<NonNullable<ConfirmDialogProps["tone"]>, string> = {
+  danger: "border-amber-200 bg-amber-50 text-amber-800",
+  primary: "border-blue-200 bg-blue-50 text-blue-800",
+}
+
+type ConfirmDialogSnapshot = {
+  title: string
+  description: string
+  details?: string[]
+  confirmLabel: string
+  busyLabel?: string
+  busy: boolean
+  tone: NonNullable<ConfirmDialogProps["tone"]>
+}
+
+export default function ConfirmDialog(props: ConfirmDialogProps) {
+  const [snapshot, setSnapshot] = createSignal<ConfirmDialogSnapshot>({
+    title: props.title,
+    description: props.description,
+    details: props.details ? [...props.details] : undefined,
+    confirmLabel: props.confirmLabel,
+    busyLabel: props.busyLabel,
+    busy: props.busy ?? false,
+    tone: props.tone ?? "primary",
+  })
+
+  createEffect(() => {
+    if (!props.open) return
+
+    setSnapshot({
+      title: props.title,
+      description: props.description,
+      details: props.details ? [...props.details] : undefined,
+      confirmLabel: props.confirmLabel,
+      busyLabel: props.busyLabel,
+      busy: props.busy ?? false,
+      tone: props.tone ?? "primary",
+    })
+  })
+
+  const content = () => props.open
+    ? {
+        title: props.title,
+        description: props.description,
+        details: props.details,
+        confirmLabel: props.confirmLabel,
+        busyLabel: props.busyLabel,
+        busy: props.busy ?? false,
+        tone: props.tone ?? "primary",
+      }
+    : snapshot()
+  const tone = () => content().tone
+  const confirmText = () => content().busy ? (content().busyLabel ?? content().confirmLabel) : content().confirmLabel
+
+  function handleClose() {
+    if (props.busy) return
+    props.onClose()
+  }
+
+  function handleConfirm() {
+    if (props.busy) return
+    void props.onConfirm()
+  }
+
+  return (
+    <Modal
+      open={props.open}
+      onClose={handleClose}
+      wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      panelClass="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
+    >
+      <div class="px-6 pt-6 pb-4 border-b border-gray-100">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900">{content().title}</h2>
+          </div>
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={content().busy}
+            class="shrink-0 rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+            aria-label="Close"
+          >
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="px-6 py-4">
+        <div class="space-y-3 text-left">
+          <p class="text-sm text-gray-600">{content().description}</p>
+          <Show when={content().details && content().details!.length > 0}>
+            <ul class={`w-full rounded-lg border px-4 py-3 space-y-1.5 ${DETAIL_BOX_STYLES[tone()]}`}>
+              <For each={content().details}>
+                {(item) => (
+                  <li class="flex items-start gap-2 text-sm">
+                    <span class="mt-0.5 shrink-0 select-none">•</span>
+                    <span>{item}</span>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </Show>
+        </div>
+      </div>
+
+      <div class="px-6 py-4 flex justify-end gap-3 border-t border-gray-100">
+        <button
+          type="button"
+          onClick={handleClose}
+          disabled={content().busy}
+          class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleConfirm}
+          disabled={content().busy}
+          class={`rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${TONE_STYLES[tone()]}`}
+        >
+          {confirmText()}
+        </button>
+      </div>
+    </Modal>
+  )
+}

frontend/src/components/RelayDetailCard.tsx

@@ -2,6 +2,7 @@ import { A } from "@solidjs/router"
 import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import type { Relay, PlanId } from "@/lib/api"
 import menuDotsIcon from "@/assets/menu-dots-2.svg"
+import ConfirmDialog from "@/components/ConfirmDialog"
 import Field from "@/components/Field"
 import PricingTable from "@/components/PricingTable"
 import ToggleButton from "@/components/ToggleButton"
@@ -51,8 +52,8 @@ type RelayDetailCardProps = {
   currentMembers?: number
   showTenant?: boolean
   editHref?: string
-  onDeactivate?: () => void
-  onReactivate?: () => void
+  onDeactivate?: () => void | Promise<void>
+  onReactivate?: () => void | Promise<void>
   deactivating?: boolean
   reactivating?: boolean
   onTogglePublicJoin?: () => void
@@ -76,6 +77,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
   }
   const [menuOpen, setMenuOpen] = createSignal(false)
   const [plan, setPlan] = createSignal<PlanId>(props.relay.plan)
+  const [pendingAction, setPendingAction] = createSignal<"deactivate" | "reactivate" | null>(null)
 
   let menuContainerRef: HTMLDivElement | undefined
 
@@ -86,6 +88,24 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
   }
   const planLimited = () => (props.enforcePlanLimits ?? true) && r().plan === "free"
   const showPlanActions = () => props.showPlanActions ?? true
+  const actionBusy = () => pendingAction() === "deactivate" ? !!props.deactivating : pendingAction() === "reactivate" ? !!props.reactivating : false
+  const relayLabel = () => r().info_name || r().subdomain
+  const confirmTitle = () => pendingAction() === "deactivate" ? "Deactivate relay?" : "Reactivate relay?"
+  const confirmDescription = () => pendingAction() === "deactivate"
+    ? `${relayLabel()} will be taken offline immediately.`
+    : `${relayLabel()} will come back online and start accepting connections.`
+  const confirmDetails = () => pendingAction() === "deactivate"
+    ? [
+        "All client connections will be dropped immediately.",
+        "Members will be unable to read from or publish to the relay.",
+        "Scheduled and automated tasks (billing, syncing) will be paused.",
+        "All relay data, settings, and members are preserved, nothing is deleted.",
+        "You can reactivate at any time from this page.",
+      ]
+    : undefined
+  const confirmLabel = () => pendingAction() === "deactivate" ? "Yes, deactivate" : "Yes, reactivate"
+  const confirmBusyLabel = () => pendingAction() === "deactivate" ? "Deactivating..." : "Reactivating..."
+  const confirmTone = () => pendingAction() === "deactivate" ? "danger" : "primary"
 
   async function changePlan(plan: PlanId) {
     setPlan(plan)
@@ -97,6 +117,29 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
     }
   }
 
+  function openActionDialog(action: "deactivate" | "reactivate") {
+    setMenuOpen(false)
+    setPendingAction(action)
+  }
+
+  function closeActionDialog() {
+    if (actionBusy()) return
+    setPendingAction(null)
+  }
+
+  async function confirmAction() {
+    const action = pendingAction()
+    if (!action) return
+
+    if (action === "deactivate") {
+      await props.onDeactivate?.()
+    } else {
+      await props.onReactivate?.()
+    }
+
+    setPendingAction(null)
+  }
+
   createEffect(() => {
     if (!menuOpen()) return
 
@@ -128,7 +171,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
       <div class="flex items-start justify-between gap-4">
         <div class="flex items-start gap-4 min-w-0">
           <Show when={r().info_icon}>
-            <img src={r().info_icon} alt="" class="w-14 h-14 rounded-xl object-cover flex-shrink-0 border border-gray-200" />
+            <img src={r().info_icon} alt="" class="w-14 h-14 rounded-xl object-cover shrink-0 border border-gray-200" />
           </Show>
           <div class="min-w-0">
             <div class="flex items-center gap-3 flex-wrap">
@@ -148,7 +191,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
         </div>
 
         <Show when={props.editHref && (props.onDeactivate || props.onReactivate)}>
-          <div class="relative flex-shrink-0" ref={menuContainerRef}>
+          <div class="relative shrink-0" ref={menuContainerRef}>
             <button
               type="button"
               class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-50"
@@ -177,8 +220,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
                   type="button"
                   class="block w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 disabled:opacity-50"
                   onClick={() => {
-                    setMenuOpen(false)
-                    props.onDeactivate?.()
+                    openActionDialog("deactivate")
                   }}
                   disabled={props.deactivating}
                 >
@@ -190,8 +232,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
                   type="button"
                   class="block w-full text-left px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 disabled:opacity-50"
                   onClick={() => {
-                    setMenuOpen(false)
-                    props.onReactivate?.()
+                    openActionDialog("reactivate")
                   }}
                   disabled={props.reactivating}
                 >
@@ -346,6 +387,19 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
           </Show>
         </DetailSection>
       </Show>
+
+      <ConfirmDialog
+        open={pendingAction() !== null}
+        title={confirmTitle()}
+        description={confirmDescription()}
+        details={confirmDetails()}
+        confirmLabel={confirmLabel()}
+        busyLabel={confirmBusyLabel()}
+        busy={actionBusy()}
+        tone={confirmTone()}
+        onConfirm={confirmAction}
+        onClose={closeActionDialog}
+      />
     </div>
   )
 }

frontend/src/components/RelayForm.tsx

@@ -1,7 +1,6 @@
 import { createEffect, createMemo, createSignal, For } from "solid-js"
 import type { Relay } from "@/lib/hooks"
 import { slugify } from "@/lib/slugify"
-import { validateSubdomainLabel } from "@/lib/subdomain"
 import { setToastMessage } from "@/components/Toast"
 import { plans } from "@/lib/state"
 
@@ -32,12 +31,6 @@ export default function RelayForm(props: RelayFormProps) {
       return
     }
 
-    const subdomainError = validateSubdomainLabel(subdomain())
-    if (subdomainError) {
-      setToastMessage(subdomainError)
-      return
-    }
-
     setToastMessage("")
     setSubmitting(true)
 

frontend/src/lib/subdomain.ts

@@ -1,22 +0,0 @@
-const SUBDOMAIN_LABEL_MAX_LEN = 63
-const RESERVED_SUBDOMAIN_LABELS = new Set(["api", "admin"])
-
-export function validateSubdomainLabel(subdomain: string): string | null {
-  if (subdomain.length === 0) {
-    return "subdomain is required"
-  }
-  if (subdomain.length > SUBDOMAIN_LABEL_MAX_LEN) {
-    return "subdomain must be 63 characters or fewer"
-  }
-  if (subdomain.startsWith("-") || subdomain.endsWith("-")) {
-    return "subdomain cannot start or end with a hyphen"
-  }
-  if (RESERVED_SUBDOMAIN_LABELS.has(subdomain)) {
-    return "subdomain is reserved"
-  }
-  if (!/^[a-z0-9-]+$/.test(subdomain)) {
-    return "subdomain may only contain lowercase letters, numbers, and hyphens"
-  }
-
-  return null
-}

frontend/src/pages/relays/RelayEdit.tsx

@@ -1,6 +1,7 @@
 import { useNavigate, useParams } from "@solidjs/router"
 import { Show } from "solid-js"
 import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
+import { slugify } from "@/lib/slugify"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
 import ResourceState from "@/components/ResourceState"
@@ -17,7 +18,7 @@ export default function RelayEdit(props: { basePath?: string; title?: string })
 
   async function handleSubmit(values: RelayFormValues) {
     await updateRelayById(relayId(), {
-      subdomain: values.subdomain,
+      subdomain: slugify(values.subdomain),
       info_name: values.info_name.trim(),
       info_icon: values.info_icon.trim(),
       info_description: values.info_description.trim(),