@rapidmx/web-client 0.3.1 → 0.5.0

package/apps/shared/components/layout/KeyEnrollmentGate.tsx

@@ -7,17 +7,20 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.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 { enrollKey, getKeyVault, PublicKey } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { enrollKey, getKeyVault, PublicKey, VaultAlreadyInitializedError } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import { UnopenableKeysNotice, unlockErrorMessage } from "./UnlockPromptProvider.js";
+import { RecoveryFollowUp, RecoveryFollowUpModal, UnlockModeToggle, startRecoveryUnlock } from "./RecoveryCodeUnlock.js";
 import {
     ENCRYPTION_PRIVATE_KEY_AAD_PURPOSE,
     getUnlockedKeys,
     unlockWithPassword,
+    type UnlockResult,
 } from "@rapidmx/react-shared/crypto/keySession.js";
 import { buildAad, generateMasterKey, sealWithKey } from "@rapidmx/react-shared/crypto/masterKey.js";
 import { buildPasswordWrap, buildRecoveryWraps } from "@rapidmx/react-shared/crypto/masterKeyWraps.js";
 import { exportPrivateKeyPkcs8, generateKeyPairWithCsr } from "@rapidmx/react-shared/crypto/keys.js";
 
-type Status = "checking" | "setup_password" | "enrolling" | "show_recovery_codes" | "unlock" | "unlocking" | "ready";
+type Status = "checking" | "setup_password" | "enrolling" | "already_set_up" | "show_recovery_codes" | "unlock" | "unlocking" | "ready";
 
 const MIN_PASSWORD_LENGTH = 8;
 
@@ -59,6 +62,26 @@ export interface KeyEnrollmentGateProps {
      * one. Treated as empty when undefined - a mailbox with no public keys published yet has nothing to
      * unlock, so this only affects the already-enrolled path. */
     mailboxKeys?: PublicKey[];
+    /**
+     * `true` (default) preserves this component's original behavior: a mailbox with an existing vault
+     * but no unlocked session blocks `children` behind a full-page unlock form. Set to `false` for a
+     * mount point that shouldn't block merely because a mailbox resolved - `MailShell` does this, since
+     * unlocking is only actually required to sign/encrypt a compose, read an already-encrypted message,
+     * or change encryption settings (see `UnlockPromptProvider.tsx`'s `useUnlockPrompt()`, which those
+     * specific call sites use instead). Has no effect on first-time provisioning
+     * (`setup_password`/`enrolling`/`show_recovery_codes`), which still always blocks regardless - that
+     * only ever happens once per mailbox and is a genuine prerequisite, not the source of "unlock keeps
+     * popping up" friction this prop exists to avoid.
+     */
+    blocking?: boolean;
+    /**
+     * `true` when the caller may provision this mailbox's first encryption key - i.e. they own it and aren't
+     * an administrator impersonating them. `false` (default, so a caller that forgets it never provisions) for
+     * a shared/delegated mailbox the caller doesn't own, or an impersonated session: a mailbox with no vault yet then
+     * renders `children` instead of the "Protect your mailbox" setup, so a delegate never enrolls keys
+     * (and recovery codes) for someone else's mailbox. Unlocking an existing vault is unaffected.
+     */
+    canProvision?: boolean;
     children: React.ReactNode;
 }
 
