@rapidmx/web-client 0.2.0 → 0.3.1

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

@@ -0,0 +1,173 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { createMatter } from "@rapidmx/react-shared/admin/mattersApi.js";
+import EscrowShell, { EscrowShellProps } from "../../../shared/components/escrow/layout/EscrowShell.js";
+import StringListField from "../../../shared/components/forms/StringListField.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";
+
+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";
+
+export default function NewMatterPage(props: Omit<EscrowShellProps, "active">) {
+    return (
+        <EscrowShell {...props} active="matters">
+            <NewMatterForm />
+        </EscrowShell>
+    );
+}
+
+function NewMatterForm() {
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    // No dropdown here: `EscrowScope` (BaseEscrowScopeRoute) is trusted-admin-only end to end, so this
+    // app has no holder-readable "list the scopes I hold" endpoint to populate one from — a holder is
+    // told their own escrowScopeId out of band by whichever admin granted them the role. Same
+    // "server fills a gap, or here, deliberately doesn't paper over one restapi itself doesn't expose"
+    // posture as `BaseEscrowInfoRoute`'s own doc comment on the mailbox-owner side of this feature.
+    const [escrowScopeId, setEscrowScopeId] = useState("");
+    const [custodianMailboxUids, setCustodianMailboxUids] = useState<string[]>([]);
+    // Defaults to the last 24 hours rather than "now" for both ends - a `dateRangeStart === dateRangeEnd`
+    // default would always fail this form's own "start must be before end" check the instant it's opened,
+    // forcing every holder to touch both fields even when they'd otherwise leave one at its default.
+    const [dateRangeStart, setDateRangeStart] = useState(toDatetimeLocal(new Date(Date.now() - 24 * 60 * 60_000).toISOString()));
+    const [dateRangeEnd, setDateRangeEnd] = useState(toDatetimeLocal(new Date().toISOString()));
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+        if (!escrowScopeId.trim()) {
+            setError("An escrow scope uid is required.");
+            return;
+        }
+        if (custodianMailboxUids.length === 0) {
+            setError("At least one custodian mailbox is required.");
+            return;
+        }
+        if (new Date(dateRangeStart).getTime() >= new Date(dateRangeEnd).getTime()) {
+            setError("The date range start must be before its end.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const created = await createMatter({
+                name: name.trim(),
+                description: description.trim() || undefined,
+                escrowScopeId: escrowScopeId.trim(),
+                custodianMailboxUids,
+                dateRangeStart: new Date(dateRangeStart).toISOString(),
+                dateRangeEnd: new Date(dateRangeEnd).toISOString(),
+            });
+            window.location.href = `/escrow/matters/${encodeURIComponent(created.uid)}`;
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the matter.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-3xl">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New matter</h1>
+            <p className="text-sm text-text-muted mb-5">
+                You must already be a holder of the escrow scope you name below — this server checks that at
+                creation time, the same as every other action in this console.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                <div className="bg-surface border border-border rounded-md p-6">
+                    <FormField label="Name" htmlFor="name">
+                        <input
+                            id="name"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="Smith v. Acme"
+                        />
+                    </FormField>
+
+                    <FormField label="Description (optional)" htmlFor="description">
+                        <input
+                            id="description"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                        />
+                    </FormField>
+
+                    <FormField label="Escrow scope uid" htmlFor="escrowScopeId">
+                        <input
+                            id="escrowScopeId"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={escrowScopeId}
+                            onChange={(e) => setEscrowScopeId(e.target.value)}
+                        />
+                    </FormField>
+
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4">
+                        <FormField label="Date range start" htmlFor="dateRangeStart">
+                            <input
+                                id="dateRangeStart"
+                                type="datetime-local"
+                                className={INPUT_CLASS}
+                                value={dateRangeStart}
+                                onChange={(e) => setDateRangeStart(e.target.value)}
+                            />
+                        </FormField>
+
+                        <FormField label="Date range end" htmlFor="dateRangeEnd">
+                            <input
+                                id="dateRangeEnd"
+                                type="datetime-local"
+                                className={INPUT_CLASS}
+                                value={dateRangeEnd}
+                                onChange={(e) => setDateRangeEnd(e.target.value)}
+                            />
+                        </FormField>
+                    </div>
+                </div>
+
+                <div className="bg-surface border border-border rounded-md p-6">
+                    <StringListField
+                        label="Custodian mailbox uids"
+                        id="custodianMailboxUids"
+                        values={custodianMailboxUids}
+                        onChange={setCustodianMailboxUids}
+                        placeholder="Mailbox uid to add"
+                        emptyMessage="No custodian mailboxes added yet."
+                    />
+                </div>
+
+                <div className="flex gap-3">
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Create matter
+                    </Button>
+                    <a href="/escrow">
+                        <Button type="button" variant="secondary" className="!w-auto">
+                            Cancel
+                        </Button>
+                    </a>
+                </div>
+            </form>
+        </div>
+    );
+}

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

