@rapidmx/web-client 0.37.1 → 0.39.0

package/apps/shared/components/admin/integrations/PluginRegistryForm.tsx

@@ -0,0 +1,230 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useRef } from "react";
+import {
+    IntegrationPluginNamespace,
+    IntegrationSettings,
+    IntegrationSource,
+    isSecretMask,
+    isUnreadableSecret,
+    SecretMask,
+} from "../../../../../lib/admin/integrationsApi.js";
+import Button from "../../../../../lib/components/buttons/Button.js";
+import IntegrationSectionForm, { secretSectionField, SectionField, SectionForm } from "./IntegrationSectionForm.js";
+import SecretField, { INPUT_CLASS } from "./SecretField.js";
+
+/** One namespace in the form. Its token is write-only: `saved` says whether one is saved and where, `token` is a new one typed. */
+interface NamespaceDraft {
+    /** Stable for the row's life, so its fields keep their state when another row is removed. */
+    id: string;
+    name: string;
+    registry: string;
+    /** The scope its saved token is saved under (as loaded): the server keeps a token by scope, so a renamed namespace has none. */
+    savedName?: string;
+    saved: "none" | "here" | "deployment";
+    /** The saved token is one the server can't decrypt. */
+    unreadable?: boolean;
+    token?: string;
+}
+
+/** `name` as the server takes a scope (restapi `normalizePluginNamespaces()`): trimmed, with its `@`. */
+function scopeOf(name: string): string {
+    const scope: string = name.trim();
+    return scope.startsWith("@") ? scope : `@${scope}`;
+}
+
+/** Where `draft`'s saved token is saved: none once the namespace is renamed, since the server keeps a token only under the scope it was saved for. */
+function savedToken(draft: NamespaceDraft): NamespaceDraft["saved"] {
+    return draft.saved !== "none" && draft.savedName !== undefined && scopeOf(draft.name) === scopeOf(draft.savedName) ? draft.saved : "none";
+}
+
+/** `drafts` as the server takes them: a token typed is sent, a saved one as the mask (kept) when `keep` says so, none left out. */
+function namespacesOf(drafts: NamespaceDraft[], keep: (saved: NamespaceDraft["saved"]) => boolean): IntegrationPluginNamespace[] {
+    return drafts.map((draft) => {
+        const registry: string = draft.registry.trim();
+        const token: string | SecretMask | undefined = draft.token ?? (keep(savedToken(draft)) ? { secret: true } : undefined);
+        return { name: draft.name.trim(), ...(registry ? { registry } : {}), ...(token ? { token } : {}) };
+    });
+}
+
+/** Whether two registry URLs are the same registry, credentials in them aside (restapi `sameRegistryUrl()`): a token goes only to its own registry. */
+function sameRegistryUrl(a: string, b: string): boolean {
+    const href = (value: string): string | undefined => {
+        try {
+            const url: URL = new URL(value.trim());
+            url.username = "";
+            url.password = "";
+            return url.href;
+        } catch {
+            return undefined;
+        }
+    };
+    const left: string | undefined = href(a);
+    return left !== undefined && left === href(b);
+}
+
+const FIELDS: Record<string, SectionField> = {
+    url: { name: "registry URL", describe: (url: string) => url },
+    token: secretSectionField("registry token"),
+    namespaces: {
+        name: "plugin namespaces",
+        describe: (namespaces: IntegrationPluginNamespace[]) => namespaces.map((namespace) => namespace.name).join(", ") || "none",
+        toForm: (namespaces: IntegrationPluginNamespace[], source: IntegrationSource): NamespaceDraft[] =>
+            namespaces.map((namespace, index) => ({
+                id: `ns-${index}`,
+                name: namespace.name,
+                registry: namespace.registry ?? "",
+                savedName: namespace.name,
+                saved: !isSecretMask(namespace.token) ? "none" : source === "admin" ? "here" : "deployment",
+                unreadable: source === "admin" && isUnreadableSecret(namespace.token),
+            })),
+        // Compared as the server shows the list: a saved token as the mask, wherever it is saved.
+        toWire: (drafts: NamespaceDraft[]) => namespacesOf(drafts, (saved) => saved !== "none"),
+        // Only a token saved here can be kept; the deployment's stay with the deployment's list.
+        toSend: (drafts: NamespaceDraft[]) => namespacesOf(drafts, (saved) => saved === "here"),
+        // A token saved here shows as the same mask as the deployment's but isn't it: a list keeping one is saved, never reset (which deletes it).
+        canBeDeployment: (drafts: NamespaceDraft[]) => drafts.every((draft) => draft.token !== undefined || savedToken(draft) !== "here"),
+    },
+};
+
+/** The plugin namespaces: each a scope, optionally its own registry, and a write-only token. */
+function NamespacesEditor({ form }: { form: SectionForm }) {
+    const nextId = useRef(0);
+    const drafts: NamespaceDraft[] = form.value("namespaces");
+    const change = (next: NamespaceDraft[]) => form.set("namespaces", next);
+    const update = (id: string, patch: Partial<NamespaceDraft>) => change(drafts.map((draft) => (draft.id === id ? { ...draft, ...patch } : draft)));
+
+    return (
+        <div className="flex flex-col gap-2 text-sm">
+            <span className="font-semibold">Plugin namespaces</span>
+            <span className="text-xs text-text-muted">The npm scopes the plugin catalog searches. Plugins in them may be installed.</span>
+            {drafts.length === 0 && <p className="text-xs text-text-muted">No namespaces: the plugin catalog searches none.</p>}
+            {drafts.map((draft, index) => {
+                const n = index + 1;
+                return (
+                    <fieldset key={draft.id} className="border border-border rounded-sm p-3 flex flex-col gap-2">
+                        <legend className="sr-only">Namespace {n}</legend>
+                        <input
+                            aria-label={`Scope of namespace ${n}`}
+                            className={INPUT_CLASS}
+                            placeholder="@acme"
+                            value={draft.name}
+                            onChange={(e) => update(draft.id, { name: e.target.value })}
+                        />
+                        <input
+                            aria-label={`Registry of namespace ${n}`}
+                            type="url"
+                            className={INPUT_CLASS}
+                            placeholder="Its own registry, if not the one above (https://...)"
+                            value={draft.registry}
+                            onChange={(e) => update(draft.id, { registry: e.target.value })}
+                        />
+                        <SecretField
+                            id={`namespace-token-${draft.id}`}
+                            label={`Token of namespace ${n}`}
+                            name={`token of namespace ${n}`}
+                            saved={savedToken(draft)}
+                            unreadable={draft.unreadable && savedToken(draft) === "here"}
+                            value={draft.token}
+                            onChange={(token) => update(draft.id, { token })}
+                        />
+                        {draft.saved !== "none" && savedToken(draft) === "none" && (
+                            <span className="text-xs text-text-muted">
+                                The token saved for {draft.savedName} doesn&rsquo;t follow a new scope: enter it again, or leave it empty for none.
+                            </span>
+                        )}
+                        <Button
+                            type="button"
+                            variant="text"
+                            className="!w-auto self-start text-xs"
+                            aria-label={`Remove namespace ${n}`}
+                            onClick={() => change(drafts.filter((other) => other.id !== draft.id))}
+                        >
+                            Remove
+                        </Button>
+                    </fieldset>
+                );
+            })}
+            <Button
+                type="button"
+                variant="secondary"
+                className="!w-auto self-start"
+                onClick={() => change([...drafts, { id: `new-${nextId.current++}`, name: "", registry: "", saved: "none" }])}
+            >
+                Add namespace
+            </Button>
+        </div>
+    );
+}
+
+/** The plugin registry section: where plugins are found and installed from, its token, and the namespaces searched. */
+export default function PluginRegistryForm({ settings, onChange }: { settings: IntegrationSettings; onChange: (settings: IntegrationSettings) => void }) {
+    const view = settings.pluginRegistry;
+    // The deployment's registry token, and its namespaces' tokens for its registry, are only ever sent to its registry (restapi
+    // `buildIntegrationsConfigLayer()`): with another URL in the form, saved or about to be, none of them is used.
+    const deploymentRegistryTokens: boolean =
+        isSecretMask(view.defaults.token) || view.defaults.namespaces.some((namespace) => !namespace.registry && isSecretMask(namespace.token));
+    /** Whether the form's registry gets none of those tokens and none of its own is set or typed. */
+    const noTokenUsed = (form: SectionForm): boolean =>
+        deploymentRegistryTokens &&
+        form.secret("token") !== "here" &&
+        form.value("token") === undefined &&
+        !sameRegistryUrl(form.value("url"), view.defaults.url);
+    const deploymentTokens: boolean = view.source.namespaces === "deployment" && view.values.namespaces.some((namespace) => isSecretMask(namespace.token));
+    return (
+        <IntegrationSectionForm
+            section="pluginRegistry"
+            title="Plugin registry"
+            description="The npm registry plugins are found and installed from."
+            consequence="A change affects the next plugin install or update only; installed plugins are not touched."
+            fields={FIELDS}
+            settings={settings}
+            onChange={onChange}
+        >
+            {(form) => (
+                <>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Registry URL</span>
+                        <input
+                            aria-label="Registry URL"
+                            type="url"
+                            className={INPUT_CLASS}
+                            value={form.value("url")}
+                            onChange={(e) => form.set("url", e.target.value)}
+                        />
+                    </label>
+                    {form.footer("url")}
+                    <div className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Registry token</span>
+                        <SecretField
+                            id="plugin-registry-token"
+                            label="Registry token"
+                            name="registry token"
+                            saved={form.secret("token")}
+                            unreadable={form.unreadable("token")}
+                            value={form.value("token")}
+                            onChange={(value) => form.set("token", value)}
+                        />
+                        {noTokenUsed(form) && (
+                            <span className="text-xs text-text-muted">
+                                The deployment&rsquo;s tokens for its registry are only sent to the deployment&rsquo;s registry, so none is used with this one
+                                unless it is set here.
+                            </span>
+                        )}
+                    </div>
+                    {form.footer("token")}
+                    <NamespacesEditor form={form} />
+                    {deploymentTokens && (
+                        <p className="text-xs text-text-muted">
+                            These are the deployment&rsquo;s namespaces. A changed list saved here replaces them, and the tokens the deployment sets for them
+                            aren&rsquo;t copied: enter them again.
+                        </p>
+                    )}
+                    {form.footer("namespaces")}
+                </>
+            )}
+        </IntegrationSectionForm>
+    );
+}

