417 lines
16 KiB
TypeScript
417 lines
16 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect, useState, type FormEvent } from "react"
|
||
import Link from "next/link"
|
||
import { useRouter } from "next/navigation"
|
||
import TunnelConfig, { type TunnelConfig as TunnelConfigType, type Server } from "@/components/tunnel-config"
|
||
import { authClient } from "@/lib/auth-client"
|
||
|
||
const defaultConfig: TunnelConfigType = {
|
||
type: "http",
|
||
serverPort: 443,
|
||
localPort: 8000,
|
||
}
|
||
|
||
const formatStartedAgo = (timestamp?: ApiTimestamp): string | undefined => {
|
||
if (!timestamp) return undefined
|
||
const startedMs = timestamp.seconds * 1000 + Math.floor(timestamp.nanos / 1_000_000)
|
||
const diffSeconds = Math.max(0, Math.floor((Date.now() - startedMs) / 1000))
|
||
|
||
if (diffSeconds < 60) return `${diffSeconds}s ago`
|
||
const diffMinutes = Math.floor(diffSeconds / 60)
|
||
if (diffMinutes < 60) return `${diffMinutes}m ago`
|
||
const diffHours = Math.floor(diffMinutes / 60)
|
||
if (diffHours < 24) return `${diffHours}h ago`
|
||
const diffDays = Math.floor(diffHours / 24)
|
||
return `${diffDays}d ago`
|
||
}
|
||
|
||
const toActiveConnection = (session: ApiSession): ActiveConnection => {
|
||
const startedAgo = formatStartedAgo(session.started_at)
|
||
|
||
return {
|
||
id: session.slug || `${session.node}-${session.started_at?.seconds ?? Date.now()}`,
|
||
name: session.slug || session.node || "Unknown tunnel",
|
||
status: session.active ? "connected" : "error",
|
||
protocol: (session.forwarding_type || "http").toLowerCase(),
|
||
serverLabel: session.node || "Unknown node",
|
||
node: session.node,
|
||
remote: session.slug ? `${session.slug}.${session.node}` : session.node || "—",
|
||
startedAgo,
|
||
}
|
||
}
|
||
|
||
type ApiTimestamp = {
|
||
seconds: number
|
||
nanos: number
|
||
}
|
||
|
||
type ApiSession = {
|
||
node: string
|
||
forwarding_type: "HTTP" | "HTTPS" | "TCP" | string
|
||
slug: string
|
||
user_id: string
|
||
active: boolean
|
||
started_at?: ApiTimestamp
|
||
}
|
||
|
||
type ApiSessionList = ApiSession[]
|
||
|
||
type SessionResponse = Awaited<ReturnType<typeof authClient.getSession>>
|
||
|
||
interface DashboardClientProps {
|
||
initialActiveConnections: ApiSessionList
|
||
}
|
||
|
||
type ActiveConnectionStatus = "connected" | "pending" | "error"
|
||
|
||
type ActiveConnection = {
|
||
id: string
|
||
name: string
|
||
status: ActiveConnectionStatus
|
||
protocol: string
|
||
serverLabel: string
|
||
node?: string
|
||
remote: string
|
||
localPort?: number
|
||
serverPort?: number
|
||
startedAgo?: string
|
||
}
|
||
|
||
export default function DashboardClient({ initialActiveConnections }: DashboardClientProps) {
|
||
const router = useRouter()
|
||
const [selectedServer, setSelectedServer] = useState<Server | null>(null)
|
||
const [tunnelConfig, setTunnelConfig] = useState<TunnelConfigType>(defaultConfig)
|
||
const [statusMessage, setStatusMessage] = useState<string | null>(null)
|
||
const [activeConnections, setActiveConnections] = useState<ActiveConnection[]>(
|
||
initialActiveConnections.map(toActiveConnection),
|
||
)
|
||
const { data: cachedSession } = authClient.useSession()
|
||
const [session, setSession] = useState<SessionResponse["data"] | null>(cachedSession ?? null)
|
||
const [openActionId, setOpenActionId] = useState<string | null>(null)
|
||
const [slugModal, setSlugModal] = useState<{
|
||
connectionId: string
|
||
currentSlug: string
|
||
newSlug: string
|
||
node: string
|
||
} | null>(null)
|
||
const [slugError, setSlugError] = useState<string | null>(null)
|
||
const [slugSaving, setSlugSaving] = useState(false)
|
||
|
||
useEffect(() => {
|
||
setActiveConnections(initialActiveConnections.map(toActiveConnection))
|
||
}, [initialActiveConnections])
|
||
|
||
useEffect(() => {
|
||
if (!session && cachedSession) {
|
||
setSession(cachedSession)
|
||
}
|
||
}, [cachedSession, session])
|
||
|
||
const stopConnection = (id: string) => {
|
||
setActiveConnections((prev) => prev.filter((conn) => conn.id !== id))
|
||
setStatusMessage("Connection stopped")
|
||
setOpenActionId((current) => (current === id ? null : current))
|
||
}
|
||
|
||
const openChangeSlugModal = (connection: ActiveConnection) => {
|
||
setSlugModal({
|
||
connectionId: connection.id,
|
||
currentSlug: connection.name,
|
||
newSlug: connection.name,
|
||
node: connection.node || connection.serverLabel,
|
||
})
|
||
setSlugError(null)
|
||
setOpenActionId(null)
|
||
}
|
||
|
||
const closeSlugModal = () => setSlugModal(null)
|
||
|
||
const validateSlug = (value: string): string | null => {
|
||
const trimmed = value.trim().toLowerCase()
|
||
if (trimmed.length < 3 || trimmed.length > 20) return "Slug must be 3-20 characters."
|
||
if (!/^[a-z0-9-]+$/.test(trimmed)) return "Only lowercase letters, numbers, and hyphens are allowed."
|
||
if (trimmed.startsWith("-") || trimmed.endsWith("-")) return "No leading or trailing hyphens."
|
||
return null
|
||
}
|
||
|
||
const submitSlugChange = async (event: FormEvent<HTMLFormElement>) => {
|
||
event.preventDefault()
|
||
if (!slugModal) return
|
||
|
||
const trimmedSlug = slugModal.newSlug.trim().toLowerCase()
|
||
const validationError = validateSlug(trimmedSlug)
|
||
setSlugError(validationError)
|
||
if (validationError) return
|
||
|
||
setSlugSaving(true)
|
||
setStatusMessage(null)
|
||
|
||
try {
|
||
const response = await fetch(`/api/session/${slugModal.node}`, {
|
||
method: "PATCH",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ old: slugModal.currentSlug, new: trimmedSlug }),
|
||
})
|
||
|
||
if (!response.ok) {
|
||
const message = await response.text()
|
||
setSlugError(message || "Failed to update slug.")
|
||
return
|
||
}
|
||
|
||
setActiveConnections((prev) =>
|
||
prev.map((conn) =>
|
||
conn.id === slugModal.connectionId
|
||
? {
|
||
...conn,
|
||
name: trimmedSlug,
|
||
remote: conn.node ? `${trimmedSlug}.${conn.node}` : trimmedSlug,
|
||
}
|
||
: conn,
|
||
),
|
||
)
|
||
|
||
setStatusMessage("Slug updated")
|
||
setSlugModal(null)
|
||
} catch (error) {
|
||
console.error("Failed to update slug", error)
|
||
setSlugError("Failed to update slug.")
|
||
} finally {
|
||
setSlugSaving(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (slugModal) {
|
||
const previousOverflow = document.body.style.overflow
|
||
document.body.style.overflow = "hidden"
|
||
return () => {
|
||
document.body.style.overflow = previousOverflow
|
||
}
|
||
}
|
||
}, [slugModal])
|
||
|
||
useEffect(() => {
|
||
const closeOnEscape = (event: KeyboardEvent) => {
|
||
if (event.key === "Escape") {
|
||
setOpenActionId(null)
|
||
setSlugModal(null)
|
||
}
|
||
}
|
||
|
||
window.addEventListener("keydown", closeOnEscape)
|
||
return () => window.removeEventListener("keydown", closeOnEscape)
|
||
}, [])
|
||
|
||
const slugModalContent = !slugModal
|
||
? null
|
||
: (
|
||
<div className="fixed inset-0 z-20 flex items-center justify-center bg-black/60 px-4">
|
||
<div className="w-full max-w-md rounded-lg border border-gray-800 bg-gray-900 p-6 shadow-xl">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-white">Change slug</h3>
|
||
<p className="text-sm text-gray-400">Update the identifier for this tunnel.</p>
|
||
</div>
|
||
<button
|
||
onClick={closeSlugModal}
|
||
className="text-gray-400 hover:text-gray-200"
|
||
aria-label="Close modal"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<form onSubmit={submitSlugChange} className="mt-4 space-y-4">
|
||
<label className="block text-sm text-gray-300">
|
||
New slug
|
||
<input
|
||
type="text"
|
||
value={slugModal.newSlug}
|
||
onChange={(e) => {
|
||
const nextValue = e.target.value.toLowerCase()
|
||
setSlugModal((prev) => (prev ? { ...prev, newSlug: nextValue } : prev))
|
||
setSlugError(validateSlug(nextValue))
|
||
}}
|
||
className="mt-2 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-white focus:border-emerald-500 focus:outline-none"
|
||
placeholder={slugModal.currentSlug}
|
||
/>
|
||
{slugError && <p className="mt-2 text-sm text-red-400">{slugError}</p>}
|
||
</label>
|
||
|
||
<div className="flex items-center justify-end gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={closeSlugModal}
|
||
className="rounded-md border border-gray-700 px-4 py-2 text-sm text-gray-200 hover:border-gray-500"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={Boolean(slugError) || slugSaving}
|
||
className="rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-60"
|
||
>
|
||
{slugSaving ? "Saving..." : "Save slug"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
return (
|
||
<>
|
||
<main className="flex-1">
|
||
<div className="max-w-7xl mx-auto px-4 py-8 space-y-6">
|
||
<div className="flex flex-col gap-1">
|
||
<h1 className="text-2xl font-semibold">Active Forwarding</h1>
|
||
<p className="text-sm text-gray-400">Live tunnels for this session.</p>
|
||
</div>
|
||
|
||
{statusMessage && (
|
||
<div className="rounded-lg border border-emerald-700 bg-emerald-900/40 px-4 py-3 text-sm text-emerald-200">
|
||
{statusMessage}
|
||
</div>
|
||
)}
|
||
|
||
<div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div>
|
||
<h2 className="text-lg font-semibold">Active Connections</h2>
|
||
<p className="text-sm text-gray-400">Monitor and manage your running tunnels</p>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => router.refresh()}
|
||
className="text-sm text-emerald-400 hover:text-emerald-300"
|
||
>
|
||
Refresh
|
||
</button>
|
||
</div>
|
||
|
||
{activeConnections.length === 0 ? (
|
||
<div className="rounded-lg border border-dashed border-gray-700 bg-gray-800/60 p-6 text-center text-gray-400">
|
||
No active connections yet. Configure a tunnel to see it here.
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{activeConnections.map((connection) => {
|
||
const metaParts: string[] = []
|
||
if (connection.localPort && connection.serverPort) {
|
||
metaParts.push(`Local ${connection.localPort} → Server ${connection.serverPort}`)
|
||
}
|
||
if (connection.startedAgo) {
|
||
metaParts.push(connection.startedAgo)
|
||
}
|
||
const metaText = metaParts.length > 0 ? metaParts.join(" · ") : "No session metadata yet"
|
||
|
||
return (
|
||
<div
|
||
key={connection.id}
|
||
className="rounded-lg border border-gray-800 bg-gray-800/60 p-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
|
||
>
|
||
<div className="space-y-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-white font-medium">{connection.name}</span>
|
||
<span
|
||
className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
|
||
connection.status === "connected"
|
||
? "bg-emerald-900/60 text-emerald-300 border border-emerald-700"
|
||
: connection.status === "pending"
|
||
? "bg-yellow-900/60 text-yellow-300 border border-yellow-700"
|
||
: "bg-red-900/60 text-red-300 border border-red-700"
|
||
}`}
|
||
>
|
||
{connection.status === "connected"
|
||
? "Connected"
|
||
: connection.status === "pending"
|
||
? "Reconnecting"
|
||
: "Error"}
|
||
</span>
|
||
</div>
|
||
<p className="text-sm text-gray-300">
|
||
{(connection.protocol || "http").toUpperCase()} · {connection.serverLabel}
|
||
</p>
|
||
{(() => {
|
||
const isTcp = connection.protocol === "tcp"
|
||
const isHttp = connection.protocol === "http" || connection.protocol === "https"
|
||
const httpRemote = connection.remote ? `https://${connection.remote}` : "—"
|
||
const tcpRemote =
|
||
connection.node && connection.name
|
||
? `tcp://${connection.node}:${connection.name}`
|
||
: connection.remote || "—"
|
||
|
||
const displayRemote = isTcp ? tcpRemote : isHttp ? httpRemote : connection.remote || "—"
|
||
|
||
return <p className="text-xs text-gray-400">{displayRemote}</p>
|
||
})()}
|
||
<p className="text-xs text-gray-500">{metaText}</p>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-center gap-3 md:justify-end relative">
|
||
<button
|
||
onClick={() =>
|
||
setOpenActionId((current) => (current === connection.id ? null : connection.id))
|
||
}
|
||
className="rounded-lg border border-gray-700 px-3 py-2 text-sm text-gray-200 hover:border-gray-500 transition"
|
||
>
|
||
Actions
|
||
</button>
|
||
|
||
{openActionId === connection.id && (
|
||
<div className="absolute right-0 top-12 z-10 w-44 rounded-md border border-gray-700 bg-gray-800 shadow-lg">
|
||
<button
|
||
className="w-full px-3 py-2 text-left text-sm text-gray-200 hover:bg-gray-700"
|
||
onClick={() => stopConnection(connection.id)}
|
||
>
|
||
Stop connection
|
||
</button>
|
||
{connection.protocol !== "tcp" && (
|
||
<button
|
||
className="w-full px-3 py-2 text-left text-sm text-gray-200 hover:bg-gray-700"
|
||
onClick={() => openChangeSlugModal(connection)}
|
||
>
|
||
Change slug
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
|
||
<div className="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between">
|
||
<div>
|
||
<h2 className="text-lg font-semibold">Custom Tunnel Configuration</h2>
|
||
<p className="text-sm text-gray-400">Pick a location, test latency, and shape your tunnel exactly how you need.</p>
|
||
</div>
|
||
<Link href="/tunnel-not-found" className="text-sm text-emerald-400 hover:text-emerald-300">
|
||
View docs
|
||
</Link>
|
||
</div>
|
||
|
||
<TunnelConfig
|
||
config={tunnelConfig}
|
||
onConfigChange={setTunnelConfig}
|
||
selectedServer={selectedServer}
|
||
onServerSelect={setSelectedServer}
|
||
isAuthenticated={Boolean(session)}
|
||
userId={session?.user?.sshIdentifier}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
{slugModalContent}
|
||
</>
|
||
)
|
||
}
|