@@ -0,0 +1,171 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import StringListField from "../../forms/StringListField.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";
+
+/** The part of an `EscrowScope` shared by the "new" and "[uid]" pages — everything except `name`/
+ * `description`, which stay plain inline `FormField`s on each page (same split `distribution-lists`
+ * already uses: simple top-level fields inline, the more involved sub-structure factored out). An admin
+ * pastes in the fields of an already-issued certificate here; nothing in this app generates a keypair —
+ * see `EscrowScopePublicKey`'s own doc comment in `escrowScopesApi.ts`. */
+export interface EscrowScopeKeyAndHoldersValue {
+    publicKey: string;
+    keyType: string;
+    fingerprint: string;
+    /** `<input type="datetime-local">` value — see `toDatetimeLocal()`. */
+    notBefore: string;
+    notAfter: string;
+    holderUserUids: string[];
+    requiredHolders: number;
+    notifySubjectOnAccess: boolean;
+}
+
+export interface EscrowScopeKeyAndHoldersFieldsProps {
+    value: EscrowScopeKeyAndHoldersValue;
+    onChange: (value: EscrowScopeKeyAndHoldersValue) => void;
+    disabled?: boolean;
+}
+
+/** Builds an all-zeroes starting point for the "new" page — `notBefore`/`notAfter` default to "now" so an
+ * admin pasting in a cert's own dates only has to touch what actually differs. */
+export function emptyEscrowScopeKeyAndHoldersValue(): EscrowScopeKeyAndHoldersValue {
+    const now = toDatetimeLocal(new Date().toISOString());
+    return {
+        publicKey: "",
+        keyType: "x509",
+        fingerprint: "",
+        notBefore: now,
+        notAfter: now,
+        holderUserUids: [],
+        requiredHolders: 1,
+        notifySubjectOnAccess: false,
+    };
+}
+
+export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabled }: EscrowScopeKeyAndHoldersFieldsProps) {
+    function set<K extends keyof EscrowScopeKeyAndHoldersValue>(key: K, next: EscrowScopeKeyAndHoldersValue[K]) {
+        onChange({ ...value, [key]: next });
+    }
+
+    return (
+        <>
+            <div className="bg-surface border border-border rounded-md p-6">
+                <h2 className="text-base font-bold uppercase tracking-wide mb-1">Public key</h2>
+                <p className="text-sm text-text-muted mb-4">
+                    The fields of an already-issued certificate — this server never generates or holds the
+                    corresponding private key.
+                </p>
+
+                <FormField label="Public key (base64)" htmlFor="publicKey">
+                    <textarea
+                        id="publicKey"
+                        className={`${INPUT_CLASS} font-mono text-xs`}
+                        rows={4}
+                        value={value.publicKey}
+                        disabled={disabled}
+                        onChange={(e) => set("publicKey", e.target.value)}
+                    />
+                </FormField>
+
+                <FormField label="Key type" htmlFor="keyType">
+                    <input
+                        id="keyType"
+                        type="text"
+                        className={INPUT_CLASS}
+                        value={value.keyType}
+                        disabled={disabled}
+                        onChange={(e) => set("keyType", e.target.value)}
+                        placeholder="x509"
+                    />
+                </FormField>
+
+                <FormField label="Fingerprint (hex SHA-256)" htmlFor="fingerprint">
+                    <input
+                        id="fingerprint"
+                        type="text"
+                        className={`${INPUT_CLASS} font-mono`}
+                        value={value.fingerprint}
+                        disabled={disabled}
+                        onChange={(e) => set("fingerprint", e.target.value)}
+                    />
+                </FormField>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4">
+                    <FormField label="Not before" htmlFor="notBefore">
+                        <input
+                            id="notBefore"
+                            type="datetime-local"
+                            className={INPUT_CLASS}
+                            value={value.notBefore}
+                            disabled={disabled}
+                            onChange={(e) => set("notBefore", e.target.value)}
+                        />
+                    </FormField>
+
+                    <FormField label="Not after" htmlFor="notAfter">
+                        <input
+                            id="notAfter"
+                            type="datetime-local"
+                            className={INPUT_CLASS}
+                            value={value.notAfter}
+                            disabled={disabled}
+                            onChange={(e) => set("notAfter", e.target.value)}
+                        />
+                    </FormField>
+                </div>
+            </div>
+
+            <div className="bg-surface border border-border rounded-md p-6">
+                <h2 className="text-base font-bold uppercase tracking-wide mb-1">Holders &amp; dual control</h2>
+                <p className="text-sm text-text-muted mb-4">
+                    Every uid below is granted the eDiscovery/compliance holder role for this scope — a
+                    deliberately separate role from server administration. At least one holder is required.
+                </p>
+
+                <StringListField
+                    label="Holder user uids"
+                    id="holderUserUids"
+                    values={value.holderUserUids}
+                    onChange={(holderUserUids) => set("holderUserUids", holderUserUids)}
+                    placeholder="User uid to add"
+                    emptyMessage="No holders added yet."
+                    disabled={disabled}
+                />
+
+                <FormField label="Required holders (M-of-N dual control)" htmlFor="requiredHolders">
+                    {/* Deliberately no HTML `min`/`max` attributes: the true bound (1..holderUserUids.length)
+                        moves as holders are added/removed, and jsdom (like a real browser) blocks native
+                        form submission outright once a number input's value falls outside `min`/`max` —
+                        which would silently swallow the Save/Create click with no error shown at all while
+                        a holder is being removed. The page's own submit-time check (and restapi's own
+                        `validateEscrowScope()` server-side) enforce the real bound instead. */}
+                    <input
+                        id="requiredHolders"
+                        type="number"
+                        className={INPUT_CLASS}
+                        value={value.requiredHolders}
+                        disabled={disabled}
+                        onChange={(e) => set("requiredHolders", Number(e.target.value) || 1)}
+                    />
+                </FormField>
+
+                <label className="flex items-center gap-2 text-sm">
+                    <input
+                        type="checkbox"
+                        checked={value.notifySubjectOnAccess}
+                        disabled={disabled}
+                        onChange={(e) => set("notifySubjectOnAccess", e.target.checked)}
+                    />
+                    Notify subject on access
+                </label>
+            </div>
+        </>
+    );
+}

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

