@rapidmx/web-client 0.4.0 → 0.5.0

package/dist/apps/shared/components/layout/UnlockPromptProvider.js

@@ -1,14 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { createContext, useCallback, useContext, useState } from "react";
-import { getUnlockedKeys, unlockWithPassword } from "@rapidmx/react-shared/crypto/keySession.js";
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { getUnlockedKeys, unlockWithPassword, UnopenableEncryptionKeyError, } from "@rapidmx/react-shared/crypto/keySession.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.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 { RECOVERY_CODE_ERROR, RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock, } from "./RecoveryCodeUnlock.js";
+/** Shown instead of "Incorrect password" when the password was right but the mailbox's encryption key itself
+ * won't open (`UnopenableEncryptionKeyError`) - retrying can't fix that, so it must not read as a typo. */
+export const UNOPENABLE_ENCRYPTION_KEY_MESSAGE = "Your password is correct, but one of your keys couldn't be opened, so encrypted mail can't be read or sent from this mailbox. Trying again won't help - contact support.";
+/** `UNOPENABLE_ENCRYPTION_KEY_MESSAGE`'s counterpart for a recovery-code unlock. */
+export const UNOPENABLE_ENCRYPTION_KEY_RECOVERY_MESSAGE = "Your recovery code is correct, but one of your keys couldn't be opened, so encrypted mail can't be read or sent from this mailbox. Trying again won't help - contact support.";
+/** The error text for a failed `unlockWithPassword()` (or, with `method` `"recovery"`, `unlockWithRecoveryCode()`). */
+export function unlockErrorMessage(err, method = "password") {
+    // Deliberately generic otherwise - see `unlockWithPassword()`'s own doc comment: a wrong password and a
+    // missing password wrap fail the same way, and telling them apart would help someone guessing passwords.
+    if (method === "recovery") {
+        return err instanceof UnopenableEncryptionKeyError ? UNOPENABLE_ENCRYPTION_KEY_RECOVERY_MESSAGE : RECOVERY_CODE_ERROR;
+    }
+    return err instanceof UnopenableEncryptionKeyError ? UNOPENABLE_ENCRYPTION_KEY_MESSAGE : "Incorrect password.";
+}
+/**
+ * A non-blocking notice after an unlock that succeeded without some signing keys (`UnlockResult.unopenableKeys`):
+ * mail can still be read, but not signed with those keys on this device.
+ */
+export function UnopenableKeysNotice({ fingerprints, onDismiss }) {
+    return (_jsxs("div", { role: "status", className: "fixed bottom-4 right-4 z-50 max-w-sm bg-surface border border-border rounded-md p-3 text-sm shadow-lg flex flex-col gap-2", children: [_jsxs("p", { children: ["Unlocked, but ", fingerprints.length === 1 ? "one of your signing keys" : `${fingerprints.length} of your signing keys`, " ", "couldn\u2019t be opened, so mail can\u2019t be signed with ", fingerprints.length === 1 ? "it" : "them", ". Contact support."] }), _jsx("p", { className: "font-mono text-xs break-all text-text-muted", children: fingerprints.join(", ") }), _jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: onDismiss, children: "Dismiss" }) })] }));
+}
 const UnlockPromptContext = createContext(null);
 /**
  * The on-demand counterpart to `KeyEnrollmentGate`'s blocking, first-sign-in-only provisioning flow.
@@ -23,23 +45,45 @@ const UnlockPromptContext = createContext(null);
  * `false` for exactly this reason.
  */
 export function UnlockPromptProvider({ children }) {
-    const [pending, setPending] = useState(null);
+    const [pending, setPendingState] = useState(null);
+    // Mirrors `pending` synchronously, so two requests issued in the same tick see each other.
+    const pendingRef = useRef(null);
     const [password, setPassword] = useState("");
     const [error, setError] = useState(null);
     const [unlocking, setUnlocking] = useState(false);
+    const [unopenableKeys, setUnopenableKeys] = useState(null);
+    const [mode, setMode] = useState("password");
+    const [code, setCode] = useState("");
+    // The steps after a recovery-code unlock (new password, using up the code). Shown only once the waiters are
+    // already settled - see `RecoveryCodeUnlock.tsx`.
+    const [followUp, setFollowUp] = useState(null);
+    function setPending(next) {
+        pendingRef.current = next;
+        setPendingState(next);
+    }
     const requestUnlock = useCallback((mailboxUid, mailboxKeys) => {
         const existing = getUnlockedKeys(mailboxUid);
         if (existing) {
             return Promise.resolve(existing);
         }
         return new Promise((resolve, reject) => {
+            const current = pendingRef.current;
+            if (current?.mailboxUid === mailboxUid) {
+                current.waiters.push({ resolve, reject });
+                return;
+            }
+            // A different mailbox's dialog is replacing this one - settle its callers rather than leaving
+            // their promises hanging forever.
+            current?.waiters.forEach((waiter) => waiter.reject(new Error("Unlock superseded by another request.")));
             setPassword("");
+            setCode("");
+            setMode("password");
             setError(null);
-            setPending({ mailboxUid, mailboxKeys, resolve, reject });
+            setPending({ mailboxUid, mailboxKeys, waiters: [{ resolve, reject }] });
         });
     }, []);
     function handleCancel() {
-        pending?.reject(new Error("Unlock cancelled."));
+        pendingRef.current?.waiters.forEach((waiter) => waiter.reject(new Error("Unlock cancelled.")));
         setPending(null);
     }
     async function handleSubmit(e) {
@@ -49,22 +93,37 @@ export function UnlockPromptProvider({ children }) {
         setError(null);
         setUnlocking(true);
         try {
-            await unlockWithPassword(request.mailboxUid, request.mailboxKeys, password);
-            // Always reachable: unlockWithPassword() just populated keySession.ts's session store for
+            const result = await (mode === "recovery"
+                ? startRecoveryUnlock(request.mailboxUid, request.mailboxKeys, code)
+                : unlockWithPassword(request.mailboxUid, request.mailboxKeys, password));
+            const recovery = mode === "recovery" ? result : null;
+            // Always reachable: the unlock just populated keySession.ts's session store for
             // this exact mailboxUid, or threw before we get here.
             const unlocked = getUnlockedKeys(request.mailboxUid);
-            request.resolve(unlocked);
-            setPending(null);
+            request.waiters.forEach((waiter) => waiter.resolve(unlocked));
+            if (pendingRef.current === request) {
+                setPending(null);
+            }
+            if (result.unopenableKeys.length > 0) {
+                setUnopenableKeys(result.unopenableKeys);
+            }
+            setCode("");
+            setFollowUp(recovery);
         }
-        catch {
-            // Deliberately generic - see KeyEnrollmentGate's identical handleUnlock() for why.
-            setError("Incorrect password.");
+        catch (err) {
+            setError(unlockErrorMessage(err, mode));
         }
         finally {
             setUnlocking(false);
         }
     }
-    return (_jsxs(UnlockPromptContext.Provider, { value: { requestUnlock }, children: [children, _jsxs(Modal, { open: !!pending, onClose: handleCancel, title: "Unlock your mailbox", children: [_jsx("p", { className: "text-sm text-text-muted mb-5", children: "Enter your encryption password to continue." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(FormField, { label: "Encryption password", htmlFor: "unlock-prompt-password", children: _jsx("input", { id: "unlock-prompt-password", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: password, onChange: (e) => setPassword(e.target.value), disabled: unlocking, autoComplete: "current-password", autoFocus: true }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "submit", loading: unlocking, disabled: unlocking, children: "Unlock" }), _jsx(Button, { type: "button", variant: "secondary", onClick: handleCancel, disabled: unlocking, children: "Cancel" })] })] })] })] }));
+    function handleModeChange(next) {
+        setMode(next);
+        setError(null);
+    }
+    return (_jsxs(UnlockPromptContext.Provider, { value: { requestUnlock }, children: [children, unopenableKeys && _jsx(UnopenableKeysNotice, { fingerprints: unopenableKeys, onDismiss: () => setUnopenableKeys(null) }), followUp && (_jsx(RecoveryFollowUpModal, { followUp: followUp, open: !pending, onDone: () => setFollowUp(null) }, `${followUp.mailboxUid}:${followUp.recoveryMethodId}`)), _jsxs(Modal, { open: !!pending, onClose: handleCancel, title: "Unlock your mailbox", children: [_jsx("p", { className: "text-sm text-text-muted mb-5", children: mode === "password"
+                            ? "Enter your encryption password to continue."
+                            : "Enter one of your recovery codes to continue. Each code works once." }), error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, children: [mode === "password" ? (_jsx(FormField, { label: "Encryption password", htmlFor: "unlock-prompt-password", children: _jsx("input", { id: "unlock-prompt-password", type: "password", className: "w-full text-sm border border-border rounded-sm py-1.5 px-2 bg-surface", value: password, onChange: (e) => setPassword(e.target.value), disabled: unlocking, autoComplete: "current-password", autoFocus: true }) })) : (_jsx(FormField, { label: "Recovery code", htmlFor: "unlock-prompt-recovery-code", children: _jsx("input", { id: "unlock-prompt-recovery-code", type: "text", className: "w-full text-sm font-mono border border-border rounded-sm py-1.5 px-2 bg-surface", value: code, onChange: (e) => setCode(e.target.value), disabled: unlocking, autoComplete: "off", autoCapitalize: "characters", spellCheck: false, autoFocus: true }) })), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "submit", loading: unlocking, disabled: unlocking, children: "Unlock" }), _jsx(Button, { type: "button", variant: "secondary", onClick: handleCancel, disabled: unlocking, children: "Cancel" })] })] }), _jsx("div", { className: "mt-3", children: _jsx(UnlockModeToggle, { mode: mode, disabled: unlocking, onChange: handleModeChange }) })] })] }));
 }
 /** Throws outside an `<UnlockPromptProvider>` - every app shell mounts one (see `AppShell.tsx`), so
  * reaching this from any real page is a wiring bug, not a runtime condition to degrade gracefully from. */

