@rapidmx/web-client 0.37.1 → 0.39.0

package/dist/apps/shared/components/admin/diagnostics/KeyringCard.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ConfigKeys } from "../../../../../lib/admin/configKeysApi.js";
+import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
+/**
+ * Reads the configuration keyring's state with the configuration keys client: the same answer the Configuration Encryption page shows, so Diagnostics needs no
+ * route of its own. A server without the route (404) answers `null`, which the card words, so that it doesn't fail the page.
+ */
+export declare function loadKeyring(): Promise<ConfigKeys | null>;
+export interface KeyringCardProps {
+    keyring: DiagnosticsResource<ConfigKeys | null>;
+    /** The time the ages are counted to. Defaults to now. For a test. */
+    now?: number;
+}
+/**
+ * The configuration keyring (spec 5.6, 14): each key by its id, when it was made, its age and how many saved values it encrypts, which one encrypts now, and a
+ * rotation that is running or failed. Never any key material: the server doesn't send it. Managing the keys is the Configuration Encryption page's.
+ */
+export default function KeyringCard({ keyring, now }: KeyringCardProps): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/KeyringCard.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getConfigKeys } from "../../../../../lib/admin/configKeysApi.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import Alert from "../ActionAlert.js";
+import { activeKidOf, ageText, isRunning } from "../configEncryption/keyringParts.js";
+import Badge from "./Badge.js";
+import { formatDateTime, NO_VALUE } from "./format.js";
+/**
+ * Reads the configuration keyring's state with the configuration keys client: the same answer the Configuration Encryption page shows, so Diagnostics needs no
+ * route of its own. A server without the route (404) answers `null`, which the card words, so that it doesn't fail the page.
+ */
+export async function loadKeyring() {
+    try {
+        return await getConfigKeys();
+    }
+    catch (err) {
+        if (err instanceof ApiRequestError && err.status === 404) {
+            return null;
+        }
+        throw err;
+    }
+}
+/** Where a running rotation is, in words. */
+const PHASES = {
+    adding: "adding the new key",
+    activating: "waiting for the server copies to load the new key",
+    reencrypting: "re-encrypting the saved values",
+    retiring: "removing the old key",
+    done: "done",
+    failed: "failed",
+};
+const HEADINGS = ["Key ID", "Created", "Age", "Values encrypted", "State"];
+function Note({ role = "note", children }) {
+    return (_jsx("div", { role: role, className: "mt-3 rounded-sm bg-warning px-3.5 py-3 text-sm text-warning-contrast", children: children }));
+}
+/**
+ * The configuration keyring (spec 5.6, 14): each key by its id, when it was made, its age and how many saved values it encrypts, which one encrypts now, and a
+ * rotation that is running or failed. Never any key material: the server doesn't send it. Managing the keys is the Configuration Encryption page's.
+ */
+export default function KeyringCard({ keyring, now = Date.now() }) {
+    const { data, error, loading } = keyring;
+    return (_jsxs("section", { "aria-labelledby": "diagnostics-keyring-heading", className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: "diagnostics-keyring-heading", className: "mb-1 text-base font-bold uppercase tracking-wide", children: "Configuration keyring" }), _jsx("p", { className: "mb-3 text-xs text-text-muted", children: "The keys that encrypt the credentials, API keys and tokens saved in the console. Only each key\u2019s id, age and how many values it encrypts are shown." }), error && _jsx(Alert, { children: error }), !data && loading && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }), data === null && _jsx("p", { className: "text-sm text-text-muted", children: "This server doesn\u2019t offer configuration encryption yet." }), data && _jsx(Keys, { keys: data, now: now })] }));
+}
+function Keys({ keys, now }) {
+    const list = keys.keys ?? [];
+    const activeKid = activeKidOf({ ...keys, keys: list });
+    const rotation = keys.rotation;
+    const reencryption = keys.reencryption;
+    const unreadable = reencryption?.unreadable?.length ?? 0;
+    return (_jsxs(_Fragment, { children: [list.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "The keyring holds no keys." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [_jsx("thead", { children: _jsx("tr", { children: HEADINGS.map((heading) => (_jsx("th", { className: "border-b border-border px-2.5 py-2 text-left text-xs uppercase tracking-wide text-text-muted", children: heading }, heading))) }) }), _jsx("tbody", { children: list.map((key) => (_jsxs("tr", { children: [_jsx("td", { className: "break-all border-b border-border px-2.5 py-2 font-mono", children: key.kid }), _jsx("td", { className: "border-b border-border px-2.5 py-2", children: formatDateTime(key.createdAt) }), _jsx("td", { className: "border-b border-border px-2.5 py-2", children: ageText(key.createdAt, now) }), _jsx("td", { className: "border-b border-border px-2.5 py-2 tabular-nums", children: key.envelopes ?? "Not counted yet" }), _jsx("td", { className: "border-b border-border px-2.5 py-2", children: key.kid === activeKid ? (_jsx(Badge, { tone: "success", children: "Active" })) : isRunning(rotation) && key.kid === rotation.kid ? (_jsx(Badge, { children: "Waiting to be activated" })) : (NO_VALUE) })] }, key.kid))) })] }) })), _jsx("p", { className: "mt-2 text-xs text-text-muted", children: keys.countedAt ? `Values were last counted ${formatDateTime(keys.countedAt)}.` : "Values have not been counted yet." }), isRunning(rotation) && (_jsxs(Note, { children: ["A key rotation is in progress: ", PHASES[rotation.phase] ?? rotation.phase, ". Follow it on the", " ", _jsx("a", { href: "/admin/configuration-encryption", className: "underline", children: "Configuration Encryption" }), " ", "page."] })), rotation?.phase === "failed" && _jsxs(Note, { children: ["The last key rotation failed: ", rotation.lastError ?? "no reason was recorded."] }), unreadable > 0 && (_jsxs(Note, { role: "alert", children: [reencryption?.finishedAt ? `The re-encryption pass that finished ${formatDateTime(reencryption.finishedAt)}` : "The last re-encryption pass", " could not read", " ", unreadable === 1 ? "1 saved value" : `${unreadable} saved values`, " with the keys in this keyring. Restore the keyring they were saved with, or enter them again; only a later pass updates this, so a value entered again stays counted until then."] }))] }));
+}

