@rapidmx/web-client 0.2.0 → 0.3.1

package/dist/apps/www/settings/encryption/index.js

@@ -0,0 +1,330 @@
+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 { addMasterKeyWrap, checkSignEnrollmentStatus, findActivePublicKey, getEscrowInfo, getKeyVault, rekey, removeMasterKeyWrap, startSignEnrollment, } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { SIGNING_PRIVATE_KEY_AAD_PURPOSE, destroyUnlockedKeys, getUnlockedKeys, unlockWithPassword, } from "@rapidmx/react-shared/crypto/keySession.js";
+import { IDLE_TIMEOUT_OPTIONS_MINUTES, getIdleTimeoutMinutes, setIdleTimeoutMinutes } from "@rapidmx/react-shared/crypto/idleTimeout.js";
+import { fromBase64 } from "@rapidmx/react-shared/crypto/encoding.js";
+import { buildAad, sealWithKey } from "@rapidmx/react-shared/crypto/masterKey.js";
+import { buildEscrowWrap, buildPasswordWrap, buildRecoveryWraps } from "@rapidmx/react-shared/crypto/masterKeyWraps.js";
+import { rewrapPrivateKeysUnderNewMasterKey } from "@rapidmx/react-shared/crypto/keyRotation.js";
+import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "@rapidmx/react-shared/crypto/keys.js";
+import { getMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import KeyEnrollmentGate from "../../../shared/components/layout/KeyEnrollmentGate.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+const MIN_PASSWORD_LENGTH = 8;
+// RFC 8823 ACME issuance is a real email round-trip with a public CA - "likely minutes," not seconds -
+// so this polls infrequently rather than hammering the endpoint.
+const SIGNING_ENROLLMENT_POLL_INTERVAL_MS = 15000;
+const METHOD_LABELS = {
+    password: "Password",
+    passkey: "Passkey",
+    recovery: "Recovery code",
+    escrow: "Escrow (managed by your organization)",
+};
+function idleTimeoutLabel(minutes) {
+    if (minutes === 0) {
+        return "Never";
+    }
+    if (minutes === 60) {
+        return "1 hour";
+    }
+    return `${minutes} minutes`;
+}
+export default function SettingsEncryptionPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "encryption", children: _jsx(EncryptionGate, {}) }));
+}
+/**
+ * Unlike `MailShell`, `SettingsShell` doesn't already gate its children behind `KeyEnrollmentGate` (a
+ * user can reach Settings without ever having opened Mail this session) - wrapped here instead, so
+ * `EncryptionContent` below can always assume `getUnlockedKeys()` has something for this mailbox before
+ * it renders. See `KeyEnrollmentGate`'s own doc comment for why it's safe to mount more than once (it
+ * short-circuits to `children` immediately for a mailbox already unlocked elsewhere this session).
+ */
+function EncryptionGate() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+    return (_jsx(KeyEnrollmentGate, { mailboxUid: mailboxUid, mailboxAddress: mailbox.primarySmtpAddress, mailboxKeys: mailbox.keys, children: _jsx(EncryptionContent, {}) }));
+}
+function EncryptionContent() {
+    const { mailboxUid, mailboxes } = useSettingsShell();
+    const mailbox = mailboxes.find((mb) => mb.uid === mailboxUid);
+    const [vault, setVault] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+    const [removingMethod, setRemovingMethod] = useState(null);
+    const [actionError, setActionError] = useState(null);
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmNewPassword, setConfirmNewPassword] = useState("");
+    const [addingPassword, setAddingPassword] = useState(false);
+    const [regenerating, setRegenerating] = useState(false);
+    const [newRecoveryCodes, setNewRecoveryCodes] = useState(null);
+    // Distinguishes the "Save your new recovery codes" screen's copy for the two different actions that
+    // land on it - a plain regeneration only invalidates old recovery codes, while a rotation also
+    // invalidates every other unlock method, which the copy needs to say plainly.
+    const [recoveryCodesReason, setRecoveryCodesReason] = useState("regenerate");
+    const [codesSaved, setCodesSaved] = useState(false);
+    const [rotationPassword, setRotationPassword] = useState("");
+    const [rotationConfirmPassword, setRotationConfirmPassword] = useState("");
+    const [rotating, setRotating] = useState(false);
+    const [destroyed, setDestroyed] = useState(false);
+    const [idleTimeoutMinutes, setIdleTimeoutMinutesState] = useState(() => getIdleTimeoutMinutes());
+    // `mailbox.keys` comes from `SettingsShell`'s one-time `listMailboxes()` fetch - once an ACME
+    // enrollment issues, the server has installed a new signing key that fetch never saw. Only this
+    // page refetches (via `getMailbox()`) to notice; `null` means "no fresher data yet, use mailbox.keys".
+    const [refreshedKeys, setRefreshedKeys] = useState(null);
+    const displayedKeys = refreshedKeys ?? mailbox.keys ?? [];
+    const activeSigningKey = findActivePublicKey(displayedKeys, "sign");
+    const [signingStatus, setSigningStatus] = useState("idle");
+    const [signingEnrollmentId, setSigningEnrollmentId] = useState(null);
+    const [signingError, setSigningError] = useState(null);
+    const hasEscrowWrap = vault?.masterKeyWraps.some((w) => w.method === "escrow") ?? false;
+    const [wrappingEscrow, setWrappingEscrow] = useState(false);
+    const [escrowError, setEscrowError] = useState(null);
+    async function handleWrapEscrow() {
+        setEscrowError(null);
+        setWrappingEscrow(true);
+        try {
+            // Only reachable when mailbox.escrowScopeId is set (see the render guard below) and
+            // `unlocked` is defined - see `handleAddPassword`'s identical note on the latter.
+            const escrowInfo = await getEscrowInfo(mailboxUid);
+            const wrap = await buildEscrowWrap(unlocked.masterKey, escrowInfo.escrowScopeId, fromBase64(escrowInfo.publicKey.publicKey));
+            await addMasterKeyWrap(mailboxUid, wrap);
+            await loadVault();
+        }
+        catch (err) {
+            setEscrowError(err instanceof ApiRequestError ? err.message : "Could not add escrow protection for this mailbox.");
+        }
+        finally {
+            setWrappingEscrow(false);
+        }
+    }
+    useEffect(() => {
+        if (signingStatus !== "pending" || !signingEnrollmentId) {
+            return;
+        }
+        let cancelled = false;
+        const interval = setInterval(async () => {
+            try {
+                const result = await checkSignEnrollmentStatus(mailboxUid, signingEnrollmentId);
+                if (cancelled) {
+                    return;
+                }
+                if (result.status === "issued") {
+                    setSigningStatus("idle");
+                    setSigningEnrollmentId(null);
+                    const refreshed = await getMailbox(mailboxUid);
+                    if (!cancelled) {
+                        setRefreshedKeys(refreshed.keys ?? []);
+                    }
+                }
+                else if (result.status === "failed") {
+                    setSigningStatus("idle");
+                    setSigningEnrollmentId(null);
+                    setSigningError(result.error ?? "Signing certificate enrollment failed.");
+                }
+                // "pending" leaves state as-is - the interval below just tries again.
+            }
+            catch {
+                // Transient network error - keep polling rather than surfacing a one-off failure.
+            }
+        }, SIGNING_ENROLLMENT_POLL_INTERVAL_MS);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+        };
+    }, [signingStatus, signingEnrollmentId, mailboxUid]);
+    async function handleEnrollSigning() {
+        setSigningError(null);
+        setSigningStatus("enrolling");
+        try {
+            // Only reachable once `unlocked` is defined - see `handleAddPassword`'s identical note.
+            const { keyPair, csrPem } = await generateKeyPairWithCsr(mailbox.primarySmtpAddress, "sign");
+            const privateKeyRaw = await exportPrivateKeyPkcs8(keyPair.privateKey);
+            const wrappedKeySealed = await sealWithKey(unlocked.masterKey, privateKeyRaw, buildAad(mailboxUid, SIGNING_PRIVATE_KEY_AAD_PURPOSE));
+            const { enrollmentId } = await startSignEnrollment(mailboxUid, {
+                csr: csrPem,
+                wrappedKey: { ciphertext: wrappedKeySealed.ciphertext, nonce: wrappedKeySealed.nonce, algorithm: "AES-256-GCM" },
+            });
+            setSigningEnrollmentId(enrollmentId);
+            setSigningStatus("pending");
+        }
+        catch (err) {
+            setSigningError(err instanceof ApiRequestError ? err.message : "Could not start signing certificate enrollment.");
+            setSigningStatus("idle");
+        }
+    }
+    function handleIdleTimeoutChange(e) {
+        const minutes = Number(e.target.value);
+        setIdleTimeoutMinutes(minutes);
+        setIdleTimeoutMinutesState(minutes);
+    }
+    function loadVault() {
+        return getKeyVault(mailboxUid)
+            .then(setVault)
+            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load your key vault."));
+    }
+    useEffect(() => {
+        loadVault();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mailboxUid]);
+    const unlocked = getUnlockedKeys(mailboxUid);
+    const passwordWraps = vault?.masterKeyWraps.filter((w) => w.method === "password") ?? [];
+    const recoveryWraps = vault?.masterKeyWraps.filter((w) => w.method === "recovery") ?? [];
+    const otherWraps = vault?.masterKeyWraps.filter((w) => w.method !== "password" && w.method !== "recovery") ?? [];
+    async function handleRemove(wrap) {
+        const key = `${wrap.method}:${wrap.methodId ?? ""}`;
+        setRemovingMethod(key);
+        setActionError(null);
+        try {
+            await removeMasterKeyWrap(mailboxUid, wrap.method, wrap.methodId);
+            await loadVault();
+        }
+        catch (err) {
+            setActionError(err instanceof ApiRequestError ? err.message : "Could not remove this unlock method.");
+        }
+        finally {
+            setRemovingMethod(null);
+        }
+    }
+    async function handleAddPassword(e) {
+        e.preventDefault();
+        if (newPassword.length < MIN_PASSWORD_LENGTH) {
+            setActionError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters.`);
+            return;
+        }
+        if (newPassword !== confirmNewPassword) {
+            setActionError("Passwords do not match.");
+            return;
+        }
+        setActionError(null);
+        setAddingPassword(true);
+        try {
+            // Only reachable once `unlocked` is defined - `EncryptionGate` guarantees this mailbox is
+            // unlocked before `EncryptionContent` ever mounts.
+            const wrap = await buildPasswordWrap(mailboxUid, unlocked.masterKey, newPassword);
+            await addMasterKeyWrap(mailboxUid, wrap);
+            setNewPassword("");
+            setConfirmNewPassword("");
+            await loadVault();
+        }
+        catch (err) {
+            setActionError(err instanceof ApiRequestError ? err.message : "Could not add this password.");
+        }
+        finally {
+            setAddingPassword(false);
+        }
+    }
+    async function handleRegenerateRecoveryCodes() {
+        setActionError(null);
+        setRegenerating(true);
+        try {
+            for (const wrap of recoveryWraps) {
+                await removeMasterKeyWrap(mailboxUid, "recovery", wrap.methodId);
+            }
+            const { wraps, codes } = await buildRecoveryWraps(mailboxUid, unlocked.masterKey);
+            for (const wrap of wraps) {
+                await addMasterKeyWrap(mailboxUid, wrap);
+            }
+            setRecoveryCodesReason("regenerate");
+            setNewRecoveryCodes(codes);
+            setCodesSaved(false);
+            await loadVault();
+        }
+        catch (err) {
+            setActionError(err instanceof ApiRequestError ? err.message : "Could not regenerate recovery codes.");
+        }
+        finally {
+            setRegenerating(false);
+        }
+    }
+    /**
+     * Real revocation for a captured wrap (`keyvaultApi.ts`'s `rekey()` - see that function's own doc
+     * comment): re-wraps this mailbox's already-unlocked private keys under a brand new master key
+     * (`rewrapPrivateKeysUnderNewMasterKey()`), wraps that new MK under a freshly entered password and a
+     * fresh set of recovery codes, and atomically replaces the vault - the enrolled keypair/certificate
+     * itself is unchanged (restapi's own `rekey()` rejects anything else), only how it's protected.
+     * Every *other* unlock method this mailbox had (a second password, a passkey, an old set of recovery
+     * codes) stops working the instant this succeeds, since `rekey()` replaces `masterKeyWraps` wholesale
+     * - the whole point, for a captured-wrap scenario where it's unclear which method was compromised.
+     */
+    async function handleRotateKeys(e) {
+        e.preventDefault();
+        if (rotationPassword.length < MIN_PASSWORD_LENGTH) {
+            setActionError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters.`);
+            return;
+        }
+        if (rotationPassword !== rotationConfirmPassword) {
+            setActionError("Passwords do not match.");
+            return;
+        }
+        setActionError(null);
+        setEscrowError(null);
+        setRotating(true);
+        try {
+            // Only reachable once `unlocked` is defined - see `handleAddPassword`'s identical note.
+            const { mk, wrappedKeys } = await rewrapPrivateKeysUnderNewMasterKey(mailboxUid, unlocked);
+            const passwordWrap = await buildPasswordWrap(mailboxUid, mk, rotationPassword);
+            const { wraps: newRecoveryWraps, codes } = await buildRecoveryWraps(mailboxUid, mk);
+            await rekey(mailboxUid, { wrappedKeys, masterKeyWraps: [passwordWrap, ...newRecoveryWraps], keys: mailbox.keys ?? [] });
+            // restapi's own rekey() can never accept a fresh escrow wrap (its validateMasterKeyWrap()
+            // always passes allowEscrow: false there) - it preserves this mailbox's existing escrow wrap
+            // verbatim instead, which now encrypts a master key nobody has any longer. Re-wrap it
+            // separately, via the same addMasterKeyWrap() path "Add escrow protection" above already
+            // uses, so rotating keys for an unrelated reason (lost device, password hygiene) doesn't
+            // silently drop real escrow coverage while this page keeps claiming it's still active. A
+            // failure here is reported via escrowError, not as a rotation failure - the rotation itself
+            // (password/recovery codes) already succeeded by this point and must not be rolled back for
+            // an escrow-specific hiccup the user can retry independently.
+            if (hasEscrowWrap) {
+                try {
+                    const escrowInfo = await getEscrowInfo(mailboxUid);
+                    const escrowWrap = await buildEscrowWrap(mk, escrowInfo.escrowScopeId, fromBase64(escrowInfo.publicKey.publicKey));
+                    await addMasterKeyWrap(mailboxUid, escrowWrap);
+                }
+                catch (err) {
+                    setEscrowError(err instanceof ApiRequestError
+                        ? err.message
+                        : 'Your keys were rotated, but escrow protection could not be re-established automatically. Use "Add escrow protection" below to restore it.');
+                }
+            }
+            // Refreshes this session's own cached keys against the new MK, via the password we just set -
+            // the underlying private key material didn't change, but the stale MK in memory would silently
+            // build wrong future wraps (e.g. a second "Add a password") if left as-is.
+            await unlockWithPassword(mailboxUid, mailbox.keys ?? [], rotationPassword);
+            setRotationPassword("");
+            setRotationConfirmPassword("");
+            setRecoveryCodesReason("rotate");
+            setNewRecoveryCodes(codes);
+            setCodesSaved(false);
+            await loadVault();
+        }
+        catch (err) {
+            setActionError(err instanceof ApiRequestError ? err.message : "Could not rotate your encryption keys.");
+        }
+        finally {
+            setRotating(false);
+        }
+    }
+    function handleDestroyKeysNow() {
+        destroyUnlockedKeys(mailboxUid);
+        setDestroyed(true);
+    }
+    if (destroyed) {
+        return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsx("div", { className: "max-w-xl", children: _jsx(Alert, { children: "Your encryption keys have been removed from this session. Reload the page (or open Mail again) to unlock them when you need to read or send encrypted mail." }) }) }));
+    }
+    if (newRecoveryCodes) {
+        return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Save your new recovery codes" }), _jsxs("p", { className: "text-sm text-text-muted mb-4", children: [recoveryCodesReason === "rotate"
+                                ? "Your keys have been rotated - every previous unlock method (password, recovery codes, or anything else on file) has stopped working. "
+                                : "Your old recovery codes no longer work. ", "If you lose your password, these new codes are the only way to recover your encrypted mail. Each code can be used once. Store them somewhere safe \u2014 they will not be shown again."] }), _jsx("ul", { className: "grid grid-cols-2 gap-2 mb-5 font-mono text-sm", children: newRecoveryCodes.map((code) => (_jsx("li", { className: "bg-surface-alt rounded-sm py-1.5 px-2 text-center", children: code }, code))) }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: codesSaved, onChange: (e) => setCodesSaved(e.target.checked) }), "I have saved these recovery codes in a safe place."] }), _jsx(Button, { type: "button", disabled: !codesSaved, onClick: () => setNewRecoveryCodes(null), className: "!w-auto", children: "Done" })] }) }));
+    }
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Encryption" }), _jsxs("p", { className: "text-sm text-text-muted", children: ["Manage how ", mailbox.displayName, " unlocks its encryption keys on this and other devices."] })] }), loadError && _jsx(Alert, { children: loadError }), actionError && _jsx(Alert, { children: actionError }), _jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Encryption keys" }), displayedKeys.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1 text-sm", children: displayedKeys.map((key) => (_jsxs("li", { className: "font-mono text-xs", children: [key.useType === "sign" ? "Signing" : "Encryption", " key: ", key.fingerprint, key.revokedAt && _jsx("span", { className: "text-danger", children: " (revoked)" })] }, key.fingerprint))) })) : (_jsx("p", { className: "text-sm text-text-muted", children: "No keys enrolled yet." }))] }), _jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Digital signatures" }), activeSigningKey ? (_jsx("p", { className: "text-sm text-text-muted", children: "Enabled \u2014 outgoing mail from this mailbox is signed with a publicly-trusted certificate." })) : signingStatus === "pending" ? (_jsx("p", { className: "text-sm text-text-muted", children: "Requested \u2014 a public certificate authority issues this via an automated email exchange, which can take a few minutes. You can leave this page; it finishes in the background and takes effect automatically once issued." })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs text-text-muted", children: "Lets recipients verify that mail from this mailbox is genuinely from you. Optional \u2014 encryption already works without it." }), signingError && _jsx(Alert, { children: signingError }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: signingStatus === "enrolling", disabled: signingStatus === "enrolling", onClick: handleEnrollSigning, children: "Enable digital signatures" })] }))] }), mailbox.escrowScopeId && (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Escrow" }), escrowError && _jsx(Alert, { children: escrowError }), hasEscrowWrap ? (_jsx("p", { className: "text-sm text-text-muted", children: "This mailbox is under legal/compliance escrow \u2014 an authorized holder in your organization can recover its encrypted mail if needed. This does not weaken protection against anyone else." })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs text-text-muted", children: "Your organization has assigned this mailbox to an escrow scope, but nothing has been protected yet \u2014 an authorized holder cannot recover this mailbox's encrypted mail until you complete this step. This does not weaken protection against anyone else." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: wrappingEscrow, disabled: wrappingEscrow, onClick: handleWrapEscrow, children: "Add escrow protection" })] }))] })), _jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Unlock methods" }), _jsxs("p", { className: "text-xs text-text-muted mb-3", children: ["Removing a method here stops it from being usable to unlock this mailbox going forward, but it is ", _jsx("strong", { children: "not" }), " full revocation \u2014 anyone who already captured a wrapped copy and knows its secret could still use it. For real revocation (e.g. after a lost device), rotate your keys entirely below instead."] }), vault && vault.masterKeyWraps.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-2", children: [...passwordWraps, ...recoveryWraps, ...otherWraps].map((wrap) => {
+                                const key = `${wrap.method}:${wrap.methodId ?? ""}`;
+                                return (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsx("span", { children: METHOD_LABELS[wrap.method] ?? wrap.method }), wrap.method !== "escrow" && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto text-danger", loading: removingMethod === key, disabled: removingMethod !== null, onClick: () => handleRemove(wrap), children: "Remove" }))] }, key));
+                            }) })) : (_jsx("p", { className: "text-sm text-text-muted", children: "No unlock methods on file." }))] }), _jsxs("form", { onSubmit: handleAddPassword, className: "flex flex-col gap-2", children: [_jsx("h2", { className: "text-sm font-semibold", children: "Add a password" }), _jsx("input", { type: "password", "aria-label": "New password", placeholder: "New password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: newPassword, onChange: (e) => setNewPassword(e.target.value), disabled: addingPassword, autoComplete: "new-password" }), _jsx("input", { type: "password", "aria-label": "Confirm new password", placeholder: "Confirm new password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: confirmNewPassword, onChange: (e) => setConfirmNewPassword(e.target.value), disabled: addingPassword, autoComplete: "new-password" }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: addingPassword, disabled: addingPassword, className: "!w-auto", children: "Add password" }) })] }), _jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Recovery codes" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Regenerating replaces all of your existing recovery codes \u2014 old ones stop working immediately." }), _jsx(Button, { type: "button", variant: "secondary", loading: regenerating, disabled: regenerating, onClick: handleRegenerateRecoveryCodes, className: "!w-auto", children: "Regenerate recovery codes" })] }), _jsxs("form", { onSubmit: handleRotateKeys, className: "flex flex-col gap-2 border-t border-border pt-6", children: [_jsx("h2", { className: "text-sm font-semibold", children: "Rotate keys" }), _jsx("p", { className: "text-xs text-text-muted mb-1", children: "Real revocation, for when a device or an unlock method may have been compromised. Re-protects your existing encryption key under a brand new master key - your signing/ encryption keypair itself doesn\u2019t change, so mail you\u2019ve already sent or received still decrypts normally. Every current unlock method (password, recovery codes, and anything else on file) stops working immediately; you\u2019ll set a new password and get new recovery codes below." }), _jsx("input", { type: "password", "aria-label": "New password for rotated keys", placeholder: "New password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: rotationPassword, onChange: (e) => setRotationPassword(e.target.value), disabled: rotating, autoComplete: "new-password" }), _jsx("input", { type: "password", "aria-label": "Confirm new password for rotated keys", placeholder: "Confirm new password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: rotationConfirmPassword, onChange: (e) => setRotationConfirmPassword(e.target.value), disabled: rotating, autoComplete: "new-password" }), _jsx("div", { children: _jsx(Button, { type: "submit", variant: "secondary", className: "!w-auto text-danger", loading: rotating, disabled: rotating, children: "Rotate keys now" }) })] }), _jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Session timeout" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Automatically destroys your unlocked keys on this device after this much time with no activity anywhere in the app - not just Mail or Settings. Applies the next time you open or reload the app." }), _jsx("select", { "aria-label": "Session timeout", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: idleTimeoutMinutes, onChange: handleIdleTimeoutChange, children: IDLE_TIMEOUT_OPTIONS_MINUTES.map((minutes) => (_jsx("option", { value: minutes, children: idleTimeoutLabel(minutes) }, minutes))) })] }), _jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "This session" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Removes your unlocked keys from this browser tab\u2019s memory right now, without affecting any other device. You\u2019ll be asked to unlock again the next time you read or send encrypted mail here." }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto text-danger", onClick: handleDestroyKeysNow, children: "Destroy keys on this device now" })] })] }) }));
+}

