@rapidmx/web-client 0.3.1 → 0.5.0

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

@@ -0,0 +1,152 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { EscrowScope, listEscrowScopes } from "@rapidmx/react-shared/admin/escrowScopesApi.js";
+import { Mailbox, updateMailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.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";
+
+/** Enough for any realistic deployment's scopes in one list. */
+const SCOPE_LIST_LIMIT = 200;
+
+export interface EscrowScopeCardProps {
+    mailbox: Mailbox;
+    /** Called with the saved mailbox, same push-up pattern as `ResourceSettingsCard`. */
+    onUpdate: (mailbox: Mailbox) => void;
+}
+
+/**
+ * Assigns a mailbox to an escrow scope (or none), which decides whose holders can recover its encrypted mail. Only
+ * shown in the admin console, whose trusted-role gate the server enforces again for `escrowScopeId`.
+ */
+export default function EscrowScopeCard({ mailbox, onUpdate }: EscrowScopeCardProps) {
+    const [scopes, setScopes] = useState<EscrowScope[] | null>(null);
+    const [loadError, setLoadError] = useState<string | null>(null);
+    const [escrowScopeId, setEscrowScopeId] = useState(mailbox.escrowScopeId ?? "");
+    const [saving, setSaving] = useState(false);
+    const [saveError, setSaveError] = useState<string | null>(null);
+    const [saved, setSaved] = useState(false);
+    const [confirming, setConfirming] = useState(false);
+
+    useEffect(() => {
+        listEscrowScopes({ limit: SCOPE_LIST_LIMIT })
+            .then(setScopes)
+            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load escrow scopes."));
+    }, []);
+
+    // Changing the scope changes who can recover this mailbox's encrypted mail, so it's confirmed first.
+    function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setConfirming(true);
+    }
+
+    async function save() {
+        setConfirming(false);
+        setSaveError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            const updated = await updateMailbox({ uid: mailbox.uid, version: mailbox.version, escrowScopeId: escrowScopeId || null });
+            onUpdate(updated);
+            setSaved(true);
+        } catch (err) {
+            setSaveError(err instanceof ApiRequestError ? err.message : "Could not save the escrow scope.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    const current = mailbox.escrowScopeId ?? "";
+    const unknownCurrent = !!current && !!scopes && !scopes.some((scope) => scope.uid === current);
+
+    return (
+        <div className="bg-surface border border-border rounded-md p-6">
+            <h2 className="text-base font-bold uppercase tracking-wide mb-1">Escrow scope</h2>
+            <p className="text-sm text-text-muted mb-4">
+                The holders of this scope can jointly recover this mailbox&rsquo;s encrypted mail, for example for legal
+                discovery. With no scope, nobody can.
+            </p>
+
+            {loadError && <Alert>{loadError}</Alert>}
+            {saveError && <Alert>{saveError}</Alert>}
+            {saved && !saveError && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+            {scopes && (
+                <form onSubmit={handleSubmit} className="flex items-end gap-3 flex-wrap">
+                    <label className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">Scope</span>
+                        <select
+                            aria-label="Escrow scope"
+                            className={SELECT_CLASS}
+                            value={escrowScopeId}
+                            onChange={(e) => {
+                                setEscrowScopeId(e.target.value);
+                                setSaved(false);
+                            }}
+                        >
+                            <option value="">No escrow</option>
+                            {unknownCurrent && <option value={current}>Unknown scope ({current})</option>}
+                            {scopes.map((scope) => (
+                                <option key={scope.uid} value={scope.uid}>
+                                    {scope.name}
+                                </option>
+                            ))}
+                        </select>
+                    </label>
+                    <Button type="submit" className="!w-auto" loading={saving} disabled={saving || escrowScopeId === current}>
+                        Save escrow scope
+                    </Button>
+                </form>
+            )}
+
+            <Modal open={confirming} onClose={() => setConfirming(false)} title="Change escrow scope">
+                <p className="text-sm mb-3">
+                    This changes who can jointly recover <strong className="break-all">{mailbox.primarySmtpAddress}</strong>
+                    &rsquo;s encrypted mail.
+                </p>
+                <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm mb-4">
+                    <dt className="text-text-muted">From</dt>
+                    <dd className="break-all">
+                        <ScopeSummary uid={current} scopes={scopes ?? []} />
+                    </dd>
+                    <dt className="text-text-muted">To</dt>
+                    <dd className="break-all">
+                        <ScopeSummary uid={escrowScopeId} scopes={scopes ?? []} />
+                    </dd>
+                </dl>
+                <div className="flex gap-3 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirming(false)}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto" onClick={() => void save()}>
+                        Confirm and save
+                    </Button>
+                </div>
+            </Modal>
+        </div>
+    );
+}
+
+/** A scope's name, holders and required approvals - or what having no (or an unlisted) scope means. */
+function ScopeSummary({ uid, scopes }: { uid: string; scopes: EscrowScope[] }) {
+    if (!uid) {
+        return <span>No escrow - nobody can recover this mailbox&rsquo;s encrypted mail</span>;
+    }
+    const scope = scopes.find((candidate) => candidate.uid === uid);
+    if (!scope) {
+        return <span>Unknown scope ({uid})</span>;
+    }
+    return (
+        <span>
+            <strong>{scope.name}</strong> - holders {scope.holderUserUids.join(", ")}; {scope.requiredHolders} of{" "}
+            {scope.holderUserUids.length} must approve
+        </span>
+    );
+}

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

@@ -51,11 +51,11 @@ export default function ResourceSettingsCard({ mailbox, onUpdate }: ResourceSett
                 uid: mailbox.uid,
                 version: mailbox.version,
                 resourceType,
-                resourceCapacity: resourceCapacity ? Number(resourceCapacity) : undefined,
+                resourceCapacity: resourceCapacity ? Number(resourceCapacity) : null,
                 autoAcceptBookings,
                 allowConflicts,
-                bookingWindowDays: bookingWindowDays ? Number(bookingWindowDays) : undefined,
-                maxDurationMinutes: maxDurationMinutes ? Number(maxDurationMinutes) : undefined,
+                bookingWindowDays: bookingWindowDays ? Number(bookingWindowDays) : null,
+                maxDurationMinutes: maxDurationMinutes ? Number(maxDurationMinutes) : null,
             });
             onUpdate(updated);
             setSaved(true);

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

@@ -7,11 +7,14 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { AccessControlList, getMailboxAcl, grantMailboxAccess, revokeMailboxAccess } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 
 const DEFAULT_DELEGATE_ACTIONS = ["read", "list", "count", "exists"];
 
 export interface ShareAccessCardProps {
     mailboxUid: string;
+    /** The mailbox's owner - their own grant is shown but can't be revoked from here. */
+    ownerUserUid?: string;
 }
 
 /**
@@ -19,12 +22,14 @@ export interface ShareAccessCardProps {
  * mechanism behind Exchange-style shared mailboxes. `records` on a mailbox's own ACL doubles as both the
  * owner's grant (if any) and every delegate's — see `BaseMailboxRoute`'s doc comment in `@rapidmx/restapi`.
  */
-export default function ShareAccessCard({ mailboxUid }: ShareAccessCardProps) {
+export default function ShareAccessCard({ mailboxUid, ownerUserUid }: ShareAccessCardProps) {
     const [acl, setAcl] = useState<AccessControlList | null>(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    const [notice, setNotice] = useState<string | null>(null);
     const [newUserUid, setNewUserUid] = useState("");
     const [saving, setSaving] = useState(false);
+    const [revokeTarget, setRevokeTarget] = useState<string | null>(null);
 
     function reload() {
         setLoading(true);
@@ -45,8 +50,19 @@ export default function ShareAccessCard({ mailboxUid }: ShareAccessCardProps) {
         }
         setSaving(true);
         setError(null);
+        setNotice(null);
         try {
-            await grantMailboxAccess(mailboxUid, userUid, DEFAULT_DELEGATE_ACTIONS);
+            // `grantMailboxAccess()` replaces any existing record for this uid, so granting read access to someone
+            // who already has more (e.g. the owner) would silently downgrade them. Merge with their current actions.
+            const current = await getMailboxAcl(mailboxUid);
+            const existing = current.records.find((record) => record.userOrRoleId === userUid)?.actions ?? [];
+            const missing = DEFAULT_DELEGATE_ACTIONS.filter((action) => !existing.includes(action));
+            if (missing.length === 0) {
+                setNotice(`${userUid} already has this access.`);
+                setNewUserUid("");
+                return;
+            }
+            await grantMailboxAccess(mailboxUid, userUid, [...existing, ...missing]);
             setNewUserUid("");
             reload();
         } catch (err) {
@@ -56,9 +72,13 @@ export default function ShareAccessCard({ mailboxUid }: ShareAccessCardProps) {
         }
     }
 
-    async function handleRevoke(userOrRoleId: string) {
+    // Only ever invoked from the revoke-confirmation modal below, which only renders once `revokeTarget` is set.
+    async function handleRevoke() {
+        const userOrRoleId = revokeTarget!;
+        setRevokeTarget(null);
         setSaving(true);
         setError(null);
+        setNotice(null);
         try {
             await revokeMailboxAccess(mailboxUid, userOrRoleId);
             reload();
@@ -77,6 +97,7 @@ export default function ShareAccessCard({ mailboxUid }: ShareAccessCardProps) {
             </p>
 
             {error && <Alert>{error}</Alert>}
+            {notice && !error && <div className="mb-4 text-sm text-text-muted">{notice}</div>}
 
             {loading ? (
                 <p className="text-sm text-text-muted">Loading&hellip;</p>
@@ -94,14 +115,18 @@ export default function ShareAccessCard({ mailboxUid }: ShareAccessCardProps) {
                                 <div className="text-sm font-medium">{record.userOrRoleId}</div>
                                 <div className="text-xs text-text-muted">{record.actions.join(", ")}</div>
                             </div>
-                            <button
-                                type="button"
-                                onClick={() => handleRevoke(record.userOrRoleId)}
-                                disabled={saving}
-                                className="text-sm text-danger hover:underline disabled:opacity-55"
-                            >
-                                Revoke
-                            </button>
+                            {record.userOrRoleId === ownerUserUid ? (
+                                <span className="text-xs font-bold uppercase tracking-wide text-text-muted">Owner</span>
+                            ) : (
+                                <button
+                                    type="button"
+                                    onClick={() => setRevokeTarget(record.userOrRoleId)}
+                                    disabled={saving}
+                                    className="text-sm text-danger hover:underline disabled:opacity-55"
+                                >
+                                    Revoke
+                                </button>
+                            )}
                         </li>
                     ))}
                 </ul>
@@ -119,6 +144,25 @@ export default function ShareAccessCard({ mailboxUid }: ShareAccessCardProps) {
                     Grant
                 </Button>
             </form>
+
+            <Modal open={revokeTarget !== null} onClose={() => setRevokeTarget(null)} title="Revoke access">
+                <p className="text-sm mb-5">
+                    Revoke <strong className="break-all">{revokeTarget}</strong>&rsquo;s access to this mailbox? They lose it
+                    immediately.
+                </p>
+                <div className="flex gap-3 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setRevokeTarget(null)}>
+                        Cancel
+                    </Button>
+                    <Button
+                        type="button"
+                        className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
+                        onClick={() => void handleRevoke()}
+                    >
+                        Revoke
+                    </Button>
+                </div>
+            </Modal>
         </div>
     );
 }