285 lines
12 KiB
JavaScript
285 lines
12 KiB
JavaScript
import React, { useEffect, useState } from "../../../recovery-preview/node_modules/react/index.js";
|
|
import { requestJson } from "../../runtime/client.js";
|
|
|
|
function Wot({ children }) {
|
|
return <div className="flex h-full w-full flex-col">{children}</div>;
|
|
}
|
|
|
|
function Hot({ children }) {
|
|
return (
|
|
<div className="flex h-[var(--header-height)] flex-none items-center justify-between gap-4 bg-background p-4 md:px-8">
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function zot({ children }) {
|
|
return <div className="flex-1 overflow-hidden px-4 py-6 md:px-8">{children}</div>;
|
|
}
|
|
|
|
function Card({ title, description, children }) {
|
|
return (
|
|
<div className="rounded-xl border bg-card text-card-foreground shadow">
|
|
<div className="flex flex-col space-y-1.5 p-6">
|
|
<h3 className="font-semibold leading-none tracking-tight">{title}</h3>
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
<div className="p-6 pt-0">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Field({ label, description, children, span = 1 }) {
|
|
return (
|
|
<div className={span === 2 ? "space-y-2 md:col-span-2" : "space-y-2"}>
|
|
<label className="text-sm font-medium leading-none">{label}</label>
|
|
{children}
|
|
<p className="text-[0.8rem] text-muted-foreground">{description}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const defaults = {
|
|
nebula_theme_color: "aurora",
|
|
nebula_hero_slogan: "",
|
|
nebula_welcome_target: "",
|
|
nebula_register_title: "",
|
|
nebula_background_url: "",
|
|
nebula_metrics_base_url: "",
|
|
nebula_default_theme_mode: "system",
|
|
nebula_light_logo_url: "",
|
|
nebula_dark_logo_url: "",
|
|
nebula_custom_html: "",
|
|
nebula_static_cdn_url: "",
|
|
};
|
|
|
|
const themeColorOptions = [
|
|
{ value: "aurora", label: "Aurora" },
|
|
{ value: "sunset", label: "Sunset" },
|
|
{ value: "ember", label: "Ember" },
|
|
{ value: "violet", label: "Violet" },
|
|
];
|
|
|
|
const themeModeOptions = [
|
|
{ value: "system", label: "Follow system" },
|
|
{ value: "dark", label: "Prefer dark" },
|
|
{ value: "light", label: "Prefer light" },
|
|
];
|
|
|
|
function QKt() {
|
|
const [form, setForm] = useState(defaults);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [message, setMessage] = useState("");
|
|
const [messageType, setMessageType] = useState("");
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const payload = await requestJson("/config/fetch?key=nebula");
|
|
const nebula = payload?.data?.nebula || payload?.nebula || {};
|
|
setForm((prev) => ({ ...prev, ...nebula }));
|
|
} catch (error) {
|
|
setMessage(error?.message || "Failed to load Nebula settings");
|
|
setMessageType("error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
const updateField = (key, value) => {
|
|
setForm((prev) => ({ ...prev, [key]: value ?? "" }));
|
|
};
|
|
|
|
const save = async () => {
|
|
setSaving(true);
|
|
setMessage("");
|
|
setMessageType("");
|
|
try {
|
|
await requestJson("/config/save", { method: "POST", body: form });
|
|
setMessage("Nebula settings saved");
|
|
setMessageType("success");
|
|
} catch (error) {
|
|
setMessage(error?.message || "Failed to save Nebula settings");
|
|
setMessageType("error");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Wot>
|
|
<Hot>
|
|
<div />
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
|
|
onClick={save}
|
|
disabled={loading || saving}
|
|
>
|
|
{saving ? "Saving..." : "Save settings"}
|
|
</button>
|
|
</div>
|
|
</Hot>
|
|
<zot>
|
|
<div className="space-y-6">
|
|
<header className="space-y-2">
|
|
<h1 className="text-2xl font-bold tracking-tight">Nebula Theme</h1>
|
|
<p className="text-muted-foreground">
|
|
Configure Nebula theme colors, copywriting, branding assets, and custom injections.
|
|
</p>
|
|
</header>
|
|
|
|
{message ? (
|
|
<div
|
|
className={
|
|
messageType === "success"
|
|
? "rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-600"
|
|
: "rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
|
|
}
|
|
>
|
|
{message}
|
|
</div>
|
|
) : null}
|
|
|
|
<Card
|
|
title="Display"
|
|
description="Set the primary color, theme mode, and hero copy shown by Nebula."
|
|
>
|
|
{loading ? (
|
|
<div className="rounded-lg border border-dashed bg-muted/30 px-4 py-8 text-sm text-muted-foreground">
|
|
Loading Nebula settings...
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="Theme palette" description="Controls the default Nebula color palette.">
|
|
<select
|
|
className="flex h-9 w-full appearance-none rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_theme_color}
|
|
onChange={(event) => updateField("nebula_theme_color", event.target.value)}
|
|
>
|
|
{themeColorOptions.map((item) => (
|
|
<option key={item.value} value={item.value}>
|
|
{item.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
|
|
<Field
|
|
label="Theme mode"
|
|
description="Applied when a user opens the Nebula frontend for the first time."
|
|
>
|
|
<select
|
|
className="flex h-9 w-full appearance-none rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_default_theme_mode}
|
|
onChange={(event) =>
|
|
updateField("nebula_default_theme_mode", event.target.value)
|
|
}
|
|
>
|
|
{themeModeOptions.map((item) => (
|
|
<option key={item.value} value={item.value}>
|
|
{item.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</Field>
|
|
|
|
<Field label="Hero slogan" description="Shown as the main title in the hero area.">
|
|
<input
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_hero_slogan}
|
|
onChange={(event) => updateField("nebula_hero_slogan", event.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Welcome target" description="Appended after the Welcome to heading.">
|
|
<input
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_welcome_target}
|
|
onChange={(event) => updateField("nebula_welcome_target", event.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Register title" description="Displayed at the top of the register panel.">
|
|
<input
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_register_title}
|
|
onChange={(event) => updateField("nebula_register_title", event.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field
|
|
label="Metrics API URL"
|
|
description="Base URL used when Nebula shows public metrics before login."
|
|
>
|
|
<input
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_metrics_base_url}
|
|
onChange={(event) => updateField("nebula_metrics_base_url", event.target.value)}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
<Card
|
|
title="Branding"
|
|
description="Set background assets, logo URLs, CDN roots, and custom HTML."
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Field label="Background URL" description="Used by the Nebula login or landing background.">
|
|
<input
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_background_url}
|
|
onChange={(event) => updateField("nebula_background_url", event.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Static CDN URL" description="Root CDN path for Nebula static assets.">
|
|
<input
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_static_cdn_url}
|
|
onChange={(event) => updateField("nebula_static_cdn_url", event.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Light logo URL" description="Displayed while the light theme is active.">
|
|
<input
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_light_logo_url}
|
|
onChange={(event) => updateField("nebula_light_logo_url", event.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="Dark logo URL" description="Displayed while the dark theme is active.">
|
|
<input
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_dark_logo_url}
|
|
onChange={(event) => updateField("nebula_dark_logo_url", event.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field
|
|
label="Custom HTML / scripts"
|
|
description="Inject custom HTML, scripts, or styles into Nebula pages."
|
|
span={2}
|
|
>
|
|
<textarea
|
|
className="min-h-[220px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-xs shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={form.nebula_custom_html}
|
|
onChange={(event) => updateField("nebula_custom_html", event.target.value)}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</zot>
|
|
</Wot>
|
|
);
|
|
}
|
|
|
|
export default QKt;
|