userAdityaa/caravel
1
1
Fork 0
forked from coracle/caravel
Code Pull Requests Activity

Whatever

Browse Source
This commit is contained in:
Jon Staab
2026-03-27 12:57:11 -07:00
parent e750185176
commit 2be7f4406a
8 changed files with 281 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CheckIcon.tsx
+7
View File
@@ -0,0 +1,7 @@
export default function CheckIcon() {
return (
<svg class="w-4 h-4 text-blue-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 6L9 17l-5-5" />
</svg>
)
}
frontend/src/components/ExternalLinkIcon.tsx
+9
View File
@@ -0,0 +1,9 @@
export default function ExternalLinkIcon() {
return (
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
<path d="M15 3h6v6" />
<path d="M10 14L21 3" />
</svg>
)
}
frontend/src/components/RelayForm.tsx
+52 -18
View File
@@ -1,13 +1,18 @@
type RelayFormProps = {
name: string
setName: (value: string) => void
import { createEffect, createSignal } from "solid-js"
import type { Relay } from "../lib/hooks"
import { slugify } from "../lib/slugify"
export type RelayFormValues = {
info_name: string
subdomain: string
setSubdomain: (value: string) => void
icon: string
setIcon: (value: string) => void
description: string
setDescription: (value: string) => void
onSubmit: (e: Event) => void
info_icon: string
info_description: string
}
type RelayFormProps = {
initialValues: Pick<Relay, "info_name" | "subdomain" | "info_icon" | "info_description">
syncSubdomainWithName?: boolean
onSubmit: (values: RelayFormValues, e: Event) => void | Promise<void>
submitting: boolean
error?: string
submitLabel: string
@@ -15,14 +20,43 @@ type RelayFormProps = {
}
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)
createEffect(() => {
setName(props.initialValues.info_name)
setSubdomain(props.initialValues.subdomain)
setIcon(props.initialValues.info_icon)
setDescription(props.initialValues.info_description)
})
function handleSubmit(e: Event) {
e.preventDefault()
void props.onSubmit(
{
info_name: name(),
subdomain: subdomain(),
info_icon: icon(),
info_description: description(),
},
e,
)
}
return (
<form onSubmit={props.onSubmit} class="space-y-6">
<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={props.name}
onInput={e => props.setName(e.currentTarget.value)}
value={name()}
onInput={e => {
const value = e.currentTarget.value
setName(value)
if (props.syncSubdomainWithName) setSubdomain(slugify(value))
}}
required
class="w-full border border-gray-300 rounded-lg px-3 py-2"
/>
@@ -31,8 +65,8 @@ export default function RelayForm(props: RelayFormProps) {
<label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
<div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
<input
value={props.subdomain}
onInput={e => props.setSubdomain(e.currentTarget.value)}
value={subdomain()}
onInput={e => setSubdomain(e.currentTarget.value)}
required
class="flex-1 px-3 py-2"
/>
@@ -43,16 +77,16 @@ export default function RelayForm(props: RelayFormProps) {
<label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
<input
type="url"
value={props.icon}
onInput={e => props.setIcon(e.currentTarget.value)}
value={icon()}
onInput={e => setIcon(e.currentTarget.value)}
class="w-full border border-gray-300 rounded-lg px-3 py-2"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
<textarea
value={props.description}
onInput={e => props.setDescription(e.currentTarget.value)}
value={description()}
onInput={e => setDescription(e.currentTarget.value)}
rows={3}
class="w-full border border-gray-300 rounded-lg px-3 py-2"
/>
frontend/src/lib/hooks.ts
+1 -2
View File
@@ -26,7 +26,6 @@ import {
type CreateRelayInput,
type Relay,
type Tenant,
type Identity,
type UpdateRelayInput,
} from "./api"
@@ -75,7 +74,7 @@ export const [identity, { refetch: refetchIdentity, mutate: setIdentity }] = cre
;(() => {
try {
accountManager.fromJSON(JSON.parse(localStorage.getItem("caravel.accounts")))
accountManager.fromJSON(JSON.parse(localStorage.getItem("caravel.accounts")!))
} catch {
// pass
}
frontend/src/pages/Home.tsx
+172 -29
View File
@@ -1,26 +1,89 @@
import { A } from "@solidjs/router"
import { A, useNavigate } from "@solidjs/router"
import { createSignal } from "solid-js"
import CheckIcon from "../components/CheckIcon"
import ExternalLinkIcon from "../components/ExternalLinkIcon"
import PricingTable from "../components/PricingTable"
import { account } from "../lib/hooks"
function CheckIcon() {
return (
<svg class="w-4 h-4 text-blue-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 6L9 17l-5-5" />
</svg>
)
}
function ExternalLinkIcon() {
return (
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
<path d="M15 3h6v6" />
<path d="M10 14L21 3" />
</svg>
)
}
import RelayForm, { type RelayFormValues } from "../components/RelayForm"
import Modal from "../components/Modal"
import Login from "./Login"
import { account, createRelayForActiveTenant } from "../lib/hooks"
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)
if (account()) {
await createRelayAndRedirect()
return
}
setShowRelayModal(false)
setShowLoginModal(true)
}
return (
<div class="min-h-screen bg-white text-gray-900 overflow-x-hidden">
@@ -32,7 +95,13 @@ export default function Home() {
Caravel
</div>
<A
href={account() ? "/relays" : "/login"}
href={account() ? "/relays" : "#"}
onClick={(e) => {
if (!account()) {
e.preventDefault()
setShowLoginModal(true)
}
}}
class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
>
{account() ? "Go to dashboard" : "Sign in"}
@@ -63,15 +132,22 @@ export default function Home() {
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<A
href="/relays/new"
<button
type="button"
onClick={openRelayFlow}
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
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
</A>
</button>
<A
href={account() ? "/relays" : "/login"}
href={account() ? "/relays" : "#"}
onClick={(e) => {
if (!account()) {
e.preventDefault()
setShowLoginModal(true)
}
}}
class="inline-flex items-center gap-2 py-3 px-8 border border-gray-200 text-gray-700 font-semibold rounded-xl hover:bg-gray-50 transition-all"
>
{account() ? "Go to dashboard" : "Sign in"}
@@ -262,7 +338,7 @@ export default function Home() {
Pay in sats. Upgrade or cancel any time.
</p>
<PricingTable ctaHref="/relays/new" />
<PricingTable ctaHref="#" />
</div>
</section>
@@ -274,13 +350,14 @@ export default function Home() {
<p class="text-gray-500 mb-10 max-w-lg mx-auto text-lg">
Join communities already running on Caravel. Set up in minutes, pay in sats.
</p>
<A
href="/relays/new"
<button
type="button"
onClick={openRelayFlow}
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
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
</A>
</button>
</div>
</section>
@@ -298,6 +375,72 @@ export default function Home() {
</div>
</div>
</footer>
<Modal
open={showRelayModal()}
onClose={() => {
if (!pendingRelay()) 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"
>
<div class="mb-6 flex items-start justify-between gap-4">
<div>
<h3 class="text-xl font-bold text-gray-900">Create your relay</h3>
<p class="mt-1 text-sm text-gray-500">Start with a free relay. You can upgrade later.</p>
</div>
<button
type="button"
class="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
onClick={() => {
if (!pendingRelay()) 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>
</button>
</div>
<RelayForm
initialValues={{
info_name: name(),
subdomain: subdomain(),
info_icon: icon(),
info_description: description(),
}}
syncSubdomainWithName
onSubmit={handleRelaySubmit}
submitting={pendingRelay()}
error={error()}
submitLabel="Continue"
submittingLabel="Creating..."
/>
</Modal>
<Modal
open={showLoginModal()}
onClose={() => {
if (!pendingRelay()) 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")
}}
/>
</Modal>
</div>
)
}
frontend/src/pages/Login.tsx
+24 -5
View File
@@ -1,5 +1,5 @@
import { Show, createSignal, createEffect, onCleanup } from "solid-js"
import { useNavigate } from "@solidjs/router"
import { useNavigate, type RouteSectionProps } from "@solidjs/router"
import { ExtensionAccount, NostrConnectAccount, PasswordAccount, PrivateKeyAccount } from "applesauce-accounts/accounts"
import { PasswordSigner } from "applesauce-signers"
import QrScanner from "qr-scanner"
@@ -13,6 +13,12 @@ type Screen = "tabs" | "nip46" | "key"
type SignerTab = "qr" | "paste"
type KeyTab = "plaintext" | "encrypted"
type LoginProps = {
inModal?: boolean
onClose?: () => void
onAuthenticated?: () => void | Promise<void>
}
function normalizeBunkerUrl(value: string): string {
const trimmed = value.trim()
if (!trimmed) return ""
@@ -35,7 +41,9 @@ async function loadNostrConnectSigner() {
return import("applesauce-signers").then((m) => m.NostrConnectSigner)
}
export default function Login() {
type LoginPageProps = LoginProps & Partial<RouteSectionProps<unknown>>
export default function Login(props: LoginPageProps = {}) {
const navigate = useNavigate()
const [tab, setTab] = createSignal<Tab>(window.nostr ? "nip07" : "nip46")
const [loading, setLoading] = createSignal(false)
@@ -56,9 +64,10 @@ export default function Login() {
let scanner: QrScanner | undefined
let abortController: AbortController | undefined
function completeLogin(account: ExtensionAccount | NostrConnectAccount | PrivateKeyAccount | PasswordAccount) {
async function completeLogin(account: ExtensionAccount | NostrConnectAccount | PrivateKeyAccount | PasswordAccount) {
accountManager.addAccount(account)
accountManager.setActive(account)
await props.onAuthenticated?.()
}
async function loginWithNip07() {
@@ -190,7 +199,7 @@ export default function Login() {
}
createEffect(() => {
if (identity()) {
if (!props.inModal && identity()) {
navigate("/relays")
}
})
@@ -201,9 +210,19 @@ export default function Login() {
})
return (
<div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 flex items-center justify-center p-6">
<div class={props.inModal ? "w-full" : "min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 flex items-center justify-center p-6"}>
<div class="w-full max-w-3xl">
<div class="relative overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl">
<Show when={props.inModal && props.onClose}>
<button
type="button"
class="absolute right-4 top-4 z-10 rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
onClick={() => props.onClose?.()}
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>
</button>
</Show>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(99,102,241,0.08),_transparent_45%)]" />
<div class="relative grid gap-8 p-8 md:grid-cols-[1.2fr_1fr] md:p-10">
<div class="space-y-6">
frontend/src/pages/admin/AdminRelayEdit.tsx
+8 -28
View File
@@ -1,6 +1,6 @@
import { useNavigate, useParams } from "@solidjs/router"
import { Show, createEffect, createSignal } from "solid-js"
import RelayForm from "../../components/RelayForm"
import { Show, createSignal } 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"
@@ -15,32 +15,19 @@ export default function AdminRelayEdit() {
const [relay] = useRelay(relayId)
const loading = useMinLoading(() => relay.loading)
const [name, setName] = createSignal("")
const [subdomain, setSubdomain] = createSignal("")
const [icon, setIcon] = createSignal("")
const [description, setDescription] = createSignal("")
const [error, setError] = createSignal("")
const [submitting, setSubmitting] = createSignal(false)
createEffect(() => {
const data = relay()
if (!data) return
setName(data.info_name)
setSubdomain(data.subdomain)
setIcon(data.info_icon)
setDescription(data.info_description)
})
async function handleSubmit(e: Event) {
async function handleSubmit(values: RelayFormValues, e: Event) {
e.preventDefault()
setError("")
setSubmitting(true)
try {
await updateRelayById(relayId(), {
subdomain: slugify(subdomain()),
info_name: name().trim(),
info_icon: icon().trim(),
info_description: description().trim(),
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) {
@@ -64,14 +51,7 @@ export default function AdminRelayEdit() {
<Show when={relay() && !loading()}>
<RelayForm
name={name()}
setName={setName}
subdomain={subdomain()}
setSubdomain={setSubdomain}
icon={icon()}
setIcon={setIcon}
description={description()}
setDescription={setDescription}
initialValues={relay()!}
onSubmit={handleSubmit}
submitting={submitting()}
error={error()}
frontend/src/pages/relays/RelayEdit.tsx
+8 -28
View File
@@ -1,6 +1,6 @@
import { useNavigate, useParams } from "@solidjs/router"
import { Show, createEffect, createSignal } from "solid-js"
import RelayForm from "../../components/RelayForm"
import { Show, createSignal } 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"
@@ -15,32 +15,19 @@ export default function RelayEdit() {
const [relay] = useRelay(relayId)
const loading = useMinLoading(() => relay.loading)
const [name, setName] = createSignal("")
const [subdomain, setSubdomain] = createSignal("")
const [icon, setIcon] = createSignal("")
const [description, setDescription] = createSignal("")
const [error, setError] = createSignal("")
const [submitting, setSubmitting] = createSignal(false)
createEffect(() => {
const data = relay()
if (!data) return
setName(data.info_name)
setSubdomain(data.subdomain)
setIcon(data.info_icon)
setDescription(data.info_description)
})
async function handleSubmit(e: Event) {
async function handleSubmit(values: RelayFormValues, e: Event) {
e.preventDefault()
setError("")
setSubmitting(true)
try {
await updateRelayById(relayId(), {
subdomain: slugify(subdomain()),
info_name: name().trim(),
info_icon: icon().trim(),
info_description: description().trim(),
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) {
@@ -64,14 +51,7 @@ export default function RelayEdit() {
<Show when={relay() && !loading()}>
<RelayForm
name={name()}
setName={setName}
subdomain={subdomain()}
setSubdomain={setSubdomain}
icon={icon()}
setIcon={setIcon}
description={description()}
setDescription={setDescription}
initialValues={relay()!}
onSubmit={handleSubmit}
submitting={submitting()}
error={error()}