@rapidmx/web-client 0.37.1 → 0.38.1

package/apps/admin/configuration-encryption/index.tsx

@@ -0,0 +1,17 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import AdminShell, { AdminShellProps } 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: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="configurationEncryption">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-3">Configuration encryption</h1>
+            <ConfigKeysManager />
+        </AdminShell>
+    );
+}

package/apps/admin/domains/[uid].tsx

@@ -4,8 +4,11 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { deleteDomain, Domain, updateDomain } from "../../../lib/admin/domainsApi.js";
+import { deleteDomain, DnsRecordCheck, Domain, updateDomain } from "../../../lib/admin/domainsApi.js";
 import AdminShell, { AdminShellProps } 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";
@@ -27,6 +30,8 @@ export default function DomainDetailPage(props: Omit<AdminShellProps, "active">
 function DomainDetailContent({ uid }: { uid: string }) {
     const { navigate } = useRouter();
     const [domain, setDomain] = useState<Domain | null>(null);
+    // The checklist the DNS setup panel loaded, which the DKIM rotation panel reads the rotation's records from.
+    const [checks, setChecks] = useState<DnsRecordCheck[]>([]);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const [deleting, setDeleting] = useState(false);
     const [deleteError, setDeleteError] = useState<string | null>(null);
@@ -36,9 +41,10 @@ function DomainDetailContent({ uid }: { uid: string }) {
     const [savingAlias, setSavingAlias] = useState(false);
     const [aliasError, setAliasError] = useState<string | null>(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);
@@ -57,7 +63,8 @@ function DomainDetailContent({ uid }: { uid: string }) {
         }
     }
 
-    function handleLoaded(d: Domain) {
+    function handleLoaded(d: Domain, loadedChecks: DnsRecordCheck[]) {
+        setChecks(loadedChecks);
         setDomain(d);
         setAliasInput((current) => (current === null ? d?.aliasOf ?? "" : current));
     }
@@ -72,7 +79,7 @@ function DomainDetailContent({ uid }: { uid: string }) {
             setDomain(updated);
             setAliasInput(updated.aliasOf ?? "");
             setAliasSaved(true);
-            setRefreshCount((c) => c + 1);
+            refresh();
         } catch (err) {
             setAliasError(actionErrorMessage(err, "Could not update this domain."));
         } finally {
@@ -103,6 +110,12 @@ function DomainDetailContent({ uid }: { uid: string }) {
 
             <DomainDnsSetup key={refreshCount} uid={uid} onLoaded={handleLoaded} />
 
+            {domain && <DomainDnsProvider domain={domain} onChanged={refresh} />}
+
+            {domain && <DomainDkimRotation domain={domain} checks={checks} onChanged={refresh} />}
+
+            {domain?.dnsProviderUid && <DomainApexTxt domain={domain} onChanged={refresh} />}
+
             {domain && (
                 <div className="bg-surface border border-border rounded-md p-6">
                     <h2 className="text-sm font-bold uppercase tracking-wide mb-3">Alias</h2>

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

@@ -0,0 +1,205 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useRef, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
+import {
+    deleteDnsProvider,
+    DnsProvider,
+    DnsProviderInput,
+    DnsProviderTypeInfo,
+    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, { AdminShellProps } 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: DnsProvider): string {
+    const { name, zones, options, credentials, enabled, allowTakeover } = provider;
+    const shown: Record<string, unknown> = {};
+    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: Omit<AdminShellProps, "active"> & { params: { uid: string } }) {
+    return (
+        <AdminShell {...props} active="integrations">
+            <IntegrationsLayout active="dnsProviders">
+                <DnsProviderDetail uid={props.params.uid} />
+            </IntegrationsLayout>
+        </AdminShell>
+    );
+}
+
+function DnsProviderDetail({ uid }: { uid: string }) {
+    const { navigate } = useRouter();
+    const [provider, setProvider] = useState<DnsProvider | null>(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<DnsProviderTypeInfo[]>([]);
+    const [loadError, setLoadError] = useState<string | null>(null);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState<string | null>(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 <Alert>{loadError}</Alert>;
+    }
+    if (!provider) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    const spec: DnsProviderTypeInfo | undefined = types.find((candidate) => candidate.type === provider.type);
+    const status = dnsProviderStatus(provider);
+
+    function accept(saved: DnsProvider) {
+        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: DnsProviderInput) {
+        const sent: number = version.current;
+        try {
+            accept(await updateDnsProvider(uid, { ...input, version: sent }));
+        } catch (err) {
+            if (!(err instanceof ApiRequestError) || err.status !== 409) {
+                throw err;
+            }
+            let latest: DnsProvider;
+            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: string = 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 (
+        <>
+            <a href={LIST_HREF} className="text-sm text-primary-dark hover:underline">
+                &larr; DNS providers
+            </a>
+            <h2 className="text-lg font-bold uppercase tracking-wide mt-2 mb-1">
+                {provider.name}
+                {provider.origin === "installer" && <Badge>Added by the installer</Badge>}
+            </h2>
+            <div className="flex items-center text-sm text-text-muted mb-4">
+                <p>Type: {spec?.label ?? provider.type}</p>
+                {spec && !spec.tested && <Badge>Not yet live-tested</Badge>}
+            </div>
+
+            <div className="border border-border rounded-sm bg-surface p-4 mb-6 max-w-xl text-sm flex flex-col gap-1">
+                <p className="font-semibold">Status: {status.label}</p>
+                {status.error && <p className="text-danger">{status.error}</p>}
+                <p className="text-text-muted">
+                    {provider.domainCount === 0 ? "No domains are published through it yet." : `Publishing ${domainsText(provider.domainCount)}.`}
+                </p>
+                {provider.status?.lastSyncAt && <p className="text-text-muted">Last synchronized {formatTime(provider.status.lastSyncAt)}.</p>}
+            </div>
+
+            {spec ? (
+                <DnsProviderForm types={types} provider={provider} submitLabel="Save" onSave={handleSave} />
+            ) : (
+                <p className="text-sm text-text-muted max-w-xl">
+                    This console doesn&rsquo;t know this type, so its settings can&rsquo;t be edited here. A newer admin console can edit it.
+                </p>
+            )}
+
+            <DnsProviderHosts uid={provider.uid} />
+
+            <DnsProviderOperations uid={provider.uid} />
+
+            <div className="mt-8">
+                <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingDelete(true)}>
+                    Delete DNS provider
+                </Button>
+            </div>
+
+            <Modal open={confirmingDelete} onClose={() => setConfirmingDelete(false)} title="Delete DNS provider?">
+                <div className="flex flex-col gap-3 text-sm">
+                    {deleteError && <Alert>{deleteError}</Alert>}
+                    {provider.domainCount > 0 && (
+                        <p>
+                            The server refuses while domains are assigned to it ({domainsText(provider.domainCount)}): assign them to another provider, or to
+                            manual publishing, first.
+                        </p>
+                    )}
+                    <p>
+                        The records it publishes for this server&rsquo;s own host names are removed from your DNS host, then its external-dns instance and its
+                        credentials are deleted.
+                    </p>
+                    <div className="flex gap-3 justify-end">
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingDelete(false)}>
+                            Cancel
+                        </Button>
+                        <Button type="button" className="!w-auto" loading={deleting} disabled={deleting} onClick={handleDelete}>
+                            Delete
+                        </Button>
+                    </div>
+                </div>
+            </Modal>
+        </>
+    );
+}

package/apps/admin/integrations/dns-providers/index.tsx

@@ -0,0 +1,164 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import {
+    DnsControllerState,
+    DnsProvider,
+    DnsProviderTypeInfo,
+    getDnsControllerState,
+    listDnsProviders,
+    listDnsProviderTypes,
+} from "../../../../lib/admin/dnsProvidersApi.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import IntegrationsLayout from "../../../shared/components/admin/integrations/IntegrationsLayout.js";
+import { Badge, dnsProviderStatus, formatTime, isStaleReport } from "../../../shared/components/admin/integrations/dnsProviderParts.js";
+import Alert from "../../../shared/components/admin/ActionAlert.js";
+import { actionErrorMessage } from "../../../shared/components/admin/elevation.js";
+
+export default function DnsProvidersPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="integrations">
+            <IntegrationsLayout active="dnsProviders">
+                <DnsProvidersList />
+            </IntegrationsLayout>
+        </AdminShell>
+    );
+}
+
+/** What the DNS controller last said about itself, in a sentence: whether it works with this server, and when it last reported (a warning when that
+ * was too long ago: it may be down). */
+function ControllerNotice({ state }: { state: DnsControllerState }) {
+    const { handshake, lastReport } = state;
+    if (handshake && !handshake.compatible) {
+        return (
+            <Alert>
+                {`DNS controller ${handshake.controllerVersion} can't work with this server (${handshake.reason}). Nothing is published until matching versions are installed.`}
+            </Alert>
+        );
+    }
+    // The last time it was heard from at all: a handshake after a report (a restart of either side) shows it alive.
+    const heard: string | undefined = [lastReport?.at, handshake?.at].reduce<string | undefined>(
+        (latest, at) => (at && (!latest || Date.parse(at) > Date.parse(latest)) ? at : latest),
+        undefined
+    );
+    if (heard && isStaleReport(heard)) {
+        return (
+            <Alert>
+                {`The DNS controller hasn't been heard from since ${formatTime(heard)}; it may be down. Nothing is published or removed until it is back.`}
+            </Alert>
+        );
+    }
+    let text: string;
+    if (lastReport) {
+        text = `DNS controller ${lastReport.controllerVersion}, last report ${formatTime(lastReport.at)}.`;
+    } else if (handshake) {
+        text = `DNS controller ${handshake.controllerVersion} has connected and not reported yet.`;
+    } else {
+        text = "The DNS controller hasn’t contacted this server yet, so nothing is published automatically.";
+    }
+    return <p className="text-sm text-text-muted mb-4">{text}</p>;
+}
+
+function DnsProvidersList() {
+    const [providers, setProviders] = useState<DnsProvider[] | null>(null);
+    const [types, setTypes] = useState<DnsProviderTypeInfo[]>([]);
+    const [controller, setController] = useState<DnsControllerState | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        Promise.all([listDnsProviders(), listDnsProviderTypes()])
+            .then(([loaded, loadedTypes]) => {
+                setProviders(loaded);
+                setTypes(loadedTypes);
+            })
+            .catch((err) =>
+                setError(
+                    // A server from before DNS publishing has no such route.
+                    err instanceof ApiRequestError && err.status === 404
+                        ? "This server doesn't offer DNS providers yet. Upgrade it to manage them here."
+                        : actionErrorMessage(err, "Could not load the DNS providers.")
+                )
+            );
+        // The list stands without it: a server that can't say what the controller reported shows nothing about it.
+        getDnsControllerState()
+            .then(setController)
+            .catch(() => setController(null));
+    }, []);
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-3">
+                <h2 className="text-lg font-bold uppercase tracking-wide">DNS providers</h2>
+                <a href="/admin/integrations/dns-providers/new">
+                    <Button type="button" className="!w-auto">
+                        + New DNS provider
+                    </Button>
+                </a>
+            </div>
+            <p className="text-sm text-text-muted mb-4 max-w-2xl">
+                The DNS hosting accounts this server publishes DNS records through: each domain&rsquo;s, and the server&rsquo;s own host names. A domain is
+                assigned to one on its own page.
+            </p>
+            {controller && <ControllerNotice state={controller} />}
+
+            {error && <Alert>{error}</Alert>}
+            {!providers ? (
+                !error && <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : providers.length === 0 ? (
+                <p className="text-sm text-text-muted">
+                    No DNS providers yet. Until one is added, every domain&rsquo;s records are published by hand, from the checklist on its page.
+                </p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Name", "Type", "Zones", "Status", "Domains", ""].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">
+                                        {h}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {providers.map((provider) => {
+                                const spec: DnsProviderTypeInfo | undefined = types.find((candidate) => candidate.type === provider.type);
+                                const status = dnsProviderStatus(provider);
+                                return (
+                                    <tr key={provider.uid}>
+                                        <td className="py-2.5 px-2.5 border-b border-border">
+                                            {provider.name}
+                                            {provider.origin === "installer" && <Badge>Added by the installer</Badge>}
+                                        </td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">
+                                            {spec?.label ?? provider.type}
+                                            {spec && !spec.tested && <Badge>Not yet live-tested</Badge>}
+                                        </td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">{provider.zones.join(", ")}</td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">
+                                            {status.label}
+                                            {status.error && <span className="block text-xs text-danger">{status.error}</span>}
+                                        </td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">{provider.domainCount}</td>
+                                        <td className="py-2.5 px-2.5 border-b border-border text-right">
+                                            <a
+                                                href={`/admin/integrations/dns-providers/${encodeURIComponent(provider.uid)}`}
+                                                className="text-primary-dark hover:underline font-medium"
+                                            >
+                                                View
+                                            </a>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+        </>
+    );
+}

package/apps/admin/integrations/dns-providers/new/index.tsx

@@ -0,0 +1,55 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { useRouter } from "@rapidrest/react/client";
+import { createDnsProvider, DnsProviderInput, DnsProviderTypeInfo, listDnsProviderTypes } from "../../../../../lib/admin/dnsProvidersApi.js";
+import AdminShell, { AdminShellProps } from "../../../../shared/components/admin/layout/AdminShell.js";
+import DnsProviderForm from "../../../../shared/components/admin/integrations/DnsProviderForm.js";
+import IntegrationsLayout from "../../../../shared/components/admin/integrations/IntegrationsLayout.js";
+import Alert from "../../../../shared/components/admin/ActionAlert.js";
+import { actionErrorMessage } from "../../../../shared/components/admin/elevation.js";
+
+export default function NewDnsProviderPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="integrations">
+            <IntegrationsLayout active="dnsProviders">
+                <NewDnsProviderContent />
+            </IntegrationsLayout>
+        </AdminShell>
+    );
+}
+
+function NewDnsProviderContent() {
+    const { navigate } = useRouter();
+    const [types, setTypes] = useState<DnsProviderTypeInfo[] | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        listDnsProviderTypes()
+            .then(setTypes)
+            .catch((err) => setError(actionErrorMessage(err, "Could not load the DNS provider types.")));
+    }, []);
+
+    async function handleSave(input: DnsProviderInput) {
+        const created = await createDnsProvider(input);
+        void navigate(`/admin/integrations/dns-providers/${encodeURIComponent(created.uid)}`);
+    }
+
+    return (
+        <>
+            <h2 className="text-lg font-bold uppercase tracking-wide mb-1">New DNS provider</h2>
+            <p className="text-sm text-text-muted mb-5 max-w-2xl">
+                A DNS hosting account this server can publish records through. Prefer credentials scoped to these zones alone.
+            </p>
+            {error ? (
+                <Alert>{error}</Alert>
+            ) : !types ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : (
+                <DnsProviderForm types={types} submitLabel="Create DNS provider" onSave={handleSave} />
+            )}
+        </>
+    );
+}

package/apps/admin/integrations/dns-resolver/index.tsx

@@ -0,0 +1,16 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import DnsResolverForm from "../../../shared/components/admin/integrations/DnsResolverForm.js";
+import IntegrationSectionPage from "../../../shared/components/admin/integrations/IntegrationSectionPage.js";
+
+export default function DnsResolverPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <IntegrationSectionPage {...props} area="dnsResolver">
+            {(settings, onChange) => <DnsResolverForm settings={settings} onChange={onChange} />}
+        </IntegrationSectionPage>
+    );
+}

package/apps/admin/integrations/giphy/index.tsx

@@ -0,0 +1,16 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import GiphyForm from "../../../shared/components/admin/integrations/GiphyForm.js";
+import IntegrationSectionPage from "../../../shared/components/admin/integrations/IntegrationSectionPage.js";
+
+export default function GiphyPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <IntegrationSectionPage {...props} area="giphy">
+            {(settings, onChange) => <GiphyForm settings={settings} onChange={onChange} />}
+        </IntegrationSectionPage>
+    );
+}

package/apps/admin/integrations/index.tsx

@@ -0,0 +1,31 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import IntegrationsLayout, { INTEGRATION_AREAS } from "../../shared/components/admin/integrations/IntegrationsLayout.js";
+
+/** The Integrations overview: each third-party service this deployment can use, with what it is for. */
+export default function IntegrationsPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="integrations">
+            <IntegrationsLayout>
+                <p className="text-sm text-text-muted mb-5 max-w-2xl">
+                    The services this server works with. A setting saved here takes effect at once and overrides the deployment&rsquo;s configuration until it
+                    is reset.
+                </p>
+                <ul aria-label="Integration areas" className="grid gap-3 sm:grid-cols-2">
+                    {INTEGRATION_AREAS.map((area) => (
+                        <li key={area.id}>
+                            <a href={area.href} className="block h-full border border-border rounded-sm bg-surface p-4 hover:border-primary">
+                                <span className="block font-semibold text-primary-dark">{area.label}</span>
+                                <span className="block text-sm text-text-muted mt-1">{area.description}</span>
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </IntegrationsLayout>
+        </AdminShell>
+    );
+}

package/apps/admin/integrations/plugin-registry/index.tsx

@@ -0,0 +1,16 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import PluginRegistryForm from "../../../shared/components/admin/integrations/PluginRegistryForm.js";
+import IntegrationSectionPage from "../../../shared/components/admin/integrations/IntegrationSectionPage.js";
+
+export default function PluginRegistryPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <IntegrationSectionPage {...props} area="pluginRegistry">
+            {(settings, onChange) => <PluginRegistryForm settings={settings} onChange={onChange} />}
+        </IntegrationSectionPage>
+    );
+}

package/apps/admin/integrations/signing-ca/index.tsx

@@ -0,0 +1,16 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import SigningCaForm from "../../../shared/components/admin/integrations/SigningCaForm.js";
+import IntegrationSectionPage from "../../../shared/components/admin/integrations/IntegrationSectionPage.js";
+
+export default function SigningCaPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <IntegrationSectionPage {...props} area="signingCa">
+            {(settings, onChange) => <SigningCaForm settings={settings} onChange={onChange} />}
+        </IntegrationSectionPage>
+    );
+}

package/apps/admin/integrations/stun/index.tsx

@@ -0,0 +1,16 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import StunForm from "../../../shared/components/admin/integrations/StunForm.js";
+import IntegrationSectionPage from "../../../shared/components/admin/integrations/IntegrationSectionPage.js";
+
+export default function StunPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <IntegrationSectionPage {...props} area="stun">
+            {(settings, onChange) => <StunForm settings={settings} onChange={onChange} />}
+        </IntegrationSectionPage>
+    );
+}