@rapidmx/web-client 0.30.0 → 0.32.0

package/apps/admin/signing-certificates/index.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 import {
     AdminSigningEnrollment,
     getSigningEnrollmentInfo,
@@ -15,7 +15,7 @@ import {
     uploadSigningEnrollmentCertificate,
 } from "../../../lib/crypto/signingProviderApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import Modal from "../../../lib/components/overlays/Modal.js";
 import { notify } from "../../shared/notifications/store.js";
@@ -24,7 +24,7 @@ const INPUT_CLASS = "text-sm border border-border rounded-sm py-1.5 px-2 bg-surf
 const TEXTAREA_CLASS = `${INPUT_CLASS} font-mono text-xs`;
 
 function errorMessage(err: unknown, fallback: string): string {
-    return err instanceof ApiRequestError ? err.message : fallback;
+    return actionErrorMessage(err, fallback);
 }
 
 function statusBadgeClass(status: AdminSigningEnrollment["status"]): string {

package/apps/admin/transport-rules/[uid].tsx

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import {
     getTransportRule,
     TransportRule,
@@ -20,9 +19,10 @@ import {
     TRANSPORT_RULE_ACTION_TYPES,
     TRANSPORT_RULE_CONDITION_FIELDS,
 } from "./_transportRuleConfig.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
 import FormField from "../../../lib/components/forms/FormField.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -63,7 +63,7 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
                     });
                 }
             })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this transport rule."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load this transport rule.")))
             .finally(() => setLoading(false));
     }, [uid]);
 
@@ -106,7 +106,7 @@ function TransportRuleDetailContent({ uid }: { uid: string }) {
             setOriginal(updated);
             setSaved(true);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this transport rule.");
+            setError(actionErrorMessage(err, "Could not save this transport rule."));
         } finally {
             setSaving(false);
         }

package/apps/admin/transport-rules/index.tsx

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../lib/util/api.js";
 import { listTransportRules, TransportRule } from "../../../lib/admin/transportRulesApi.js";
 import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
-import Alert from "../../../lib/components/feedback/Alert.js";
+import Alert from "../../shared/components/admin/ActionAlert.js";
 import Button from "../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../../shared/components/admin/elevation.js";
 
 const PAGE_SIZE = 25;
 
@@ -48,7 +48,7 @@ function TransportRulesContent() {
     useEffect(() => {
         listAllTransportRules()
             .then(setRules)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load transport rules."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load transport rules.")))
             .finally(() => setLoading(false));
     }, []);
 

package/apps/admin/transport-rules/new/index.tsx

@@ -4,7 +4,6 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useState } from "react";
 import { useRouter } from "@rapidrest/react/client";
-import { ApiRequestError } from "../../../../lib/util/api.js";
 import {
     createTransportRule,
     TransportRuleAction,
@@ -19,9 +18,10 @@ import {
     TRANSPORT_RULE_ACTION_TYPES,
     TRANSPORT_RULE_CONDITION_FIELDS,
 } from "../_transportRuleConfig.js";
-import Alert from "../../../../lib/components/feedback/Alert.js";
+import Alert from "../../../shared/components/admin/ActionAlert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../lib/components/forms/FormField.js";
+import { actionErrorMessage } from "../../../shared/components/admin/elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -77,7 +77,7 @@ function NewTransportRuleForm() {
             const created = await createTransportRule({ name: name.trim(), ...rule });
             void navigate(`/admin/transport-rules/${encodeURIComponent(created.uid)}`);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the transport rule.");
+            setError(actionErrorMessage(err, "Could not create the transport rule."));
         } finally {
             setSaving(false);
         }

package/apps/escrow/matters/[uid].tsx

@@ -77,6 +77,8 @@ function MatterDetailContent({ uid }: { uid: string }) {
     const [closing, setClosing] = useState(false);
     const [closeError, setCloseError] = useState<string | null>(null);
     const [approveTarget, setApproveTarget] = useState<EscrowAccessRequest | null>(null);
+    // Denying cannot be undone - a denied request is never approved afterwards, only asked for again - so it is confirmed first.
+    const [denyTarget, setDenyTarget] = useState<EscrowAccessRequest | null>(null);
 
     const [showNewRequest, setShowNewRequest] = useState(false);
     const [newRequestMailboxUid, setNewRequestMailboxUid] = useState("");
@@ -184,7 +186,10 @@ function MatterDetailContent({ uid }: { uid: string }) {
         }
     }
 