package/dist/apps/shared/components/mail/ConversationThreadPane.js

@@ -3,7 +3,7 @@ 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 { useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMessage, listAttachments, setMessageRead } from "@rapidmx/react-shared/mail/mailApi.js";
 import MessageDetailPane from "./MessageDetailPane.js";
@@ -22,16 +22,31 @@ export default function ConversationThreadPane({ conversation, folders, labels }
     const [expandedUids, setExpandedUids] = useState(new Set());
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
+    // Bumped on every conversation switch - any in-flight load/attachments/mark-read response carrying an
+    // older generation belongs to a superseded conversation and is dropped rather than applied.
+    const generationRef = useRef(0);
+    // Message uids a mark-read / attachments request has already been issued for in the current
+    // generation, so re-running the effect below (every `messages`/`expandedUids` change) while one is
+    // still in flight never fires a duplicate - which for mark-read would also carry a stale `version`.
+    const markReadRequestedRef = useRef(new Set());
+    const attachmentsRequestedRef = useRef(new Set());
     useEffect(() => {
+        const generation = ++generationRef.current;
+        markReadRequestedRef.current = new Set();
+        attachmentsRequestedRef.current = new Set();
+        setMessages({});
+        setAttachmentsByUid({});
+        setExpandedUids(new Set());
         if (!conversation) {
-            setMessages({});
-            setExpandedUids(new Set());
+            setLoading(false);
             return;
         }
         setLoading(true);
         setError(null);
         Promise.all(conversation.messageUids.map((uid) => getMessage(uid)))
             .then((loaded) => {
+            if (generation !== generationRef.current)
+                return;
             setMessages(Object.fromEntries(loaded.map((m) => [m.uid, m])));
             // `messageUids` always has at least one entry — a `ConversationSummary` only ever
             // exists because it was grouped from real messages (see
@@ -39,32 +54,55 @@ export default function ConversationThreadPane({ conversation, folders, labels }
             const latestUid = conversation.messageUids[conversation.messageUids.length - 1];
             setExpandedUids(new Set([latestUid]));
         })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this conversation."))
-            .finally(() => setLoading(false));
+            .catch((err) => {
+            if (generation !== generationRef.current)
+                return;
+            setError(err instanceof ApiRequestError ? err.message : "Could not load this conversation.");
+        })
+            .finally(() => {
+            if (generation === generationRef.current)
+                setLoading(false);
+        });
     }, [conversation?.conversationId]);
     // Lazily loads attachments and marks-as-read only for messages the reader has actually expanded —
     // mirrors `mailDetailHooks.ts`'s `useMessageAttachments`/`useMarkMessageRead`, reimplemented here
     // (rather than called in a loop, which the rules of hooks don't allow) since a thread can expand
     // more than one message at once, unlike the single-selected-message case those hooks were built for.
     useEffect(() => {
+        const generation = generationRef.current;
         for (const uid of expandedUids) {
             const message = messages[uid];
             if (!message)
                 continue;
-            if (message.hasAttachments && !attachmentsByUid[uid]) {
+            if (message.hasAttachments && !attachmentsRequestedRef.current.has(uid)) {
+                attachmentsRequestedRef.current.add(uid);
                 listAttachments(message.folderUid, uid)
-                    .then((loaded) => setAttachmentsByUid((prev) => ({ ...prev, [uid]: loaded })))
+                    .then((loaded) => {
+                    if (generation === generationRef.current) {
+                        setAttachmentsByUid((prev) => ({ ...prev, [uid]: loaded }));
+                    }
+                })
                     .catch(() => {
                     // Best-effort, same as the mark-as-read catch below — `attachmentsByUid[uid] ??
-                    // []` already renders no attachments while this stays unset, so there is nothing
-                    // further to do on failure.
+                    // []` already renders no attachments while this stays unset; forgetting the
+                    // request just lets a later re-expand retry it.
+                    attachmentsRequestedRef.current.delete(uid);
                 });
             }
-            if (!message.flags.read) {
+            // `message` is this render's latest copy, so the request carries its current `version`.
+            if (!message.flags.read && !markReadRequestedRef.current.has(uid)) {
+                markReadRequestedRef.current.add(uid);
                 setMessageRead(message, true)
-                    .then((updated) => setMessages((prev) => ({ ...prev, [uid]: updated })))
+                    .then((updated) => {
+                    if (generation !== generationRef.current)
+                        return;
+                    // Never clobber a newer copy another action (label/classify/...) already patched in.
+                    setMessages((prev) => (prev[uid].version > updated.version ? prev : { ...prev, [uid]: updated }));
+                })
                     .catch(() => {
-                    // Best-effort — matches `useMarkMessageRead`'s own doc comment.
+                    // Best-effort — matches `useMarkMessageRead`'s own doc comment. Forgetting the
+                    // request lets a later effect run (e.g. a re-expand) retry with a fresh copy.
+                    markReadRequestedRef.current.delete(uid);
                 });
             }
         }