@rapidmx/web-client 0.3.0 → 0.4.0

package/dist/apps/shared/components/admin/settings/PluginsManager.js

@@ -0,0 +1,260 @@
+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 { useCallback, useEffect, useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { addPlugin, getPluginStatus, listPlugins, lookupPluginPackage, removePlugin, updatePlugin, } from "@rapidmx/react-shared/admin/pluginsApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+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";
+/** How often status is refreshed while server copies are still applying a change. */
+const PENDING_POLL_MS = 5000;
+function errorMessage(err, fallback) {
+    return err instanceof ApiRequestError ? err.message : fallback;
+}
+/** Installed plugins with their rollout status, and every plugin action - shared by the Plugins page and the
+ * setup wizard. */
+export default function PluginsManager() {
+    const [plugins, setPlugins] = useState([]);
+    const [status, setStatus] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [adding, setAdding] = useState(false);
+    const [upgrading, setUpgrading] = useState(null);
+    const [configuring, setConfiguring] = useState(null);
+    const [removing, setRemoving] = useState(null);
+    const [busyUid, setBusyUid] = useState(null);
+    const refreshStatus = useCallback(() => {
+        // Status is advisory - a failure to read it shouldn't hide the plugin list.
+        return getPluginStatus()
+            .then(setStatus)
+            .catch(() => setStatus(null));
+    }, []);
+    useEffect(() => {
+        Promise.all([listPlugins(), refreshStatus()])
+            .then(([list]) => setPlugins(list))
+            .catch((err) => setError(errorMessage(err, "Could not load plugins.")))
+            .finally(() => setLoading(false));
+    }, [refreshStatus]);
+    const pending = !!status && status.instances.some((instance) => instance.hash !== status.hash);
+    useEffect(() => {
+        if (!pending) {
+            return;
+        }
+        const timer = setInterval(() => void refreshStatus(), PENDING_POLL_MS);
+        return () => clearInterval(timer);
+    }, [pending, refreshStatus]);
+    /** Applies a saved change locally and re-reads status, since saving starts a rollout. */
+    function applied(updated) {
+        setPlugins((prev) => {
+            const exists = prev.some((plugin) => plugin.uid === updated.uid);
+            const next = exists ? prev.map((plugin) => (plugin.uid === updated.uid ? updated : plugin)) : [...prev, updated];
+            return next.sort((a, b) => a.name.localeCompare(b.name));
+        });
+        void refreshStatus();
+    }
+    async function toggle(plugin) {
+        setBusyUid(plugin.uid);
+        setError(null);
+        try {
+            applied(await updatePlugin(plugin.uid, { version: plugin.version, enabled: !plugin.enabled }));
+        }
+        catch (err) {
+            setError(errorMessage(err, `Could not ${plugin.enabled ? "disable" : "enable"} ${plugin.manifest.displayName}.`));
+        }
+        finally {
+            setBusyUid(null);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide", children: "Plugins" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: () => setAdding(true), children: "+ Add plugin" })] }), _jsx("p", { className: "text-sm text-text-muted mb-5 max-w-3xl", children: "Plugins add protocols and features to every server. Changes are applied by restarting the servers one at a time, so mail keeps flowing. Plugins run with full access to the server, so only add ones you trust." }), error && _jsx(Alert, { children: error }), _jsx(RolloutBanner, { status: status }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : plugins.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No plugins installed." })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Plugin", "Version", "Status", "Enabled", ""].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: plugins.map((plugin) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: [_jsx("div", { className: "font-semibold", children: plugin.manifest.displayName }), _jsx("div", { className: "text-xs text-text-muted", children: plugin.name }), plugin.manifest.description && (_jsx("div", { className: "text-xs text-text-muted mt-1 max-w-md", children: plugin.manifest.description }))] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: plugin.packageVersion }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: _jsx(PluginStatusCell, { plugin: plugin, status: status }) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border align-top", children: _jsx("label", { className: "inline-flex items-center gap-2", children: _jsx("input", { type: "checkbox", "aria-label": `Enable ${plugin.manifest.displayName}`, checked: plugin.enabled, disabled: busyUid === plugin.uid, onChange: () => void toggle(plugin) }) }) }), _jsxs("td", { className: "py-2.5 px-2.5 border-b border-border align-top text-right whitespace-nowrap", children: [(plugin.manifest.settings ?? []).length > 0 && (_jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setConfiguring(plugin), children: "Settings" })), _jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setUpgrading(plugin), children: "Change version" }), _jsx(Button, { variant: "text", type: "button", className: "!w-auto", onClick: () => setRemoving(plugin), children: "Remove" })] })] }, plugin.uid))) })] }) })), _jsx(AddPluginModal, { open: adding, onClose: () => setAdding(false), onAdded: (plugin) => {
+                    setAdding(false);
+                    applied(plugin);
+                } }), upgrading && (_jsx(ChangeVersionModal, { plugin: upgrading, onClose: () => setUpgrading(null), onSaved: (plugin) => {
+                    setUpgrading(null);
+                    applied(plugin);
+                } })), configuring && (_jsx(SettingsModal, { plugin: configuring, onClose: () => setConfiguring(null), onSaved: (plugin) => {
+                    setConfiguring(null);
+                    applied(plugin);
+                } })), removing && (_jsx(RemoveModal, { plugin: removing, onClose: () => setRemoving(null), onRemoved: () => {
+                    const uid = removing.uid;
+                    setRemoving(null);
+                    setPlugins((prev) => prev.filter((plugin) => plugin.uid !== uid));
+                    void refreshStatus();
+                } }))] }));
+}
+/** Shown while any server copy hasn't applied the saved plugin set yet, or when one is in safe mode. */
+function RolloutBanner({ status }) {
+    if (!status || status.instances.length === 0) {
+        return null;
+    }
+    const behind = status.instances.filter((instance) => instance.hash !== status.hash).length;
+    const safeMode = status.instances.filter((instance) => instance.safeMode);
+    return (_jsxs(_Fragment, { children: [behind > 0 && (_jsxs("p", { role: "status", className: "mb-4 text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Applying changes: ", status.instances.length - behind, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers", " updated. Servers restart one at a time."] })), safeMode.length > 0 && (_jsxs(Alert, { children: [safeMode.map((instance) => instance.instance).join(", "), " started without any plugins because recent starts failed. Fix or disable the failing plugin, and the server will pick up the change."] }))] }));
+}
+function PluginStatusCell({ plugin, status }) {
+    if (!plugin.enabled) {
+        return _jsx("span", { className: "text-text-muted", children: "Disabled" });
+    }
+    if (!status || status.instances.length === 0) {
+        return _jsx("span", { className: "text-text-muted", children: "Unknown" });
+    }
+    const current = status.instances.filter((instance) => instance.hash === status.hash);
+    const loaded = current.filter((instance) => instance.loaded.some((entry) => entry.name === plugin.name && entry.version === plugin.packageVersion)).length;
+    const errors = current.flatMap((instance) => instance.errors.filter((entry) => entry.name === plugin.name).map((entry) => `${instance.instance}: ${entry.message}`));
+    return (_jsxs("div", { children: [_jsxs("span", { className: loaded === status.instances.length ? "text-success font-medium" : "text-text-muted", children: ["Loaded on ", loaded, " of ", status.instances.length, " ", status.instances.length === 1 ? "server" : "servers"] }), errors.map((message) => (_jsx("div", { className: "text-xs text-danger mt-1", children: message }, message)))] }));
+}
+function AddPluginModal({ open, onClose, onAdded }) {
+    const [name, setName] = useState("");
+    const [lookup, setLookup] = useState(null);
+    const [selectedVersion, setSelectedVersion] = useState("");
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (!open) {
+            setName("");
+            setLookup(null);
+            setSelectedVersion("");
+            setError(null);
+        }
+    }, [open]);
+    async function find(e) {
+        e.preventDefault();
+        if (!name.trim()) {
+            setError("Enter a package name.");
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            const found = await lookupPluginPackage(name.trim());
+            setLookup(found);
+            setSelectedVersion(found.selected.version);
+        }
+        catch (err) {
+            setLookup(null);
+            setError(errorMessage(err, "Could not look that package up."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function add() {
+        setBusy(true);
+        setError(null);
+        try {
+            onAdded(await addPlugin(lookup.package.name, selectedVersion));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not add the plugin."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    const manifest = lookup?.selected.manifest;
+    return (_jsxs(Modal, { open: open, onClose: onClose, title: "Add plugin", children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: find, className: "flex gap-2 items-end mb-4", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm flex-1", children: [_jsx("span", { className: "font-semibold", children: "Package name" }), _jsx("input", { "aria-label": "Package name", className: INPUT_CLASS, value: name, placeholder: "@rapidmx/activesync", onChange: (e) => {
+                                    setName(e.target.value);
+                                    setLookup(null);
+                                } })] }), _jsx(Button, { type: "submit", variant: "secondary", className: "!w-auto", loading: busy && !lookup, disabled: busy, children: "Find" })] }), lookup && (_jsxs("div", { className: "flex flex-col gap-3", children: [typeof manifest === "string" ? (_jsx(Alert, { children: manifest })) : (_jsxs("div", { className: "text-sm", children: [_jsx("div", { className: "font-semibold", children: manifest?.displayName }), manifest?.description && _jsx("div", { className: "text-text-muted", children: manifest.description })] })), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Version" }), _jsx("select", { "aria-label": "Version", className: INPUT_CLASS, value: selectedVersion, onChange: (e) => setSelectedVersion(e.target.value), children: lookup.package.versions.map((version) => (_jsxs("option", { value: version, children: [version, version === lookup.package.latest ? " (latest)" : ""] }, version))) })] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy || typeof manifest === "string", onClick: () => void add(), children: "Add plugin" })] })] }))] }));
+}
+function ChangeVersionModal({ plugin, onClose, onSaved }) {
+    const [versions, setVersions] = useState(null);
+    const [latest, setLatest] = useState();
+    const [selected, setSelected] = useState(plugin.packageVersion);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        lookupPluginPackage(plugin.name)
+            .then((found) => {
+            setVersions(found.package.versions);
+            setLatest(found.package.latest);
+        })
+            .catch((err) => setError(errorMessage(err, "Could not load the available versions.")));
+    }, [plugin.name]);
+    async function save() {
+        setBusy(true);
+        setError(null);
+        try {
+            onSaved(await updatePlugin(plugin.uid, { version: plugin.version, packageVersion: selected }));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not change the version."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: `${plugin.manifest.displayName} version`, children: [error && _jsx(Alert, { children: error }), versions === null ? (!error && _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Version" }), _jsx("select", { "aria-label": "Version", className: INPUT_CLASS, value: selected, onChange: (e) => setSelected(e.target.value), children: versions.map((version) => (_jsxs("option", { value: version, children: [version, version === latest ? " (latest)" : "", version === plugin.packageVersion ? " (installed)" : ""] }, version))) })] }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy || selected === plugin.packageVersion, onClick: () => void save(), children: "Save" })] })] }))] }));
+}
+/** A setting's current form value: its saved value, else its default. Kept as a string for text inputs. */
+function initialValue(definition, saved) {
+    const value = saved ?? definition.default;
+    if (definition.type === "boolean") {
+        return value === true;
+    }
+    return value === undefined ? "" : String(value);
+}
+function SettingsModal({ plugin, onClose, onSaved }) {
+    const definitions = plugin.manifest.settings ?? [];
+    const initial = useRef(Object.fromEntries(definitions.map((d) => [d.key, initialValue(d, plugin.settings[d.key])])));
+    const [values, setValues] = useState(initial.current);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    async function save(e) {
+        e.preventDefault();
+        const settings = {};
+        for (const definition of definitions) {
+            const value = values[definition.key];
+            if (definition.type === "number") {
+                if (value === "") {
+                    settings[definition.key] = null;
+                    continue;
+                }
+                // A number input only ever reports a valid number or an empty string.
+                settings[definition.key] = Number(value);
+            }
+            else {
+                settings[definition.key] = value === "" ? null : value;
+            }
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            onSaved(await updatePlugin(plugin.uid, { version: plugin.version, settings }));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the settings."));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: `${plugin.manifest.displayName} settings`, children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: save, className: "flex flex-col gap-4", children: [definitions.map((definition) => (_jsx(SettingField, { definition: definition, value: values[definition.key], onChange: (value) => setValues((prev) => ({ ...prev, [definition.key]: value })) }, definition.key))), _jsx("p", { className: "text-xs text-text-muted", children: "Saving restarts the servers one at a time to apply the new settings." }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", className: "!w-auto", loading: busy, disabled: busy, children: "Save" })] })] })] }));
+}
+function SettingField({ definition, value, onChange, }) {
+    const help = definition.help && _jsx("span", { className: "text-xs text-text-muted", children: definition.help });
+    if (definition.type === "boolean") {
+        return (_jsxs("label", { className: "flex flex-col gap-1 text-sm", children: [_jsxs("span", { className: "inline-flex items-center gap-2 font-semibold", children: [_jsx("input", { type: "checkbox", checked: value === true, onChange: (e) => onChange(e.target.checked) }), definition.label] }), help] }));
+    }
+    return (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: definition.label }), definition.type === "select" ? (_jsxs("select", { "aria-label": definition.label, className: INPUT_CLASS, value: String(value), onChange: (e) => onChange(e.target.value), children: [!definition.required && _jsx("option", { value: "", children: "Default" }), (definition.options ?? []).map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })) : (_jsx("input", { "aria-label": definition.label, className: INPUT_CLASS, type: definition.type === "number" ? "number" : "text", min: definition.min, max: definition.max, required: definition.required, value: String(value), onChange: (e) => onChange(e.target.value) })), help] }));
+}
+function RemoveModal({ plugin, onClose, onRemoved }) {
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    async function remove() {
+        setBusy(true);
+        setError(null);
+        try {
+            await removePlugin(plugin.uid);
+            onRemoved();
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not remove the plugin."));
+            setBusy(false);
+        }
+    }
+    return (_jsxs(Modal, { open: true, onClose: onClose, title: `Remove ${plugin.manifest.displayName}?`, children: [error && _jsx(Alert, { children: error }), _jsx("p", { className: "text-sm mb-4", children: "The servers stop running this plugin after they restart. Data it stored stays in the database, and adding the plugin again brings it back." }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void remove(), children: "Remove" })] })] }));
+}