package/dist/apps/www/settings/labels/index.js

@@ -0,0 +1,95 @@
+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 { createLabel, deleteLabel, listLabels, updateLabel } from "@rapidmx/react-shared/mail/labelsApi.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.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 Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+export default function SettingsLabelsPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "labels", children: _jsx(LabelsContent, {}) }));
+}
+const DEFAULT_COLOR = "#6366f1";
+function LabelsContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [labels, setLabels] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // `editing === null` means the create form; otherwise the label currently being renamed/recolored.
+    const [editing, setEditing] = useState(null);
+    const [formOpen, setFormOpen] = useState(false);
+    const [formName, setFormName] = useState("");
+    const [formColor, setFormColor] = useState(DEFAULT_COLOR);
+    const [formError, setFormError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const [deleting, setDeleting] = useState(null);
+    const [deleteError, setDeleteError] = useState(null);
+    const [deleteBusy, setDeleteBusy] = useState(false);
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
+    // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    useEffect(() => {
+        listLabels(mailboxUid)
+            .then(setLabels)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load labels."))
+            .finally(() => setLoading(false));
+    }, [mailboxUid]);
+    function openCreateForm() {
+        setEditing(null);
+        setFormName("");
+        setFormColor(DEFAULT_COLOR);
+        setFormError(null);
+        setFormOpen(true);
+    }
+    function openEditForm(label) {
+        setEditing(label);
+        setFormName(label.name);
+        setFormColor(label.color ?? DEFAULT_COLOR);
+        setFormError(null);
+        setFormOpen(true);
+    }
+    async function handleSave() {
+        setSaving(true);
+        setFormError(null);
+        try {
+            if (editing) {
+                const updated = await updateLabel({ uid: editing.uid, version: editing.version, name: formName, color: formColor });
+                setLabels((prev) => prev.map((l) => (l.uid === updated.uid ? updated : l)));
+            }
+            else {
+                const created = await createLabel({ mailboxUid: mailboxUid, name: formName, color: formColor });
+                setLabels((prev) => [...prev, created]);
+            }
+            setFormOpen(false);
+        }
+        catch (err) {
+            setFormError(err instanceof ApiRequestError ? err.message : "Could not save this label.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    async function handleDelete() {
+        setDeleteBusy(true);
+        setDeleteError(null);
+        try {
+            await deleteLabel(deleting.uid, deleting.version);
+            setLabels((prev) => prev.filter((l) => l.uid !== deleting.uid));
+            setDeleting(null);
+        }
+        catch (err) {
+            setDeleteError(err instanceof ApiRequestError ? err.message : "Could not delete this label.");
+        }
+        finally {
+            setDeleteBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: [_jsxs("div", { className: "max-w-3xl", children: [_jsxs("div", { className: "flex items-center justify-between mb-5", children: [_jsx("h1", { className: "text-lg font-bold tracking-tight", children: "Labels" }), _jsx(Button, { type: "button", className: "!w-auto", onClick: openCreateForm, children: "+ New label" })] }), error && _jsx(Alert, { children: error }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : labels.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No labels yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: labels.map((label) => (_jsxs("li", { className: "flex items-center justify-between border border-border rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-3 h-3 rounded-full shrink-0", style: { backgroundColor: label.color ?? DEFAULT_COLOR }, "aria-hidden": "true" }), _jsx("span", { className: "text-sm font-semibold", children: label.name })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { type: "button", className: "text-primary-dark hover:underline font-medium text-sm", onClick: () => openEditForm(label), children: "Edit" }), _jsx("button", { type: "button", className: "text-danger hover:underline font-medium text-sm", onClick: () => {
+                                                setDeleting(label);
+                                                setDeleteError(null);
+                                            }, children: "Delete" })] })] }, label.uid))) }))] }), _jsxs(Modal, { open: formOpen, onClose: () => setFormOpen(false), title: editing ? "Edit label" : "New label", children: [formError && _jsx(Alert, { children: formError }), _jsx(FormField, { label: "Name", htmlFor: "label-name", children: _jsx("input", { id: "label-name", type: "text", value: formName, onChange: (e) => setFormName(e.target.value), className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface" }) }), _jsx(FormField, { label: "Color", htmlFor: "label-color", children: _jsx("input", { id: "label-color", type: "color", value: formColor, onChange: (e) => setFormColor(e.target.value), className: "h-9 w-16 rounded-md border border-border bg-surface" }) }), _jsxs("div", { className: "flex justify-end gap-2 mt-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setFormOpen(false), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: saving, disabled: saving || !formName.trim(), onClick: handleSave, children: "Save" })] })] }), _jsxs(Modal, { open: !!deleting, onClose: () => setDeleting(null), title: "Delete this label?", children: [deleteError && _jsx(Alert, { children: deleteError }), _jsxs("p", { className: "text-sm text-text-muted mb-4", children: ["This removes \u201C", deleting?.name, "\u201D from every message it's applied to. This can't be undone."] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setDeleting(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto", loading: deleteBusy, disabled: deleteBusy, onClick: handleDelete, children: "Delete label" })] })] })] }));
+}

package/dist/apps/www/settings/privacy/index.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createExportRequest, exportRequestDownloadUrl, listExportRequests, } from "@rapidmx/react-shared/mail/dataExportApi.js";
+import { listImportRequests, uploadMailboxImport, } from "@rapidmx/react-shared/mail/mailboxImportApi.js";
+import { createErasureRequest, listErasureRequests, } from "@rapidmx/react-shared/mail/erasureRequestApi.js";
+import { listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+import SettingsShell, { useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.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 NON_MAIL_FOLDER_TYPES = new Set(["calendar", "contacts", "tasks", "notes"]);
+function importFormatFromFilename(filename) {
+    return filename.toLowerCase().endsWith(".pst") ? "pst" : "mbox";
+}
+function statusBadgeClass(status) {
+    if (status === "failed" || status === "denied")
+        return "bg-danger-bg text-danger";
+    if (status === "pending" || status === "processing")
+        return "bg-surface-alt text-text-muted";
+    return "bg-success text-white";
+}
+export default function SettingsPrivacyPage(props) {
+    return (_jsx(SettingsShell, { ...props, active: "privacy", children: _jsx(PrivacyContent, {}) }));
+}
+function PrivacyContent() {
+    const { mailboxUid } = useSettingsShell();
+    return (_jsx("div", { className: "flex-1 min-w-0 overflow-y-auto p-6", children: _jsxs("div", { className: "max-w-xl flex flex-col gap-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-bold tracking-tight mb-1", children: "Privacy & Data" }), _jsx("p", { className: "text-sm text-text-muted", children: "Export or manage the data associated with this mailbox." })] }), _jsx(ExportSection, { mailboxUid: mailboxUid }), _jsx(ImportSection, { mailboxUid: mailboxUid }), _jsx(ErasureSection, {})] }) }));
+}
+function ExportSection({ mailboxUid }) {
+    const [requests, setRequests] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [format, setFormat] = useState("json");
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState(null);
+    // The create form below isn't gated behind `loading`, so a fast create-then-reload can resolve before
+    // the initial mount fetch does; without this guard the mount fetch's now-stale response would land
+    // last and silently revert the list. Only the most-recently-issued load's response is ever applied.
+    const loadSeq = useRef(0);
+    function loadRequests() {
+        const seq = ++loadSeq.current;
+        return listExportRequests()
+            .then((data) => {
+            if (seq === loadSeq.current)
+                setRequests(data);
+        })
+            .catch((err) => {
+            if (seq === loadSeq.current)
+                setLoadError(err instanceof ApiRequestError ? err.message : "Could not load your export requests.");
+        });
+    }
+    useEffect(() => {
+        loadRequests().finally(() => setLoading(false));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mailboxUid]);
+    async function handleCreate(e) {
+        e.preventDefault();
+        setCreateError(null);
+        setCreating(true);
+        try {
+            await createExportRequest({ format });
+            await loadRequests();
+        }
+        catch (err) {
+            setCreateError(err instanceof ApiRequestError ? err.message : "Could not start this export.");
+        }
+        finally {
+            setCreating(false);
+        }
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Export my data" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Requests a copy of this mailbox\u2019s messages, contacts, calendar, tasks, and notes. This runs in the background and can take a few minutes \u2014 check back here for a download link once it\u2019s ready." }), _jsxs("form", { onSubmit: handleCreate, className: "flex items-end gap-3 mb-5", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Format" }), _jsxs("select", { "aria-label": "Export format", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: format, onChange: (e) => setFormat(e.target.value), children: [_jsx("option", { value: "json", children: "JSON" }), _jsx("option", { value: "mbox", children: "Mbox" })] })] }), _jsx(Button, { type: "submit", variant: "secondary", className: "!w-auto", loading: creating, disabled: creating, children: "Request export" })] }), createError && _jsx(Alert, { children: createError }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : requests.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No export requests yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [request.format.toUpperCase(), " \u00B7 ", new Date(request.dateCreated).toLocaleString(), request.status === "failed" && request.errorMessage && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.errorMessage] }))] }), _jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: request.status }), request.status === "ready" && (_jsx("a", { href: exportRequestDownloadUrl(request.uid), className: "text-primary-dark hover:underline font-medium", children: "Download" }))] })] }, request.uid))) }))] }));
+}
+function ImportSection({ mailboxUid }) {
+    const [folders, setFolders] = useState([]);
+    const [targetFolderUid, setTargetFolderUid] = useState("");
+    const [requests, setRequests] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [uploading, setUploading] = useState(false);
+    const [uploadError, setUploadError] = useState(null);
+    const fileInputRef = useRef(null);
+    // Same stale-response guard as ExportSection's loadRequests() - the Upload button is enabled
+    // independently of this section's own `loading`, so a fast upload-then-reload can resolve before the
+    // initial mount fetch does.
+    const loadSeq = useRef(0);
+    function loadRequests() {
+        const seq = ++loadSeq.current;
+        return listImportRequests()
+            .then((data) => {
+            if (seq === loadSeq.current)
+                setRequests(data);
+        })
+            .catch((err) => {
+            if (seq === loadSeq.current)
+                setLoadError(err instanceof ApiRequestError ? err.message : "Could not load your import requests.");
+        });
+    }
+    useEffect(() => {
+        // Only reachable once mailboxUid is resolved - SettingsShell never renders this page's children
+        // until then, the same invariant every other settings page in this codebase already relies on.
+        Promise.all([
+            listFolders(mailboxUid).then((all) => {
+                const mailFolders = all.filter((f) => !NON_MAIL_FOLDER_TYPES.has(f.type));
+                setFolders(mailFolders);
+                setTargetFolderUid(mailFolders[0]?.uid ?? "");
+            }),
+            loadRequests(),
+        ]).finally(() => setLoading(false));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mailboxUid]);
+    function handleFileChange(e) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (!file || !targetFolderUid) {
+            return;
+        }
+        setUploadError(null);
+        setUploading(true);
+        uploadMailboxImport(file, { format: importFormatFromFilename(file.name), targetFolderUid })
+            .then(() => loadRequests())
+            .catch((err) => setUploadError(err instanceof ApiRequestError ? err.message : "Could not upload this file."))
+            .finally(() => setUploading(false));
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Import mail" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Uploads an Mbox or PST archive and imports every message it contains into the folder you choose below. This runs in the background \u2014 check back here for its progress." }), folders.length > 0 && (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm mb-3 max-w-xs", children: [_jsx("span", { className: "font-semibold", children: "Destination folder" }), _jsx("select", { "aria-label": "Destination folder", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: targetFolderUid, onChange: (e) => setTargetFolderUid(e.target.value), children: folders.map((folder) => (_jsx("option", { value: folder.uid, children: folder.name }, folder.uid))) })] })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto mb-3", loading: uploading, disabled: uploading || !targetFolderUid, onClick: () => fileInputRef.current?.click(), children: "Upload Mbox or PST file" }), _jsx("input", { ref: fileInputRef, type: "file", accept: ".mbox,.pst", "aria-label": "Upload mail archive", className: "hidden", onChange: handleFileChange }), uploadError && _jsx(Alert, { children: uploadError }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : requests.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "No import requests yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [request.format.toUpperCase(), " \u00B7 ", new Date(request.dateCreated).toLocaleString(), request.status === "completed" && (_jsxs("span", { className: "text-text-muted", children: [" ", "\u2014 ", request.importedCount ?? 0, " imported", request.failedCount ? `, ${request.failedCount} failed` : ""] })), request.status === "failed" && request.errorMessage && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.errorMessage] }))] }), _jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: request.status })] }, request.uid))) }))] }));
+}
+function ErasureSection() {
+    const [requests, setRequests] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState(null);
+    const [confirming, setConfirming] = useState(false);
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState(null);
+    function loadRequests() {
+        return listErasureRequests()
+            .then(setRequests)
+            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load your erasure requests."));
+    }
+    useEffect(() => {
+        loadRequests().finally(() => setLoading(false));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const hasPending = requests.some((request) => request.status === "pending");
+    function closeConfirm() {
+        setConfirming(false);
+    }
+    async function handleConfirm() {
+        setCreateError(null);
+        setCreating(true);
+        try {
+            await createErasureRequest();
+            setConfirming(false);
+            await loadRequests();
+        }
+        catch (err) {
+            setCreateError(err instanceof ApiRequestError ? err.message : "Could not submit this request.");
+        }
+        finally {
+            setCreating(false);
+        }
+    }
+    return (_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold mb-2", children: "Delete my account" }), _jsx("p", { className: "text-xs text-text-muted mb-3", children: "Permanently and irreversibly deletes this mailbox and everything in it, once a compliance administrator reviews and approves the request. There is no way to cancel a request or undo the deletion once it runs." }), loadError && _jsx(Alert, { children: loadError }), loading ? (_jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" })) : (_jsxs(_Fragment, { children: [requests.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2 mb-3", children: requests.map((request) => (_jsxs("li", { className: "flex items-center justify-between gap-3 text-sm py-1.5 px-3 bg-surface-alt rounded-sm", children: [_jsxs("span", { children: [new Date(request.dateCreated).toLocaleString(), request.status === "denied" && request.reason && (_jsxs("span", { className: "text-danger", children: [" \u2014 ", request.reason] }))] }), _jsx("span", { className: `text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill ${statusBadgeClass(request.status)}`, children: request.status })] }, request.uid))) })), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto !border-danger !text-danger hover:!border-danger hover:!text-danger", disabled: hasPending, onClick: () => setConfirming(true), children: "Request account erasure" })] })), _jsxs(Modal, { open: confirming, onClose: closeConfirm, title: "Delete my account", children: [_jsx("p", { className: "text-sm mb-5", children: "This permanently deletes this mailbox and everything in it \u2014 messages, contacts, calendar, tasks, and notes \u2014 once approved. This cannot be undone and cannot be cancelled once submitted." }), createError && _jsx(Alert, { children: createError }), _jsxs("div", { className: "flex gap-3 justify-end mt-5", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: creating, onClick: closeConfirm, children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", loading: creating, disabled: creating, onClick: handleConfirm, children: "Request erasure" })] })] })] }));
+}