coracle/caravel
1
1
Fork 2
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up relay form

Browse Source
This commit is contained in:
Jon Staab
2026-03-27 13:41:01 -07:00
parent 6a2f4a05fb
commit bc45017222
7 changed files with 131 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/RelayForm.tsx
+58 -38
View File
@@ -1,63 +1,61 @@
import { createEffect, createSignal } from "solid-js"
import type { Relay } from "@/lib/hooks"
import { slugify } from "@/lib/slugify"
import { PLANS } from "@/lib/api"
export type RelayFormValues = {
info_name: string
subdomain: string
info_icon: string
info_description: string
}
export type RelayFormValues = Pick<Relay, "info_name" | "subdomain" | "info_icon" | "info_description" | "plan">
type RelayFormProps = {
initialValues: Pick<Relay, "info_name" | "subdomain" | "info_icon" | "info_description">
initialValues?: Partial<RelayFormValues>
syncSubdomainWithName?: boolean
onSubmit: (values: RelayFormValues, e: Event) => void | Promise<void>
submitting: boolean
error?: string
onSubmit: (values: RelayFormValues) => Promise<void> | void
submitLabel: string
submittingLabel: string
}
export default function RelayForm(props: RelayFormProps) {
const [name, setName] = createSignal(props.initialValues.info_name)
const [subdomain, setSubdomain] = createSignal(props.initialValues.subdomain)
const [icon, setIcon] = createSignal(props.initialValues.info_icon)
const [description, setDescription] = createSignal(props.initialValues.info_description)
const [plan, setPlan] = createSignal(props.initialValues?.plan ?? "")
const [name, setName] = createSignal(props.initialValues?.info_name ?? "")
const [subdomain, setSubdomain] = createSignal(props.initialValues?.subdomain ?? "")
const [icon, setIcon] = createSignal(props.initialValues?.info_icon ?? "")
const [description, setDescription] = createSignal(props.initialValues?.info_description ?? "")
const [submitting, setSubmitting] = createSignal(false)
const [error, setError] = createSignal("")
createEffect(() => {
setName(props.initialValues.info_name)
setSubdomain(props.initialValues.subdomain)
setIcon(props.initialValues.info_icon)
setDescription(props.initialValues.info_description)
})
function handleSubmit(e: Event) {
async function handleSubmit(e: Event) {
e.preventDefault()
void props.onSubmit(
{
setError("")
setSubmitting(true)
try {
await props.onSubmit({
plan: plan(),
info_name: name(),
subdomain: subdomain(),
info_icon: icon(),
info_description: description(),
},
e,
)
})
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to save relay")
} finally {
setSubmitting(false)
}
}
createEffect(() => {
if (props.syncSubdomainWithName) {
setSubdomain(slugify(name()))
}
})
return (
<form onSubmit={handleSubmit} class="space-y-6">
{/* Basic info */}
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
<input
value={name()}
onInput={e => {
const value = e.currentTarget.value
setName(value)
if (props.syncSubdomainWithName) setSubdomain(slugify(value))
}}
required
value={name()}
onInput={e => setName(e.currentTarget.value)}
class="w-full border border-gray-300 rounded-lg px-3 py-2"
/>
</div>
@@ -85,19 +83,41 @@ export default function RelayForm(props: RelayFormProps) {
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
<textarea
rows={3}
value={description()}
onInput={e => setDescription(e.currentTarget.value)}
rows={3}
class="w-full border border-gray-300 rounded-lg px-3 py-2"
/>
</div>
{props.error && <p class="text-sm text-red-600">{props.error}</p>}
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">Plan</label>
<div class="grid grid-cols-3 gap-3">
{PLANS.map(p => (
<button
type="button"
onClick={() => setPlan(p.id)}
class={`border-2 rounded-xl p-4 text-left transition-colors ${
plan() === p.id
? "border-blue-600 bg-blue-50"
: "border-gray-200 hover:border-gray-300"
}`}
>
<div class="font-bold text-gray-900">{p.label}</div>
<div class="text-sm text-gray-500 mt-1">
{p.price === 0 ? "Free" : `${p.price.toLocaleString()} sats/mo`}
</div>
<div class="text-xs text-gray-500 mt-2">{p.members} members</div>
</button>
))}
</div>
</div>
{error() && <p class="text-sm text-red-600">{error()}</p>}
<button
type="submit"
disabled={props.submitting}
disabled={submitting()}
class="w-full py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50"
>
{props.submitting ? props.submittingLabel : props.submitLabel}
{submitting() ? props.submittingLabel : props.submitLabel}
</button>
</form>
)
frontend/src/lib/api.ts
+8
View File
@@ -31,6 +31,14 @@ export class ApiError extends Error {
export type Plan = Record<string, unknown>
export const PLANS = [
{ id: "free", label: "Free", price: 0, members: "Up to 10", blossom: false, livekit: false },
{ id: "basic", label: "Basic", price: 10_000, members: "Up to 100", blossom: true, livekit: true },
{ id: "growth", label: "Growth", price: 50_000, members: "Unlimited", blossom: true, livekit: true },
] as const
export type PlanId = (typeof PLANS)[number]["id"]
export type Relay = {
id: string
tenant: string
frontend/src/lib/hooks.ts
+20 -1
View File
@@ -96,7 +96,26 @@ export const useAdminTenant = (pubkey: () => string) => createResource(pubkey, g
export const useAdminTenantRelays = (pubkey: () => string) => createResource(pubkey, listTenantRelays)
export const createRelayForActiveTenant = (input: CreateRelayInput) => createRelay({ ...input, tenant: account()!.pubkey })
export const createRelayForActiveTenant = (input: CreateRelayInput) => {
const defaults = {
info_name: "",
info_icon: "",
info_description: "",
policy_public_join: 0,
policy_strip_signatures: 0,
groups_enabled: 1,
management_enabled: 1,
push_enabled: 1,
}
const overrides = {
tenant: account()!.pubkey,
blossom_enabled: input.plan === "free" ? 0 : 1,
livekit_enabled: input.plan === "free" ? 0 : 1,
}
return createRelay({...defaults, ...input, ...overrides})
}
export const updateActiveTenantBilling = (nwc_url: string) => updateTenantBilling(account()!.pubkey, { nwc_url })
frontend/src/pages/Home.tsx
+26 -99
View File
@@ -8,81 +8,32 @@ import Modal from "@/components/Modal"
import Login from "@/views/Login"
import { createRelayForActiveTenant } from "@/lib/hooks"
import { account } from "@/lib/state"
import { slugify } from "@/lib/slugify"
export default function Home() {
const navigate = useNavigate()
const [showRelayModal, setShowRelayModal] = createSignal(false)
const [showLoginModal, setShowLoginModal] = createSignal(false)
const [name, setName] = createSignal("")
const [subdomain, setSubdomain] = createSignal("")
const [icon, setIcon] = createSignal("")
const [description, setDescription] = createSignal("")
const [pendingRelay, setPendingRelay] = createSignal(false)
const [error, setError] = createSignal("")
function resetForm() {
setName("")
setSubdomain("")
setIcon("")
setDescription("")
setError("")
setPendingRelay(false)
}
function openRelayFlow() {
setError("")
setShowRelayModal(true)
}
async function createRelayAndRedirect() {
setError("")
setPendingRelay(true)
try {
const relay = await createRelayForActiveTenant({
subdomain: slugify(subdomain()),
plan: "free",
info_name: name().trim(),
info_icon: icon().trim(),
info_description: description().trim(),
policy_public_join: 0,
policy_strip_signatures: 0,
groups_enabled: 1,
management_enabled: 1,
blossom_enabled: 0,
livekit_enabled: 0,
push_enabled: 1,
})
setShowLoginModal(false)
setShowRelayModal(false)
resetForm()
navigate(`/relays/${relay.id}`)
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to create relay")
setShowLoginModal(false)
setShowRelayModal(true)
} finally {
setPendingRelay(false)
}
}
async function handleRelaySubmit(values: RelayFormValues, e: Event) {
e.preventDefault()
setError("")
setName(values.info_name)
setSubdomain(values.subdomain)
setIcon(values.info_icon)
setDescription(values.info_description)
const [draftRelay, setDraftRelay] = createSignal<RelayFormValues>()
async function onRelayFormSubmit(values: RelayFormValues) {
if (account()) {
await createRelayAndRedirect()
return
}
const relay = await createRelayForActiveTenant(values)
setShowRelayModal(false)
setShowLoginModal(true)
navigate(`/relays/${relay.id}`)
} else {
setDraftRelay(values)
setShowLoginModal(true)
}
}
async function onAuthenticated() {
const relay = draftRelay()
if (relay) {
onRelayFormSubmit(relay)
} else {
navigate("/relays")
}
}
return (
@@ -135,7 +86,7 @@ export default function Home() {
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<button
type="button"
onClick={openRelayFlow}
onClick={() => setShowRelayModal(true)}
class="inline-flex items-center gap-2 py-3 px-8 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 active:scale-95 transition-all shadow-lg shadow-blue-200"
>
Get started free
@@ -353,7 +304,7 @@ export default function Home() {
</p>
<button
type="button"
onClick={openRelayFlow}
onClick={() => setShowRelayModal(true)}
class="inline-flex items-center gap-2 py-3 px-10 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 active:scale-95 transition-all shadow-lg shadow-blue-200 text-lg"
>
Create your relay
@@ -379,9 +330,7 @@ export default function Home() {
<Modal
open={showRelayModal()}
onClose={() => {
if (!pendingRelay()) setShowRelayModal(false)
}}
onClose={() => setShowRelayModal(false)}
wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
panelClass="w-full max-w-2xl rounded-2xl bg-white p-6 sm:p-8 shadow-2xl"
>
@@ -393,9 +342,7 @@ export default function Home() {
<button
type="button"
class="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
onClick={() => {
if (!pendingRelay()) setShowRelayModal(false)
}}
onClick={() => setShowRelayModal(false)}
aria-label="Close"
>
<svg class="h-5 w-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>
@@ -403,16 +350,8 @@ export default function Home() {
</div>
<RelayForm
initialValues={{
info_name: name(),
subdomain: subdomain(),
info_icon: icon(),
info_description: description(),
}}
syncSubdomainWithName
onSubmit={handleRelaySubmit}
submitting={pendingRelay()}
error={error()}
onSubmit={onRelayFormSubmit}
submitLabel="Continue"
submittingLabel="Creating..."
/>
@@ -420,26 +359,14 @@ export default function Home() {
<Modal
open={showLoginModal()}
onClose={() => {
if (!pendingRelay()) setShowLoginModal(false)
}}
onClose={() => setShowLoginModal(false)}
wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
panelClass="w-full max-w-4xl rounded-2xl"
>
<Login
inModal
onClose={() => {
if (!pendingRelay()) setShowLoginModal(false)
}}
onAuthenticated={async () => {
if (name().trim() && subdomain().trim()) {
await createRelayAndRedirect()
return
}
setShowLoginModal(false)
navigate("/relays")
}}
onClose={() => setShowLoginModal(false)}
onAuthenticated={onAuthenticated}
/>
</Modal>
</div>
frontend/src/pages/admin/AdminRelayEdit.tsx
+9 -23
View File
@@ -1,5 +1,5 @@
import { useNavigate, useParams } from "@solidjs/router"
import { Show, createSignal } from "solid-js"
import { Show } from "solid-js"
import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
import { slugify } from "@/lib/slugify"
import BackLink from "@/components/BackLink"
@@ -15,26 +15,14 @@ export default function AdminRelayEdit() {
const [relay] = useRelay(relayId)
const loading = useMinLoading(() => relay.loading)
const [error, setError] = createSignal("")
const [submitting, setSubmitting] = createSignal(false)
async function handleSubmit(values: RelayFormValues, e: Event) {
e.preventDefault()
setError("")
setSubmitting(true)
try {
await updateRelayById(relayId(), {
subdomain: slugify(values.subdomain),
info_name: values.info_name.trim(),
info_icon: values.info_icon.trim(),
info_description: values.info_description.trim(),
})
navigate(`/admin/relays/${relayId()}`)
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to update relay")
} finally {
setSubmitting(false)
}
async function handleSubmit(values: RelayFormValues) {
await updateRelayById(relayId(), {
subdomain: slugify(values.subdomain),
info_name: values.info_name.trim(),
info_icon: values.info_icon.trim(),
info_description: values.info_description.trim(),
})
navigate(`/admin/relays/${relayId()}`)
}
return (
@@ -53,8 +41,6 @@ export default function AdminRelayEdit() {
<RelayForm
initialValues={relay()!}
onSubmit={handleSubmit}
submitting={submitting()}
error={error()}
submitLabel="Save Changes"
submittingLabel="Saving..."
/>
frontend/src/pages/relays/RelayEdit.tsx
+9 -23
View File
@@ -1,5 +1,5 @@
import { useNavigate, useParams } from "@solidjs/router"
import { Show, createSignal } from "solid-js"
import { Show } from "solid-js"
import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
import { slugify } from "@/lib/slugify"
import BackLink from "@/components/BackLink"
@@ -15,26 +15,14 @@ export default function RelayEdit() {
const [relay] = useRelay(relayId)
const loading = useMinLoading(() => relay.loading)
const [error, setError] = createSignal("")
const [submitting, setSubmitting] = createSignal(false)
async function handleSubmit(values: RelayFormValues, e: Event) {
e.preventDefault()
setError("")
setSubmitting(true)
try {
await updateRelayById(relayId(), {
subdomain: slugify(values.subdomain),
info_name: values.info_name.trim(),
info_icon: values.info_icon.trim(),
info_description: values.info_description.trim(),
})
navigate(`/relays/${relayId()}`)
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to update relay")
} finally {
setSubmitting(false)
}
async function handleSubmit(values: RelayFormValues) {
await updateRelayById(relayId(), {
subdomain: slugify(values.subdomain),
info_name: values.info_name.trim(),
info_icon: values.info_icon.trim(),
info_description: values.info_description.trim(),
})
navigate(`/relays/${relayId()}`)
}
return (
@@ -53,8 +41,6 @@ export default function RelayEdit() {
<RelayForm
initialValues={relay()!}
onSubmit={handleSubmit}
submitting={submitting()}
error={error()}
submitLabel="Save Changes"
submittingLabel="Saving..."
/>
frontend/src/pages/relays/RelayNew.tsx
+1 -8
View File
@@ -2,14 +2,7 @@ import { Show, createSignal } from "solid-js"
import { useNavigate } from "@solidjs/router"
import { slugify } from "@/lib/slugify"
import { createRelayForActiveTenant } from "@/lib/hooks"
const PLANS = [
{ id: "free", label: "Free", price: 0, members: "Up to 10", blossom: false, livekit: false },
{ id: "basic", label: "Basic", price: 10_000, members: "Up to 100", blossom: true, livekit: true },
{ id: "growth", label: "Growth", price: 50_000, members: "Unlimited", blossom: true, livekit: true },
] as const
type PlanId = (typeof PLANS)[number]["id"]
import { PLANS, type PlanId } from "@/lib/api"
export default function RelayNew() {
const navigate = useNavigate()