Add custom domain support

2026-06-11 14:28:12 -07:00
parent bd3217f43d
commit 90f5a55269
20 changed files with 629 additions and 13 deletions
@@ -0,0 +1,93 @@
+import { Show, createEffect, createSignal } from "solid-js"
+import Modal from "@/components/Modal"
+import type { Relay } from "@/lib/api"
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  relay: () => Relay | undefined
+  saving: () => boolean
+  error: () => string | undefined
+  onSave: (domain: string) => Promise<void>
+}
+
+export default function CustomDomainModal(props: Props) {
+  const [input, setInput] = createSignal("")
+
+  createEffect(() => {
+    if (props.open) {
+      setInput(props.relay()?.custom_domain ?? "")
+    }
+  })
+
+  const current = () => props.relay()?.custom_domain ?? ""
+  const inputTrimmed = () => input().trim()
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    await props.onSave(inputTrimmed())
+    if (!props.error()) props.onClose()
+  }
+
+  return (
+    <Modal
+      open={props.open}
+      onClose={props.onClose}
+      wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      panelClass="w-full max-w-lg bg-white rounded-2xl shadow-xl p-6 space-y-5"
+    >
+      <div class="flex items-center justify-between">
+        <h2 class="text-lg font-semibold text-gray-900">Custom domain</h2>
+        <button
+          type="button"
+          onClick={props.onClose}
+          class="text-gray-400 hover:text-gray-600 text-xl leading-none"
+          aria-label="Close"
+        >
+          ×
+        </button>
+      </div>
+
+      <form onSubmit={handleSubmit} class="space-y-3">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Custom domain</label>
+          <input
+            type="text"
+            value={input()}
+            onInput={(e) => setInput(e.currentTarget.value)}
+            placeholder="relay.example.com"
+            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            autocomplete="off"
+            autocapitalize="none"
+            spellcheck={false}
+          />
+          <p class="mt-1 text-xs text-gray-500">
+            Must be a domain you control, e.g. <span class="font-mono">relay.example.com</span>
+          </p>
+        </div>
+        <Show when={props.error()}>
+          <p class="text-sm text-red-600">{props.error()}</p>
+        </Show>
+        <div class="flex items-center gap-3 flex-wrap">
+          <button
+            type="submit"
+            disabled={props.saving() || !inputTrimmed() || inputTrimmed() === current()}
+            class="inline-flex items-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            {props.saving() ? "Saving…" : "Save domain"}
+          </button>
+          <Show when={current()}>
+            <button
+              type="button"
+              onClick={() => props.onSave("")}
+              disabled={props.saving()}
+              class="inline-flex items-center rounded-lg border border-red-200 px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50 disabled:opacity-50"
+            >
+              {props.saving() ? "Removing…" : "Remove custom domain"}
+            </button>
+          </Show>
+        </div>
+      </form>
+    </Modal>
+  )
+}