package/dist/apps/shared/components/admin/diagnostics/SettingsTable.d.ts

@@ -4,6 +4,10 @@ import type { DiagnosticsSetting } from "./diagnosticsApi.js";
 export declare const SETTINGS_PAGE_SIZE = 100;
 /** What stands where the server withheld a value. Drawn here from `redacted`: the server never sends the value (or any text for it). */
 export declare const HIDDEN_VALUE = "\u2022\u2022\u2022\u2022 (hidden)";
+/** What stands where a secret of the integrations layer is saved: whether it is set is all that is shown of it. */
+export declare const SET_VALUE = "\u2022\u2022\u2022\u2022 (set)";
+/** What stands where a saved secret could not be decrypted, so it is not in use. */
+export declare const UNREADABLE_VALUE = "Set, but can't be read: enter it again";
 export interface SettingsTableProps {
     /** The section's heading, which also names its filter box and labels the section. */
     title: string;
@@ -12,9 +16,13 @@ export interface SettingsTableProps {
     /** Also the prefix of the heading's element id. */
     id: string;
     settings: DiagnosticsSetting[];
+    /** What a `redacted` value is: `hidden` (default) where the server withholds it, `set` where it is a saved secret and the setting says only that it is set. */
+    secrets?: "hidden" | "set";
+    /** What an empty list says. Defaults to "Nothing is set." */
+    emptyText?: string;
 }
 /**
  * A filterable, paged list of settings (name and value). A value the server withheld is shown as "•••• (hidden)", never as
  * anything it could have held. The filter matches names, and the values that are shown: a hidden value can't be searched for.
  */
-export default function SettingsTable({ title, description, id, settings }: SettingsTableProps): React.JSX.Element;
+export default function SettingsTable({ title, description, id, settings, secrets, emptyText }: SettingsTableProps): React.JSX.Element;

package/dist/apps/shared/components/admin/diagnostics/SettingsTable.js

@@ -10,12 +10,16 @@ import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton
 export const SETTINGS_PAGE_SIZE = 100;
 /** What stands where the server withheld a value. Drawn here from `redacted`: the server never sends the value (or any text for it). */
 export const HIDDEN_VALUE = "•••• (hidden)";
+/** What stands where a secret of the integrations layer is saved: whether it is set is all that is shown of it. */
+export const SET_VALUE = "•••• (set)";
+/** What stands where a saved secret could not be decrypted, so it is not in use. */
+export const UNREADABLE_VALUE = "Set, but can't be read: enter it again";
 const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /**
  * A filterable, paged list of settings (name and value). A value the server withheld is shown as "•••• (hidden)", never as
  * anything it could have held. The filter matches names, and the values that are shown: a hidden value can't be searched for.
  */
-export default function SettingsTable({ title, description, id, settings }) {
+export default function SettingsTable({ title, description, id, settings, secrets = "hidden", emptyText = "Nothing is set." }) {
     const [query, setQuery] = useState("");
     const [limit, setLimit] = useState(SETTINGS_PAGE_SIZE);
     const matching = useMemo(() => {
@@ -23,10 +27,13 @@ export default function SettingsTable({ title, description, id, settings }) {
         return settings.filter((item) => needle === "" || `${item.name} ${item.redacted ? "" : (item.value ?? "")}`.toLowerCase().includes(needle));
     }, [settings, query]);
     const shown = matching.slice(0, limit);
-    const hiddenCount = settings.filter((item) => item.redacted).length;
+    const unreadableCount = settings.filter((item) => item.unreadable).length;
+    const hiddenCount = settings.filter((item) => item.redacted && !item.unreadable).length;
+    const hiddenText = secrets === "set" ? `${hiddenCount} ${hiddenCount === 1 ? "secret" : "secrets"} set` : `${hiddenCount} with a hidden value`;
     return (_jsxs("section", { "aria-labelledby": `${id}-heading`, className: "rounded-md border border-border bg-surface p-4", children: [_jsx("h2", { id: `${id}-heading`, className: "text-base font-bold uppercase tracking-wide mb-1", children: title }), _jsx("p", { className: "mb-3 text-xs text-text-muted", children: description }), _jsx("div", { className: "mb-3", children: _jsx("input", { type: "search", "aria-label": `Filter ${title.toLowerCase()}`, className: INPUT_CLASS, placeholder: "Filter by name or value", value: query, onChange: (event) => {
                         setQuery(event.target.value);
                         setLimit(SETTINGS_PAGE_SIZE);
                     } }) }), _jsx("p", { role: "status", className: "mb-2 text-xs text-text-muted", children: (matching.length === settings.length ? `${settings.length} settings` : `${matching.length} of ${settings.length} settings match`) +
-                    (hiddenCount > 0 ? `, ${hiddenCount} with a hidden value` : "") }), matching.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: settings.length === 0 ? "Nothing is set." : "No settings match." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Value"].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: shown.map((item) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: [item.name, _jsx(CopyIconButton, { value: item.name, label: `Copy the name of ${item.name}` })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: item.redacted ? (_jsx("span", { className: "text-text-muted", children: HIDDEN_VALUE })) : (_jsxs(_Fragment, { children: [item.value, _jsx(CopyIconButton, { value: item.value ?? "", label: `Copy the value of ${item.name}` })] })) })] }, item.name))) })] }) })), shown.length < matching.length && (_jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLimit(limit + SETTINGS_PAGE_SIZE), children: "Show more" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Showing ", shown.length, " of ", matching.length] })] }))] }));
+                    (hiddenCount > 0 ? `, ${hiddenText}` : "") +
+                    (unreadableCount > 0 ? `, ${unreadableCount} that can't be read` : "") }), matching.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: settings.length === 0 ? emptyText : "No settings match." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Value"].map((heading) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: heading }, heading))) }) }), _jsx("tbody", { children: shown.map((item) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: [item.name, _jsx(CopyIconButton, { value: item.name, label: `Copy the name of ${item.name}` })] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border font-mono break-all", children: item.unreadable ? (_jsx("span", { className: "text-danger", children: UNREADABLE_VALUE })) : item.redacted ? (_jsx("span", { className: "text-text-muted", children: secrets === "set" ? SET_VALUE : HIDDEN_VALUE })) : (_jsxs(_Fragment, { children: [item.value, _jsx(CopyIconButton, { value: item.value ?? "", label: `Copy the value of ${item.name}` })] })) })] }, item.name))) })] }) })), shown.length < matching.length && (_jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setLimit(limit + SETTINGS_PAGE_SIZE), children: "Show more" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Showing ", shown.length, " of ", matching.length] })] }))] }));
 }