@@ -77,13 +100,26 @@ export interface KeyEnrollmentGateProps {
  * `children` unchanged rather than blocking mail entirely - encryption is optional and gradual by design
  * (the spec's own "near zero frictionless experience" goal), not a hard prerequisite for reading mail.
  */
-export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxKeys, children }: KeyEnrollmentGateProps) {
+export default function KeyEnrollmentGate({
+    mailboxUid,
+    mailboxAddress,
+    mailboxKeys,
+    blocking = true,
+    canProvision = false,
+    children,
+}: KeyEnrollmentGateProps) {
     const [status, setStatus] = useState<Status>(mailboxUid ? "checking" : "ready");
     const [password, setPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
     const [error, setError] = useState<string | null>(null);
     const [recoveryCodes, setRecoveryCodes] = useState<string[]>([]);
     const [codesSaved, setCodesSaved] = useState(false);
+    const [codesCopied, setCodesCopied] = useState(false);
+    const [unopenableKeys, setUnopenableKeys] = useState<string[] | null>(null);
+    const [unlockMode, setUnlockMode] = useState<"password" | "recovery">("password");
+    const [recoveryCode, setRecoveryCode] = useState("");
+    // Set after a recovery-code unlock: `children` render at once, with the follow-up steps in a dialog on top.
+    const [followUp, setFollowUp] = useState<RecoveryFollowUp | null>(null);
 
     useEffect(() => {
         if (!mailboxUid) {
@@ -100,7 +136,7 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
         getKeyVault(mailboxUid)
             .then((vault) => {
                 if (!cancelled) {
-                    setStatus(vault.wrappedKeys.length > 0 ? "unlock" : "setup_password");
+                    setStatus(vault.wrappedKeys.length > 0 ? "unlock" : canProvision ? "setup_password" : "ready");
                 }
             })
             .catch(() => {
@@ -111,7 +147,7 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
         return () => {
             cancelled = true;
         };
-    }, [mailboxUid]);
+    }, [mailboxUid, canProvision]);
 
     async function handleUnlock(e: React.FormEvent) {
         e.preventDefault();
@@ -120,13 +156,20 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
         try {
             // Only reachable via "unlock", which the effect above only ever sets once mailboxUid was
             // defined.
-            await unlockWithPassword(mailboxUid!, mailboxKeys ?? [], password);
+            const result: UnlockResult | RecoveryFollowUp = await (unlockMode === "recovery"
+                ? startRecoveryUnlock(mailboxUid!, mailboxKeys ?? [], recoveryCode)
+                : unlockWithPassword(mailboxUid!, mailboxKeys ?? [], password));
+            const recovery = unlockMode === "recovery" ? (result as RecoveryFollowUp) : null;
+            if (result.unopenableKeys.length > 0) {
+                setUnopenableKeys(result.unopenableKeys);
+            }
+            setRecoveryCode("");
+            setFollowUp(recovery);
             setStatus("ready");
-        } catch {
-            // Deliberately generic - see `unlockWithPassword()`'s own doc comment: it throws the same way
-            // for "no password wrap enrolled" and "wrong password" today, and this UI has no way to tell
-            // those apart without leaking which is which to a potential attacker guessing passwords.
-            setError("Incorrect password.");
+        } catch (err) {
+            // "Incorrect password." (or "That recovery code didn't work.") unless the secret was right but the
+            // encryption key won't open - see `unlockErrorMessage()`.
+            setError(unlockErrorMessage(err, unlockMode));
             setStatus("unlock");
         }
     }
@@ -144,47 +187,101 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
         setError(null);
         setStatus("enrolling");
         try {
+            // The vault was only checked on mount - another tab or device may have set encryption up since.
+            // Provisioning now would publish a second master key, orphaning whichever setup lost the race, so
+            // re-check right before generating anything. restapi's enrollKey() also refuses (409) wraps for a
+            // vault that already has them, for a race inside this window.
             // Only reachable via "setup_password", which the effect above only ever sets once mailboxUid
             // was defined (and mailboxAddress necessarily came with it - see KeyEnrollmentGateProps).
+            const fresh = await getKeyVault(mailboxUid!);
+            if (fresh.wrappedKeys.length > 0 || fresh.masterKeyWraps.length > 0) {
+                setStatus("already_set_up");
+                return;
+            }
             const { recoveryCodes: codes } = await provisionEncryptionKey(mailboxUid!, mailboxAddress!, password);
             setRecoveryCodes(codes);
             setStatus("show_recovery_codes");
         } catch (err) {
+            // Only a 409 that is really "the vault already has wraps" - an unrelated lost optimistic-lock race is shown
+            // as an ordinary error.
+            if (err instanceof VaultAlreadyInitializedError) {
+                setStatus("already_set_up");
+                return;
+            }
             setError(err instanceof ApiRequestError ? err.message : "Could not set up encryption for this mailbox.");
             setStatus("setup_password");
         }
     }
 
+    async function handleCopyCodes() {
+        try {
+            await navigator.clipboard.writeText(recoveryCodes.join("\n"));
+            setCodesCopied(true);
+            setTimeout(() => setCodesCopied(false), 2000);
+        } catch {
+            // Clipboard access can be denied by the browser - the codes are still selectable/copyable by
+            // hand from the list below.
+        }
+    }
+
     if (status === "checking") {
         return null;
     }
 
-    if (status === "unlock" || status === "unlocking") {
+    if ((status === "unlock" || status === "unlocking") && blocking) {
         const unlocking = status === "unlocking";
         return (
             <div className="min-h-screen flex items-center justify-center p-8 bg-surface-alt">
                 <div className="w-full max-w-md bg-surface border border-border rounded-md p-8">
                     <h1 className="text-lg font-bold mb-2">Unlock your mailbox</h1>
                     <p className="text-sm text-text-muted mb-5">
-                        Enter your encryption password to unlock signing and reading protected mail this session.
+                        {unlockMode === "password"
+                            ? "Enter your encryption password to unlock signing and reading protected mail this session."
+                            : "Enter one of your recovery codes to unlock signing and reading protected mail this session. Each code works once."}
                     </p>
                     {error && <Alert>{error}</Alert>}
                     <form onSubmit={handleUnlock}>
-                        <FormField label="Encryption password" htmlFor="key-unlock-password">
-                            <input
-                                id="key-unlock-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"
-                            />
-                        </FormField>
+                        {unlockMode === "password" ? (
+                            <FormField label="Encryption password" htmlFor="key-unlock-password">
+                                <input
+                                    id="key-unlock-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"
+                                />
+                            </FormField>
+                        ) : (
+                            <FormField label="Recovery code" htmlFor="key-unlock-recovery-code">
+                                <input
+                                    id="key-unlock-recovery-code"
+                                    type="text"
+                                    className="w-full text-sm font-mono border border-border rounded-sm py-1.5 px-2 bg-surface"
+                                    value={recoveryCode}
+                                    onChange={(e) => setRecoveryCode(e.target.value)}
+                                    disabled={unlocking}
+                                    autoComplete="off"
+                                    autoCapitalize="characters"
+                                    spellCheck={false}
+                                />
+                            </FormField>
+                        )}
                         <Button type="submit" loading={unlocking} disabled={unlocking}>
                             Unlock
                         </Button>
                     </form>
+                    <div className="mt-3">
+                        <UnlockModeToggle
+                            mode={unlockMode}
+                            disabled={unlocking}
+                            onChange={(next) => {
+                                setUnlockMode(next);
+                                setError(null);
+                            }}
+                        />
+                    </div>
                 </div>
             </div>
         );
@@ -233,6 +330,24 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
         );
     }
 
+    if (status === "already_set_up") {
+        return (
+            <div className="min-h-screen flex items-center justify-center p-8 bg-surface-alt">
+                <div className="w-full max-w-md bg-surface border border-border rounded-md p-8">
+                    <h1 className="text-lg font-bold mb-2">Encryption is already set up</h1>
+                    <p className="text-sm text-text-muted mb-5">
+                        This mailbox&rsquo;s encryption was set up in another tab or on another device while this
+                        page was open, so nothing was changed here. Reload the page and unlock with the password
+                        chosen there.
+                    </p>
+                    <Button type="button" onClick={() => window.location.reload()}>
+                        Reload
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
     if (status === "show_recovery_codes") {
         return (
             <div className="min-h-screen flex items-center justify-center p-8 bg-surface-alt">
@@ -242,13 +357,16 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
                         If you lose your password, these codes are the only way to recover your encrypted mail.
                         Each code can be used once. Store them somewhere safe — they will not be shown again.
                     </p>
-                    <ul className="grid grid-cols-2 gap-2 mb-5 font-mono text-sm">
+                    <ul className="grid grid-cols-2 gap-2 mb-3 font-mono text-sm">
                         {recoveryCodes.map((code) => (
                             <li key={code} className="bg-surface-alt rounded-sm py-1.5 px-2 text-center">
                                 {code}
                             </li>
                         ))}
                     </ul>
+                    <Button type="button" variant="secondary" className="!w-auto mb-5" onClick={handleCopyCodes}>
+                        {codesCopied ? "Copied" : "Copy codes to clipboard"}
+                    </Button>
                     <label className="flex items-center gap-2 text-sm mb-4">
                         <input type="checkbox" checked={codesSaved} onChange={(e) => setCodesSaved(e.target.checked)} />
                         I have saved these recovery codes in a safe place.
@@ -261,5 +379,11 @@ export default function KeyEnrollmentGate({ mailboxUid, mailboxAddress, mailboxK
         );
     }
 
-    return <>{children}</>;
+    return (
+        <>
+            {children}
+            {unopenableKeys && <UnopenableKeysNotice fingerprints={unopenableKeys} onDismiss={() => setUnopenableKeys(null)} />}
+            {followUp && <RecoveryFollowUpModal followUp={followUp} onDone={() => setFollowUp(null)} />}
+        </>
+    );
 }

package/apps/shared/components/layout/MailboxProvisioning.tsx

@@ -8,7 +8,7 @@ import { MailboxAutoProvisionAliasOption, autoProvisionMailbox } from "@rapidmx/
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 
-type Status = "checking" | "needs_selection" | "creating" | "unavailable";
+type Status = "checking" | "needs_selection" | "creating" | "unavailable" | "retryable";
 
 /**
  * Rendered by each app's shell (Mail/Calendar/Contacts/Tasks) *instead of* the normal `AppShell`
@@ -27,7 +27,11 @@ export default function MailboxProvisioning() {
     const [selected, setSelected] = useState("");
     const [error, setError] = useState<string | null>(null);
 
+    // Bumped by "Retry" to re-run the check below.
+    const [attempt, setAttempt] = useState(0);
+
     useEffect(() => {
+        setStatus("checking");
         autoProvisionMailbox()
             .then((result) => {
                 if (result.status === "needs_selection") {
@@ -44,8 +48,10 @@ export default function MailboxProvisioning() {
                     window.location.reload();
                 }
             })
-            .catch(() => setStatus("unavailable"));
-    }, []);
+            // A 503 means the server couldn't read its own provisioning policy right now - not that there's no
+            // mailbox to be had - so it gets a retry instead of the permanent "ask an administrator" message.
+            .catch((err) => setStatus(err instanceof ApiRequestError && err.status === 503 ? "retryable" : "unavailable"));
+    }, [attempt]);
 
     async function handleConfirm() {
         // `selected` only ever takes a value from `options` itself (the initial default, or the
@@ -90,6 +96,16 @@ export default function MailboxProvisioning() {
                 </Button>
             </div>
         );
+    } else if (status === "retryable") {
+        content = (
+            <>
+                <h1 className="text-lg font-bold uppercase tracking-wide">Couldn&rsquo;t check right now</h1>
+                <p className="text-sm text-text-muted">We couldn&rsquo;t check whether a mailbox can be set up for you. Please try again.</p>
+                <Button type="button" onClick={() => setAttempt((n) => n + 1)} className="!w-auto self-center">
+                    Retry
+                </Button>
+            </>
+        );
     } else {
         content = (
             <>