@rapidmx/web-client 0.37.0 → 0.38.1

package/apps/shared/components/admin/settings/DomainDnsSetup.tsx

@@ -3,17 +3,22 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { DnsRecordCheck, Domain, getDnsSetup, getDomain, verifyDomain } from "../../../../../lib/admin/domainsApi.js";
+import { takeoverDnsRecords } from "../../../../../lib/admin/dnsProvidersApi.js";
+import { DnsManualReason, DnsRecordCheck, Domain, getDnsSetup, getDomain, verifyDomain } from "../../../../../lib/admin/domainsApi.js";
 import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
-import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
+import CopyableValue from "./CopyableValue.js";
+import Modal from "../../../../../lib/components/overlays/Modal.js";
 import { actionErrorMessage } from "../elevation.js";
+import { TypeMismatchNotice } from "../integrations/dnsProviderParts.js";
 
 const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
     ownership: "Ownership (TXT)",
     mx: "MX",
     spf: "SPF",
     dkim: "DKIM",
+    dkim_next: "DKIM (new key)",
+    dkim_previous: "DKIM (previous key)",
     dmarc: "DMARC",
     openpgpkey_cname: "OpenPGP keys (CNAME)",
     autodiscover_cname: "Autodiscover (CNAME)",
@@ -26,6 +31,8 @@ const RECORD_TYPE_NAMES: Record<DnsRecordCheck["type"], string> = {
     mx: "MX",
     spf: "SPF",
     dkim: "DKIM",
+    dkim_next: "new DKIM key",
+    dkim_previous: "previous DKIM key",
     dmarc: "DMARC",
     openpgpkey_cname: "OpenPGP keys CNAME",
     autodiscover_cname: "Autodiscover CNAME",
@@ -43,6 +50,14 @@ const RECORD_TYPE_HELP: Partial<Record<DnsRecordCheck["type"], string>> = {
         "Same purpose as the CNAME above, for clients that check DNS SRV instead - and, unlike the CNAME, needs no extra TLS certificate, since it points at a hostname already covered. Prefer this one when a second certificate is hard to obtain.",
 };
 
+/** Why a record is added by hand, shown under "Manual" in the Published column. */
+const MANUAL_REASONS: Record<DnsManualReason, string> = {
+    no_provider: "No DNS provider is assigned to this domain.",
+    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 you opt in to manage below.",
+};
+
 /** An MX record's recommended value is `"<priority> <mail server>"` - two separate fields in a DNS provider's form. */
 function splitMxValue(value: string): { priority: string; server: string } | null {
     const match = /^(\d+)\s+(\S+)$/.exec(value.trim());
@@ -55,20 +70,10 @@ function splitSrvValue(value: string): { priority: string; weight: string; port:
     return match ? { priority: match[1], weight: match[2], port: match[3], target: match[4] } : null;
 }
 
-/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a copy icon button beside it. */
-function CopyableValue({ value, copyLabel }: { value: string; copyLabel: string }) {
-    return (
-        <div className="flex items-start gap-2">
-            <code className="flex-1 min-w-0 text-xs break-all">{value}</code>
-            <CopyIconButton value={value} label={copyLabel} className="shrink-0" />
-        </div>
-    );
-}
-
 export interface DomainDnsSetupProps {
     uid: string;
-    /** Called with the domain every time it's (re)loaded - e.g. after "Verify now". */
-    onLoaded?: (domain: Domain) => void;
+    /** Called with the domain and its checklist every time they are (re)loaded - e.g. after "Verify now". */
+    onLoaded?: (domain: Domain, checks: DnsRecordCheck[]) => void;
 }
 
 /**
@@ -82,6 +87,11 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
     const [error, setError] = useState<string | null>(null);
     const [verifying, setVerifying] = useState(false);
     const [verifyError, setVerifyError] = useState<string | null>(null);
+    // The conflicting record the administrator is being asked to take over, the request in flight, why it failed, and the records whose takeover was queued.
+    const [takeOver, setTakeOver] = useState<DnsRecordCheck | null>(null);
+    const [takingOver, setTakingOver] = useState(false);
+    const [takeOverError, setTakeOverError] = useState<string | null>(null);
+    const [takeOverQueued, setTakeOverQueued] = useState<DnsRecordCheck["type"][]>([]);
 
     function reload(id: string) {
         setLoading(true);
@@ -90,7 +100,7 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
             .then(([d, checks]) => {
                 setDomain(d);
                 setDnsSetup(checks);
-                onLoaded?.(d);
+                onLoaded?.(d, checks);
             })
             .catch((err) => setError(actionErrorMessage(err, "Could not load this domain.")))
             .finally(() => setLoading(false));
@@ -111,7 +121,7 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
             const [d, checks] = await Promise.all([getDomain(domain!.uid), getDnsSetup(domain!.uid)]);
             setDomain(d);
             setDnsSetup(checks);
-            onLoaded?.(d);
+            onLoaded?.(d, checks);
         } catch (err) {
             setVerifyError(actionErrorMessage(err, "Could not verify this domain."));
         } finally {
@@ -119,6 +129,22 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
         }
     }
 
+    // The record is taken over through the provider the domain is assigned to (a conflict only exists with one). Only the DNS controller applies it, so
+    // the list shows the result some time later: "Check again" rather than a refresh that would still show the conflict.
+    async function handleTakeOver() {
+        setTakingOver(true);
+        setTakeOverError(null);
+        try {
+            await takeoverDnsRecords(domain!.dnsProviderUid!, domain!.uid, [takeOver!.type]);
+            setTakeOverQueued((queued) => [...queued, takeOver!.type]);
+            setTakeOver(null);
+        } catch (err) {
+            setTakeOverError(actionErrorMessage(err, "Could not queue the takeover."));
+        } finally {
+            setTakingOver(false);
+        }
+    }
+
     if (loading) {
         return <p className="text-sm text-text-muted">Loading&hellip;</p>;
     }
@@ -129,6 +155,9 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
     const ownership = dnsSetup.find((c) => c.type === "ownership");
     const ownershipValue = ownership?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`;
     const ownershipName = ownership?.recordName || domain.name;
+    // A server that doesn't publish says nothing about how a record gets published, so the column stays out.
+    const showPublished = dnsSetup.some((c) => c.publication);
+    const openpgpkey = dnsSetup.find((c) => c.type === "openpgpkey_cname");
 
     return (
         <div className="flex flex-col gap-5">
@@ -192,11 +221,38 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
             {dnsSetup.length > 0 && (
                 <div className="bg-surface border border-border rounded-md p-6">
                     <h2 className="text-sm font-bold uppercase tracking-wide mb-3">DNS setup checklist</h2>
+                    {openpgpkey?.configured && !openpgpkey.matches && (
+                        <div role="note" aria-label="OpenPGP key host warning" className="text-sm rounded-sm py-3 px-3.5 mb-3 bg-warning text-warning-contrast">
+                            {openpgpkey.recordName} doesn't resolve to this deployment yet. Until it does, other people's OpenPGP apps can't find your
+                            users' keys (Web Key Directory), and this server can't get a certificate for it.
+                            {openpgpkey.publication === "pending" && " It is being published automatically."}
+                        </div>
+                    )}
+                    {takeOverQueued.length > 0 && (
+                        <p className="text-sm mb-3">
+                            Takeover queued for the {takeOverQueued.map((type) => RECORD_TYPE_NAMES[type]).join(", ")} record. The DNS controller overwrites it
+                            shortly, and it shows as published here once it is live. If it stays in conflict, the result of the takeover is under Operations on{" "}
+                            <a href={`/admin/integrations/dns-providers/${encodeURIComponent(domain.dnsProviderUid!)}`} className="text-primary-dark hover:underline">
+                                the DNS provider's page
+                            </a>
+                            .{" "}
+                            <button
+                                type="button"
+                                className="font-semibold underline"
+                                onClick={() => {
+                                    setTakeOverQueued([]);
+                                    void reload(uid);
+                                }}
+                            >
+                                Check again
+                            </button>
+                        </p>
+                    )}
                     <div className="overflow-x-auto">
                         <table className="w-full text-sm border-collapse">
                             <thead>
                                 <tr>
-                                    {["Record", "Status", "Name / host", "Recommended value"].map((h) => (
+                                    {["Record", "Status", ...(showPublished ? ["Published"] : []), "Name / host", "Recommended value"].map((h) => (
                                         <th
                                             key={h}
                                             className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
@@ -215,6 +271,12 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                                             {RECORD_TYPE_HELP[check.type] && (
                                                 <div className="text-xs text-text-muted mt-1 max-w-xs">{RECORD_TYPE_HELP[check.type]}</div>
                                             )}
+                                            {check.legacyApex && (
+                                                <div className="text-xs text-text-muted mt-1 max-w-xs">
+                                                    Found at the domain's root (the old location). Publish it at <strong>{check.recordName}</strong>; the root
+                                                    value can then be removed.
+                                                </div>
+                                            )}
                                         </td>
                                         <td className="py-2.5 px-2.5 border-b border-border">
                                             {!check.configured ? (
@@ -229,6 +291,18 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                                                 </span>
                                             )}
                                         </td>
+                                        {showPublished && (
+                                            <td className="py-2.5 px-2.5 border-b border-border">
+                                                <PublishedCell
+                                                    check={check}
+                                                    queued={takeOverQueued.includes(check.type)}
+                                                    onTakeOver={() => {
+                                                        setTakeOverError(null);
+                                                        setTakeOver(check);
+                                                    }}
+                                                />
+                                            </td>
+                                        )}
                                         {/* A floor on the name column: beside a long DKIM key (which breaks anywhere) the table gave it a few characters, and a name wrapped one letter to a line. */}
                                         <td className="py-2.5 px-2.5 border-b border-border text-text-muted min-w-[10rem]">
                                             {check.recordName ? (
@@ -258,10 +332,93 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                     </p>
                 </div>
             )}
+
+            <Modal open={takeOver !== null} onClose={() => setTakeOver(null)} title="Take over this record">
+                {takeOver && (
+                    <>
+                        <p className="text-sm mb-3">
+                            Taking over overwrites the record at <code className="text-xs break-all">{takeOver.recordName}</code> with the value below. From then
+                            on RapidMX manages it, and whatever relied on the old value stops getting it.
+                        </p>
+                        <dl className="text-sm flex flex-col gap-1 mb-3">
+                            <dt className="text-text-muted">Existing value</dt>
+                            <dd>{takeOver.actualValue ? <code className="text-xs break-all">{takeOver.actualValue}</code> : "(none found)"}</dd>
+                            <dt className="text-text-muted mt-2">New value</dt>
+                            <dd>
+                                <code className="text-xs break-all">{takeOver.recommendedValue}</code>
+                            </dd>
+                        </dl>
+                        {takeOverError && <Alert>{takeOverError}</Alert>}
+                        <div className="flex gap-3 justify-end mt-5">
+                            <Button type="button" variant="secondary" className="!w-auto" disabled={takingOver} onClick={() => setTakeOver(null)}>
+                                Cancel
+                            </Button>
+                            <Button type="button" className="!w-auto" loading={takingOver} disabled={takingOver} onClick={handleTakeOver}>
+                                Take over
+                            </Button>
+                        </div>
+                    </>
+                )}
+            </Modal>
         </div>
     );
 }
 