package/dist/apps/shared/components/admin/diagnostics/diagnosticsApi.d.ts

@@ -8,8 +8,11 @@
  * cluster's nodes or the kubelet's statistics. That is why a node here is only what the pods say of it, and why the
  * machine figures are those of the node running the server, read from inside its own container.
  */
-/** The components of a RapidMX install that run beside the server itself, in the order the server lists them. */
-export type DiagnosticsComponentName = "postfix" | "postfix-bridge" | "mongodb" | "postgresql" | "redis" | "coturn" | "rspamd" | "clamav";
+/**
+ * The components of a RapidMX install that run beside the server itself, in the order the server lists them. `dns-controller` (one pod) and
+ * `external-dns` (one pod per DNS provider config) are DNS publishing's and come after the eight others, only from a server that runs it.
+ */
+export type DiagnosticsComponentName = "postfix" | "postfix-bridge" | "mongodb" | "postgresql" | "redis" | "coturn" | "rspamd" | "clamav" | "dns-controller" | "external-dns";
 export interface DiagnosticsContainer {
     name: string;
     image: string;
@@ -55,7 +58,7 @@ export interface DiagnosticsVersions {
         version: string;
         direct: boolean;
     }[];
-    /** Always all eight, in the order of `DiagnosticsComponentName`. */
+    /** The eight others, in the order of `DiagnosticsComponentName`, and the two of DNS publishing when the server runs it. */
     components: DiagnosticsComponent[];
     kubernetes: {
         available: boolean;
@@ -70,11 +73,18 @@ export interface DiagnosticsSetting {
     name: string;
     value?: string;
     redacted: boolean;
+    /** A saved secret the server holds but could not decrypt (a key missing from its keyring), so it is not in use: set with `redacted`, and the administrator enters it again. */
+    unreadable?: boolean;
 }
 /** The server's environment variables and effective configuration, each sorted by name. */
 export interface DiagnosticsInformation {
     environment: DiagnosticsSetting[];
     configuration: DiagnosticsSetting[];
+    /**
+     * The integrations config layer as a source of its own: what is saved on the console's Integrations pages and applied without a restart, a secret
+     * redacted. Left out by a server that predates it (nothing is shown), an empty list when nothing is saved there.
+     */
+    integrations?: DiagnosticsSetting[];
 }
 /** A node that runs some of this install's pods, derived from the pods: nothing else about the node is readable. */
 export interface DiagnosticsNode {

package/dist/apps/shared/components/admin/integrations/DnsProviderForm.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { DnsProvider, DnsProviderInput, DnsProviderTypeInfo } from "../../../../../lib/admin/dnsProvidersApi.js";
+export interface DnsProviderFormProps {
+    /** The provider types, from `GET /system/dns-providers/types`: what the form is built from. */
+    types: DnsProviderTypeInfo[];
+    /** The config being edited; none to create one (then the type is chosen here; it never changes afterwards). */
+    provider?: DnsProvider;
+    submitLabel: string;
+    /** Saves what the form holds; a rejection is shown (the server's validation is the authority). */
+    onSave: (input: DnsProviderInput) => Promise<void>;
+}
+/**
+ * A DNS provider config's form, generated from its type's description: one field per option (text, a list one entry per line, a number, a switch or a
+ * choice), and the type's credentials, write-only - a saved one shows only as set, with Replace, and Remove where the type can do without it. Only what
+ * is typed into a credential is sent; the rest of the config is sent whole.
+ */
+export default function DnsProviderForm({ types, provider, submitLabel, onSave }: DnsProviderFormProps): React.JSX.Element;

package/dist/apps/shared/components/admin/integrations/DnsProviderForm.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { isUnreadableSecret } from "../../../../../lib/admin/integrationsApi.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import Alert from "../ActionAlert.js";
+import { actionErrorMessage } from "../elevation.js";
+import { Badge } from "./dnsProviderParts.js";
+import SecretField, { INPUT_CLASS } from "./SecretField.js";
+/** The entries of a list typed one per line (commas and spaces separate them too). */
+function listOf(text) {
+    return text.split(/[\s,]+/).filter((entry) => entry !== "");
+}
+/** An option's value as the form holds it: a switch, or text (a list one entry per line). */
+function toFormValue(option, value) {
+    if (option.kind === "boolean") {
+        return value === true;
+    }
+    return Array.isArray(value) ? value.join("\n") : value === undefined ? "" : String(value);
+}
+/** An option's value as the server takes it; `undefined` for one left empty, which the server fills with its default or refuses as required. */
+function fromFormValue(option, value) {
+    if (typeof value === "boolean") {
+        return value;
+    }
+    if (option.kind === "string-list") {
+        const list = listOf(value);
+        return list.length > 0 ? list : undefined;
+    }
+    const text = value.trim();
+    if (text === "") {
+        return undefined;
+    }
+    return option.kind === "integer" ? Number(text) : text;
+}
+/** The form's values of `spec`'s options: `provider`'s, else each option's default. */
+function initialOptions(spec, provider) {
+    return Object.fromEntries(spec.options.map((option) => [option.key, toFormValue(option, provider?.options[option.key] ?? option.default)]));
+}
+/**
+ * A DNS provider config's form, generated from its type's description: one field per option (text, a list one entry per line, a number, a switch or a
+ * choice), and the type's credentials, write-only - a saved one shows only as set, with Replace, and Remove where the type can do without it. Only what
+ * is typed into a credential is sent; the rest of the config is sent whole.
+ */
+export default function DnsProviderForm({ types, provider, submitLabel, onSave }) {
+    const [type, setType] = useState(provider?.type ?? types[0].type);
+    const spec = types.find((candidate) => candidate.type === type);
+    const [name, setName] = useState(provider?.name ?? "");
+    const [zones, setZones] = useState((provider?.zones ?? []).join("\n"));
+    const [options, setOptions] = useState(() => initialOptions(spec, provider));
+    // A new value typed (string), or `null` for a saved credential to remove; a field left alone has no entry.
+    const [credentials, setCredentials] = useState({});
+    const [enabled, setEnabled] = useState(provider?.enabled ?? true);
+    const [allowTakeover, setAllowTakeover] = useState(provider?.allowTakeover ?? false);
+    // Bumped by a save, so the credentials start over as saved.
+    const [savedCount, setSavedCount] = useState(0);
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    function changeType(next) {
+        setType(next);
+        setOptions(initialOptions(types.find((candidate) => candidate.type === next)));
+        setCredentials({});
+    }
+    function setCredential(key, value) {
+        setCredentials((current) => {
+            const next = { ...current };
+            if (value === undefined) {
+                delete next[key];
+            }
+            else {
+                next[key] = value;
+            }
+            return next;
+        });
+    }
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+            setError("A name is required.");
+            return;
+        }
+        const zoneList = listOf(zones);
+        if (zoneList.length === 0) {
+            setError("Enter at least one zone.");
+            return;
+        }
+        const values = {};
+        for (const option of spec.options) {
+            const value = fromFormValue(option, options[option.key]);
+            if (value !== undefined) {
+                values[option.key] = value;
+            }
+        }
+        const input = {
+            name: trimmedName,
+            ...(provider ? {} : { type }),
+            zones: zoneList,
+            options: values,
+            ...(Object.keys(credentials).length > 0 ? { credentials } : {}),
+            enabled,
+            allowTakeover,
+        };
+        setSaving(true);
+        try {
+            await onSave(input);
+            setCredentials({});
+            setSavedCount((count) => count + 1);
+            setSaved(true);
+        }
+        catch (err) {
+            setError(actionErrorMessage(err, "Could not save the DNS provider."));
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 max-w-xl", children: [error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "text-sm text-success font-medium", children: "Saved." }), !provider && (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsxs("span", { className: "font-semibold", children: ["Type", !spec.tested && _jsx(Badge, { children: "Not yet live-tested" })] }), _jsx("select", { "aria-label": "Type", className: INPUT_CLASS, value: type, onChange: (e) => changeType(e.target.value), children: types.map((candidate) => (_jsx("option", { value: candidate.type, children: candidate.label }, candidate.type))) })] })), spec.notes.length > 0 && (_jsx("ul", { className: "list-disc pl-5 text-xs text-text-muted", children: spec.notes.map((note) => (_jsx("li", { children: note }, note))) })), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Name" }), _jsx("input", { "aria-label": "Name", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Zones" }), _jsx("textarea", { "aria-label": "Zones", rows: 3, spellCheck: false, className: INPUT_CLASS, value: zones, onChange: (e) => setZones(e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "The zones this provider may publish into, one per line, such as example.com. A domain can be assigned to it only when it is one of them or under one." })] }), spec.options.map((option) => (_jsx(OptionField, { option: option, value: options[option.key], onChange: (value) => setOptions({ ...options, [option.key]: value }) }, `${type}-${option.key}`))), _jsxs("fieldset", { className: "flex flex-col gap-3", children: [_jsx("legend", { className: "text-sm font-semibold mb-1", children: "Credentials" }), _jsx("p", { className: "text-xs text-text-muted -mt-2", children: "Saved encrypted, and never shown again." }), spec.secretFields.map((field) => {
+                        const isSaved = !!provider?.credentials[field.key];
+                        const removing = credentials[field.key] === null;
+                        return (_jsxs("div", { className: "flex flex-col gap-1.5 text-sm", children: [_jsxs("span", { className: "font-semibold", children: [field.label, !field.required && _jsx("span", { className: "font-normal text-text-muted", children: " (optional)" })] }), removing ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { children: "Removed when you save." }), _jsx(Button, { type: "button", variant: "text", className: "text-xs", "aria-label": `Undo removing ${field.label}`, onClick: () => setCredential(field.key, undefined), children: "Undo" })] })) : (_jsx(SecretField, { id: `credential-${field.key}`, label: field.label, name: field.label, saved: isSaved ? "here" : "none", unreadable: isUnreadableSecret(provider?.credentials[field.key]), value: credentials[field.key] ?? undefined, onChange: (value) => setCredential(field.key, value), multiLine: field.multiLine })), isSaved && !field.required && !removing && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto self-start text-xs", "aria-label": `Remove ${field.label}`, onClick: () => setCredential(field.key, null), children: "Remove" })), _jsx("span", { className: "text-xs text-text-muted", children: field.description })] }, `${type}-${field.key}`));
+                    })] }, savedCount), _jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "mt-1", "aria-label": "Publish through this provider", checked: enabled, onChange: (e) => setEnabled(e.target.checked) }), _jsxs("span", { children: [_jsx("span", { className: "font-semibold block", children: "Publish through this provider" }), _jsx("span", { className: "text-xs text-text-muted", children: "Off, its external-dns instance is stopped; the records it published stay as they are." })] })] }), _jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "mt-1", "aria-label": "Allow taking over existing records", checked: allowTakeover, onChange: (e) => setAllowTakeover(e.target.checked) }), _jsxs("span", { children: [_jsx("span", { className: "font-semibold block", children: "Allow taking over existing records" }), _jsx("span", { className: "text-xs text-text-muted", children: "Lets this provider replace records that something else created at the names it publishes, such as an MX record added by hand: such records are taken over automatically a few minutes after they are found, for the domains and for this server\u2019s own host names. A domain\u2019s root TXT records (SPF) are never taken over this way, only through the root TXT opt-in on the domain. Records of another type in the way are never taken over: they are listed for you to delete at your DNS host. Without it, such records show as conflicts, with a Take over action on their domain and, for the host names, on this provider\u2019s page." })] })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: submitLabel }) })] }));
+}
+/** One option of the provider type, drawn by its kind. */
+function OptionField({ option, value, onChange }) {
+    const hint = _jsx("span", { className: "text-xs text-text-muted", children: option.description });
+    if (option.kind === "boolean") {
+        return (_jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "mt-1", "aria-label": option.label, checked: value, onChange: (e) => onChange(e.target.checked) }), _jsxs("span", { children: [_jsx("span", { className: "font-semibold block", children: option.label }), hint] })] }));
+    }
+    let control;
+    if (option.kind === "enum") {
+        control = (_jsxs("select", { "aria-label": option.label, className: INPUT_CLASS, value: value, onChange: (e) => onChange(e.target.value), children: [option.default === undefined && _jsx("option", { value: "", children: "Not set" }), option.values.map((choice) => (_jsx("option", { value: choice, children: choice }, choice)))] }));
+    }
+    else if (option.kind === "string-list") {
+        control = (_jsx("textarea", { "aria-label": option.label, rows: 3, spellCheck: false, className: `${INPUT_CLASS} font-mono`, value: value, onChange: (e) => onChange(e.target.value) }));
+    }
+    else {
+        control = (_jsx("input", { "aria-label": option.label, type: option.kind === "integer" ? "number" : "text", min: option.min, max: option.max, className: INPUT_CLASS, value: value, onChange: (e) => onChange(e.target.value) }));
+    }
+    return (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsxs("span", { className: "font-semibold", children: [option.label, !option.required && _jsx("span", { className: "font-normal text-text-muted", children: " (optional)" })] }), control, hint, option.kind === "string-list" && _jsx("span", { className: "text-xs text-text-muted", children: "One per line." })] }));
+}

