@rapidmx/web-client 0.35.0 → 0.37.0

package/apps/shared/components/mail/compose/protectedContactSuggestions.ts

@@ -0,0 +1,121 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Recipient suggestions that include contacts zero-access encryption protects. Their names are sealed (restapi `specs/search.md` §3 *What
+ * It Covers*), so the server's contact search finds them only by address; this matches their opened names on the device and puts them
+ * first. Names are opened only - never the rest of a contact - and kept for ten minutes, and only while the mailbox is unlocked: its lock
+ * (and signing out) forgets them, as does a search that finds it locked. Reading them never holds up the server's suggestions: what isn't read by the time those arrive (plus
+ * `PROTECTED_NAMES_WAIT_MS`) is left to the next keystroke.
+ */
+import { type Contact, listContacts, PINNED_FINGERPRINT_PAGE_SIZE } from "../../../../../lib/contacts/contactsApi.js";
+import { getUnlockedKeys, subscribeKeySession } from "../../../../../lib/crypto/keySession.js";
+import {
+    type ContactSuggestionOptions,
+    fetchRecipientSuggestions,
+    mergeRecipientSuggestions,
+    RECIPIENT_SUGGESTION_DEFAULT_LIMIT,
+    type RecipientSuggestion,
+} from "../../../../../lib/mail/directoryApi.js";
+import { listFolders } from "../../../../../lib/mail/mailApi.js";
+import type { ApiClient } from "../../../../../lib/util/api.js";
+import { isProtectedRecord, openSealedRecords } from "../../../../../lib/zeroAccess/sealedRecords.js";
+import { onSigningOut } from "./composeFlushRegistry.js";
+
+/** How long a mailbox's protected contact names are kept: reading them is a crawl of the whole address book. */
+export const PROTECTED_NAMES_TTL_MS = 10 * 60_000;
+
+/** How long suggestions wait, once the server's have arrived, for the protected contacts still being read. */
+export const PROTECTED_NAMES_WAIT_MS = 250;
+
+/** At most this many contacts are read per contacts folder. */
+const MAX_PAGES = 20;
+
+const cache = new Map<string, { loadedAt: number; contacts: Promise<Contact[]> }>();
+
+/** Forgets every mailbox's names (signing out, or the test seam). */
+export function clearProtectedContactNames(): void {
+    cache.clear();
+}
+
+onSigningOut(clearProtectedContactNames);
+
+let watchingKeys = false;
+
+/** A mailbox's names go the moment it locks, so nothing opened outlives its key session. Subscribed with the first crawl, not on import. */
+function forgetOnLock(): void {
+    if (watchingKeys) {
+        return;
+    }
+    watchingKeys = true;
+    subscribeKeySession(({ mailboxUid, state }) => {
+        if (state === "locked") {
+            cache.delete(mailboxUid);
+        }
+    });
+}
+
+/** `mailboxUid`'s protected contacts with their names opened. */
+async function loadProtectedContacts(mailboxUid: string, client: ApiClient | undefined): Promise<Contact[]> {
+    const found: Contact[] = [];
+    // The folders side by side, each one's pages in turn.
+    await Promise.all(
+        (await listFolders(mailboxUid, client))
+            .filter((f) => f.type === "contacts")
+            .map(async (folder) => {
+                for (let page = 0; page < MAX_PAGES; page++) {
+                    const batch = await listContacts(folder.uid, { limit: PINNED_FINGERPRINT_PAGE_SIZE, page }, client);
+                    found.push(...batch.filter((contact) => isProtectedRecord(contact)));
+                    if (batch.length < PINNED_FINGERPRINT_PAGE_SIZE) {
+                        break;
+                    }
+                }
+            }),
+    );
+    return openSealedRecords(found, ["displayName"]);
+}
+
+function protectedContacts(mailboxUid: string, client: ApiClient | undefined): Promise<Contact[]> {
+    let entry = cache.get(mailboxUid);
+    if (!entry || Date.now() - entry.loadedAt > PROTECTED_NAMES_TTL_MS) {
+        forgetOnLock();
+        const created = { loadedAt: Date.now(), contacts: loadProtectedContacts(mailboxUid, client) };
+        created.contacts.catch(() => cache.delete(mailboxUid));
+        cache.set(mailboxUid, created);
+        entry = created;
+    }
+    return entry.contacts;
+}
+
+/** Every address of the protected contacts of `mailboxUid` whose opened name contains `query` (case-insensitively). */
+export async function searchProtectedContactNames(mailboxUid: string, query: string, client?: ApiClient): Promise<RecipientSuggestion[]> {
+    const wanted = query.trim().toLowerCase();
+    if (wanted.length < 2) {
+        return [];
+    }
+    if (!getUnlockedKeys(mailboxUid)?.zeroAccessKeys?.length) {
+        // Locked: nothing opened is kept, and nothing could be opened now.
+        cache.delete(mailboxUid);
+        return [];
+    }
+    return (await protectedContacts(mailboxUid, client))
+        .filter((contact) => contact.displayName.toLowerCase().includes(wanted))
+        .flatMap((contact) => contact.emails.map((email) => ({ displayName: contact.displayName, address: email.address, kind: "contact" as const })));
+}
+
+/** `fetchRecipientSuggestions()` with the composing mailbox's protected contacts matched by name on the device, first - those read by the
+ * time the server's suggestions are in (plus `PROTECTED_NAMES_WAIT_MS`): a first search of a large address book shows the server's alone
+ * rather than waiting for the crawl, which goes on for the next keystroke. A failure to read them only leaves them out. */
+export async function fetchSuggestionsWithProtectedContacts(
+    query: string,
+    options: ContactSuggestionOptions = {},
+    client?: ApiClient,
+): Promise<RecipientSuggestion[]> {
+    const local: Promise<RecipientSuggestion[]> = options.mailboxUid ? searchProtectedContactNames(options.mailboxUid, query, client).catch(() => []) : Promise.resolve([]);
+    const server = await fetchRecipientSuggestions(query, options, client);
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const ready = await Promise.race([local, new Promise<RecipientSuggestion[]>((resolve) => (timer = setTimeout(() => resolve([]), PROTECTED_NAMES_WAIT_MS)))]);
+    clearTimeout(timer);
+    return mergeRecipientSuggestions(ready, server, options.limit ?? RECIPIENT_SUGGESTION_DEFAULT_LIMIT);
+}