@@ -6,8 +6,11 @@ import "../../../styles/app.css";
 import React, { PropsWithChildren, ReactNode, useEffect, useState } from "react";
 import {
     HiOutlineClipboardDocumentList,
+    HiOutlineClock,
+    HiOutlineDocumentArrowDown,
     HiOutlineGlobeAlt,
     HiOutlineInboxStack,
+    HiOutlineKey,
     HiOutlinePaintBrush,
     HiOutlineQueueList,
     HiOutlineShieldCheck,
@@ -30,6 +33,9 @@ export type AdminSection =
     | "auditLog"
     | "distributionLists"
     | "transportRules"
+    | "escrowScopes"
+    | "retentionPolicy"
+    | "dataRequests"
     | "branding";
 
 export interface AdminShellProps {
@@ -69,6 +75,24 @@ const NAV_ITEMS: NavItem[] = [
         label: "Transport Rules",
         icon: HiOutlineShieldCheck,
     },
+    {
+        id: "escrowScopes",
+        href: "/admin/escrow-scopes",
+        label: "Escrow Scopes",
+        icon: HiOutlineKey,
+    },
+    {
+        id: "retentionPolicy",
+        href: "/admin/retention-policy",
+        label: "Retention Policy",
+        icon: HiOutlineClock,
+    },
+    {
+        id: "dataRequests",
+        href: "/admin/data-requests",
+        label: "Data Requests",
+        icon: HiOutlineDocumentArrowDown,
+    },
     { id: "branding", href: "/admin/branding", label: "Branding", icon: HiOutlinePaintBrush },
 ];
 

package/apps/shared/components/contacts/ContactDetailPane.tsx

@@ -5,8 +5,16 @@
 import React from "react";
 import { Contact } from "@rapidmx/react-shared/contacts/contactsApi.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import ContactAvatar from "@rapidmx/react-shared/components/avatar/ContactAvatar.js";
 
+/** Groups a hex fingerprint into 4-character blocks (`ab12 cd34 ...`) for out-of-band verification -
+ * the spec's own use case ("compare this over the phone") is materially easier with a grouped string
+ * than one 64-character run. */
+function formatFingerprint(fingerprint: string): string {
+    return fingerprint.match(/.{1,4}/g)?.join(" ") ?? fingerprint;
+}
+
 export interface ContactDetailPaneProps {
     contact: Contact;
     onEdit: () => void;
@@ -93,6 +101,42 @@ export default function ContactDetailPane({ contact, onEdit, onDelete, backHref
                         <div>{contact.notes}</div>
                     </div>
                 )}
+                {(contact.keys && contact.keys.length > 0) || contact.encryptPreference || contact.keyConflict ? (
+                    <div>
+                        <div className="text-text-muted text-xs font-bold uppercase tracking-wide mb-1">Encryption</div>
+                        {contact.keyConflict && (
+                            <div className="mb-2">
+                                <Alert>
+                                    <p className="mb-2">
+                                        A different encryption key was observed for this contact on{" "}
+                                        {new Date(contact.keyConflict.observedAt).toLocaleDateString()}. The
+                                        previously verified key below is still the one in use — this is routine
+                                        after a device change or reinstall, but it&rsquo;s also what a real attack
+                                        looks like, so verify the new fingerprint with {contact.displayName}{" "}
+                                        directly (e.g. by phone) before trusting it. There is no automatic way to
+                                        accept or reject this yet.
+                                    </p>
+                                    <p className="font-mono text-xs">
+                                        Newly observed: {formatFingerprint(contact.keyConflict.observedFingerprint)}
+                                    </p>
+                                </Alert>
+                            </div>
+                        )}
+                        {contact.encryptPreference && (
+                            <div className="mb-1">
+                                {contact.encryptPreference.preferEncrypt === "mutual"
+                                    ? "This contact also encrypts to you — messages to them can be encrypted."
+                                    : "This contact has not indicated a mutual encryption preference."}
+                            </div>
+                        )}
+                        {contact.keys?.map((key) => (
+                            <div key={key.fingerprint} className="font-mono text-xs py-0.5">
+                                {key.useType === "sign" ? "Signing" : "Encryption"} key: {formatFingerprint(key.fingerprint)}
+                                {key.revokedAt && <span className="text-danger"> (revoked)</span>}
+                            </div>
+                        ))}
+                    </div>
+                ) : null}
             </div>
         </div>
     );

package/apps/shared/components/escrow/layout/EscrowShell.tsx

@@ -0,0 +1,134 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import "../../../styles/app.css";
+import React, { PropsWithChildren, ReactNode, useEffect, useState } from "react";
+import { HiOutlineClipboardDocumentList, HiOutlineFolderOpen } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { listMatters } from "@rapidmx/react-shared/admin/mattersApi.js";
+import { useRedirectIfUnauthenticated } from "@rapidmx/react-shared/auth/session.js";
+import useBranding from "@rapidmx/react-shared/branding/useBranding.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import BottomTabBar, { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
+import { BrandingFooter, BrandingHeader } from "../../layout/BrandingChrome.js";
+import UserMenu from "../../layout/UserMenu.js";
+
+export type EscrowSection = "matters" | "auditLog";
+
+export interface EscrowShellProps {
+    active: EscrowSection;
+    userUid?: string;
+    authServerUrl?: string;
+}
+
+type Status = "checking" | "error" | "authorized";
+
+const NAV_ITEMS: NavItem[] = [
+    { id: "matters", href: "/escrow", label: "Matters", icon: HiOutlineFolderOpen },
+    { id: "auditLog", href: "/escrow/audit-log", label: "Audit Log", icon: HiOutlineClipboardDocumentList },
+];
+
+/**
+ * Gates every `apps/escrow` page behind "is this an authenticated caller at all" — deliberately **not**
+ * the same "does a canary endpoint 403 me" pattern `AdminShell` uses for the trusted `admin` role.
+ * `specs/end-to-end_encryption.md`'s "Separation of duties" makes holder-ness a per-`EscrowScope` grant
+ * (`EscrowScope.holderUserUids`), checked directly against `holderUserUids` in every restapi route that
+ * needs it (`requireEscrowHolder()`) — never a role, and never global. There is no canary endpoint a
+ * non-holder gets a clean 403 from: `GET /escrow/matters` (`BaseMatterRoute.find()`) returns `200 []` for
+ * *any* authenticated caller who holds no scope at all, the same as it would for a holder of zero matters
+ * — so unlike `AdminShell`, this shell cannot distinguish "holds nothing" from "holds no scope at all" up
+ * front, and does not try to. It only confirms the caller is signed in and the API is reachable; every
+ * actual holder-gated action (create a Matter, approve/deny a request, read material) is enforced
+ * server-side and surfaces its own 403 `ApiRequestError` on the specific page that attempted it, same as
+ * any other gated action elsewhere in this codebase. A non-holder who reaches `/escrow` simply sees an
+ * empty Matters list and gets a real error if they try to act on something they don't hold — this is a
+ * deliberate, documented scope trim rather than an oversight (see this session's own report on it).
+ */
+export default function EscrowShell({ active, userUid, authServerUrl, children }: PropsWithChildren<EscrowShellProps>) {
+    const [status, setStatus] = useState<Status>("checking");
+    const [error, setError] = useState<string | null>(null);
+    const { branding, iconSrc } = useBranding();
+
+    useRedirectIfUnauthenticated(userUid, authServerUrl);
+
+    useEffect(() => {
+        if (!userUid) {
+            return;
+        }
+        // limit=1 - this call exists only to confirm the API is reachable for this signed-in caller, not
+        // to read any real data (every page below fetches its own data itself).
+        listMatters({ limit: 1 })
+            .then(() => setStatus("authorized"))
+            .catch((err) => {
+                setError(err instanceof ApiRequestError ? err.message : "Could not verify escrow console access.");
+                setStatus("error");
+            });
+    }, [userUid]);
+
+    function handleSignOut() {
+        window.location.href = authServerUrl ?? "/";
+    }
+
+    let content: ReactNode;
+    if (!userUid || status === "checking") {
+        content = <div className="min-h-screen" />;
+    } else if (status === "error") {
+        content = (
+            <div className="min-h-screen flex items-center justify-center p-8">
+                <div className="w-full max-w-md">
+                    <Alert>{error}</Alert>
+                </div>
+            </div>
+        );
+    } else {
+        const activeItem = NAV_ITEMS.find((item) => item.id === active);
+        content = (
+            <div className="min-h-screen flex flex-col bg-surface-alt">
+                <div className="flex-1 flex min-h-0">
+                    <nav
+                        aria-label="Escrow sections"
+                        className="hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1"
+                    >
+                        <img src={iconSrc} width="96" height="96" alt="" className="mb-3" />
+                        {NAV_ITEMS.map(({ id, href, label, icon: Icon }) => (
+                            <a
+                                key={id}
+                                href={href}
+                                aria-label={label}
+                                aria-current={id === active ? "page" : undefined}
+                                title={label}
+                                className={[
+                                    "w-10 h-10 flex items-center justify-center rounded-sm",
+                                    id === active
+                                        ? "bg-primary/10 text-primary-dark"
+                                        : "text-text-muted hover:bg-surface-alt hover:text-text",
+                                ].join(" ")}
+                            >
+                                <Icon size={20} aria-hidden="true" />
+                            </a>
+                        ))}
+                    </nav>
+                    <BottomTabBar apps={NAV_ITEMS} active={active} />
+                    <div className="flex-1 flex flex-col min-w-0">
+                        <header className="h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6">
+                            <span className="font-display font-bold text-lg uppercase tracking-wide">{activeItem?.label}</span>
+                            <UserMenu userUid={userUid} authServerUrl={authServerUrl} onSignOut={handleSignOut} />
+                        </header>
+                        <div className="flex-1 pb-14 md:pb-0">
+                            <main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <BrandingHeader branding={branding} />
+            {content}
+            <BrandingFooter branding={branding} />
+        </>
+    );
+}