package/apps/shared/components/admin/integrations/SecretField.tsx

@@ -0,0 +1,91 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useState } from "react";
+import Button from "../../../../../lib/components/buttons/Button.js";
+
+export 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";
+
+export interface SecretFieldProps {
+    id: string;
+    /** The input's label. */
+    label: string;
+    /** How the buttons name the field ("Replace API key"). */
+    name: string;
+    /** What is saved now: nothing, a value saved here, or the deployment's. */
+    saved: "none" | "here" | "deployment";
+    /** A new value typed, `undefined` for none: what saving sends. */
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    /** A file's content rather than a token: a text area. */
+    multiLine?: boolean;
+    /** The saved value is set but the server can't decrypt it (its key is gone from the keyring): it must be entered again. */
+    unreadable?: boolean;
+}
+
+/**
+ * A write-only credential. The server never sends a saved value back, so a saved one is shown only as "Set" (or "Set by this deployment") with a
+ * Replace button; typing a value is what replaces it, and an empty field sends nothing. What is typed is never shown (a password field), and is not
+ * offered for the browser to remember. One the server can't decrypt is "Set, but can't be read: enter it again": it is still there, but only a new value
+ * helps.
+ */
+export default function SecretField({ id, label, name, saved, value, onChange, multiLine = false, unreadable = false }: SecretFieldProps) {
+    const [replacing, setReplacing] = useState(false);
+
+    if (saved !== "none" && !replacing) {
+        return (
+            <div className="flex items-center gap-3 text-sm">
+                {unreadable ? (
+                    <span className="font-medium text-danger">Set, but can't be read: enter it again</span>
+                ) : (
+                    <span className="font-medium">{saved === "here" ? "Set" : "Set by this deployment"}</span>
+                )}
+                <Button type="button" variant="text" className="text-xs" aria-label={`Replace ${name}`} onClick={() => setReplacing(true)}>
+                    Replace
+                </Button>
+            </div>
+        );
+    }
+    const change = (text: string) => onChange(text === "" ? undefined : text);
+    return (
+        <div className="flex flex-col gap-1">
+            {multiLine ? (
+                <textarea
+                    id={id}
+                    aria-label={label}
+                    rows={6}
+                    spellCheck={false}
+                    autoComplete="off"
+                    className={`${INPUT_CLASS} font-mono`}
+                    value={value ?? ""}
+                    onChange={(e) => change(e.target.value)}
+                />
+            ) : (
+                <input
+                    id={id}
+                    aria-label={label}
+                    type="password"
+                    autoComplete="new-password"
+                    className={INPUT_CLASS}
+                    value={value ?? ""}
+                    onChange={(e) => change(e.target.value)}
+                />
+            )}
+            {saved !== "none" && (
+                <Button
+                    type="button"
+                    variant="text"
+                    className="!w-auto self-start text-xs"
+                    aria-label={`Keep the saved ${name}`}
+                    onClick={() => {
+                        setReplacing(false);
+                        onChange(undefined);
+                    }}
+                >
+                    Keep the saved value
+                </Button>
+            )}
+        </div>
+    );
+}

