feat: zone dropdown in create form, fix light mode colors, restructure .env.example
This commit is contained in:
chunzhimoe
parent
948fe3935e
commit
f775e5c80c
56
.env.example
56
.env.example
@ -1,29 +1,41 @@
|
||||
# Cloudflare credentials (server-side only, never sent to browser)
|
||||
CLOUDFLARE_ACCOUNT_ID=your_account_id_here
|
||||
CLOUDFLARE_API_TOKEN=your_api_token_here
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
# SSH Launcher — Environment Variables
|
||||
# Copy to .env.local for local dev, or paste into Vercel dashboard
|
||||
# (Settings → Environment Variables → Import .env)
|
||||
# ═══════════════════════════════════════════════════════════════
|
||||
|
||||
# Required API Token permissions:
|
||||
# - Access: Apps and Policies Write (list + create Access apps)
|
||||
# - Cloudflare Tunnel: Edit (create / configure / delete tunnels)
|
||||
# - DNS: Edit (create CNAME records)
|
||||
# - Zone: Read (lookup zone ID for a hostname)
|
||||
|
||||
# Optional: Cloudflare Access Service Token for fetching server metrics
|
||||
# (Create one in Zero Trust > Settings > Service Auth)
|
||||
CF_SERVICE_CLIENT_ID=
|
||||
CF_SERVICE_CLIENT_SECRET=
|
||||
|
||||
# Upstash Redis — stores per-user CF credentials (multi-user)
|
||||
# Create a free database at https://console.upstash.com
|
||||
UPSTASH_REDIS_URL=https://your-db.upstash.io
|
||||
UPSTASH_REDIS_TOKEN=your_upstash_token_here
|
||||
|
||||
# GitHub OAuth (create at https://github.com/settings/developers)
|
||||
# ── GitHub OAuth ─────────────────────────────────────────────
|
||||
# Create at https://github.com/settings/developers → New OAuth App
|
||||
# Homepage URL: https://your-domain.vercel.app
|
||||
# Callback URL: https://your-domain.vercel.app/api/auth/callback/github
|
||||
GITHUB_CLIENT_ID=
|
||||
GITHUB_CLIENT_SECRET=
|
||||
|
||||
# Required for next-auth session encryption (run: openssl rand -base64 32)
|
||||
# ── NextAuth ─────────────────────────────────────────────────
|
||||
# Generate secret: openssl rand -base64 32
|
||||
NEXTAUTH_SECRET=
|
||||
# Optional on Vercel — set to your production URL if self-hosting
|
||||
# Required only when self-hosting (Vercel sets this automatically)
|
||||
# NEXTAUTH_URL=https://your-domain.vercel.app
|
||||
|
||||
# ── Upstash Redis ─────────────────────────────────────────────
|
||||
# Stores per-user Cloudflare credentials (multi-user)
|
||||
# Create a free database at https://console.upstash.com
|
||||
# Copy the REST API URL and Token from the database dashboard
|
||||
UPSTASH_REDIS_URL=
|
||||
UPSTASH_REDIS_TOKEN=
|
||||
|
||||
# ── Cloudflare API (optional — can set per-user via /settings) ─
|
||||
# If set here, all users share these credentials (single-user mode)
|
||||
# Required Token permissions:
|
||||
# Account → Cloudflare Tunnel: Edit
|
||||
# Account → Access: Apps and Policies: Edit
|
||||
# Zone → DNS: Edit
|
||||
# Zone → Zone: Read
|
||||
CLOUDFLARE_ACCOUNT_ID=
|
||||
CLOUDFLARE_API_TOKEN=
|
||||
|
||||
# ── Cloudflare Access Service Token (optional) ───────────────
|
||||
# Used to fetch server metrics through Access-protected tunnels
|
||||
# Create in Zero Trust → Access → Service Auth → Service Tokens
|
||||
CF_SERVICE_CLIENT_ID=
|
||||
CF_SERVICE_CLIENT_SECRET=
|
||||
|
||||
14
src/app/api/zones/route.ts
Normal file
14
src/app/api/zones/route.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { listZones } from "@/lib/cloudflare";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const zones = await listZones();
|
||||
return NextResponse.json(zones);
|
||||
} catch (e) {
|
||||
return NextResponse.json(
|
||||
{ error: e instanceof Error ? e.message : "Failed to fetch zones" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Rocket,
|
||||
CheckCircle2,
|
||||
@ -15,6 +15,8 @@ import {
|
||||
Mail,
|
||||
Terminal,
|
||||
Hash,
|
||||
ChevronDown,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
|
||||
interface StepResult {
|
||||
@ -31,6 +33,11 @@ interface SetupResult {
|
||||
launchUrl: string | null;
|
||||
}
|
||||
|
||||
interface Zone {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const STEP_LABELS: Record<string, string> = {
|
||||
find_zone: "Lookup DNS Zone",
|
||||
create_tunnel: "Create Tunnel",
|
||||
@ -45,21 +52,53 @@ const STEP_LABELS: Record<string, string> = {
|
||||
export default function CreatePage() {
|
||||
const [form, setForm] = useState({
|
||||
serverName: "",
|
||||
hostname: "",
|
||||
subdomain: "",
|
||||
zoneId: "",
|
||||
sshPort: "22",
|
||||
ssoEmail: "",
|
||||
allowedEmails: "",
|
||||
});
|
||||
const [zones, setZones] = useState<Zone[]>([]);
|
||||
const [zonesLoading, setZonesLoading] = useState(true);
|
||||
const [zonesError, setZonesError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [result, setResult] = useState<SetupResult | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const selectedZone = zones.find((z) => z.id === form.zoneId);
|
||||
const hostname =
|
||||
form.subdomain && selectedZone
|
||||
? `${form.subdomain}.${selectedZone.name}`
|
||||
: "";
|
||||
|
||||
async function fetchZones() {
|
||||
setZonesLoading(true);
|
||||
setZonesError(null);
|
||||
try {
|
||||
const res = await fetch("/api/zones");
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || "Failed to load zones");
|
||||
setZones(data);
|
||||
if (data.length === 1) setForm((f) => ({ ...f, zoneId: data[0].id }));
|
||||
} catch (e) {
|
||||
setZonesError(e instanceof Error ? e.message : "Failed to load zones");
|
||||
} finally {
|
||||
setZonesLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { fetchZones(); }, []);
|
||||
|
||||
const canSubmit =
|
||||
form.serverName.trim() && form.hostname.trim() && form.ssoEmail.trim();
|
||||
form.serverName.trim() &&
|
||||
hostname.trim() &&
|
||||
form.ssoEmail.trim() &&
|
||||
!loading;
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
setLoading(true);
|
||||
setResult(null);
|
||||
setError(null);
|
||||
@ -68,7 +107,7 @@ export default function CreatePage() {
|
||||
const res = await fetch("/api/setup", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(form),
|
||||
body: JSON.stringify({ ...form, hostname }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
|
||||
@ -87,119 +126,114 @@ export default function CreatePage() {
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
}
|
||||
|
||||
const set = (key: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
|
||||
setForm((f) => ({ ...f, [key]: e.target.value }));
|
||||
const set = (key: string) => (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||
) => setForm((f) => ({ ...f, [key]: e.target.value }));
|
||||
|
||||
return (
|
||||
<div className="min-h-[calc(100vh-3.5rem)]">
|
||||
<div className="fixed inset-0 -z-10">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_50%_-10%,rgba(16,185,129,0.08),transparent)]" />
|
||||
<div className="fixed inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_50%_-10%,var(--accent-dim),transparent)]" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<div className="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
|
||||
<Rocket className="w-5 h-5 text-emerald-400" />
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="w-10 h-10 rounded-xl bg-[var(--accent-dim)] border border-[var(--accent-border)] flex items-center justify-center shrink-0">
|
||||
<Rocket className="w-5 h-5 text-emerald-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Deploy SSH Host</h1>
|
||||
<p className="text-sm text-zinc-500">
|
||||
<h1 className="text-2xl font-bold text-[var(--text)]">Deploy SSH Host</h1>
|
||||
<p className="text-sm text-[var(--text-muted)]">
|
||||
One form → Tunnel + DNS + Access App + Install Command
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="mt-8 space-y-5">
|
||||
<Field
|
||||
icon={<Server className="w-4 h-4" />}
|
||||
label="Server Name"
|
||||
hint="A friendly label for this server, e.g. prod-web-1"
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<Field icon={<Server className="w-4 h-4" />} label="Server Name"
|
||||
hint="A friendly label for this server, e.g. prod-web-1">
|
||||
<input type="text" value={form.serverName} onChange={set("serverName")}
|
||||
placeholder="prod-web-1" className="form-input" required />
|
||||
</Field>
|
||||
|
||||
{/* SSH Hostname — zone dropdown + subdomain */}
|
||||
<Field icon={<Globe className="w-4 h-4" />} label="SSH Hostname"
|
||||
hint={hostname ? `Will create: ${hostname}` : "Select a zone, then enter a subdomain"}>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<input
|
||||
type="text"
|
||||
value={form.serverName}
|
||||
onChange={set("serverName")}
|
||||
placeholder="prod-web-1"
|
||||
value={form.subdomain}
|
||||
onChange={set("subdomain")}
|
||||
placeholder="ssh"
|
||||
className="form-input"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
icon={<Globe className="w-4 h-4" />}
|
||||
label="SSH Hostname"
|
||||
hint="The domain to access this server, e.g. ssh.example.com"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={form.hostname}
|
||||
onChange={set("hostname")}
|
||||
placeholder="ssh.example.com"
|
||||
className="form-input"
|
||||
</div>
|
||||
<span className="flex items-center text-[var(--text-faint)] text-sm font-mono select-none">.</span>
|
||||
<div className="flex-[2] min-w-0 relative">
|
||||
{zonesLoading ? (
|
||||
<div className="form-input flex items-center gap-2 text-[var(--text-faint)]">
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin shrink-0" />
|
||||
<span className="text-sm">Loading zones…</span>
|
||||
</div>
|
||||
) : zonesError ? (
|
||||
<div className="form-input flex items-center gap-2">
|
||||
<span className="text-sm text-red-500 truncate flex-1">{zonesError}</span>
|
||||
<button type="button" onClick={fetchZones} className="shrink-0 text-[var(--text-muted)] hover:text-[var(--text)]">
|
||||
<RefreshCw className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<select
|
||||
value={form.zoneId}
|
||||
onChange={set("zoneId")}
|
||||
className="form-input appearance-none pr-8"
|
||||
required
|
||||
/>
|
||||
>
|
||||
<option value="">Select zone…</option>
|
||||
{zones.map((z) => (
|
||||
<option key={z.id} value={z.id}>{z.name}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--text-faint)]" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
icon={<Hash className="w-4 h-4" />}
|
||||
label="SSH Port"
|
||||
hint="Server-side SSH port (usually 22)"
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
value={form.sshPort}
|
||||
onChange={set("sshPort")}
|
||||
placeholder="22"
|
||||
className="form-input w-24"
|
||||
/>
|
||||
<Field icon={<Hash className="w-4 h-4" />} label="SSH Port"
|
||||
hint="Server-side SSH port (usually 22)">
|
||||
<input type="number" value={form.sshPort} onChange={set("sshPort")}
|
||||
placeholder="22" className="form-input w-28" />
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
icon={<Mail className="w-4 h-4" />}
|
||||
label="SSO Email"
|
||||
hint="Your Cloudflare SSO email — its prefix becomes the Linux user"
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
value={form.ssoEmail}
|
||||
onChange={set("ssoEmail")}
|
||||
placeholder="admin@example.com"
|
||||
className="form-input"
|
||||
required
|
||||
/>
|
||||
<Field icon={<Mail className="w-4 h-4" />} label="SSO Email"
|
||||
hint="Your Cloudflare SSO email — its prefix becomes the Linux user">
|
||||
<input type="email" value={form.ssoEmail} onChange={set("ssoEmail")}
|
||||
placeholder="admin@example.com" className="form-input" required />
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
icon={<Mail className="w-4 h-4" />}
|
||||
label="Allowed Emails (optional)"
|
||||
hint="Comma-separated list of emails for the Access Policy. Leave empty = any authenticated user"
|
||||
>
|
||||
<textarea
|
||||
value={form.allowedEmails}
|
||||
onChange={set("allowedEmails")}
|
||||
<Field icon={<Mail className="w-4 h-4" />} label="Allowed Emails (optional)"
|
||||
hint="Comma-separated emails for the Access Policy. Leave empty = any authenticated user">
|
||||
<textarea value={form.allowedEmails} onChange={set("allowedEmails")}
|
||||
placeholder="alice@example.com, bob@example.com"
|
||||
rows={2}
|
||||
className="form-input resize-none"
|
||||
/>
|
||||
rows={2} className="form-input resize-none" />
|
||||
</Field>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canSubmit || loading}
|
||||
className="w-full flex items-center justify-center gap-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 disabled:bg-zinc-800 disabled:text-zinc-600 text-white font-semibold py-3 px-4 transition"
|
||||
disabled={!canSubmit}
|
||||
className="w-full flex items-center justify-center gap-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 transition"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
Deploying...
|
||||
</>
|
||||
<><Loader2 className="w-4 h-4 animate-spin" />Deploying…</>
|
||||
) : (
|
||||
<>
|
||||
<Rocket className="w-4 h-4" />
|
||||
Deploy Now
|
||||
</>
|
||||
<><Rocket className="w-4 h-4" />Deploy Now</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
@ -209,39 +243,31 @@ export default function CreatePage() {
|
||||
<div className="mt-6 rounded-xl border border-red-500/20 bg-red-500/5 p-4 flex items-start gap-3">
|
||||
<XCircle className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-red-300">Deploy failed</p>
|
||||
<p className="text-sm text-red-400/80 mt-1 break-words">{error}</p>
|
||||
<p className="text-sm font-semibold text-red-500">Deploy failed</p>
|
||||
<p className="text-sm text-red-400 mt-1 break-words">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{result && (
|
||||
<div className="mt-8 space-y-6">
|
||||
<div className="mt-8 space-y-5">
|
||||
{/* Steps */}
|
||||
<div className="rounded-xl border border-zinc-800 bg-zinc-900/60 overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-zinc-800 text-sm font-medium text-zinc-400">
|
||||
<div className="rounded-xl border border-[var(--border)] bg-[var(--bg-card)] overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-[var(--border)] text-sm font-medium text-[var(--text-muted)]">
|
||||
Pipeline Steps
|
||||
</div>
|
||||
<div className="divide-y divide-zinc-800/50">
|
||||
<div className="divide-y divide-[var(--border-subtle)]">
|
||||
{result.steps.map((s, i) => (
|
||||
<div key={i} className="flex items-center gap-3 px-5 py-3">
|
||||
{s.status === "success" && (
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
|
||||
)}
|
||||
{s.status === "error" && (
|
||||
<XCircle className="w-4 h-4 text-red-400 shrink-0" />
|
||||
)}
|
||||
{s.status === "skipped" && (
|
||||
<AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
|
||||
)}
|
||||
{s.status === "success" && <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0" />}
|
||||
{s.status === "error" && <XCircle className="w-4 h-4 text-red-500 shrink-0" />}
|
||||
{s.status === "skipped" && <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />}
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="text-sm font-medium text-zinc-300">
|
||||
<span className="text-sm font-medium text-[var(--text)]">
|
||||
{STEP_LABELS[s.step] || s.step}
|
||||
</span>
|
||||
<p className="text-xs text-zinc-500 truncate">
|
||||
{s.message}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--text-muted)] truncate">{s.message}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -250,36 +276,28 @@ export default function CreatePage() {
|
||||
|
||||
{/* Install command */}
|
||||
{result.installCommand && (
|
||||
<div className="rounded-xl border border-zinc-800 bg-zinc-900/60 overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-zinc-800 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-zinc-400">
|
||||
<div className="rounded-xl border border-[var(--border)] bg-[var(--bg-card)] overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-[var(--border)] flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-[var(--text-muted)]">
|
||||
<Terminal className="w-4 h-4" />
|
||||
Install Command
|
||||
</div>
|
||||
<button
|
||||
onClick={copyCommand}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition bg-zinc-800 hover:bg-zinc-700 text-zinc-400"
|
||||
className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition bg-[var(--bg-subtle)] hover:bg-[var(--bg-card)] border border-[var(--border)] text-[var(--text-muted)]"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-3 h-3 text-emerald-400" />
|
||||
Copied
|
||||
</>
|
||||
<><Check className="w-3 h-3 text-emerald-500" />Copied</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-3 h-3" />
|
||||
Copy
|
||||
</>
|
||||
<><Copy className="w-3 h-3" />Copy</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<pre className="px-5 py-4 text-sm text-emerald-300 font-mono overflow-x-auto whitespace-pre-wrap break-all leading-relaxed">
|
||||
<pre className="px-5 py-4 text-sm text-emerald-600 dark:text-emerald-300 font-mono overflow-x-auto whitespace-pre-wrap break-all leading-relaxed bg-[var(--bg-subtle)]">
|
||||
{result.installCommand}
|
||||
</pre>
|
||||
<div className="px-5 py-3 border-t border-zinc-800 text-xs text-zinc-600">
|
||||
Paste this command on your server (requires root). It will
|
||||
install cloudflared, register the tunnel, configure SSH CA
|
||||
trust, and create the login user.
|
||||
<div className="px-5 py-3 border-t border-[var(--border)] text-xs text-[var(--text-faint)]">
|
||||
Paste on your server (requires root) — installs cloudflared, registers the tunnel, and configures SSH CA trust.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -290,12 +308,10 @@ export default function CreatePage() {
|
||||
href={result.launchUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/5 p-4 text-emerald-300 hover:bg-emerald-500/10 transition"
|
||||
className="flex items-center justify-center gap-2 rounded-xl border border-[var(--accent-border)] bg-[var(--accent-dim)] p-4 text-emerald-600 dark:text-emerald-300 hover:bg-[var(--accent-dim)] transition font-medium"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
<span className="font-medium">
|
||||
Open {result.launchUrl}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
@ -321,6 +337,10 @@ export default function CreatePage() {
|
||||
.form-input::placeholder {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
select.form-input option {
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
@ -339,12 +359,12 @@ function Field({
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<label className="flex items-center gap-1.5 text-sm font-medium text-zinc-300 mb-1.5">
|
||||
<span className="text-zinc-500">{icon}</span>
|
||||
<label className="flex items-center gap-1.5 text-sm font-medium text-[var(--text)] mb-1.5">
|
||||
<span className="text-[var(--text-muted)]">{icon}</span>
|
||||
{label}
|
||||
</label>
|
||||
{children}
|
||||
{hint && <p className="text-xs text-zinc-600 mt-1">{hint}</p>}
|
||||
{hint && <p className="text-xs text-[var(--text-muted)] mt-1">{hint}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -208,6 +208,16 @@ export async function getSshAppById(id: string): Promise<SshApp | null> {
|
||||
return ssh.find((a) => a.id === id) ?? null;
|
||||
}
|
||||
|
||||
// ─── Zones ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export async function listZones(): Promise<{ id: string; name: string }[]> {
|
||||
const json = await cfGet("/zones?per_page=50&status=active", 300);
|
||||
return ((json.result ?? []) as { id: string; name: string }[]).map((z) => ({
|
||||
id: z.id,
|
||||
name: z.name,
|
||||
}));
|
||||
}
|
||||
|
||||
// ─── Tunnels ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export async function listTunnels(): Promise<Tunnel[]> {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user