+/** How a record is published, for the Published column: automatically (with its state; for a conflict also the value in the way and the takeover), or
+ * by hand, with the reason. */
+function PublishedCell({ check, queued, onTakeOver }: { check: DnsRecordCheck; queued: boolean; onTakeOver: () => void }) {
+    if (!check.publication) {
+        return <span className="text-xs text-text-muted">&mdash;</span>;
+    }
+    if (check.publication === "manual") {
+        return (
+            <>
+                <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">Manual</span>
+                {check.manualReason && <div className="text-xs text-text-muted mt-1 max-w-xs">{MANUAL_REASONS[check.manualReason]}</div>}
+            </>
+        );
+    }
+    const state = check.publication;
+    return (
+        <>
+            <span
+                className={`text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${
+                    state === "published" ? "bg-success text-white" : state === "conflict" ? "bg-danger-bg text-danger" : "bg-surface-alt text-text-muted"
+                }`}
+            >
+                Automatic: {state}
+            </span>
+            {state === "conflict" && check.conflictReason === "type_mismatch" && <TypeMismatchNotice existing={check.existing} />}
+            {state === "conflict" && check.conflictReason !== "type_mismatch" && (
+                <div className="text-xs mt-1 max-w-xs">
+                    {check.actualValue ? (
+                        <>
+                            Not published by RapidMX, and in the way: <code className="break-all">{check.actualValue}</code>
+                        </>
+                    ) : (
+                        "A record is there that this deployment doesn't own."
+                    )}
+                    {/* The root TXT set is taken over only through its own opt-in. */}
+                    {check.type !== "spf" && (
+                        <div className="mt-1.5">
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                className="!w-auto !py-1"
+                                aria-label={`Take over ${RECORD_TYPE_NAMES[check.type]}`}
+                                disabled={queued}
+                                onClick={onTakeOver}
+                            >
+                                {queued ? "Queued" : "Take over"}
+                            </Button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </>
+    );
+}
+
 /** The value cell of a checklist row: an MX value as its two form fields (priority and mail server), a SRV value as
  * its four form fields (priority, weight, port and target), anything else whole. */
 function DnsRecordValue({ check, value }: { check: DnsRecordCheck; value: string }) {

package/apps/shared/components/admin/setup/SetupWizard.tsx

@@ -343,6 +343,9 @@ function DomainStep({ domains, onCreated }: { domains: Domain[]; onCreated: (dom
     const [name, setName] = useState("");
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
+    // The installation adds the domains it was installed with before anyone signs in: they're shown as already added.
+    const seeded = domains.filter((domain) => domain.origin === "seed");
+    const added = domains.filter((domain) => domain.origin !== "seed");
 
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
@@ -364,12 +367,31 @@ function DomainStep({ domains, onCreated }: { domains: Domain[]; onCreated: (dom
 
     return (
         <div className="flex flex-col gap-5 max-w-3xl">
-            {domains.map((domain) => (
-                <div key={domain.uid} className="flex flex-col gap-3">
-                    <h3 className="text-base font-bold">{domain.name}</h3>
-                    <DomainDnsSetup uid={domain.uid} />
-                </div>
-            ))}
+            {seeded.length > 0 && (
+                <section aria-labelledby="setupSeededDomains" className="flex flex-col gap-5">
+                    <div className="flex flex-col gap-1">
+                        <h3 id="setupSeededDomains" className="text-sm font-bold uppercase tracking-wide">
+                            Added from your installation
+                        </h3>
+                        <p className="text-sm text-text-muted">Your installation already added these domains. Publish the DNS records for each one.</p>
+                    </div>
+                    {seeded.map((domain) => (
+                        <DomainPanel key={domain.uid} domain={domain} grouped />
+                    ))}
+                </section>
+            )}
+            {seeded.length > 0 && added.length > 0 ? (
+                <section aria-labelledby="setupAddedDomains" className="flex flex-col gap-5">
+                    <h3 id="setupAddedDomains" className="text-sm font-bold uppercase tracking-wide">
+                        Domains you added
+                    </h3>
+                    {added.map((domain) => (
+                        <DomainPanel key={domain.uid} domain={domain} grouped />
+                    ))}
+                </section>
+            ) : (
+                added.map((domain) => <DomainPanel key={domain.uid} domain={domain} />)
+            )}
             {error && <Alert>{error}</Alert>}
             <form onSubmit={handleSubmit} className={CARD_CLASS}>
                 <FormField label={domains.length === 0 ? "Domain name" : "Add another domain"} htmlFor="setupDomainName">
@@ -390,6 +412,17 @@ function DomainStep({ domains, onCreated }: { domains: Domain[]; onCreated: (dom
     );
 }
 
+// `grouped`: the panel sits under a region's own heading, so its domain heading is one level lower.
+function DomainPanel({ domain, grouped = false }: { domain: Domain; grouped?: boolean }) {
+    const Heading = grouped ? "h4" : "h3";
+    return (
+        <div className="flex flex-col gap-3">
+            <Heading className="text-base font-bold">{domain.name}</Heading>
+            <DomainDnsSetup uid={domain.uid} />
+        </div>
+    );
+}
+
 function MailboxesStep({ userUid, domain }: { userUid: string; domain?: string }) {
     const client = useApiClient();
     const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);

package/dist/apps/admin/configuration-encryption/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+/** The configuration keyring: the keys that encrypt the credentials saved in the console, and their rotation. */
+export default function ConfigurationEncryptionPage(props: Omit<AdminShellProps, "active">): React.JSX.Element;

package/dist/apps/admin/configuration-encryption/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AdminShell from "../../shared/components/admin/layout/AdminShell.js";
+import ConfigKeysManager from "../../shared/components/admin/configEncryption/ConfigKeysManager.js";
+/** The configuration keyring: the keys that encrypt the credentials saved in the console, and their rotation. */
+export default function ConfigurationEncryptionPage(props) {
+    return (_jsxs(AdminShell, { ...props, active: "configurationEncryption", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-3", children: "Configuration encryption" }), _jsx(ConfigKeysManager, {})] }));
+}

package/dist/apps/admin/domains/[uid].js

@@ -7,6 +7,9 @@ import { useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
 import { deleteDomain, updateDomain } from "../../../lib/admin/domainsApi.js";
 import AdminShell from "../../shared/components/admin/layout/AdminShell.js";
+import DomainApexTxt from "../../shared/components/admin/settings/DomainApexTxt.js";
+import DomainDkimRotation from "../../shared/components/admin/settings/DomainDkimRotation.js";
+import DomainDnsProvider from "../../shared/components/admin/settings/DomainDnsProvider.js";
 import DomainDnsSetup from "../../shared/components/admin/settings/DomainDnsSetup.js";
 import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
@@ -20,6 +23,8 @@ export default function DomainDetailPage(props) {
 function DomainDetailContent({ uid }) {
     const { navigate } = useRouter();
     const [domain, setDomain] = useState(null);
+    // The checklist the DNS setup panel loaded, which the DKIM rotation panel reads the rotation's records from.
+    const [checks, setChecks] = useState([]);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [deleting, setDeleting] = useState(false);
     const [deleteError, setDeleteError] = useState(null);
@@ -29,9 +34,10 @@ function DomainDetailContent({ uid }) {
     const [savingAlias, setSavingAlias] = useState(false);
     const [aliasError, setAliasError] = useState(null);
     const [aliasSaved, setAliasSaved] = useState(false);
-    // Bumped after a successful aliasOf save to force `DomainDnsSetup` (which owns its own `domain` state,
+    // Bumped after a successful save (the alias, the DNS provider, the root TXT records) to force `DomainDnsSetup` (which owns its own `domain` state,
     // fetched only on mount/uid change) to reload and reflect the new value in its own status panel.
     const [refreshCount, setRefreshCount] = useState(0);
+    const refresh = () => setRefreshCount((c) => c + 1);
     function closeDeleteModal() {
         setConfirmingDelete(false);
     }
@@ -48,7 +54,8 @@ function DomainDetailContent({ uid }) {
             setDeleting(false);
         }
     }
-    function handleLoaded(d) {
+    function handleLoaded(d, loadedChecks) {
+        setChecks(loadedChecks);
         setDomain(d);
         setAliasInput((current) => (current === null ? d?.aliasOf ?? "" : current));
     }
@@ -62,7 +69,7 @@ function DomainDetailContent({ uid }) {
             setDomain(updated);
             setAliasInput(updated.aliasOf ?? "");
             setAliasSaved(true);
-            setRefreshCount((c) => c + 1);
+            refresh();
         }
         catch (err) {
             setAliasError(actionErrorMessage(err, "Could not update this domain."));
@@ -71,7 +78,7 @@ function DomainDetailContent({ uid }) {
             setSavingAlias(false);
         }
     }
-    return (_jsxs("div", { className: "max-w-3xl flex flex-col gap-5", children: [domain && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("a", { href: "/admin/domains", className: "text-sm text-primary-dark hover:underline", children: "\u2190 All domains" }), _jsx("h1", { className: "text-xl font-bold tracking-tight mt-1", children: domain.name })] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0 !border-danger !text-danger hover:!border-danger hover:!text-danger", onClick: () => setConfirmingDelete(true), children: "Delete domain" })] })), _jsx(DomainDnsSetup, { uid: uid, onLoaded: handleLoaded }, refreshCount), domain && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "Alias" }), _jsx("p", { className: "text-sm text-text-muted mb-3", children: "Make this domain a pure alias of another one - it will still receive (and may send as) mail for the same addresses, but have no mailboxes of its own. Leave blank for a regular domain." }), aliasError && _jsx(Alert, { children: aliasError }), _jsx(FormField, { label: "Alias of", htmlFor: "aliasOf", children: _jsx("input", { id: "aliasOf", type: "text", className: INPUT_CLASS, 
+    return (_jsxs("div", { className: "max-w-3xl flex flex-col gap-5", children: [domain && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("a", { href: "/admin/domains", className: "text-sm text-primary-dark hover:underline", children: "\u2190 All domains" }), _jsx("h1", { className: "text-xl font-bold tracking-tight mt-1", children: domain.name })] }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0 !border-danger !text-danger hover:!border-danger hover:!text-danger", onClick: () => setConfirmingDelete(true), children: "Delete domain" })] })), _jsx(DomainDnsSetup, { uid: uid, onLoaded: handleLoaded }, refreshCount), domain && _jsx(DomainDnsProvider, { domain: domain, onChanged: refresh }), domain && _jsx(DomainDkimRotation, { domain: domain, checks: checks, onChanged: refresh }), domain?.dnsProviderUid && _jsx(DomainApexTxt, { domain: domain, onChanged: refresh }), domain && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "Alias" }), _jsx("p", { className: "text-sm text-text-muted mb-3", children: "Make this domain a pure alias of another one - it will still receive (and may send as) mail for the same addresses, but have no mailboxes of its own. Leave blank for a regular domain." }), aliasError && _jsx(Alert, { children: aliasError }), _jsx(FormField, { label: "Alias of", htmlFor: "aliasOf", children: _jsx("input", { id: "aliasOf", type: "text", className: INPUT_CLASS, 
                             // Set in the same update as `domain` (see `handleLoaded()`), which is what this section waits for.
                             value: aliasInput, onChange: (e) => {
                                 setAliasInput(e.target.value);

package/dist/apps/admin/integrations/dns-providers/[uid].d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+export default function DnsProviderPage(props: Omit<AdminShellProps, "active"> & {
+    params: {
+        uid: string;
+    };
+}): React.JSX.Element;

package/dist/apps/admin/integrations/dns-providers/[uid].js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
+import { deleteDnsProvider, getDnsProvider, listDnsProviderTypes, updateDnsProvider, } from "../../../../lib/admin/dnsProvidersApi.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import Modal from "../../../../lib/components/overlays/Modal.js";
+import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
+import DnsProviderForm from "../../../shared/components/admin/integrations/DnsProviderForm.js";
+import DnsProviderHosts from "../../../shared/components/admin/integrations/DnsProviderHosts.js";
+import DnsProviderOperations from "../../../shared/components/admin/integrations/DnsProviderOperations.js";
+import IntegrationsLayout from "../../../shared/components/admin/integrations/IntegrationsLayout.js";
+import { Badge, dnsProviderStatus, domainsText, formatTime } from "../../../shared/components/admin/integrations/dnsProviderParts.js";
+import Alert from "../../../shared/components/admin/ActionAlert.js";
+import { actionErrorMessage } from "../../../shared/components/admin/elevation.js";
+const LIST_HREF = "/admin/integrations/dns-providers";
+/**
+ * What of a config an administrator can change, as the server shows it: the controller's status reports move the row's version without touching any of it.
+ * A credential's `unreadable` flag is the server's own finding (a keyring that changed), not something an administrator set, so it is left out.
+ */
+function configOf(provider) {
+    const { name, zones, options, credentials, enabled, allowTakeover } = provider;
+    const shown = {};
+    for (const [key, mask] of Object.entries(credentials)) {
+        shown[key] = { ...mask, unreadable: undefined };
+    }
+    return JSON.stringify({ name, zones, options, credentials: shown, enabled, allowTakeover });
+}
+export default function DnsProviderPage(props) {
+    return (_jsx(AdminShell, { ...props, active: "integrations", children: _jsx(IntegrationsLayout, { active: "dnsProviders", children: _jsx(DnsProviderDetail, { uid: props.params.uid }) }) }));
+}
+function DnsProviderDetail({ uid }) {
+    const { navigate } = useRouter();
+    const [provider, setProvider] = useState(null);
+    // The version a save is made against: the one shown, or a newer one found after a refusal (the form isn't reset to show it).
+    const version = useRef(0);
+    // The config an administrator last saw, which a refusal compares the latest one against: the one loaded or saved, then the one a refusal reported.
+    const seen = useRef("");
+    const [types, setTypes] = useState([]);
+    const [loadError, setLoadError] = useState(null);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState(null);
+    useEffect(() => {
+        Promise.all([getDnsProvider(uid), listDnsProviderTypes()])
+            .then(([loaded, loadedTypes]) => {
+            setProvider(loaded);
+            version.current = loaded.version;
+            seen.current = configOf(loaded);
+            setTypes(loadedTypes);
+        })
+            .catch((err) => setLoadError(actionErrorMessage(err, "Could not load the DNS provider.")));
+    }, [uid]);
+    if (loadError) {
+        return _jsx(Alert, { children: loadError });
+    }
+    if (!provider) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    const spec = types.find((candidate) => candidate.type === provider.type);
+    const status = dnsProviderStatus(provider);
+    function accept(saved) {
+        version.current = saved.version;
+        seen.current = configOf(saved);
+        setProvider(saved);
+    }
+    // Made against the version shown, so a change someone else saved meanwhile is refused (409) rather than overwritten. The DNS controller moves the
+    // version too (every status report that changes, and at least every few minutes), so a refusal reads the config again: when nothing an administrator
+    // sets differs, only the status moved and the save is made again against the new version; otherwise the entries stay in the form, the new version is
+    // kept, and saving once more replaces the other change (a refusal after that compares against what the first one reported, so the change is told once).
+    async function handleSave(input) {
+        const sent = version.current;
+        try {
+            accept(await updateDnsProvider(uid, { ...input, version: sent }));
+        }
+        catch (err) {
+            if (!(err instanceof ApiRequestError) || err.status !== 409) {
+                throw err;
+            }
+            let latest;
+            try {
+                latest = await getDnsProvider(uid);
+            }
+            catch {
+                throw err;
+            }
+            if (latest.version === sent) {
+                // Refused for another reason than a newer version.
+                throw err;
+            }
+            version.current = latest.version;
+            const reported = configOf(latest);
+            if (reported !== seen.current) {
+                seen.current = reported;
+                throw new ApiRequestError("This DNS provider was changed by someone else. Your entries are kept; save again to replace their change, or reload the page to see it.", 409);
+            }
+            accept(await updateDnsProvider(uid, { ...input, version: latest.version }));
+        }
+    }
+    async function handleDelete() {
+        setDeleting(true);
+        setDeleteError(null);
+        try {
+            await deleteDnsProvider(provider.uid);
+            void navigate(LIST_HREF);
+        }
+        catch (err) {
+            setDeleteError(actionErrorMessage(err, "Could not delete the DNS provider."));
+            setDeleting(false);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("a", { href: LIST_HREF, className: "text-sm text-primary-dark hover:underline", children: "\u2190 DNS providers" }), _jsxs("h2", { className: "text-lg font-bold uppercase tracking-wide mt-2 mb-1", children: [provider.name, provider.origin === "installer" && _jsx(Badge, { children: "Added by the installer" })] }), _jsxs("div", { className: "flex items-center text-sm text-text-muted mb-4", children: [_jsxs("p", { children: ["Type: ", spec?.label ?? provider.type] }), spec && !spec.tested && _jsx(Badge, { children: "Not yet live-tested" })] }), _jsxs("div", { className: "border border-border rounded-sm bg-surface p-4 mb-6 max-w-xl text-sm flex flex-col gap-1", children: [_jsxs("p", { className: "font-semibold", children: ["Status: ", status.label] }), status.error && _jsx("p", { className: "text-danger", children: status.error }), _jsx("p", { className: "text-text-muted", children: provider.domainCount === 0 ? "No domains are published through it yet." : `Publishing ${domainsText(provider.domainCount)}.` }), provider.status?.lastSyncAt && _jsxs("p", { className: "text-text-muted", children: ["Last synchronized ", formatTime(provider.status.lastSyncAt), "."] })] }), spec ? (_jsx(DnsProviderForm, { types: types, provider: provider, submitLabel: "Save", onSave: handleSave })) : (_jsx("p", { className: "text-sm text-text-muted max-w-xl", children: "This console doesn\u2019t know this type, so its settings can\u2019t be edited here. A newer admin console can edit it." })), _jsx(DnsProviderHosts, { uid: provider.uid }), _jsx(DnsProviderOperations, { uid: provider.uid }), _jsx("div", { className: "mt-8", children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingDelete(true), children: "Delete DNS provider" }) }), _jsx(Modal, { open: confirmingDelete, onClose: () => setConfirmingDelete(false), title: "Delete DNS provider?", children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [deleteError && _jsx(Alert, { children: deleteError }), provider.domainCount > 0 && (_jsxs("p", { children: ["The server refuses while domains are assigned to it (", domainsText(provider.domainCount), "): assign them to another provider, or to manual publishing, first."] })), _jsx("p", { children: "The records it publishes for this server\u2019s own host names are removed from your DNS host, then its external-dns instance and its credentials are deleted." }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingDelete(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: deleting, disabled: deleting, onClick: handleDelete, children: "Delete" })] })] }) })] }));
+}

package/dist/apps/admin/integrations/dns-providers/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+export default function DnsProvidersPage(props: Omit<AdminShellProps, "active">): React.JSX.Element;