package/apps/shared/components/admin/integrations/SigningCaForm.tsx

@@ -0,0 +1,95 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { IntegrationSettings, SigningCaBackend } from "../../../../../lib/admin/integrationsApi.js";
+import IntegrationSectionForm, { SectionField } from "./IntegrationSectionForm.js";
+import { INPUT_CLASS } from "./SecretField.js";
+
+const BACKENDS: Record<SigningCaBackend, string> = {
+    rfc8823: "Automatically, from a public CA (RFC 8823)",
+    manual: "Manually, by an administrator",
+    none: "Not offered",
+};
+
+/** Text, "none" when unset. */
+const describeText = (value: string | null): string => value ?? "none";
+
+const FIELDS: Record<string, SectionField> = {
+    backend: { name: "certificate issuing", describe: (backend: SigningCaBackend) => BACKENDS[backend] },
+    directoryUrl: { name: "ACME directory URL", describe: describeText },
+    contactEmail: {
+        name: "contact email",
+        describe: describeText,
+        toForm: (value: string | null) => value ?? "",
+        toWire: (text: string) => text.trim() || null,
+    },
+};
+
+/** The S/MIME signing CA section: how people get the certificates that sign their mail. */
+export default function SigningCaForm({ settings, onChange }: { settings: IntegrationSettings; onChange: (settings: IntegrationSettings) => void }) {
+    const deploymentContact: string | null = settings.signingCa.defaults.contactEmail;
+    return (
+        <IntegrationSectionForm
+            section="signingCa"
+            title="S/MIME signing CA"
+            description="How a signing certificate is issued when someone asks for one in their encryption settings."
+            consequence="A change affects new enrollments only; certificates already being issued finish with the CA they started with."
+            fields={FIELDS}
+            settings={settings}
+            onChange={onChange}
+        >
+            {(form) => (
+                <>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">How signing certificates are issued</span>
+                        <select
+                            aria-label="How signing certificates are issued"
+                            className={INPUT_CLASS}
+                            value={form.value("backend")}
+                            onChange={(e) => form.set("backend", e.target.value)}
+                        >
+                            {Object.entries(BACKENDS).map(([backend, label]) => (
+                                <option key={backend} value={backend}>
+                                    {label}
+                                </option>
+                            ))}
+                        </select>
+                    </label>
+                    {form.footer("backend")}
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">ACME directory URL</span>
+                        <input
+                            aria-label="ACME directory URL"
+                            type="url"
+                            className={INPUT_CLASS}
+                            value={form.value("directoryUrl")}
+                            onChange={(e) => form.set("directoryUrl", e.target.value)}
+                        />
+                        <span className="text-xs text-text-muted">
+                            The CA's RFC 8823 ACME directory, https:// only. Used when certificates are issued automatically.
+                        </span>
+                    </label>
+                    {form.footer("directoryUrl")}
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Contact email</span>
+                        <input
+                            aria-label="Contact email"
+                            type="email"
+                            className={INPUT_CLASS}
+                            value={form.value("contactEmail")}
+                            onChange={(e) => form.set("contactEmail", e.target.value)}
+                        />
+                        <span className="text-xs text-text-muted">
+                            Where the CA sends notices about this server's account.
+                            {/* An address saved here can't be cleared to none: `null` is the deployment's value, and the server takes no empty one. */}
+                            {deploymentContact && ` Left empty, the deployment's address (${deploymentContact}) is used.`}
+                        </span>
+                    </label>
+                    {form.footer("contactEmail")}
+                </>
+            )}
+        </IntegrationSectionForm>
+    );
+}