package/dist/apps/shared/components/admin/integrations/DnsProviderHosts.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * The deployment's own host names (mail, auth, autodiscover, openpgpkey) that this config publishes, each with how it is published, and "Take over host
+ * names" for the ones another system created (a record this deployment doesn't own). A host whose records of another type stand in the way is never taken
+ * over: it lists them for the administrator to delete at their DNS host. Shown only when the config publishes a host, and not at all on a server without
+ * the route.
+ */
+export default function DnsProviderHosts({ uid }: {
+    uid: string;
+}): React.JSX.Element | null;

package/dist/apps/shared/components/admin/integrations/DnsProviderHosts.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { listDnsHostPublications, takeoverDnsHosts } from "../../../../../lib/admin/dnsProvidersApi.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import Modal from "../../../../../lib/components/overlays/Modal.js";
+import { ApiRequestError } from "../../../../../lib/util/api.js";
+import Alert from "../ActionAlert.js";
+import { actionErrorMessage } from "../elevation.js";
+import { TypeMismatchNotice } from "./dnsProviderParts.js";
+const MANUAL_REASONS = {
+    no_provider: "No DNS provider is assigned.",
+    kind_unsupported: "The DNS provider can't hold this kind of record.",
+    outside_zones: "This name is outside the zones of the DNS provider.",
+    apex_txt_unmanaged: "Shares the domain's root TXT records, which are managed only on the domain's opt-in.",
+    no_addresses: "The server has no public address to publish: set the public addresses, then it is published.",
+    no_target: "There is no mail host to point it at.",
+};
+const STATE_LABELS = {
+    published: "Published",
+    pending: "Pending",
+    conflict: "Conflict",
+    manual: "Manual",
+};
+/** A host record's name once per name: an address host has an A and an AAAA record at one name. */
+function uniqueNames(records) {
+    return [...new Set(records.map((record) => record.recordName))];
+}
+/**
+ * The deployment's own host names (mail, auth, autodiscover, openpgpkey) that this config publishes, each with how it is published, and "Take over host
+ * names" for the ones another system created (a record this deployment doesn't own). A host whose records of another type stand in the way is never taken
+ * over: it lists them for the administrator to delete at their DNS host. Shown only when the config publishes a host, and not at all on a server without
+ * the route.
+ */
+export default function DnsProviderHosts({ uid }) {
+    const [hosts, setHosts] = useState(null);
+    const [error, setError] = useState(null);
+    const [confirming, setConfirming] = useState(false);
+    const [taking, setTaking] = useState(false);
+    const [takeError, setTakeError] = useState(null);
+    const [queued, setQueued] = useState(false);
+    function load(isCurrent = () => true) {
+        listDnsHostPublications()
+            .then((loaded) => {
+            if (!isCurrent())
+                return;
+            setHosts(loaded.filter((host) => host.providerUid === uid));
+            setError(null);
+        })
+            .catch((err) => {
+            if (!isCurrent())
+                return;
+            if (err instanceof ApiRequestError && err.status === 404) {
+                setHosts([]);
+                return;
+            }
+            setError(actionErrorMessage(err, "Could not load the host names."));
+        });
+    }
+    useEffect(() => {
+        let current = true;
+        load(() => current);
+        return () => {
+            current = false;
+        };
+    }, [uid]);
+    async function handleTakeOver(names) {
+        setTaking(true);
+        setTakeError(null);
+        try {
+            await takeoverDnsHosts(uid, names);
+            setQueued(true);
+            setConfirming(false);
+        }
+        catch (err) {
+            setTakeError(actionErrorMessage(err, "Could not queue the takeover."));
+        }
+        finally {
+            setTaking(false);
+        }
+    }
+    if (error) {
+        return (_jsx("section", { className: "mt-8 max-w-3xl", children: _jsx(Alert, { children: error }) }));
+    }
+    if (!hosts || hosts.length === 0) {
+        return null;
+    }
+    const mismatched = new Set(uniqueNames(hosts.filter((host) => host.state === "conflict" && host.conflictReason === "type_mismatch")));
+    const notOwned = uniqueNames(hosts.filter((host) => host.state === "conflict" && host.conflictReason !== "type_mismatch")).filter((name) => !mismatched.has(name));
+    return (_jsxs("section", { className: "mt-8 max-w-3xl", children: [_jsx("h3", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Host names" }), _jsx("p", { className: "text-sm text-text-muted mb-3", children: "The names of this server itself that this provider publishes, such as the mail host. Records you already have at these names are shown as conflicts." }), _jsxs("table", { "aria-label": "Host names", className: "w-full text-sm border-collapse mb-3", children: [_jsx("thead", { children: _jsx("tr", { children: ["Name", "Record", "Published"].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: hosts.map((host) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border", children: _jsx("code", { className: "text-xs break-all", children: host.recordName }) }), _jsx("td", { className: "py-2 px-2.5 border-b border-border text-text-muted", children: host.recordKind }), _jsxs("td", { className: "py-2 px-2.5 border-b border-border", children: [_jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${host.state === "published"
+                                                ? "bg-success text-white"
+                                                : host.state === "conflict"
+                                                    ? "bg-danger-bg text-danger"
+                                                    : "bg-surface-alt text-text-muted"}`, children: STATE_LABELS[host.state] }), host.state === "manual" && host.manualReason && (_jsx("div", { className: "text-xs text-text-muted mt-1 max-w-xs", children: MANUAL_REASONS[host.manualReason] })), host.state === "conflict" && host.conflictReason === "type_mismatch" && _jsx(TypeMismatchNotice, { existing: host.existing }), host.state === "conflict" && host.conflictReason !== "type_mismatch" && (_jsx("div", { className: "text-xs mt-1 max-w-xs", children: "A record is there that this deployment doesn\u2019t own." }))] })] }, `${host.recordName} ${host.recordKind}`))) })] }), queued && _jsx("p", { className: "text-sm text-text-muted mb-3", children: "Takeover queued. The DNS controller overwrites the records shortly; refresh to see the result." }), _jsxs("div", { className: "flex gap-3", children: [notOwned.length > 0 && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: queued, onClick: () => setConfirming(true), children: "Take over host names" })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => {
+                            setQueued(false);
+                            load();
+                        }, children: "Refresh" })] }), _jsx(Modal, { open: confirming, onClose: () => setConfirming(false), title: "Take over host names", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsx("p", { children: "Taking over overwrites the records at these names with the values this server publishes. From then on RapidMX manages them, and what was there is lost." }), _jsx("ul", { className: "list-none flex flex-col gap-0.5", children: notOwned.map((name) => (_jsx("li", { children: _jsx("code", { className: "text-xs break-all", children: name }) }, name))) }), takeError && _jsx(Alert, { children: takeError }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: taking, onClick: () => setConfirming(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: taking, disabled: taking, onClick: () => handleTakeOver(notOwned), children: "Take over" })] })] }) })] }));
+}

package/dist/apps/shared/components/admin/integrations/DnsProviderOperations.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * "Test connection" and the config's latest operations (connection tests, takeovers, restores of a domain's root TXT records), which the DNS controller
+ * runs and reports on. A test is only queued here: its result arrives with the controller's next report, so the list can be refreshed.
+ */
+export default function DnsProviderOperations({ uid }: {
+    uid: string;
+}): React.JSX.Element;

package/dist/apps/shared/components/admin/integrations/DnsProviderOperations.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { listDnsProviderOperations, testDnsProvider } from "../../../../../lib/admin/dnsProvidersApi.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import Alert from "../ActionAlert.js";
+import { actionErrorMessage } from "../elevation.js";
+import { formatTime } from "./dnsProviderParts.js";
+const TYPE_LABELS = {
+    test: "Connection test",
+    takeover: "Take over",
+    restore: "Restore",
+};
+const STATE_LABELS = {
+    queued: "Queued",
+    running: "Running",
+    succeeded: "Succeeded",
+    failed: "Failed",
+};
+/**
+ * "Test connection" and the config's latest operations (connection tests, takeovers, restores of a domain's root TXT records), which the DNS controller
+ * runs and reports on. A test is only queued here: its result arrives with the controller's next report, so the list can be refreshed.
+ */
+export default function DnsProviderOperations({ uid }) {
+    const [operations, setOperations] = useState([]);
+    const [loaded, setLoaded] = useState(false);
+    const [error, setError] = useState(null);
+    const [testing, setTesting] = useState(false);
+    const [testError, setTestError] = useState(null);
+    const [queued, setQueued] = useState(false);
+    function load() {
+        listDnsProviderOperations(uid)
+            .then((loadedOperations) => {
+            setOperations(loadedOperations);
+            setLoaded(true);
+            setError(null);
+        })
+            .catch((err) => setError(actionErrorMessage(err, "Could not load the operations.")));
+    }
+    useEffect(load, [uid]);
+    async function handleTest() {
+        setTesting(true);
+        setTestError(null);
+        try {
+            const operation = await testDnsProvider(uid);
+            setOperations((current) => [operation, ...current]);
+            setQueued(true);
+        }
+        catch (err) {
+            setTestError(actionErrorMessage(err, "Could not queue the connection test."));
+        }
+        finally {
+            setTesting(false);
+        }
+    }
+    return (_jsxs("section", { className: "mt-8 max-w-3xl", children: [_jsx("h3", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Connection and operations" }), _jsx("p", { className: "text-sm text-text-muted mb-3", children: "Test connection has the DNS controller run external-dns once with the saved credentials, to check that they work and reach the zones." }), _jsxs("div", { className: "flex gap-3 mb-3", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: testing, disabled: testing, onClick: handleTest, children: "Test connection" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: load, children: "Refresh" })] }), testError && _jsx(Alert, { children: testError }), queued && (_jsx("p", { className: "text-sm text-text-muted mb-3", children: "Test queued. The DNS controller runs the test and reports the result here; refresh to see it." })), error && _jsx(Alert, { children: error }), operations.length > 0 ? (_jsxs("table", { "aria-label": "Recent operations", className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Operation", "State", "Result", "When"].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: operations.map((operation) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2 px-2.5 border-b border-border", children: TYPE_LABELS[operation.type] + (operation.domainUid ? ` (${operation.domainUid})` : operation.endpointSetId?.startsWith("hosts-") ? " (host names)" : "") }), _jsx("td", { className: "py-2 px-2.5 border-b border-border", children: STATE_LABELS[operation.state] }), _jsx("td", { className: "py-2 px-2.5 border-b border-border text-text-muted", children: operation.message }), _jsx("td", { className: "py-2 px-2.5 border-b border-border text-text-muted whitespace-nowrap", children: formatTime(operation.finishedAt ?? operation.startedAt ?? operation.dateCreated) })] }, operation.uid))) })] })) : loaded ? (_jsx("p", { className: "text-sm text-text-muted", children: "No operations yet." })) : (!error && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" }))] }));
+}

package/dist/apps/shared/components/admin/integrations/DnsResolverForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IntegrationSettings } from "../../../../../lib/admin/integrationsApi.js";
+/** The DNS resolver section: how this server looks up DNS records. */
+export default function DnsResolverForm({ settings, onChange }: {
+    settings: IntegrationSettings;
+    onChange: (settings: IntegrationSettings) => void;
+}): React.JSX.Element;

package/dist/apps/shared/components/admin/integrations/DnsResolverForm.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import IntegrationSectionForm from "./IntegrationSectionForm.js";
+import { INPUT_CLASS } from "./SecretField.js";
+const MODES = {
+    node: "The system resolver",
+    "doh-dnssec": "DNS over HTTPS, with DNSSEC validation",
+};
+const FIELDS = {
+    mode: { name: "resolver", describe: (mode) => MODES[mode] },
+    dohEndpoint: { name: "DoH endpoint", describe: (url) => url },
+};
+/** The DNS resolver section: how this server looks up DNS records. */
+export default function DnsResolverForm({ settings, onChange }) {
+    return (_jsx(IntegrationSectionForm, { section: "dnsResolver", title: "DNS resolver", description: "How this server looks up DNS records: for domain checks and verification, key discovery and mail delivery decisions.", consequence: "Every DNS check, domain verification and key discovery uses the new resolver as soon as it is saved, and answers already looked up are dropped.", fields: FIELDS, settings: settings, onChange: onChange, children: (form) => (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Resolver" }), _jsx("select", { "aria-label": "Resolver", className: INPUT_CLASS, value: form.value("mode"), onChange: (e) => form.set("mode", e.target.value), children: Object.entries(MODES).map(([mode, label]) => (_jsx("option", { value: mode, children: label }, mode))) })] }), form.footer("mode"), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "DoH endpoint" }), _jsx("input", { "aria-label": "DoH endpoint", type: "url", className: INPUT_CLASS, value: form.value("dohEndpoint"), onChange: (e) => form.set("dohEndpoint", e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "The DNS over HTTPS service queried, https:// only. Used with DNS over HTTPS." })] }), form.footer("dohEndpoint")] })) }));
+}

package/dist/apps/shared/components/admin/integrations/GiphyForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IntegrationSettings } from "../../../../../lib/admin/integrationsApi.js";
+/** The Giphy section: whether GIF search is offered, and the API key it uses. */
+export default function GiphyForm({ settings, onChange }: {
+    settings: IntegrationSettings;
+    onChange: (settings: IntegrationSettings) => void;
+}): React.JSX.Element;

package/dist/apps/shared/components/admin/integrations/GiphyForm.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import IntegrationSectionForm, { secretSectionField } from "./IntegrationSectionForm.js";
+import SecretField from "./SecretField.js";
+const FIELDS = {
+    enabled: { name: "GIF search", describe: (value) => (value ? "on" : "off") },
+    apiKey: secretSectionField("API key"),
+};
+/** The Giphy section: whether GIF search is offered, and the API key it uses. */
+export default function GiphyForm({ settings, onChange }) {
+    return (_jsx(IntegrationSectionForm, { section: "giphy", title: "Giphy", description: "GIF search in the message editor, through Giphy's API.", fields: FIELDS, settings: settings, onChange: onChange, children: (form) => (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex items-start gap-2 text-sm", children: [_jsx("input", { type: "checkbox", className: "mt-1", "aria-label": "Use Giphy for GIF search", checked: form.value("enabled"), onChange: (e) => form.set("enabled", e.target.checked) }), _jsxs("span", { children: [_jsx("span", { className: "font-semibold block", children: "Use Giphy for GIF search" }), _jsx("span", { className: "text-xs text-text-muted", children: "Off, the editor offers no GIF search and the key is not used." })] })] }), form.footer("enabled"), _jsxs("div", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "API key" }), _jsx(SecretField, { id: "giphy-api-key", label: "API key", name: "API key", saved: form.secret("apiKey"), unreadable: form.unreadable("apiKey"), value: form.value("apiKey"), onChange: (value) => form.set("apiKey", value) })] }), form.footer("apiKey")] })) }));
+}