-    async function handleDeny(request: EscrowAccessRequest) {
+    // Only ever invoked from the deny-confirmation modal below, which only renders once `denyTarget` is set.
+    async function handleDeny() {
+        const request = denyTarget!;
+        setDenyTarget(null);
         setActingOn((prev) => ({ ...prev, [request.uid]: true }));
         setActionErrors((prev) => ({ ...prev, [request.uid]: "" }));
         try {
@@ -381,7 +386,7 @@ function MatterDetailContent({ uid }: { uid: string }) {
                                                 className="!w-auto"
                                                 loading={actingOn[request.uid]}
                                                 disabled={actingOn[request.uid]}
-                                                onClick={() => handleDeny(request)}
+                                                onClick={() => setDenyTarget(request)}
                                             >
                                                 Deny
                                             </Button>
@@ -562,6 +567,25 @@ function MatterDetailContent({ uid }: { uid: string }) {
                 </div>
             </Modal>
 
+            <Modal open={denyTarget !== null} onClose={() => setDenyTarget(null)} title="Deny access request">
+                <p className="text-sm mb-3">
+                    Denying refuses this request for good: it can&rsquo;t be approved afterwards, and holders can&rsquo;t read the key material for
+                    mailbox <span className="break-all font-semibold">{denyTarget?.mailboxUid}</span> through it. A new request has to be made to ask again.
+                </p>
+                <div className="flex gap-3 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setDenyTarget(null)}>
+                        Cancel
+                    </Button>
+                    <Button
+                        type="button"
+                        className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
+                        onClick={() => void handleDeny()}
+                    >
+                        Deny request
+                    </Button>
+                </div>
+            </Modal>
+
             <Modal open={showNewRequest} onClose={() => setShowNewRequest(false)} title="New access request">
                 <form onSubmit={handleCreateRequest} className="flex flex-col gap-4">
                     {newRequestError && <Alert>{newRequestError}</Alert>}

package/apps/escrow/matters/new/index.tsx

@@ -59,6 +59,10 @@ function NewMatterForm() {
             setError("At least one custodian mailbox is required.");
             return;
         }
+        if (Number.isNaN(new Date(dateRangeStart).getTime()) || Number.isNaN(new Date(dateRangeEnd).getTime())) {
+            setError("The date range start and end are both required.");
+            return;
+        }
         if (new Date(dateRangeStart).getTime() >= new Date(dateRangeEnd).getTime()) {
             setError("The date range start must be before its end.");
             return;

package/apps/shared/calendar/calendarLiveUpdates.ts

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-/** Pure helper behind the calendar page's live updates: which push events say "an event changed, and the payload is only a busy block". */
+/** Pure helper behind the calendar page's live updates: which push events say "an event changed". */
 
 import type { PushEvent } from "../../../lib/mail/pushClient.js";
 
@@ -11,17 +11,18 @@ import type { PushEvent } from "../../../lib/mail/pushClient.js";
 const EVENT_MODEL = /^CalendarEvent(Mongo|SQL)$/;
 
 /**
- * The uid of the event a push event announces as a redacted busy block, or `undefined` for anything else the shared push connection delivers.
+ * The event a push event says was created, changed or deleted - its uid, and whether it is gone - or `undefined` for anything else the shared push connection
+ * delivers.
  *
- * When somebody creates or changes a private or confidential event, restapi publishes it on the calendar's channel once, for every subscriber - and that one
- * payload has to be safe for a read-only reader of a shared calendar, so it is the busy block (`redacted: true`, title "Busy", no details). It must not be
- * stored as the event by the calendar's owner (or anybody else who may see it in full): they fetch the event again by its uid, which answers with as
- * much as they may see.
+ * The payload is never stored as the event: when somebody creates or changes a private or confidential event, restapi publishes it on the calendar's channel
+ * once, for every subscriber, and that one payload has to be safe for a read-only reader of a shared calendar, so it is the busy block (`redacted: true`,
+ * title "Busy", no details). Whoever may see the event in full fetches it again by its uid, which answers with as much as they may see - so every created or
+ * changed event is handled that way, an ordinary one (an invitation arriving, an edit on another device) included.
  */
-export function redactedEventUidOf(event: PushEvent): string | undefined {
-    if (!EVENT_MODEL.test(event.type) || (event.action !== "create" && event.action !== "update")) {
+export function changedEventOf(event: PushEvent): { uid: string; deleted: boolean } | undefined {
+    if (!EVENT_MODEL.test(event.type) || (event.action !== "create" && event.action !== "update" && event.action !== "delete")) {
         return undefined;
     }
-    const data = event.data as { uid?: unknown; redacted?: unknown } | null | undefined;
-    return data?.redacted === true && typeof data.uid === "string" ? data.uid : undefined;
+    const data = event.data as { uid?: unknown } | null | undefined;
+    return typeof data?.uid === "string" ? { uid: data.uid, deleted: event.action === "delete" } : undefined;
 }

package/apps/shared/calendar/useCalendarReminders.ts

@@ -45,6 +45,8 @@ export function useCalendarReminders({ userUid, enabled }: UseCalendarRemindersO
                 kind: "calendar",
                 title: notice.title,
                 message: reminderMessage(notice.startDate),
+                // Anyone who can invite you can put any address in an event's location: the button says where it goes.
+                hint: joinUrl ? `Join Meeting opens ${new URL(joinUrl).host}` : undefined,
                 href: CALENDAR_HREF,
                 sticky: true,
                 actions: [

package/apps/shared/components/admin/ActionAlert.tsx

@@ -0,0 +1,32 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode, createContext, useContext } from "react";
+import Alert from "../../../../lib/components/feedback/Alert.js";
+import { isElevationMessage } from "./elevation.js";
+
+/**
+ * What `AdminShell` offers the page inside it: sends the browser to auth-server to confirm the user's identity again, then back to this page. `undefined`
+ * outside the shell, and in one with no auth-server to send the browser to.
+ */
+export const ReconfirmIdentityContext = createContext<(() => void) | undefined>(undefined);
+
+/**
+ * `Alert` for the failure of an administrator action. When the failure is the server's refusal for want of a recently confirmed identity (see
+ * `actionErrorMessage()`), it also offers to confirm it again right there rather than leaving the user to work out that reloading the page does it.
+ */
+export default function ActionAlert({ children }: { children: ReactNode }) {
+    const reconfirm = useContext(ReconfirmIdentityContext);
+    if (!reconfirm || typeof children !== "string" || !isElevationMessage(children)) {
+        return <Alert>{children}</Alert>;
+    }
+    return (
+        <Alert>
+            <span className="flex-1">{children}</span>
+            <button type="button" className="shrink-0 font-semibold underline" onClick={reconfirm}>
+                Confirm identity again
+            </button>
+        </Alert>
+    );
+}

package/apps/shared/components/admin/diagnostics/InformationPanel.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import type { DiagnosticsInformation, DiagnosticsVersions } from "./diagnosticsApi.js";
 import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
 import ComponentsTable from "./ComponentsTable.js";
@@ -41,13 +41,13 @@ export default function InformationPanel({ versions, plugins, information }: Inf
                             <SettingsTable
                                 id="diagnostics-environment"
                                 title="Environment variables"
-                                description="The server process's environment. Only variables known to be harmless show their value; the value of a secret, or of anything unrecognized, is withheld by the server and never sent."
+                                description="The server process's environment. Every variable shows its value except those on the server's list of hidden settings, whose value is withheld by the server and never sent."
                                 settings={information.data.environment ?? []}
                             />
                             <SettingsTable
                                 id="diagnostics-configuration"
                                 title="Configuration"
-                                description="The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Passwords, tokens, keys, certificates and the credentials in URLs are withheld by the server and never sent."
+                                description="The effective settings the server runs with: the environment, saved plugin settings and defaults combined. Settings on the server's list of hidden settings, such as passwords, tokens and keys, are withheld by the server and never sent, and so are the credentials in URLs."
                                 settings={information.data.configuration ?? []}
                             />
                         </>

package/apps/shared/components/admin/diagnostics/InstalledPlugins.tsx

@@ -5,7 +5,7 @@
 import React from "react";
 import { HiOutlineExclamationTriangle } from "react-icons/hi2";
 import { getPluginStatus, listPlugins, Plugin, PluginStatus } from "../../../../../lib/admin/pluginsApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Badge from "./Badge.js";
 import { NO_VALUE } from "./format.js";
 

package/apps/shared/components/admin/diagnostics/LogsPanel.tsx

@@ -15,7 +15,7 @@ import {
     HiOutlineStop,
     HiOutlineTrash,
 } from "react-icons/hi2";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Badge, { BadgeTone } from "./Badge.js";
 import { SaveFile, timestampedFilename } from "./download.js";

package/apps/shared/components/admin/diagnostics/RuntimePanel.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import type { DiagnosticsRuntime } from "./diagnosticsApi.js";
 import type { DiagnosticsResource } from "./useDiagnosticsResource.js";
 import Badge from "./Badge.js";

package/apps/shared/components/admin/diagnostics/SystemPanel.tsx

@@ -4,7 +4,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import { HiOutlinePause, HiOutlinePlay } from "react-icons/hi2";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import { formatDateTime } from "./format.js";
 import HostCard from "./HostCard.js";

package/apps/shared/components/admin/diagnostics/diagnosticsApi.ts

@@ -76,8 +76,8 @@ export interface DiagnosticsVersions {
 }
 
 /**
- * One environment variable or configuration setting. A `redacted` one has no `value`: the server withholds every secret-like
- * or unrecognized value and never sends it, so there is nothing for the client to hide.
+ * One environment variable or configuration setting. A `redacted` one has no `value`: the server withholds the value of every setting on its
+ * hidden list and never sends it, so there is nothing for the client to hide.
  */
 export interface DiagnosticsSetting {
     name: string;

package/apps/shared/components/admin/distributionLists/MemberListCard.tsx

@@ -3,10 +3,10 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { DistributionList, updateDistributionList } from "../../../../../lib/admin/distributionListsApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../elevation.js";
 
 export interface MemberListCardProps {
     list: DistributionList;
@@ -45,7 +45,7 @@ export default function MemberListCard({ list, onUpdate }: MemberListCardProps)
             setNewAddress("");
             onUpdate(updated);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not add this member.");
+            setError(actionErrorMessage(err, "Could not add this member."));
         } finally {
             setSaving(false);
         }
@@ -62,7 +62,7 @@ export default function MemberListCard({ list, onUpdate }: MemberListCardProps)
             });
             onUpdate(updated);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not remove this member.");
+            setError(actionErrorMessage(err, "Could not remove this member."));
         } finally {
             setSaving(false);
         }

package/apps/shared/components/admin/elevation.ts

@@ -23,6 +23,25 @@ export function isElevationRequired(err: unknown): boolean {
     return err instanceof ApiRequestError && err.status === 403 && err.code === ELEVATION_REQUIRED_CODE;
 }
 
+/** What an administrator action says when the server refuses it because the token isn't elevated (any longer). The console confirms the user's identity
+ * when a page opens (see `AdminShell`), so reloading is what sends them round auth-server's confirmation again. */
+export const ELEVATION_ACTION_MESSAGE = "This needs you to have recently confirmed your identity. Reload this page to confirm it again, then try once more.";
+
+/** Whether `text` is one of the messages that say an action needs the user's identity confirmed again (this one, a plugin's or the diagnostics'). */
+export function isElevationMessage(text: string): boolean {
+    return text.includes("recently confirmed your identity");
+}
+
+/** The text for an administrator action that failed: the elevation message when it only needed the user to confirm their identity (an action the
+ * server newly gates behind an elevated token - truncating or deleting a mailbox, a retention policy, an export of another mailbox, approving an
+ * erasure), else the server's own message, else `fallback`. */
+export function actionErrorMessage(err: unknown, fallback: string): string {
+    if (isElevationRequired(err)) {
+        return ELEVATION_ACTION_MESSAGE;
+    }
+    return err instanceof ApiRequestError ? err.message : fallback;
+}
+
 /** auth-server's elevation page: it sends the browser back to `returnTo` once the user has confirmed their
  * identity, or to its own account page if they cancel. */
 export function elevationUrl(authServerUrl: string, returnTo: string): string {

package/apps/shared/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.tsx

@@ -2,7 +2,8 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { escrowPublicKeyFingerprint, normalizeFingerprint } from "../../../../../lib/crypto/escrowKeys.js";
 import { toDatetimeLocal } from "../../../../../lib/util/dateInput.js";
 import { resolveEscrowScopeHolder } from "../../../../../lib/admin/escrowScopesApi.js";
 import FormField from "../../../../../lib/components/forms/FormField.js";
@@ -52,6 +53,13 @@ export function emptyEscrowScopeKeyAndHoldersValue(): EscrowScopeKeyAndHoldersVa
     };
 }
 
+/** The message for a key validity date left empty (or not a date), which would otherwise be sent as nothing; `null` when both dates are there. */
+export function keyValidityError(value: Pick<EscrowScopeKeyAndHoldersValue, "notBefore" | "notAfter">): string | null {
+    return Number.isNaN(new Date(value.notBefore).getTime()) || Number.isNaN(new Date(value.notAfter).getTime())
+        ? "The key's validity dates, not before and not after, are both required."
+        : null;
+}
+
 /** The message shown when an administrator tries to make themselves a holder: whoever configures a scope must not
  * also be able to approve access under it (separation of duties - the server refuses it too). Holders who were
  * already on the scope (`existingHolderUserUids`) aren't treated as newly added. */
@@ -71,6 +79,33 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
         onChange({ ...value, [key]: next });
     }
 
+    // What is typed in the required-holders box, which may be empty meanwhile (to be typed over): the value is then 0, which the pages refuse on submit
+    // ("between 1 and the number of holders"), rather than snapping back to 1 under the cursor.
+    const [requiredText, setRequiredText] = useState(String(value.requiredHolders));
+    useEffect(() => {
+        setRequiredText((text) => (Number(text) === value.requiredHolders ? text : String(value.requiredHolders)));
+    }, [value.requiredHolders]);
+
+    // What the pasted key's own SHA-256 fingerprint is (`null`: it is no certificate), so the typed one - which the holders compare out of band -
+    // can be checked against it. `undefined` until worked out.
+    const [actualFingerprint, setActualFingerprint] = useState<string | null | undefined>(undefined);
+    const checking = !keyReadOnly && value.publicKey.trim() !== "";
+    useEffect(() => {
+        if (!checking) {
+            return;
+        }
+        let cancelled = false;
+        setActualFingerprint(undefined);
+        void escrowPublicKeyFingerprint(value.publicKey).then((fingerprint) => {
+            if (!cancelled) {
+                setActualFingerprint(fingerprint);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [checking, value.publicKey]);
+
     return (
         <>
             <div className="bg-surface border border-border rounded-md p-6">
@@ -115,6 +150,23 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                         readOnly={keyReadOnly}
                         onChange={(e) => set("fingerprint", e.target.value)}
                     />
+                    {checking && actualFingerprint === null && (
+                        <p role="alert" className="text-xs text-danger mt-1.5">
+                            This is not a base64-encoded certificate, so no fingerprint can be checked against it.
+                        </p>
+                    )}
+                    {checking && actualFingerprint && normalizeFingerprint(value.fingerprint) !== actualFingerprint && (
+                        <p role="alert" className="text-xs text-danger mt-1.5">
+                            This fingerprint is not the one of the public key above, whose SHA-256 fingerprint is{" "}
+                            <code className="font-mono break-all">{actualFingerprint}</code>.{" "}
+                            <button type="button" className="underline font-semibold" disabled={disabled} onClick={() => set("fingerprint", actualFingerprint)}>
+                                Use it
+                            </button>
+                        </p>
+                    )}
+                    {checking && actualFingerprint && normalizeFingerprint(value.fingerprint) === actualFingerprint && (
+                        <p className="text-xs text-text-muted mt-1.5">This is the fingerprint of the public key above.</p>
+                    )}
                 </FormField>
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4">
@@ -171,9 +223,12 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                         id="requiredHolders"
                         type="number"
                         className={INPUT_CLASS}
-                        value={value.requiredHolders}
+                        value={requiredText}
                         disabled={disabled}
-                        onChange={(e) => set("requiredHolders", Number(e.target.value) || 1)}
+                        onChange={(e) => {
+                            setRequiredText(e.target.value);
+                            set("requiredHolders", Number(e.target.value) || 0);
+                        }}
                     />
                 </FormField>
 

package/apps/shared/components/admin/layout/AdminShell.tsx

@@ -48,6 +48,7 @@ import {
     recordElevationAttempt,
 } from "../elevation.js";
 import { signOutOfConsole } from "../signOut.js";
+import { ReconfirmIdentityContext } from "../ActionAlert.js";
 import { pluginIcon } from "../../../plugins/pluginIcons.js";
 import { mergePluginNavItems, PluginNav, PluginNavProps } from "../../../plugins/pluginNav.js";
 
@@ -402,7 +403,11 @@ export default function AdminShell({ active, userUid, authServerUrl, pluginNav,
                             <UserMenu userUid={userUid} authServerUrl={authServerUrl} onSignOut={handleSignOut} showMailLink />
                         </header>
                         <div id="app-content" className="flex-1">
-                            <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
+                            <main className="max-w-6xl mx-auto px-6 py-8">
+                                <ReconfirmIdentityContext.Provider value={authServerUrl ? handleRetryElevation : undefined}>
+                                    {children}
+                                </ReconfirmIdentityContext.Provider>
+                            </main>
                         </div>
                     </div>
                 </div>

package/apps/shared/components/admin/mailboxes/EraseLeftoverDataDialog.tsx

@@ -3,13 +3,13 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { eraseLeftoverMailbox } from "../../../../../lib/admin/leftoverMailboxApi.js";
 import { DataSubjectErasureStatus, getErasureRequest } from "../../../../../lib/mail/erasureRequestApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
 import { notify } from "../../../notifications/store.js";
+import { actionErrorMessage } from "../elevation.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -86,7 +86,7 @@ export default function EraseLeftoverDataDialog({
             setPhase("watching");
         } catch (err) {
             // The server's own words: a legal hold names its matter, a mailbox that exists again says so.
-            setError(err instanceof ApiRequestError ? err.message : "Could not start the erasure.");
+            setError(actionErrorMessage(err, "Could not start the erasure."));
             setPhase("confirm");
         }
     }

package/apps/shared/components/admin/mailboxes/EscrowScopeCard.tsx

@@ -3,13 +3,13 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { EscrowScope, listEscrowScopes } from "../../../../../lib/admin/escrowScopesApi.js";
 import { Mailbox, updateMailbox } from "../../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../elevation.js";
 
 const SELECT_CLASS =
     "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
@@ -40,7 +40,7 @@ export default function EscrowScopeCard({ mailbox, onUpdate }: EscrowScopeCardPr
     useEffect(() => {
         listEscrowScopes({ limit: SCOPE_LIST_LIMIT }, client)
             .then(setScopes)
-            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load escrow scopes."));
+            .catch((err) => setLoadError(actionErrorMessage(err, "Could not load escrow scopes.")));
     }, []);
 
     // Changing the scope changes who can recover this mailbox's encrypted mail, so it's confirmed first.
@@ -59,7 +59,7 @@ export default function EscrowScopeCard({ mailbox, onUpdate }: EscrowScopeCardPr
             onUpdate(updated);
             setSaved(true);
         } catch (err) {
-            setSaveError(err instanceof ApiRequestError ? err.message : "Could not save the escrow scope.");
+            setSaveError(actionErrorMessage(err, "Could not save the escrow scope."));
         } finally {
             setSaving(false);
         }