package/apps/shared/components/admin/integrations/StunForm.tsx

@@ -0,0 +1,63 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { IntegrationSettings } from "../../../../../lib/admin/integrationsApi.js";
+import IntegrationSectionForm, { SectionField } from "./IntegrationSectionForm.js";
+import { INPUT_CLASS } from "./SecretField.js";
+
+/** The lines of `text` that hold something, trimmed. */
+export function lines(text: string): string[] {
+    return text
+        .split("\n")
+        .map((line) => line.trim())
+        .filter((line) => line !== "");
+}
+
+const FIELDS: Record<string, SectionField> = {
+    urls: {
+        name: "STUN servers",
+        describe: (urls: string[] | null) => (urls ? urls.join(", ") : "the meet plugin's built-in list"),
+        toForm: (urls: string[] | null) => (urls ?? []).join("\n"),
+        // An emptied box is no list (the server refuses an empty one): the deployment's value.
+        toWire: (text: string) => {
+            const urls: string[] = lines(text);
+            return urls.length > 0 ? urls : null;
+        },
+    },
+};
+
+/** The STUN section: the servers video meetings use to find a way between participants' networks. */
+export default function StunForm({ settings, onChange }: { settings: IntegrationSettings; onChange: (settings: IntegrationSettings) => void }) {
+    return (
+        <IntegrationSectionForm
+            section="stun"
+            title="STUN servers"
+            description={<>The STUN servers video meetings hand to participants&rsquo; browsers. TURN servers stay in the Meet plugin&rsquo;s settings.</>}
+            consequence="Meetings started after saving use the new list."
+            fields={FIELDS}
+            settings={settings}
+            onChange={onChange}
+        >
+            {(form) => (
+                <>
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">STUN servers</span>
+                        <textarea
+                            aria-label="STUN servers"
+                            rows={4}
+                            spellCheck={false}
+                            className={`${INPUT_CLASS} font-mono`}
+                            placeholder="stun:stun.example.com:3478"
+                            value={form.value("urls")}
+                            onChange={(e) => form.set("urls", e.target.value)}
+                        />
+                        <span className="text-xs text-text-muted">One per line, 1 to 10 of them, each a stun: or stuns: address.</span>
+                    </label>
+                    {form.footer("urls")}
+                </>
+            )}
+        </IntegrationSectionForm>
+    );
+}