package/dist/apps/shared/components/admin/settings/RetentionPolicyForm.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { MIN_AUDIT_LOG_RETENTION_DAYS, updateRetentionPolicy } from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+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";
+/** The retention policy editor, shared by the Retention Policy page and the setup wizard. */
+export default function RetentionPolicyForm({ policy, onChange }) {
+    const [messageRetentionDays, setMessageRetentionDays] = useState(policy.messageRetentionDays?.toString() ?? "");
+    const [auditLogRetentionDays, setAuditLogRetentionDays] = useState(policy.auditLogRetentionDays?.toString() ?? "");
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            const patch = {};
+            if (messageRetentionDays.trim() !== "") {
+                patch.messageRetentionDays = Number(messageRetentionDays);
+            }
+            if (auditLogRetentionDays.trim() !== "") {
+                patch.auditLogRetentionDays = Number(auditLogRetentionDays);
+            }
+            const updated = await updateRetentionPolicy(patch);
+            onChange(updated);
+            setSaved(true);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save the retention policy.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Retention Policy" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Automatically and permanently deletes mail/audit-log entries older than the configured age. Leave a field blank for no automatic purge. This does not apply to a mailbox that is a custodian on an active legal hold \u2014 a held message is skipped and retried on a later run once the hold is lifted." }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Message retention (days)" }), _jsx("input", { "aria-label": "Message retention (days)", type: "number", min: 1, className: INPUT_CLASS, value: messageRetentionDays, onChange: (e) => setMessageRetentionDays(e.target.value), placeholder: "No automatic purge" }), _jsx("span", { className: "text-xs text-text-muted", children: "Applies to any message, in any folder, regardless of age." })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Audit log retention (days)" }), _jsx("input", { "aria-label": "Audit log retention (days)", type: "number", min: MIN_AUDIT_LOG_RETENTION_DAYS, className: INPUT_CLASS, value: auditLogRetentionDays, onChange: (e) => setAuditLogRetentionDays(e.target.value), placeholder: "Keep forever" }), _jsxs("span", { className: "text-xs text-text-muted", children: ["Cannot be set below ", MIN_AUDIT_LOG_RETENTION_DAYS, " days. Never applies to the tamper-evident escrow audit chain."] })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }));
+}

