462 lines
14 KiB
TypeScript
462 lines
14 KiB
TypeScript
import { useState, type FormEvent } from "react";
|
|
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import InlineError from "@/lib/InlineError";
|
|
import { settingsPutMutation, settingsQuery } from "@/lib/queries";
|
|
import { buildSettingsPatch } from "@/lib/settingsDiff";
|
|
import type { Settings, SettingsPatch } from "@/lib/types";
|
|
import { raiseRestartBanner } from "./restartBanner";
|
|
import { READ_ONLY_HINT, useReadOnlyConfig } from "./authority";
|
|
import Select from "@/ui/Select";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
|
|
/** True when the patch touches anything besides the write-only `web.password` (ruling 11). */
|
|
export function patchRequiresRestart(patch: SettingsPatch): boolean {
|
|
return Object.entries(patch).some(([section, fields]) =>
|
|
Object.keys(fields ?? {}).some((key) => !(section === "web" && key === "password")),
|
|
);
|
|
}
|
|
|
|
interface FieldDef<S extends keyof Settings> {
|
|
key: keyof Settings[S] & string;
|
|
kind: "number" | "text" | "boolean" | readonly string[];
|
|
}
|
|
|
|
interface SectionDef<S extends keyof Settings> {
|
|
section: S;
|
|
title: string;
|
|
fields: readonly FieldDef<S>[];
|
|
}
|
|
|
|
/** Binds each section's field keys to that section's Settings type at definition. */
|
|
function defineSection<S extends keyof Settings>(def: SectionDef<S>): SectionDef<S> {
|
|
return def;
|
|
}
|
|
|
|
/** The registry read back as a heterogeneous list, once the per-section binding has been proven. */
|
|
type AnyFieldDef = { [S in keyof Settings]: FieldDef<S> }[keyof Settings];
|
|
type AnySectionDef = { [S in keyof Settings]: SectionDef<S> }[keyof Settings];
|
|
|
|
/**
|
|
* A section's values as a string-keyed view. The keys are proven against
|
|
* `Settings[S]` where each section is defined; iterating the heterogeneous
|
|
* registry loses that correlation, so consumption widens here in one place.
|
|
*/
|
|
function sectionValues(settings: Settings, section: keyof Settings): Record<string, unknown> {
|
|
return settings[section] as Record<string, unknown>;
|
|
}
|
|
|
|
const TLS_FIELDS: readonly FieldDef<"doh_server" | "dot_server">[] = [
|
|
{ key: "enabled", kind: "boolean" },
|
|
{ key: "bind", kind: "text" },
|
|
{ key: "port", kind: "number" },
|
|
{ key: "cert_path", kind: "text" },
|
|
{ key: "key_path", kind: "text" },
|
|
];
|
|
|
|
const SECTIONS: readonly AnySectionDef[] = [
|
|
defineSection({
|
|
section: "upstream",
|
|
title: "Upstream",
|
|
fields: [
|
|
{ key: "attempt_timeout_ms", kind: "number" },
|
|
{ key: "read_timeout_ms", kind: "number" },
|
|
{ key: "total_timeout_ms", kind: "number" },
|
|
],
|
|
}),
|
|
defineSection({
|
|
section: "dns",
|
|
title: "DNS",
|
|
fields: [
|
|
{ key: "bind_ipv4", kind: "text" },
|
|
{ key: "bind_ipv6", kind: "text" },
|
|
{ key: "port", kind: "number" },
|
|
{ key: "rate_limit", kind: "number" },
|
|
{ key: "rate_window_seconds", kind: "number" },
|
|
],
|
|
}),
|
|
defineSection({
|
|
section: "blocking",
|
|
title: "Blocking",
|
|
fields: [
|
|
{ key: "response", kind: ["zero", "nxdomain"] },
|
|
{ key: "ttl", kind: "number" },
|
|
],
|
|
}),
|
|
defineSection({
|
|
section: "cache",
|
|
title: "Cache",
|
|
fields: [
|
|
{ key: "size", kind: "number" },
|
|
{ key: "negative_ttl_max", kind: "number" },
|
|
],
|
|
}),
|
|
defineSection({
|
|
section: "web",
|
|
title: "Web",
|
|
fields: [
|
|
{ key: "enabled", kind: "boolean" },
|
|
{ key: "bind", kind: "text" },
|
|
{ key: "port", kind: "number" },
|
|
{ key: "session_ttl_hours", kind: "number" },
|
|
{ key: "api_rate_limit_per_min", kind: "number" },
|
|
{ key: "api_localhost_exempt", kind: "boolean" },
|
|
{ key: "sse_max_connections_per_ip", kind: "number" },
|
|
{ key: "trusted_proxies", kind: "text" },
|
|
],
|
|
}),
|
|
defineSection({ section: "doh_server", title: "DoH Server", fields: TLS_FIELDS }),
|
|
defineSection({ section: "dot_server", title: "DoT Server", fields: TLS_FIELDS }),
|
|
defineSection({ section: "edns", title: "EDNS", fields: [{ key: "ecs_mode", kind: ["strip", "forward"] }] }),
|
|
defineSection({
|
|
section: "logging",
|
|
title: "Logging",
|
|
fields: [
|
|
{ key: "level", kind: ["error", "warn", "info", "debug"] },
|
|
{ key: "retention_days", kind: "number" },
|
|
{ key: "query_log_buffer_max", kind: "number" },
|
|
{ key: "hide_domains", kind: "boolean" },
|
|
{ key: "hide_client_ips", kind: "boolean" },
|
|
{ key: "output", kind: ["stderr", "syslog", "file"] },
|
|
{ key: "file_path", kind: "text" },
|
|
{ key: "max_size_mb", kind: "number" },
|
|
{ key: "max_files", kind: "number" },
|
|
],
|
|
}),
|
|
defineSection({
|
|
section: "disk",
|
|
title: "Disk",
|
|
fields: [
|
|
{ key: "min_free_mb", kind: "number" },
|
|
{ key: "warn_free_mb", kind: "number" },
|
|
],
|
|
}),
|
|
defineSection({
|
|
section: "blocklist_update",
|
|
title: "Blocklist Update",
|
|
fields: [
|
|
{ key: "enabled", kind: "boolean" },
|
|
{ key: "interval_hours", kind: "number" },
|
|
],
|
|
}),
|
|
];
|
|
|
|
const DARK = "@media (prefers-color-scheme: dark)";
|
|
|
|
const styles = stylex.create({
|
|
heading: {
|
|
fontSize: "1.5rem",
|
|
lineHeight: "2rem",
|
|
fontWeight: 600,
|
|
},
|
|
intro: {
|
|
marginTop: "0.25rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
},
|
|
form: {
|
|
marginTop: "1rem",
|
|
maxWidth: "48rem",
|
|
},
|
|
/** A `fieldset` has a browser default border and padding; the layout wants neither. */
|
|
sections: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1.5rem",
|
|
borderStyle: "none",
|
|
margin: 0,
|
|
padding: 0,
|
|
},
|
|
section: {
|
|
borderRadius: "0.25rem",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.border,
|
|
padding: "1rem",
|
|
},
|
|
legend: {
|
|
paddingInline: "0.25rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
fontWeight: 600,
|
|
},
|
|
/** One column on a phone, two from `sm`, as before. */
|
|
fieldGrid: {
|
|
display: "grid",
|
|
gap: "0.75rem",
|
|
gridTemplateColumns: {
|
|
default: "repeat(1, minmax(0, 1fr))",
|
|
"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
|
|
},
|
|
},
|
|
label: {
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: {
|
|
default: "oklch(37% 0.013 285.805)",
|
|
[DARK]: "oklch(87.1% 0.006 286.286)",
|
|
},
|
|
},
|
|
checkboxRow: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
},
|
|
field: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "0.25rem",
|
|
},
|
|
fieldInput: {
|
|
borderRadius: "0.25rem",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.borderStrong,
|
|
backgroundColor: colors.surfaceRaised,
|
|
color: colors.text,
|
|
paddingInline: "0.5rem",
|
|
paddingBlock: "0.25rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
},
|
|
derived: {
|
|
color: colors.textMuted,
|
|
},
|
|
/** Both notices span the whole grid so the wrapped sentence stays readable. */
|
|
spanRow: {
|
|
gridColumn: { default: null, "@media (min-width: 640px)": "span 2 / span 2" },
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
},
|
|
passwordNotice: {
|
|
color: { default: "oklch(55.5% 0.163 48.998)", [DARK]: "oklch(82.8% 0.189 84.429)" },
|
|
},
|
|
mismatchNotice: {
|
|
color: colors.danger,
|
|
},
|
|
submitRow: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.75rem",
|
|
},
|
|
save: {
|
|
borderStyle: "none",
|
|
borderRadius: "0.25rem",
|
|
paddingInline: "1rem",
|
|
paddingBlock: "0.375rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
fontWeight: 500,
|
|
backgroundColor: {
|
|
default: colors.primary,
|
|
":disabled": "oklch(87.1% 0.006 286.286)",
|
|
[DARK]: { default: colors.primary, ":disabled": "oklch(27.4% 0.006 286.033)" },
|
|
},
|
|
color: { default: colors.primaryText, ":disabled": "oklch(55.2% 0.016 285.938)" },
|
|
},
|
|
});
|
|
|
|
function FieldRow({
|
|
section,
|
|
def,
|
|
value,
|
|
onChange,
|
|
}: {
|
|
section: string;
|
|
def: AnyFieldDef;
|
|
value: unknown;
|
|
onChange: (value: unknown) => void;
|
|
}) {
|
|
const id = `${section}.${def.key}`;
|
|
if (def.kind === "boolean") {
|
|
return (
|
|
<div {...stylex.props(styles.checkboxRow)}>
|
|
<input
|
|
id={id}
|
|
type="checkbox"
|
|
checked={value as boolean}
|
|
onChange={(e) => onChange(e.target.checked)}
|
|
{...stylex.props(shared.focusRing)}
|
|
/>
|
|
<label htmlFor={id} {...stylex.props(styles.label)}>
|
|
{def.key}
|
|
</label>
|
|
</div>
|
|
);
|
|
}
|
|
if (Array.isArray(def.kind)) {
|
|
return (
|
|
<Select
|
|
variant="inline"
|
|
label={def.key}
|
|
value={value as string}
|
|
onChange={onChange}
|
|
options={def.kind.map((option) => ({ value: option, label: option }))}
|
|
/>
|
|
);
|
|
}
|
|
if (def.kind === "number") {
|
|
const numeric = value as number;
|
|
return (
|
|
<div {...stylex.props(styles.field)}>
|
|
<label htmlFor={id} {...stylex.props(styles.label)}>
|
|
{def.key}
|
|
</label>
|
|
<input
|
|
id={id}
|
|
type="number"
|
|
value={Number.isNaN(numeric) ? "" : numeric}
|
|
onChange={(e) => onChange(e.target.valueAsNumber)}
|
|
{...stylex.props(styles.fieldInput, shared.focusRing)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div {...stylex.props(styles.field)}>
|
|
<label htmlFor={id} {...stylex.props(styles.label)}>
|
|
{def.key}
|
|
</label>
|
|
<input
|
|
id={id}
|
|
type="text"
|
|
value={value as string}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
{...stylex.props(styles.fieldInput, shared.focusRing)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SettingsPage() {
|
|
const { data } = useSuspenseQuery(settingsQuery());
|
|
const queryClient = useQueryClient();
|
|
const mutation = useMutation(settingsPutMutation(queryClient));
|
|
// Frozen at mount and re-frozen on save: diffing against live query data would
|
|
// turn a background refetch's out-of-band changes into phantom user edits.
|
|
const [baseline, setBaseline] = useState<Settings>(() => structuredClone(data.settings));
|
|
const [edited, setEdited] = useState<Settings>(() => structuredClone(data.settings));
|
|
const [password, setPassword] = useState("");
|
|
const [confirm, setConfirm] = useState("");
|
|
|
|
const passwordsMismatch = (password !== "" || confirm !== "") && password !== confirm;
|
|
const hasInvalidNumber = SECTIONS.some(({ section, fields }) => {
|
|
const values = sectionValues(edited, section);
|
|
return (fields as readonly AnyFieldDef[]).some(
|
|
(field) => field.kind === "number" && Number.isNaN(values[field.key]),
|
|
);
|
|
});
|
|
const patch = buildSettingsPatch(baseline, edited, password === "" ? undefined : password);
|
|
const readOnly = useReadOnlyConfig();
|
|
const saveDisabled = patch === null || passwordsMismatch || hasInvalidNumber || mutation.isPending || readOnly;
|
|
|
|
function setField(section: keyof Settings, key: string, value: unknown): void {
|
|
setEdited((prev) => ({
|
|
...prev,
|
|
[section]: { ...sectionValues(prev, section), [key]: value },
|
|
}));
|
|
}
|
|
|
|
function handleSubmit(event: FormEvent): void {
|
|
event.preventDefault();
|
|
if (patch === null || passwordsMismatch || hasInvalidNumber) return;
|
|
const restartNeeded = patchRequiresRestart(patch);
|
|
mutation.mutate(patch, {
|
|
onSuccess: (envelope) => {
|
|
setBaseline(structuredClone(envelope.settings));
|
|
setEdited(structuredClone(envelope.settings));
|
|
setPassword("");
|
|
setConfirm("");
|
|
if (restartNeeded) raiseRestartBanner();
|
|
},
|
|
});
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h1 {...stylex.props(styles.heading)}>Settings</h1>
|
|
<p {...stylex.props(styles.intro)}>
|
|
Changes are validated as a whole; every setting requires a restart to take effect.
|
|
</p>
|
|
<form onSubmit={handleSubmit} {...stylex.props(styles.form)}>
|
|
<fieldset disabled={mutation.isPending || readOnly} {...stylex.props(styles.sections)}>
|
|
{SECTIONS.map(({ section, title, fields }) => (
|
|
<fieldset key={section} {...stylex.props(styles.section)}>
|
|
<legend {...stylex.props(styles.legend)}>{title}</legend>
|
|
<div {...stylex.props(styles.fieldGrid)}>
|
|
{(fields as readonly AnyFieldDef[]).map((def) => (
|
|
<FieldRow
|
|
key={def.key}
|
|
section={section}
|
|
def={def}
|
|
value={sectionValues(edited, section)[def.key]}
|
|
onChange={(value) => setField(section, def.key, value)}
|
|
/>
|
|
))}
|
|
{section === "web" && (
|
|
<>
|
|
<p {...stylex.props(styles.label)}>
|
|
auth_enabled: {data.settings.web.auth_enabled ? "true" : "false"}{" "}
|
|
<span {...stylex.props(styles.derived)}>(derived, read-only)</span>
|
|
</p>
|
|
<div {...stylex.props(styles.field)}>
|
|
<label htmlFor="web.password" {...stylex.props(styles.label)}>
|
|
password
|
|
</label>
|
|
<input
|
|
id="web.password"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
{...stylex.props(styles.fieldInput, shared.focusRing)}
|
|
/>
|
|
</div>
|
|
<div {...stylex.props(styles.field)}>
|
|
<label htmlFor="web.password_confirm" {...stylex.props(styles.label)}>
|
|
confirm password
|
|
</label>
|
|
<input
|
|
id="web.password_confirm"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
value={confirm}
|
|
onChange={(e) => setConfirm(e.target.value)}
|
|
{...stylex.props(styles.fieldInput, shared.focusRing)}
|
|
/>
|
|
</div>
|
|
{password !== "" && (
|
|
<p {...stylex.props(styles.spanRow, styles.passwordNotice)}>
|
|
Changing the password signs out every session; you will be asked to log
|
|
in again.
|
|
</p>
|
|
)}
|
|
{passwordsMismatch && (
|
|
<p {...stylex.props(styles.spanRow, styles.mismatchNotice)}>
|
|
Passwords do not match.
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</fieldset>
|
|
))}
|
|
<div {...stylex.props(styles.submitRow)}>
|
|
<button
|
|
type="submit"
|
|
disabled={saveDisabled}
|
|
title={readOnly ? READ_ONLY_HINT : undefined}
|
|
{...stylex.props(styles.save, shared.focusRing)}
|
|
>
|
|
{mutation.isPending ? "Saving…" : "Save"}
|
|
</button>
|
|
{mutation.isError && <InlineError error={mutation.error} />}
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</section>
|
|
);
|
|
}
|