package/apps/shared/components/mail/compose/quotedBody.ts

@@ -94,10 +94,10 @@ function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
 /**
  * Starts fetching what a Reply/Forward of `message` will quote, without waiting for the click - called when the pointer or
  * keyboard reaches a Reply/Reply All/Forward button - so the request is usually already answered when it is clicked.
- * Nothing to fetch for an encrypted message (`loadOriginalMessage()` never asks the server for one's body).
+ * Nothing to fetch for an encrypted or zero-access message (`loadOriginalMessage()` never asks the server for one's body).
  */
 export function prefetchOriginalMessage(message: Message, client?: ApiClient): void {
-    if (!message.encrypted) {
+    if (!message.encrypted && !message.zeroAccess) {
         void fetchContentHtml(message.uid, client);
     }
 }
@@ -201,7 +201,8 @@ export async function loadOriginalMessage(
         ? [...headerRecipients(protectedHeaders.to, "to"), ...headerRecipients(protectedHeaders.cc, "cc")]
         : [];
     const result: OriginalMessage = { body: recovered ?? {}, ...(protectedRecipients.length > 0 ? { recipients: protectedRecipients } : {}) };
-    if (message.encrypted) {
+    // The server holds only ciphertext of an encrypted or zero-access message: its body is what `security` decrypted, or nothing.
+    if (message.encrypted || message.zeroAccess) {
         return result;
     }
     let needsRaw = !!options.recipients && result.recipients === undefined;

package/apps/shared/components/mail/invite/inviteStore.ts

@@ -4,6 +4,8 @@
 ///////////////////////////////////////////////////////////////////////////////
 import { useCallback, useEffect, useReducer } from "react";
 import { MessageInvite, getMessageInvite } from "../../../../../lib/calendar/inviteApi.js";
+import { clearSealedInvites, onSealedInvitesForgotten, sealedInviteCalendar } from "../../../../../lib/calendar/sealedInvites.js";
+import { onSigningOut } from "../compose/composeFlushRegistry.js";
 import { ApiClient } from "../../../../../lib/util/api.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
 
@@ -51,7 +53,9 @@ function normalize(invite: MessageInvite | null): MessageInvite | null {
  */
 export function loadInvite(uid: string, client?: ApiClient): Promise<MessageInvite | null> {
     const existing = entries.get(uid);
-    if (existing && (existing.value === undefined || Date.now() - existing.at < INVITE_TTL_MS)) {
+    // "No invitation" for a zero-access message is asked again once its calendar file has been decrypted here (the list asks before that).
+    const stale = existing?.value === null && sealedInviteCalendar(uid) !== undefined;
+    if (existing && !stale && (existing.value === undefined || Date.now() - existing.at < INVITE_TTL_MS)) {
         return existing.promise;
     }
     const entry: Entry = {
@@ -120,3 +124,15 @@ export function useMessageInvite(uid: string, enabled = true): { invite: Message
     const value = enabled ? entries.get(uid)?.value : undefined;
     return { invite: value ?? null, settled: value !== undefined, setInvite };
 }
+
+onSigningOut(clearSealedInvites);
+onSigningOut(clearInviteCache);
+// What the server read from a zero-access message's decrypted calendar file (its summary, description) goes with the file when the mailbox
+// locks: mounted cards, chips and popovers draw nothing until it is read again.
+onSealedInvitesForgotten((uids) => {
+    for (const uid of uids) {
+        if (entries.delete(uid)) {
+            notify(uid);
+        }
+    }
+});

package/apps/shared/components/mail/layout/MailShell.tsx

@@ -15,6 +15,7 @@ import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";
 import LocalIndexLifecycle from "../../../search/LocalIndexLifecycle.js";
+import SharedMailboxKeyManager from "../../layout/SharedMailboxKeyManager.js";
 import { LiveUpdates, NO_LIVE_UPDATES } from "../../../mail/useMailLiveUpdates.js";
 import { MAILBOX_LIST_LIMIT, MailConnectionContext, useMailConnection } from "../../../mail/useMailConnection.js";
 import { folderRows } from "../../../mail/folderTree.js";
@@ -538,6 +539,7 @@ export default function MailShell({
             // the impersonated user's own mailbox: an administrator must never choose its password/recovery codes.
             canProvision={!impersonating && activeMailbox?.ownerUserUid === userUid}
         >
+            <SharedMailboxKeyManager mailboxes={mailboxes} userUid={userUid} />
             <LocalIndexLifecycle
                 mailboxUid={activeMailboxUid}
                 mailboxKeys={activeMailbox?.keys}

package/apps/shared/components/mail/pinnedSigners.ts

@@ -28,6 +28,7 @@ import {
     PINNED_FINGERPRINT_PAGE_SIZE,
     SignerKeyState,
     listContacts,
+    pinnedOpenPgpKeysFor,
     pinnedSigningFingerprintsFor,
     signerKeyStateFor,
 } from "../../../../lib/contacts/contactsApi.js";
@@ -35,6 +36,7 @@ import { keyPinnedSince } from "../contacts/contactKeys.js";
 import { listFolders } from "../../../../lib/mail/mailApi.js";
 import { subscribeKeySession } from "../../../../lib/crypto/keySession.js";
 import type { ApiClient } from "../../../../lib/util/api.js";
+import type { SignerPins } from "../../../../lib/crypto/messageSecurity.js";
 
 /** How long one mailbox's loaded contact list is reused before it is fetched again. */
 export const CONTACTS_CACHE_TTL_MS = 60_000;
@@ -120,12 +122,21 @@ export async function getPinnedSignerFingerprints(mailboxUid: string, address: s
     return pinnedSigningFingerprintsFor(await cachedMailboxContacts(mailboxUid, client), address);
 }
 
+/** The sender `address`'s pinned signing fingerprints and pinned OpenPGP certificates from `mailboxUid`'s contacts - what
+ * `evaluateMessageSecurity()` takes as `SignerPins`. Rejects if they can't be loaded. */
+export async function getPinnedSigners(mailboxUid: string, address: string, client?: ApiClient): Promise<SignerPins> {
+    const contacts = await cachedMailboxContacts(mailboxUid, client);
+    return { fingerprints: pinnedSigningFingerprintsFor(contacts, address), openPgpKeys: pinnedOpenPgpKeysFor(contacts, address) };
+}
+
 /** A sender's signing-key state (`signerKeyStateFor()`) plus what a key-changed notice needs to show and link. */
 export interface SenderKeyState extends SignerKeyState {
     /** The contact holding the first pinned signing key, else the one holding the conflict, else the first match. */
     contactUid?: string;
     /** When the first pinned signing key started being trusted - see `keyPinnedSince()`. */
     pinnedSince?: number;
+    /** When the first pinned OpenPGP certificate (`openPgp[0]`) started being trusted. */
+    openPgpPinnedSince?: number;
 }
 
 /** The sender `address`'s signing-key state from `mailboxUid`'s (cached) contacts, for a "signing key changed" comparison
@@ -142,9 +153,12 @@ export async function getSignerKeyState(mailboxUid: string, address: string, cli
         holder ??
         matching.find((candidate) => (candidate.keyConflicts ?? []).some((conflict) => conflict.useType === "sign")) ??
         matching[0];
+    const openPgpKey = state.openPgp?.[0];
+    const openPgpHolder = openPgpKey && matching.find((candidate) => (candidate.keys ?? []).includes(openPgpKey));
     return {
         ...state,
         ...(contact ? { contactUid: contact.uid } : {}),
         ...(holder ? { pinnedSince: keyPinnedSince(holder, pinned) } : {}),
+        ...(openPgpHolder ? { openPgpPinnedSince: keyPinnedSince(openPgpHolder, openPgpKey) } : {}),
     };
 }

package/apps/shared/components/mail/reading/conversationPrint.ts

@@ -39,13 +39,13 @@ export async function olderConversationMessages(message: Message, client?: ApiCl
 }
 
 /**
- * One earlier message of a conversation as it prints: the body the reading pane would show. An encrypted one is decrypted here when this device has
- * its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext. `client` is the explicit `ApiClient` every
+ * One earlier message of a conversation as it prints: the body the reading pane would show. An encrypted one - end to end, or sealed to its mailbox's
+ * zero-access key, whose subject and body the server doesn't hold readable - is decrypted here when this device has its mailbox's keys unlocked; when it can't be, it prints a line saying so rather than the ciphertext. `client` is the explicit `ApiClient` every
  * request goes through when given (see `useApiClient()`); without one they are the cookie requests they always were.
  */
 export async function printableOlderMessage(message: Message, client?: ApiClient): Promise<PrintableMessage> {
     const attachments = await listAttachments(message.folderUid, message.uid, client).catch(() => []);
-    if (message.encrypted) {
+    if (message.encrypted || message.zeroAccess) {
         const unlocked = getUnlockedKeys(message.mailboxUid);
         if (unlocked) {
             const { evaluateMessageSecurity } = await import("../../../../../lib/crypto/messageSecurity.js");

package/apps/shared/components/mail/reading/useMessageActions.ts

@@ -28,6 +28,7 @@ import { resolveFolderOfType } from "../../../mail/folderOfType.js";
 import { setReadStateMany } from "../../../mail/messageReadState.js";
 import { usePermanentDelete } from "../../../mail/usePermanentDelete.js";
 import { reportFolderName, reportNotice, reportNoun, reportTitle, senderListsHref } from "../../../mail/reportNotices.js";
+import { zeroAccessSourceBase64 } from "../../../mail/zeroAccessSource.js";
 import { blockSender, neverBlockSender, normalizeAddresses, removeSenderRule } from "../../../mail/senderBlocking.js";
 import { notifyApiError } from "../../../notifications/apiErrors.js";
 import { notify } from "../../../notifications/store.js";
@@ -190,7 +191,9 @@ export function useMessageActions(params: MessageActionsParams): MessageActions
         await exclusive(async () => {
             let result: MessageReportResult;
             try {
-                result = await reportMessage(message.uid, kind, { alwaysTrustSender }, client);
+                // The server holds only the sealed copy of a zero-access message: its spam filter learns from the source decrypted here.
+                const rawMessage: string | undefined = await zeroAccessSourceBase64(message, client);
+                result = await reportMessage(message.uid, kind, { alwaysTrustSender, ...(rawMessage ? { rawMessage } : {}) }, client);
             } catch (err) {
                 if (isNotFound(err)) {
                     await reportByMoving(kind, alwaysTrustSender);

package/apps/shared/components/settings/KeyExportSetting.tsx

@@ -0,0 +1,173 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useState } from "react";
+import { exportKeysAsPkcs12, MIN_EXPORT_PASSPHRASE_LENGTH, NothingToExportError } from "../../../../lib/crypto/keyExport.js";
+import type { Mailbox } from "../../../../lib/mail/mailApi.js";
+import { ApiRequestError } from "../../../../lib/util/api.js";
+import { useApiClient } from "../../../../lib/util/apiClientContext.js";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import Button from "../../../../lib/components/buttons/Button.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import PolicyLockedNotice from "./PolicyLockedNotice.js";
+
+export interface KeyExportSettingProps {
+    mailbox: Mailbox;
+    /** The caller owns the mailbox and isn't impersonating: restapi records an export only for the owner. */
+    canManage: boolean;
+}
+
+const INPUT_CLASS = "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface";
+
+/** How long the file's object URL is kept, since some browsers (WebKit, older Firefox) still read it after the click returns. */
+const DOWNLOAD_URL_LIFETIME_MS = 60_000;
+
+/** Hands `bytes` to the browser as a file download. */
+function saveFile(bytes: Uint8Array, filename: string): void {
+    const url = URL.createObjectURL(new Blob([bytes as BlobPart], { type: "application/x-pkcs12" }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), DOWNLOAD_URL_LIFETIME_MS);
+}
+
+/**
+ * "Export keys for Outlook/phone" (`lib/crypto/keyExport.ts`): a passphrase-protected `.p12` with the mailbox's zero-access
+ * and end-to-end encryption keys - and its signing key, if the user ticks the box - so a mail app that isn't RapidMX can read
+ * mail stored encrypted. Asks for the master password again however long the mailbox has been unlocked.
+ */
+export default function KeyExportSetting({ mailbox, canManage }: KeyExportSettingProps) {
+    const client = useApiClient();
+    const [open, setOpen] = useState(false);
+    const [password, setPassword] = useState("");
+    const [passphrase, setPassphrase] = useState("");
+    const [confirmPassphrase, setConfirmPassphrase] = useState("");
+    const [includeSigningKey, setIncludeSigningKey] = useState(false);
+    const [exporting, setExporting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    function reset() {
+        setOpen(false);
+        setPassword("");
+        setPassphrase("");
+        setConfirmPassphrase("");
+        setIncludeSigningKey(false);
+        setError(null);
+    }
+
+    async function handleExport(e: React.FormEvent) {
+        e.preventDefault();
+        if (passphrase.length < MIN_EXPORT_PASSPHRASE_LENGTH) {
+            setError(`The file's passphrase must be at least ${MIN_EXPORT_PASSPHRASE_LENGTH} characters.`);
+            return;
+        }
+        if (passphrase !== confirmPassphrase) {
+            setError("The passphrases don't match.");
+            return;
+        }
+        setExporting(true);
+        setError(null);
+        try {
+            const result = await exportKeysAsPkcs12(
+                {
+                    mailboxUid: mailbox.uid,
+                    mailboxAddress: mailbox.primarySmtpAddress,
+                    mailboxKeys: mailbox.keys ?? [],
+                    masterPassword: password,
+                    exportPassphrase: passphrase,
+                    includeSigningKey,
+                },
+                client,
+            );
+            saveFile(result.pkcs12, `${mailbox.primarySmtpAddress}-keys.p12`);
+            reset();
+        } catch (err) {
+            if (err instanceof ApiRequestError) {
+                notifyApiError(err, "Couldn't export your keys");
+            } else if (err instanceof NothingToExportError || (err instanceof Error && err.message.startsWith("This mailbox has no password"))) {
+                setError(err.message);
+            } else {
+                setError("Incorrect password.");
+            }
+        } finally {
+            setExporting(false);
+        }
+    }
+
+    return (
+        <div>
+            <h2 className="text-sm font-semibold mb-2">Export keys for Outlook or a phone</h2>
+            <p className="text-sm text-text-muted mb-2">
+                Mail apps other than RapidMX need your keys to read encrypted mail. The exported file holds your zero-access and
+                end-to-end encryption keys, protected by a passphrase you choose. Anyone with the file and its passphrase can read
+                all of this mailbox&rsquo;s mail, so keep it safe and delete it once it&rsquo;s installed.
+            </p>
+            {!canManage ? (
+                <PolicyLockedNotice>Only this mailbox&rsquo;s owner, signed in as themselves, can export its keys.</PolicyLockedNotice>
+            ) : !open ? (
+                <Button type="button" variant="secondary" className="!w-auto" onClick={() => setOpen(true)}>
+                    Export keys&hellip;
+                </Button>
+            ) : (
+                <form onSubmit={(e) => void handleExport(e)} className="flex flex-col gap-2">
+                    <input
+                        type="password"
+                        aria-label="Encryption password"
+                        placeholder="Encryption password"
+                        className={INPUT_CLASS}
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        disabled={exporting}
+                        autoComplete="current-password"
+                    />
+                    <input
+                        type="password"
+                        aria-label="File passphrase"
+                        placeholder={`File passphrase (at least ${MIN_EXPORT_PASSPHRASE_LENGTH} characters)`}
+                        className={INPUT_CLASS}
+                        value={passphrase}
+                        onChange={(e) => setPassphrase(e.target.value)}
+                        disabled={exporting}
+                        autoComplete="new-password"
+                    />
+                    <input
+                        type="password"
+                        aria-label="Confirm file passphrase"
+                        placeholder="Confirm file passphrase"
+                        className={INPUT_CLASS}
+                        value={confirmPassphrase}
+                        onChange={(e) => setConfirmPassphrase(e.target.value)}
+                        disabled={exporting}
+                        autoComplete="new-password"
+                    />
+                    <label className="flex items-start gap-2 text-sm">
+                        <input
+                            type="checkbox"
+                            className="mt-1"
+                            checked={includeSigningKey}
+                            onChange={(e) => setIncludeSigningKey(e.target.checked)}
+                            disabled={exporting}
+                        />
+                        <span>
+                            <span className="font-semibold block">Include my signing key</span>
+                            <span className="text-xs text-text-muted">Only if that app will sign mail you send. Anyone with the file could sign as you.</span>
+                        </span>
+                    </label>
+                    {error && <Alert>{error}</Alert>}
+                    <div className="flex gap-2">
+                        <Button type="submit" className="!w-auto" disabled={exporting || !password || !passphrase}>
+                            {exporting ? "Exporting…" : "Export"}
+                        </Button>
+                        <Button type="button" variant="secondary" className="!w-auto" onClick={reset} disabled={exporting}>
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            )}
+        </div>
+    );
+}