package/dist/apps/shared/components/admin/setup/EscrowSetupStep.js

@@ -0,0 +1,131 @@
+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, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createEscrowScope, listEscrowScopes } from "@rapidmx/react-shared/admin/escrowScopesApi.js";
+import { generateEscrowKeyPair } from "@rapidmx/react-shared/crypto/escrowKeys.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import EscrowScopeKeyAndHoldersFields, { emptyEscrowScopeKeyAndHoldersValue, } from "../escrowScopes/EscrowScopeKeyAndHoldersFields.js";
+const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+/** Offers `text` to the browser as a file download. */
+export function downloadTextFile(filename, text, type = "application/x-pem-file") {
+    const url = URL.createObjectURL(new Blob([text], { type }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+}
+function fileSafe(name) {
+    return name.trim().replace(/[^A-Za-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "") || "escrow";
+}
+/**
+ * The setup wizard's escrow step. Escrow lets a separate group of holders recover a mailbox's encrypted mail (for
+ * example for legal discovery) using a key this server never has. It's optional, and the administrator can either
+ * generate the key pair here (downloading the private key, which never leaves the browser), paste in an existing
+ * certificate, or go without escrow.
+ */
+export default function EscrowSetupStep() {
+    const [scopes, setScopes] = useState(null);
+    const [mode, setMode] = useState("none");
+    const [name, setName] = useState("Escrow");
+    const [validYears, setValidYears] = useState(5);
+    const [generated, setGenerated] = useState(null);
+    const [savedPrivateKey, setSavedPrivateKey] = useState(false);
+    const [keyAndHolders, setKeyAndHolders] = useState(emptyEscrowScopeKeyAndHoldersValue());
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        listEscrowScopes({ limit: 100 })
+            .then(setScopes)
+            .catch(() => setScopes([]));
+    }, []);
+    function chooseMode(next) {
+        setMode(next);
+        setError(null);
+        setGenerated(null);
+        setSavedPrivateKey(false);
+        setKeyAndHolders(emptyEscrowScopeKeyAndHoldersValue());
+    }
+    async function generate() {
+        if (!name.trim()) {
+            setError("Give the escrow scope a name first.");
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            const keys = await generateEscrowKeyPair({ name: name.trim(), validDays: validYears * 365 });
+            setGenerated(keys);
+            setKeyAndHolders({
+                ...emptyEscrowScopeKeyAndHoldersValue(),
+                publicKey: keys.publicKey.publicKey,
+                keyType: keys.publicKey.type,
+                fingerprint: keys.publicKey.fingerprint,
+                notBefore: toDatetimeLocal(new Date(keys.publicKey.notBefore).toISOString()),
+                notAfter: toDatetimeLocal(new Date(keys.publicKey.notAfter).toISOString()),
+            });
+        }
+        catch {
+            setError("This browser couldn't generate the escrow keys.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function create(e) {
+        e.preventDefault();
+        setError(null);
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+        if (!keyAndHolders.publicKey.trim() || !keyAndHolders.keyType.trim() || !keyAndHolders.fingerprint.trim()) {
+            setError("The public key, its type, and its fingerprint are all required.");
+            return;
+        }
+        if (keyAndHolders.holderUserUids.length === 0) {
+            setError("At least one holder is required.");
+            return;
+        }
+        if (keyAndHolders.requiredHolders < 1 || keyAndHolders.requiredHolders > keyAndHolders.holderUserUids.length) {
+            setError("Required holders must be between 1 and the number of holders.");
+            return;
+        }
+        setBusy(true);
+        try {
+            const created = await createEscrowScope({
+                name: name.trim(),
+                publicKey: {
+                    publicKey: keyAndHolders.publicKey.trim(),
+                    type: keyAndHolders.keyType.trim(),
+                    fingerprint: keyAndHolders.fingerprint.trim(),
+                    notBefore: new Date(keyAndHolders.notBefore).getTime(),
+                    notAfter: new Date(keyAndHolders.notAfter).getTime(),
+                },
+                holderUserUids: keyAndHolders.holderUserUids,
+                requiredHolders: keyAndHolders.requiredHolders,
+                notifySubjectOnAccess: keyAndHolders.notifySubjectOnAccess,
+            });
+            setScopes((prev) => [...(prev ?? []), created]);
+            chooseMode("none");
+            setName("Escrow");
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the escrow scope.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    const scopeForm = (_jsxs("form", { onSubmit: create, className: "flex flex-col gap-5", children: [_jsx(EscrowScopeKeyAndHoldersFields, { value: keyAndHolders, onChange: setKeyAndHolders, disabled: mode === "generate" && busy }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: busy, disabled: busy, className: "!w-auto", children: "Create escrow scope" }) })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-bold uppercase tracking-wide mb-1", children: "Escrow" }), _jsx("p", { className: "text-sm text-text-muted", children: "Escrow lets a group of trusted holders - for example your legal or compliance team - recover a mailbox\u2019s encrypted mail when they all agree to. It\u2019s optional. Without it, mail that someone encrypts can\u2019t be recovered if they lose their keys, by anyone." })] }), scopes && scopes.length > 0 && (_jsxs("div", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: ["Escrow scopes set up: ", scopes.map((scope) => scope.name).join(", "), "."] })), error && _jsx(Alert, { children: error }), _jsxs("fieldset", { className: "flex flex-col gap-2 text-sm", children: [_jsx("legend", { className: "font-semibold mb-1", children: "How do you want to set up escrow?" }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "generate", onChange: () => chooseMode("generate") }), "Generate new escrow keys in this browser"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "existing", onChange: () => chooseMode("existing") }), "Use a certificate I already have"] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "radio", name: "escrow-mode", checked: mode === "none", onChange: () => chooseMode("none") }), scopes && scopes.length > 0 ? "Don't add another escrow scope" : "Don't use escrow"] })] }), mode !== "none" && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: "Escrow scope name", htmlFor: "escrowName", children: _jsx("input", { id: "escrowName", type: "text", className: INPUT_CLASS, value: name, disabled: !!generated, onChange: (e) => setName(e.target.value) }) }), mode === "generate" && !generated && (_jsxs(_Fragment, { children: [_jsx(FormField, { label: "Keys valid for", htmlFor: "escrowValidYears", children: _jsx("select", { id: "escrowValidYears", className: INPUT_CLASS, value: validYears, onChange: (e) => setValidYears(Number(e.target.value)), children: [1, 2, 5, 10].map((years) => (_jsxs("option", { value: years, children: [years, " ", years === 1 ? "year" : "years"] }, years))) }) }), _jsx(Button, { type: "button", className: "!w-auto", loading: busy, disabled: busy, onClick: () => void generate(), children: "Generate keys" })] })), mode === "generate" && generated && (_jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsx(Alert, { children: "Download the private key now and give it to your escrow holders. It isn\u2019t stored anywhere else - if it\u2019s lost, no escrowed mail can ever be recovered." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", className: "!w-auto", onClick: () => downloadTextFile(`${fileSafe(name)}-private-key.pem`, generated.privateKeyPem), children: "Download private key" }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => downloadTextFile(`${fileSafe(name)}-certificate.pem`, generated.certificatePem), children: "Download certificate" })] }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: savedPrivateKey, onChange: (e) => setSavedPrivateKey(e.target.checked) }), "I\u2019ve saved the private key somewhere safe"] })] }))] })), mode === "existing" && scopeForm, mode === "generate" && generated && savedPrivateKey && scopeForm] }));
+}

