Jon Staab
323 lines
12 KiB
TypeScript
323 lines
12 KiB
TypeScript
import { Show, createSignal } from "solid-js"
|
|
import type { Relay, PlanId } from "@/lib/api"
|
|
import { RELAY_DOMAIN } from "@/lib/subdomain"
|
|
import ConfirmDialog from "@/components/ConfirmDialog"
|
|
import CustomDomainModal from "@/components/relay/CustomDomainModal"
|
|
import Field from "@/components/Field"
|
|
import PricingTable from "@/components/PricingTable"
|
|
import ToggleButton from "@/components/ToggleButton"
|
|
import ToggleField from "@/components/ToggleField"
|
|
import RelayCardHeader, { StatusBadge } from "@/components/relay/RelayCardHeader"
|
|
import PlanGatedToggle from "@/components/relay/PlanGatedToggle"
|
|
import { setToastMessage } from "@/lib/state"
|
|
import { useProfileMetadata } from "@/lib/hooks"
|
|
import useMinLoading from "@/lib/useMinLoading"
|
|
import { flagToBool } from "@/lib/relayFlags"
|
|
import { plans } from "@/lib/state"
|
|
import useCustomDomain from "@/lib/useCustomDomain"
|
|
|
|
function DetailSection(props: { title: string; children: any }) {
|
|
return (
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-6">{props.title}</h3>
|
|
<dl class="grid lg:grid-cols-2 gap-x-32 gap-y-4">
|
|
{props.children}
|
|
</dl>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MembershipSection(props: { title: string; children: any }) {
|
|
return (
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-6">{props.title}</h3>
|
|
<dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2">
|
|
{props.children}
|
|
</dl>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type RelayDetailCardProps = {
|
|
relay: Relay
|
|
currentMembers?: number
|
|
showTenant?: boolean
|
|
editHref?: string
|
|
onDeactivate?: () => void | Promise<void>
|
|
onReactivate?: () => void | Promise<void>
|
|
deactivating?: boolean
|
|
reactivating?: boolean
|
|
onTogglePublicJoin?: () => void
|
|
onToggleStripSignatures?: () => void
|
|
onToggleGroups?: () => void
|
|
onToggleManagement?: () => void
|
|
onToggleMediaStorage?: () => void
|
|
onToggleLivekitSupport?: () => void
|
|
onTogglePushNotifications?: () => void
|
|
onUpdatePlan?: (planId: PlanId) => Promise<void>
|
|
enforcePlanLimits?: boolean
|
|
showPlanActions?: boolean
|
|
mutateRelay?: (relay: Relay) => void
|
|
}
|
|
|
|
export default function RelayDetailCard(props: RelayDetailCardProps) {
|
|
const r = () => props.relay
|
|
const [planId, setPlanId] = createSignal<PlanId>(props.relay.plan_id)
|
|
const [pendingAction, setPendingAction] = createSignal<"deactivate" | "reactivate" | null>(null)
|
|
const [customDomainModalOpen, setCustomDomainModalOpen] = createSignal(false)
|
|
const { saving: cdSaving, verifying: cdVerifying, error: cdError, saveDomain, verifyDomain } =
|
|
useCustomDomain(() => props.relay.id, props.mutateRelay ?? (() => {}))
|
|
const cdVerifyingVisible = useMinLoading(cdVerifying)
|
|
|
|
// Resolve the owning tenant's profile so the Tenant field can show a name and
|
|
// avatar instead of a raw pubkey. Only relevant in admin (showTenant) views.
|
|
// This subscription stays in the parent so the header doesn't double-subscribe.
|
|
const tenantProfile = useProfileMetadata(() => (props.showTenant ? props.relay.tenant_pubkey : undefined))
|
|
|
|
const memberLimitLabel = () => {
|
|
const p = plans().find(p => p.id === r().plan_id)
|
|
if (!p) return "?"
|
|
return p.members === null ? "∞" : String(p.members)
|
|
}
|
|
const planLimited = () => (props.enforcePlanLimits ?? true) && r().plan_id === "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 changePlanId(planId: PlanId) {
|
|
setPlanId(planId)
|
|
try {
|
|
await props.onUpdatePlan?.(planId)
|
|
setToastMessage(`Plan updated to ${planId}`, "success")
|
|
} catch {
|
|
// error is handled by the caller
|
|
}
|
|
}
|
|
|
|
function openActionDialog(action: "deactivate" | "reactivate") {
|
|
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)
|
|
}
|
|
|
|
return (
|
|
<div class="space-y-6">
|
|
<RelayCardHeader
|
|
relay={r}
|
|
showTenant={props.showTenant}
|
|
tenantProfile={tenantProfile}
|
|
editHref={props.editHref}
|
|
deactivating={props.deactivating}
|
|
reactivating={props.reactivating}
|
|
onRequestDeactivate={props.onDeactivate ? () => openActionDialog("deactivate") : undefined}
|
|
onRequestReactivate={props.onReactivate ? () => openActionDialog("reactivate") : undefined}
|
|
onRequestManageCustomDomain={() => setCustomDomainModalOpen(true)}
|
|
/>
|
|
|
|
<hr class="border-gray-200" />
|
|
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-6">Custom Domain</h3>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<Show
|
|
when={r().custom_domain}
|
|
fallback={<span class="text-gray-400 text-sm">Not configured</span>}
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-medium text-gray-900">{r().custom_domain}</span>
|
|
<Show when={r().custom_domain_verified === 1}>
|
|
<StatusBadge status="verified" />
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
<button
|
|
class="inline-flex items-center rounded-lg border border-gray-200 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
|
onClick={() => setCustomDomainModalOpen(true)}
|
|
>
|
|
Update
|
|
</button>
|
|
</div>
|
|
<Show when={r().custom_domain && r().custom_domain_verified !== 1}>
|
|
<div class="rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-3 space-y-3">
|
|
<div class="flex items-start gap-2">
|
|
<span class="mt-0.5 text-yellow-600 text-sm shrink-0">⚠</span>
|
|
<p class="text-sm font-medium text-yellow-800">
|
|
Not yet verified — add this DNS record, then verify:
|
|
</p>
|
|
</div>
|
|
<div class="rounded border border-yellow-200 bg-white px-3 py-2 font-mono text-xs text-gray-700 break-all">
|
|
{r().custom_domain} CNAME {r().subdomain}.{RELAY_DOMAIN}
|
|
</div>
|
|
<p class="text-xs text-yellow-700">
|
|
For apex domains (e.g. example.com), use an ALIAS or ANAME record instead.
|
|
</p>
|
|
<Show when={cdError()}>
|
|
<p class="text-sm text-red-600">{cdError()}</p>
|
|
</Show>
|
|
<button
|
|
type="button"
|
|
onClick={verifyDomain}
|
|
disabled={cdVerifyingVisible()}
|
|
class="inline-flex items-center rounded-lg bg-yellow-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-yellow-700 disabled:opacity-50"
|
|
>
|
|
{cdVerifyingVisible() ? "Verifying…" : "Verify DNS record"}
|
|
</button>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
|
|
<CustomDomainModal
|
|
open={customDomainModalOpen()}
|
|
onClose={() => setCustomDomainModalOpen(false)}
|
|
relay={r}
|
|
saving={cdSaving}
|
|
error={cdError}
|
|
onSave={saveDomain}
|
|
/>
|
|
|
|
<hr class="border-gray-200" />
|
|
|
|
<DetailSection title="Policy">
|
|
<ToggleField label="Public join">
|
|
<ToggleButton
|
|
enabled={flagToBool(r().policy_public_join, false)}
|
|
onToggle={props.onTogglePublicJoin}
|
|
/>
|
|
</ToggleField>
|
|
<ToggleField label="Strip signatures">
|
|
<ToggleButton
|
|
enabled={flagToBool(r().policy_strip_signatures, false)}
|
|
onToggle={props.onToggleStripSignatures}
|
|
/>
|
|
</ToggleField>
|
|
</DetailSection>
|
|
|
|
<hr class="border-gray-200" />
|
|
|
|
<DetailSection title="Features">
|
|
<ToggleField label="Rooms">
|
|
<ToggleButton
|
|
enabled={flagToBool(r().groups_enabled, true)}
|
|
onToggle={props.onToggleGroups}
|
|
/>
|
|
</ToggleField>
|
|
<ToggleField label="Management API">
|
|
<ToggleButton
|
|
enabled={flagToBool(r().management_enabled, true)}
|
|
onToggle={props.onToggleManagement}
|
|
/>
|
|
</ToggleField>
|
|
<ToggleField label="Push notifications">
|
|
<ToggleButton
|
|
enabled={flagToBool(r().push_enabled, true)}
|
|
onToggle={props.onTogglePushNotifications}
|
|
/>
|
|
</ToggleField>
|
|
<ToggleField label="Media storage">
|
|
<PlanGatedToggle
|
|
enabled={flagToBool(r().blossom_enabled, true)}
|
|
fallbackEnabled={flagToBool(r().blossom_enabled, false)}
|
|
planLimited={planLimited()}
|
|
showPlanActions={showPlanActions()}
|
|
canUpdatePlan={!!props.onUpdatePlan}
|
|
editHref={props.editHref}
|
|
onToggle={props.onToggleMediaStorage}
|
|
/>
|
|
</ToggleField>
|
|
<ToggleField label="LiveKit support">
|
|
<PlanGatedToggle
|
|
enabled={flagToBool(r().livekit_enabled, true)}
|
|
fallbackEnabled={flagToBool(r().livekit_enabled, false)}
|
|
planLimited={planLimited()}
|
|
showPlanActions={showPlanActions()}
|
|
canUpdatePlan={!!props.onUpdatePlan}
|
|
editHref={props.editHref}
|
|
onToggle={props.onToggleLivekitSupport}
|
|
/>
|
|
</ToggleField>
|
|
</DetailSection>
|
|
|
|
<hr class="border-gray-200" />
|
|
|
|
<MembershipSection title="Membership">
|
|
<Field label="Current members">
|
|
<span class="font-medium text-gray-900">{props.currentMembers ?? "—"}</span>
|
|
</Field>
|
|
<Field label="Member limit">
|
|
<span class="text-gray-900">{memberLimitLabel()}</span>
|
|
</Field>
|
|
</MembershipSection>
|
|
|
|
<Show when={showPlanActions()}>
|
|
<hr class="border-gray-200" />
|
|
|
|
<DetailSection title="Plan">
|
|
<Show
|
|
when={props.onUpdatePlan}
|
|
fallback={
|
|
<Field label="Current plan">
|
|
<span class="capitalize text-gray-900">{r().plan_id}</span>
|
|
</Field>
|
|
}
|
|
>
|
|
<div class="lg:col-span-2 space-y-4">
|
|
<PricingTable
|
|
selectable
|
|
selectedPlanId={planId()}
|
|
onSelect={changePlanId}
|
|
/>
|
|
</div>
|
|
</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>
|
|
)
|
|
}
|