package/apps/shared/components/admin/integrations/dnsProviderParts.tsx

@@ -0,0 +1,72 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode } from "react";
+import type { DnsProvider } from "../../../../../lib/admin/dnsProvidersApi.js";
+import type { DnsExistingRecord } from "../../../../../lib/admin/domainsApi.js";
+
+/** A small label beside a name ("Not yet live-tested", "Added by the installer"). */
+export function Badge({ children }: { children: ReactNode }) {
+    return <span className="ml-2 text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">{children}</span>;
+}
+
+/** How long without a report from the DNS controller before it is shown as possibly down: it reports every minute by default
+ * (`DNS_CONTROLLER_STATUS_INTERVAL_SECONDS`), so this is ten missed reports, well past a pod restart or a clock off by a few minutes. */
+export const CONTROLLER_SILENT_MS = 10 * 60 * 1000;
+
+/** Whether a report made at `iso` is older than `CONTROLLER_SILENT_MS`: what it says may no longer hold. */
+export function isStaleReport(iso: string, now: number = Date.now()): boolean {
+    return now - new Date(iso).getTime() > CONTROLLER_SILENT_MS;
+}
+
+/** What the console says of a provider config's external-dns instance: Disabled (the admin's switch), Unknown when the DNS controller last reported
+ * on it too long ago (it may be down: nothing it said still holds), Error with the last error the controller reported, Running (a ready pod), or Not
+ * ready (none yet, including a config the controller hasn't reported on). */
+export function dnsProviderStatus(
+    provider: DnsProvider,
+    now: number = Date.now()
+): { label: "Disabled" | "Unknown" | "Error" | "Running" | "Not ready"; error?: string } {
+    if (!provider.enabled) {
+        return { label: "Disabled" };
+    }
+    if (provider.status?.reportedAt && isStaleReport(provider.status.reportedAt, now)) {
+        return {
+            label: "Unknown",
+            error: `The DNS controller hasn't reported on it since ${formatTime(provider.status.reportedAt)}; it may be down.`,
+        };
+    }
+    if (provider.status?.lastError) {
+        return { label: "Error", error: provider.status.lastError };
+    }
+    return { label: (provider.status?.readyReplicas ?? 0) > 0 ? "Running" : "Not ready" };
+}
+
+/** `iso` as the browser's local date and time, nothing when unset. */
+export function formatTime(iso: string | undefined): string {
+    return iso ? new Date(iso).toLocaleString() : "";
+}
+
+/** "1 domain", "2 domains". */
+export function domainsText(count: number): string {
+    return count === 1 ? "1 domain" : `${count} domains`;
+}
+
+/** What a record in `type_mismatch` conflict says: records of another type stand where this one would be published, RapidMX never deletes or takes them over,
+ * and the administrator deletes them at their DNS host. Lists them (type and value) when the server names them. */
+export function TypeMismatchNotice({ existing }: { existing?: DnsExistingRecord[] }) {
+    return (
+        <div className="text-xs mt-1 max-w-xs">
+            Records of another type are in the way. RapidMX never deletes them; delete them at your DNS host and this record is published.
+            {existing && existing.length > 0 && (
+                <ul className="mt-1 list-none flex flex-col gap-0.5">
+                    {existing.map((record) => (
+                        <li key={`${record.type} ${record.value}`}>
+                            <code className="break-all">{`${record.type} ${record.value}`}</code>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}

package/apps/shared/components/admin/layout/AdminShell.tsx

@@ -6,6 +6,7 @@ import "../../../styles/app.css";
 import React, { PropsWithChildren, ReactNode, useEffect, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
 import {
+    HiOutlineArrowPathRoundedSquare,
     HiOutlineClipboardDocumentList,
     HiOutlineClock,
     HiOutlineCpuChip,
@@ -14,6 +15,7 @@ import {
     HiOutlineGlobeAlt,
     HiOutlineInboxStack,
     HiOutlineKey,
+    HiOutlineLink,
     HiOutlineLockClosed,
     HiOutlinePaintBrush,
     HiOutlinePuzzlePiece,
@@ -69,7 +71,9 @@ export type AdminSection =
     | "plugins"
     | "diagnostics"
     | "branding"
-    | "signingCertificates";
+    | "signingCertificates"
+    | "integrations"
+    | "configurationEncryption";
 
 /** A core `AdminSection`, or a plugin's `adminNav` item id (see `PluginNav`). */
 export type AdminShellActive = AdminSection | (string & {});
@@ -150,6 +154,13 @@ const NAV_ITEMS: NavItem[] = [
         label: "Signing Certificates",
         icon: HiOutlineDocumentCheck,
     },
+    { id: "integrations", href: "/admin/integrations", label: "Integrations", icon: HiOutlineLink },
+    {
+        id: "configurationEncryption",
+        href: "/admin/configuration-encryption",
+        label: "Configuration Encryption",
+        icon: HiOutlineArrowPathRoundedSquare,
+    },
     { id: "plugins", href: "/admin/plugins", label: "Plugins", icon: HiOutlinePuzzlePiece },
     { id: "diagnostics", href: "/admin/diagnostics", label: "Diagnostics", icon: HiOutlineCpuChip },
     { id: "branding", href: "/admin/branding", label: "Branding", icon: HiOutlinePaintBrush },

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

@@ -0,0 +1,16 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import CopyIconButton from "../../../../../lib/components/buttons/CopyIconButton.js";
+
+/** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a copy icon button beside it. */
+export default 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>
+    );
+}