package/dist/apps/shared/components/admin/setup/SetupWizard.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { getRetentionPolicy } from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
+import { getMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
+import { createDomain, listDomains } from "@rapidmx/react-shared/admin/domainsApi.js";
+import { completeSetup, getSetupStatus, saveSetupStep } from "@rapidmx/react-shared/admin/setupApi.js";
+import { getBranding } from "@rapidmx/react-shared/branding/brandingApi.js";
+import { getEncryptionPolicy } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import BrandingForm from "../settings/BrandingForm.js";
+import DomainDnsSetup from "../settings/DomainDnsSetup.js";
+import EncryptionPolicyForm, { isEncryptionEnabled } from "../settings/EncryptionPolicyForm.js";
+import LoadedSettingsForm from "../settings/LoadedSettingsForm.js";
+import MailboxCreateForm from "../settings/MailboxCreateForm.js";
+import MailboxPolicyForm from "../settings/MailboxPolicyForm.js";
+import PluginsManager from "../settings/PluginsManager.js";
+import RetentionPolicyForm from "../settings/RetentionPolicyForm.js";
+import EscrowSetupStep from "./EscrowSetupStep.js";
+const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+export const SETUP_STEPS = [
+    { id: "plugins", title: "Plugins", intro: "Choose which protocols and features this server runs. The recommended plugins are already installed." },
+    { id: "domain", title: "Domain", intro: "Add the domain this server receives mail for, then publish the DNS records below." },
+    { id: "settings", title: "Server settings", intro: "Set the rules for encryption, how long mail is kept, and new mailboxes." },
+    { id: "escrow", title: "Escrow", intro: "Decide whether encrypted mail can be recovered by a trusted group of holders." },
+    { id: "branding", title: "Branding", intro: "Make the sign-in page and apps look like your organization." },
+    { id: "mailboxes", title: "Mailboxes", intro: "Create the first mailboxes, starting with your own." },
+];
+function isStepId(value) {
+    return SETUP_STEPS.some((step) => step.id === value);
+}
+/**
+ * The first-run setup wizard. Each step saves as the administrator works through it; the wizard itself only records
+ * which step they're on (so leaving and coming back resumes there) and, at the end, that setup is finished. Every step
+ * except the domain can be passed over and configured later from the admin console.
+ */
+export default function SetupWizard({ userUid }) {
+    const [step, setStep] = useState(null);
+    const [domains, setDomains] = useState([]);
+    const [encryption, setEncryption] = useState(null);
+    const [finishing, setFinishing] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        void Promise.all([getSetupStatus().catch(() => undefined), listDomains({ limit: 25 }).catch(() => [])]).then(([status, list]) => {
+            setDomains(list);
+            setStep(isStepId(status?.currentStep) ? status.currentStep : "plugins");
+        });
+    }, []);
+    useEffect(() => {
+        if (step === "escrow" || step === "settings") {
+            getEncryptionPolicy()
+                .then(setEncryption)
+                .catch(() => setEncryption(null));
+        }
+    }, [step]);
+    if (step === null) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    const index = SETUP_STEPS.findIndex((s) => s.id === step);
+    const current = SETUP_STEPS[index];
+    const last = index === SETUP_STEPS.length - 1;
+    function goTo(next) {
+        setError(null);
+        setStep(next);
+        // Progress is a convenience for resuming - failing to record it shouldn't stop the administrator.
+        void saveSetupStep(next).catch(() => undefined);
+        window.scrollTo?.(0, 0);
+    }
+    async function finish() {
+        setFinishing(true);
+        setError(null);
+        try {
+            await completeSetup();
+            window.location.href = "/admin";
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not finish setup.");
+            setFinishing(false);
+        }
+    }
+    const blocked = step === "domain" && domains.length === 0;
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Set up your server" }), _jsx("p", { className: "text-sm text-text-muted", children: "You can change any of these settings later from the admin console." })] }), _jsx("ol", { "aria-label": "Setup steps", className: "flex flex-wrap gap-2", children: SETUP_STEPS.map((s, i) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": s.id === step ? "step" : undefined, 
+                        // Steps after the domain need somewhere to put mail first.
+                        disabled: i > 1 && domains.length === 0, onClick: () => goTo(s.id), className: [
+                            "text-sm py-1.5 px-3 rounded-pill border disabled:opacity-50",
+                            s.id === step
+                                ? "bg-primary/10 border-primary text-primary-dark font-semibold"
+                                : i < index
+                                    ? "border-border text-text"
+                                    : "border-border text-text-muted",
+                        ].join(" "), children: [i + 1, ". ", s.title, i < index && _jsx("span", { className: "sr-only", children: " (done)" })] }) }, s.id))) }), _jsxs("section", { "aria-labelledby": "setup-step-title", className: "flex flex-col gap-5", children: [_jsxs("div", { children: [_jsxs("h2", { id: "setup-step-title", className: "text-lg font-bold", children: ["Step ", index + 1, " of ", SETUP_STEPS.length, ": ", current.title] }), _jsx("p", { className: "text-sm text-text-muted", children: current.intro })] }), step === "plugins" && _jsx(PluginsManager, {}), step === "domain" && _jsx(DomainStep, { domains: domains, onCreated: (domain) => setDomains((prev) => [...prev, domain]) }), step === "settings" && (_jsxs("div", { className: "flex flex-col gap-10", children: [_jsx(LoadedSettingsForm, { load: getEncryptionPolicy, loadErrorMessage: "Could not load the encryption policy.", children: (policy, onChange) => (_jsx(EncryptionPolicyForm, { policy: policy, onChange: (updated) => {
+                                        onChange(updated);
+                                        setEncryption(updated);
+                                    } })) }), _jsx(LoadedSettingsForm, { load: getRetentionPolicy, loadErrorMessage: "Could not load the retention policy.", children: (policy, onChange) => _jsx(RetentionPolicyForm, { policy: policy, onChange: onChange }) }), _jsx(LoadedSettingsForm, { load: getMailboxPolicy, loadErrorMessage: "Could not load the mailbox policy.", children: (policy, onChange) => _jsx(MailboxPolicyForm, { policy: policy, onChange: onChange }) })] })), step === "escrow" &&
+                        (encryption && !isEncryptionEnabled(encryption) ? (_jsx("p", { role: "status", className: "text-sm py-2 px-3 rounded-sm bg-surface-alt text-text", children: "End-to-end encryption is turned off, so escrow isn\u2019t needed. You can set it up later if you turn encryption on." })) : (_jsx(EscrowSetupStep, {}))), step === "branding" && (_jsx(LoadedSettingsForm, { load: getBranding, loadErrorMessage: "Could not load branding.", children: (branding, onChange) => _jsx(BrandingForm, { branding: branding, onChange: onChange }) })), step === "mailboxes" && _jsx(MailboxesStep, { userUid: userUid, domain: domains.find((d) => d.verified)?.name ?? domains[0]?.name })] }), error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex items-center gap-3 border-t border-border pt-5", children: [index > 0 && (_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => goTo(SETUP_STEPS[index - 1].id), children: "Back" })), _jsx("div", { className: "flex-1" }), blocked && _jsx("span", { className: "text-sm text-text-muted", children: "Add a domain to continue." }), last ? (_jsx(Button, { type: "button", className: "!w-auto", loading: finishing, disabled: finishing, onClick: () => void finish(), children: "Finish setup" })) : (_jsx(Button, { type: "button", className: "!w-auto", disabled: blocked, onClick: () => goTo(SETUP_STEPS[index + 1].id), children: "Continue" }))] })] }));
+}
+function DomainStep({ domains, onCreated }) {
+    const [name, setName] = useState("");
+    const [error, setError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    async function handleSubmit(e) {
+        e.preventDefault();
+        setError(null);
+        if (!name.trim()) {
+            setError("A domain name is required.");
+            return;
+        }
+        setSaving(true);
+        try {
+            onCreated(await createDomain({ name: name.trim() }));
+            setName("");
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not add the domain.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-3xl", children: [domains.map((domain) => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-base font-bold", children: domain.name }), _jsx(DomainDnsSetup, { uid: domain.uid })] }, domain.uid))), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [_jsx(FormField, { label: domains.length === 0 ? "Domain name" : "Add another domain", htmlFor: "setupDomainName", children: _jsx("input", { id: "setupDomainName", type: "text", className: INPUT_CLASS, value: name, onChange: (e) => setName(e.target.value), placeholder: "example.com" }) }), _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Add domain" })] })] }));
+}
+function MailboxesStep({ userUid, domain }) {
+    const [mailboxes, setMailboxes] = useState([]);
+    const [formKey, setFormKey] = useState(0);
+    useEffect(() => {
+        listMailboxes({ limit: 100 })
+            .then(setMailboxes)
+            .catch(() => undefined);
+    }, []);
+    const hasOwn = mailboxes.some((mailbox) => mailbox.ownerUserUid === userUid);
+    return (_jsxs("div", { className: "flex flex-col gap-5 max-w-xl", children: [mailboxes.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold uppercase tracking-wide mb-2", children: "Mailboxes created" }), _jsx("ul", { className: "text-sm flex flex-col gap-1", children: mailboxes.map((mailbox) => (_jsxs("li", { children: [mailbox.displayName, " <", mailbox.primarySmtpAddress, ">", mailbox.ownerUserUid === userUid && _jsx("span", { className: "text-text-muted", children: " (yours)" })] }, mailbox.uid))) })] })), _jsx("h3", { className: "text-base font-bold", children: hasOwn ? "Add another mailbox" : "Your mailbox" }), _jsx(MailboxCreateForm, { submitLabel: "Create mailbox", defaults: hasOwn ? { domain } : { localPart: "admin", domain, displayName: "Administrator", ownerUserUid: userUid }, onCreated: (mailbox) => {
+                    setMailboxes((prev) => [...prev, mailbox]);
+                    setFormKey((k) => k + 1);
+                } }, formKey)] }));
+}