@rapidmx/web-client 0.11.0 → 0.12.0

package/apps/shared/components/sharing/PrincipalResolver.tsx

@@ -0,0 +1,164 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { KeyboardEvent, ReactNode, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+export interface PrincipalResolverProps {
+    /** Resolves what was typed - a mailbox address, an auth-server username or e-mail alias, or a user uid - to
+     * the one person it names, exact match only. Rejects (typically with an `ApiRequestError`) for nobody. */
+    resolve: (principal: string) => Promise<ResolvedPrincipal>;
+    /** Called once the caller confirms the resolved person is the right one. The box is cleared once this
+     * resolves - throw (or reject) to keep the person on screen and show an error instead. */
+    onResolved: (person: ResolvedPrincipal) => void | Promise<void>;
+    /** Text put in the box to start with - a stored entry being replaced, say - looked up automatically on mount. */
+    initialPrincipal?: string;
+    /** What the box asks for. */
+    placeholder: string;
+    /** The box's accessible name. */
+    ariaLabel: string;
+    /** Extra controls rendered between the text box and the Find button (e.g. a role selector). */
+    children?: ReactNode;
+    /** The confirm button's label (e.g. "Grant", "Use this owner"). */
+    confirmLabel: string;
+    /** What the confirmation row says once a person is found - e.g. "Share with X as Y?". */
+    describeConfirm: (person: ResolvedPrincipal) => ReactNode;
+    /** Shown if `onResolved` rejects, unless it was an `ApiRequestError` (then its own message is shown). */
+    confirmErrorMessage: string;
+    /** Shown as a Cancel button next to the box when set (replacing an entry). */
+    onCancel?: () => void;
+}
+
+/** Who a resolved person is, for a person to check before confirming: their name and address, else their uid. */
+export function describePerson(person: ResolvedPrincipal): string {
+    if (person.displayName && person.address) return `${person.displayName} <${person.address}>`;
+    return person.displayName ?? person.address ?? `user ${person.userUid}`;
+}
+
+/**
+ * "Who?" - anywhere a person is assigned by typed identifier rather than picked from an already-loaded list. What
+ * is typed is RESOLVED by the server (`resolve`) to the person it names before anything is saved, and the person is
+ * shown (name and address) for the caller to confirm; only `onResolved` ever sees the resolved, verified person -
+ * never the free text. This is deliberately exact-match, type-then-confirm - never a live/fuzzy search-as-you-type
+ * autocomplete, which would let anyone with access to the field enumerate the user directory by partial name.
+ *
+ * Parameterized entirely by `resolve`/`onResolved` (and the wording props) so every caller - mailbox sharing
+ * (`PrincipalPicker`, a thin wrapper around this component), mailbox ownership, escrow-scope holders, ... - reuses
+ * the same resolve-then-confirm UX and privacy posture rather than each reimplementing it.
+ *
+ * Deliberately renders no `<form>` of its own (Enter-to-find is wired up by hand instead, see `handleKeyDown()`) -
+ * some callers (`MailboxCreateForm`) use this as one field of their own, larger `<form>`, and a nested `<form>` is
+ * invalid HTML that real browsers mis-handle (an inner Enter keypress can submit the wrong one).
+ */
+export default function PrincipalResolver({
+    resolve,
+    onResolved,
+    initialPrincipal,
+    placeholder,
+    ariaLabel,
+    children,
+    confirmLabel,
+    describeConfirm,
+    confirmErrorMessage,
+    onCancel,
+}: PrincipalResolverProps) {
+    const [typed, setTyped] = useState(initialPrincipal ?? "");
+    const [person, setPerson] = useState<ResolvedPrincipal | null>(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // A stored entry being replaced is looked up straight away, so its person is shown without a click.
+    useEffect(() => {
+        if (initialPrincipal) {
+            void find(initialPrincipal);
+        }
+    }, [initialPrincipal]);
+
+    async function find(principal: string) {
+        setBusy(true);
+        setError(null);
+        setPerson(null);
+        try {
+            setPerson(await resolve(principal));
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not look that person up.");
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    function submitFind() {
+        const principal = typed.trim();
+        if (principal) {
+            void find(principal);
+        }
+    }
+
+    /** Enter in the text box finds, same as clicking the button - handled here (not a native `<form>` submit,
+     * see this component's own doc comment on why) so it works whether or not a caller nests this inside one of
+     * their own forms (`MailboxCreateForm` does). */
+    function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+        if (e.key === "Enter") {
+            // Stops the keystroke from also submitting an ANCESTOR `<form>` this component happens to be nested in.
+            e.preventDefault();
+            submitFind();
+        }
+    }
+
+    // Only reachable from the confirm button, which only renders once `person` is set.
+    async function handleConfirm() {
+        setBusy(true);
+        setError(null);
+        try {
+            await onResolved(person!);
+            setTyped("");
+            setPerson(null);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : confirmErrorMessage);
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-2">
+            {error && <Alert>{error}</Alert>}
+            <div className="flex gap-2">
+                <input
+                    type="text"
+                    aria-label={ariaLabel}
+                    placeholder={placeholder}
+                    className="flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text"
+                    value={typed}
+                    onChange={(e) => {
+                        setTyped(e.target.value);
+                        setPerson(null);
+                    }}
+                    onKeyDown={handleKeyDown}
+                    disabled={busy}
+                />
+                {children}
+                <Button type="button" variant="secondary" loading={busy && !person} disabled={busy} className="!w-auto" onClick={submitFind}>
+                    Find
+                </Button>
+                {onCancel && (
+                    <Button type="button" variant="text" className="!w-auto" onClick={onCancel}>
+                        Cancel
+                    </Button>
+                )}
+            </div>
+            {person && (
+                <div className="flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm">
+                    <span>{describeConfirm(person)}</span>
+                    <Button type="button" loading={busy} disabled={busy} className="!w-auto" onClick={() => void handleConfirm()}>
+                        {confirmLabel}
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/apps/admin/mailboxes/new/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import AdminShell from "../../../shared/components/admin/layout/AdminShell.js";
 import MailboxCreateForm from "../../../shared/components/admin/settings/MailboxCreateForm.js";
 export default function NewMailboxPage(props) {
-    return (_jsx(AdminShell, { ...props, active: "mailboxes", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "New mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Leave \"Owner user uid\" blank to create a true ownerless shared mailbox (the Exchange \"shared mailbox\" concept) \u2014 access is then granted entirely to delegates afterward, not to a single owner. Set an owner to create a mailbox for a specific user instead." }), _jsx(MailboxCreateForm, { cancelHref: "/admin", onCreated: (mailbox) => {
+    return (_jsx(AdminShell, { ...props, active: "mailboxes", children: _jsxs("div", { className: "max-w-xl", children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "New mailbox" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Choose \"Shared mailbox\" to create a true ownerless mailbox (the Exchange \"shared mailbox\" concept) \u2014 access is then granted entirely to delegates afterward, not to a single owner. Choose \"Owned by a specific person\" and look them up to create a mailbox for a specific user instead." }), _jsx(MailboxCreateForm, { cancelHref: "/admin", onCreated: (mailbox) => {
                         window.location.href = `/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`;
                     } })] }) }));
 }

package/dist/apps/shared/components/admin/escrowScopes/EscrowScopeKeyAndHoldersFields.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { toDatetimeLocal } from "@rapidmx/react-shared/util/dateInput.js";
+import { resolveEscrowScopeHolder } from "@rapidmx/react-shared/admin/escrowScopesApi.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
-import StringListField from "../../forms/StringListField.js";
+import PrincipalListField from "../../sharing/PrincipalListField.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";
 /** 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. */
@@ -31,5 +32,5 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
     function set(key, next) {
         onChange({ ...value, [key]: next });
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Public key" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "The fields of an already-issued certificate \u2014 this server never generates or holds the corresponding private key." }), _jsx(FormField, { label: "Public key (base64)", htmlFor: "publicKey", children: _jsx("textarea", { id: "publicKey", className: `${INPUT_CLASS} font-mono text-xs`, rows: 4, value: value.publicKey, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("publicKey", e.target.value) }) }), _jsx(FormField, { label: "Key type", htmlFor: "keyType", children: _jsx("input", { id: "keyType", type: "text", className: INPUT_CLASS, value: value.keyType, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("keyType", e.target.value), placeholder: "x509" }) }), _jsx(FormField, { label: "Fingerprint (hex SHA-256)", htmlFor: "fingerprint", children: _jsx("input", { id: "fingerprint", type: "text", className: `${INPUT_CLASS} font-mono`, value: value.fingerprint, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("fingerprint", e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-4", children: [_jsx(FormField, { label: "Not before", htmlFor: "notBefore", children: _jsx("input", { id: "notBefore", type: "datetime-local", className: INPUT_CLASS, value: value.notBefore, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("notBefore", e.target.value) }) }), _jsx(FormField, { label: "Not after", htmlFor: "notAfter", children: _jsx("input", { id: "notAfter", type: "datetime-local", className: INPUT_CLASS, value: value.notAfter, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("notAfter", e.target.value) }) })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Holders & dual control" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Every uid below is granted the eDiscovery/compliance holder role for this scope \u2014 a deliberately separate role from server administration. At least one holder is required." }), _jsx(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 }), _jsx(FormField, { label: "Required holders (M-of-N dual control)", htmlFor: "requiredHolders", children: _jsx("input", { id: "requiredHolders", type: "number", className: INPUT_CLASS, value: value.requiredHolders, disabled: disabled, onChange: (e) => set("requiredHolders", Number(e.target.value) || 1) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.notifySubjectOnAccess, disabled: disabled, onChange: (e) => set("notifySubjectOnAccess", e.target.checked) }), "Notify subject on access"] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Public key" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "The fields of an already-issued certificate \u2014 this server never generates or holds the corresponding private key." }), _jsx(FormField, { label: "Public key (base64)", htmlFor: "publicKey", children: _jsx("textarea", { id: "publicKey", className: `${INPUT_CLASS} font-mono text-xs`, rows: 4, value: value.publicKey, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("publicKey", e.target.value) }) }), _jsx(FormField, { label: "Key type", htmlFor: "keyType", children: _jsx("input", { id: "keyType", type: "text", className: INPUT_CLASS, value: value.keyType, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("keyType", e.target.value), placeholder: "x509" }) }), _jsx(FormField, { label: "Fingerprint (hex SHA-256)", htmlFor: "fingerprint", children: _jsx("input", { id: "fingerprint", type: "text", className: `${INPUT_CLASS} font-mono`, value: value.fingerprint, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("fingerprint", e.target.value) }) }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-4", children: [_jsx(FormField, { label: "Not before", htmlFor: "notBefore", children: _jsx("input", { id: "notBefore", type: "datetime-local", className: INPUT_CLASS, value: value.notBefore, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("notBefore", e.target.value) }) }), _jsx(FormField, { label: "Not after", htmlFor: "notAfter", children: _jsx("input", { id: "notAfter", type: "datetime-local", className: INPUT_CLASS, value: value.notAfter, disabled: disabled, readOnly: keyReadOnly, onChange: (e) => set("notAfter", e.target.value) }) })] })] }), _jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "Holders & dual control" }), _jsx("p", { className: "text-sm text-text-muted mb-4", children: "Every uid below is granted the eDiscovery/compliance holder role for this scope \u2014 a deliberately separate role from server administration. At least one holder is required." }), _jsx(PrincipalListField, { label: "Holder user uids", values: value.holderUserUids, onChange: (holderUserUids) => set("holderUserUids", holderUserUids), resolve: resolveEscrowScopeHolder, emptyMessage: "No holders added yet.", disabled: disabled }), _jsx(FormField, { label: "Required holders (M-of-N dual control)", htmlFor: "requiredHolders", children: _jsx("input", { id: "requiredHolders", type: "number", className: INPUT_CLASS, value: value.requiredHolders, disabled: disabled, onChange: (e) => set("requiredHolders", Number(e.target.value) || 1) }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: value.notifySubjectOnAccess, disabled: disabled, onChange: (e) => set("notifySubjectOnAccess", e.target.checked) }), "Notify subject on access"] })] })] }));
 }

package/dist/apps/shared/components/admin/settings/DomainDnsSetup.js

@@ -15,6 +15,8 @@ const RECORD_TYPE_LABELS = {
     spf: "SPF",
     dkim: "DKIM",
     dmarc: "DMARC",
+    autodiscover_cname: "Autodiscover (CNAME)",
+    autodiscover_srv: "Autodiscover (SRV)",
 };
 /** How each record is named in a Copy button's accessible name ("Copy value for the SPF record"). */
 const RECORD_TYPE_NAMES = {
@@ -23,12 +25,25 @@ const RECORD_TYPE_NAMES = {
     spf: "SPF",
     dkim: "DKIM",
     dmarc: "DMARC",
+    autodiscover_cname: "Autodiscover CNAME",
+    autodiscover_srv: "Autodiscover SRV",
+};
+/** A one-line "why this matters", shown under a checklist row's label - only for record types unfamiliar
+ * enough to need one; the well-known mail records (ownership/MX/SPF/DKIM/DMARC) don't. */
+const RECORD_TYPE_HELP = {
+    autodiscover_cname: "So EAS and Outlook clients can find this server automatically from just an email address. This hostname also needs to be covered by this server's TLS certificate.",
+    autodiscover_srv: "Same purpose as the CNAME above, for clients that check DNS SRV instead - and, unlike the CNAME, needs no extra TLS certificate, since it points at a hostname already covered. Prefer this one when a second certificate is hard to obtain.",
 };
 /** An MX record's recommended value is `"<priority> <mail server>"` - two separate fields in a DNS provider's form. */
 function splitMxValue(value) {
     const match = /^(\d+)\s+(\S+)$/.exec(value.trim());
     return match ? { priority: match[1], server: match[2] } : null;
 }
+/** A SRV record's recommended value is `"<priority> <weight> <port> <target>"` - four separate fields in a DNS provider's form. */
+function splitSrvValue(value) {
+    const match = /^(\d+)\s+(\d+)\s+(\d+)\s+(\S+)$/.exec(value.trim());
+    return match ? { priority: match[1], weight: match[2], port: match[3], target: match[4] } : null;
+}
 /** A value to type into a DNS provider's form, shown in full (long DKIM keys wrap) with a Copy button beside it. */
 function CopyableValue({ value, copyLabel }) {
     return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("code", { className: "flex-1 min-w-0 text-xs break-all", children: value }), _jsx(CopyButton, { value: value, label: copyLabel })] }));
@@ -88,14 +103,19 @@ export default function DomainDnsSetup({ uid, onLoaded }) {
     const ownership = dnsSetup.find((c) => c.type === "ownership");
     const ownershipValue = ownership?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`;
     const ownershipName = ownership?.recordName || domain.name;
-    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm", children: [_jsx("dt", { className: "text-text-muted", children: "Enabled" }), _jsx("dd", { children: domain.enabled ? "Yes" : "No" }), _jsx("dt", { className: "text-text-muted", children: "Verification" }), _jsx("dd", { children: domain.verified ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Verified" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Unverified" })) }), _jsx("dt", { className: "text-text-muted", children: "Last checked" }), _jsx("dd", { children: domain.lastCheckedAt ? new Date(domain.lastCheckedAt).toLocaleString() : "Never" })] }), !domain.verified && (_jsxs("div", { className: "mt-5 pt-5 border-t border-border", children: [_jsxs("p", { className: "text-sm mb-2", children: ["Add the following TXT record to ", _jsx("strong", { children: domain.name }), " to prove ownership, then verify:"] }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] items-start gap-x-4 gap-y-2 text-sm", children: [_jsx("dt", { className: "text-text-muted py-2", children: "Type" }), _jsx("dd", { className: "py-2", children: "TXT" }), _jsx("dt", { className: "text-text-muted py-2", children: "Name / host" }), _jsx("dd", { className: "bg-surface-alt border border-border rounded-sm py-1.5 px-3", children: _jsx(CopyableValue, { value: ownershipName, copyLabel: "Copy name for the ownership TXT record" }) }), _jsx("dt", { className: "text-text-muted py-2", children: "Value" }), _jsx("dd", { className: "bg-surface-alt border border-border rounded-sm py-1.5 px-3", children: _jsx(CopyableValue, { value: ownershipValue, copyLabel: "Copy value for the ownership TXT record" }) })] }), verifyError && (_jsx("div", { className: "mt-3", children: _jsx(Alert, { children: verifyError }) })), _jsx(Button, { type: "button", className: "!w-auto mt-3", loading: verifying, disabled: verifying, onClick: handleVerify, children: verifyError ? "Try again" : "Verify now" })] }))] }), dnsSetup.length > 0 && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "DNS setup checklist" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Record", "Status", "Name / host", "Recommended value"].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: dnsSetup.map((check) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border", children: [RECORD_TYPE_LABELS[check.type], _jsxs("div", { className: "text-xs text-text-muted", children: ["Type: ", check.recordKind] })] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: !check.configured ? (_jsx("span", { className: "text-xs text-text-muted", children: "Not configured" })) : check.matches ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Live" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Not found" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted min-w-[10rem]", children: check.recordName ? (_jsx(CopyableValue, { value: check.recordName, copyLabel: `Copy name for the ${RECORD_TYPE_NAMES[check.type]} record` })) : (_jsx("code", { className: "text-xs", children: "\u2014" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted", children: check.recommendedValue ? (_jsx(DnsRecordValue, { check: check, value: check.recommendedValue })) : (_jsx("code", { className: "text-xs", children: "\u2014" })) })] }, check.type))) })] }) }), _jsxs("p", { className: "text-xs text-text-muted mt-3", children: ["Some DNS providers want the name relative to the domain (for example ", _jsx("code", { children: "@" }), " for the domain itself) rather than the full name."] })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm", children: [_jsx("dt", { className: "text-text-muted", children: "Enabled" }), _jsx("dd", { children: domain.enabled ? "Yes" : "No" }), _jsx("dt", { className: "text-text-muted", children: "Verification" }), _jsx("dd", { children: domain.verified ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Verified" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Unverified" })) }), _jsx("dt", { className: "text-text-muted", children: "Last checked" }), _jsx("dd", { children: domain.lastCheckedAt ? new Date(domain.lastCheckedAt).toLocaleString() : "Never" })] }), !domain.verified && (_jsxs("div", { className: "mt-5 pt-5 border-t border-border", children: [_jsxs("p", { className: "text-sm mb-2", children: ["Add the following TXT record to ", _jsx("strong", { children: domain.name }), " to prove ownership, then verify:"] }), _jsxs("dl", { className: "grid grid-cols-[auto_1fr] items-start gap-x-4 gap-y-2 text-sm", children: [_jsx("dt", { className: "text-text-muted py-2", children: "Type" }), _jsx("dd", { className: "py-2", children: "TXT" }), _jsx("dt", { className: "text-text-muted py-2", children: "Name / host" }), _jsx("dd", { className: "bg-surface-alt border border-border rounded-sm py-1.5 px-3", children: _jsx(CopyableValue, { value: ownershipName, copyLabel: "Copy name for the ownership TXT record" }) }), _jsx("dt", { className: "text-text-muted py-2", children: "Value" }), _jsx("dd", { className: "bg-surface-alt border border-border rounded-sm py-1.5 px-3", children: _jsx(CopyableValue, { value: ownershipValue, copyLabel: "Copy value for the ownership TXT record" }) })] }), verifyError && (_jsx("div", { className: "mt-3", children: _jsx(Alert, { children: verifyError }) })), _jsx(Button, { type: "button", className: "!w-auto mt-3", loading: verifying, disabled: verifying, onClick: handleVerify, children: verifyError ? "Try again" : "Verify now" })] }))] }), dnsSetup.length > 0 && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "DNS setup checklist" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Record", "Status", "Name / host", "Recommended value"].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: dnsSetup.map((check) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2.5 px-2.5 border-b border-border", children: [RECORD_TYPE_LABELS[check.type], _jsxs("div", { className: "text-xs text-text-muted", children: ["Type: ", check.recordKind] }), RECORD_TYPE_HELP[check.type] && (_jsx("div", { className: "text-xs text-text-muted mt-1 max-w-xs", children: RECORD_TYPE_HELP[check.type] }))] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: !check.configured ? (_jsx("span", { className: "text-xs text-text-muted", children: "Not configured" })) : check.matches ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Live" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Not found" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted min-w-[10rem]", children: check.recordName ? (_jsx(CopyableValue, { value: check.recordName, copyLabel: `Copy name for the ${RECORD_TYPE_NAMES[check.type]} record` })) : (_jsx("code", { className: "text-xs", children: "\u2014" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted", children: check.recommendedValue ? (_jsx(DnsRecordValue, { check: check, value: check.recommendedValue })) : (_jsx("code", { className: "text-xs", children: "\u2014" })) })] }, check.type))) })] }) }), _jsxs("p", { className: "text-xs text-text-muted mt-3", children: ["Some DNS providers want the name relative to the domain (for example ", _jsx("code", { children: "@" }), " for the domain itself) rather than the full name."] })] }))] }));
 }
-/** The value cell of a checklist row: an MX value as its two form fields (priority and mail server), anything else whole. */
+/** The value cell of a checklist row: an MX value as its two form fields (priority and mail server), a SRV value as
+ * its four form fields (priority, weight, port and target), anything else whole. */
 function DnsRecordValue({ check, value }) {
     const recordName = RECORD_TYPE_NAMES[check.type];
     const mx = check.type === "mx" ? splitMxValue(value) : null;
-    if (!mx) {
-        return _jsx(CopyableValue, { value: value, copyLabel: `Copy value for the ${recordName} record` });
+    if (mx) {
+        return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs w-20 shrink-0 pt-1", children: "Priority" }), _jsx(CopyableValue, { value: mx.priority, copyLabel: `Copy priority for the ${recordName} record` })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs w-20 shrink-0 pt-1", children: "Mail server" }), _jsx(CopyableValue, { value: mx.server, copyLabel: `Copy mail server for the ${recordName} record` })] })] }));
+    }
+    const srv = check.type === "autodiscover_srv" ? splitSrvValue(value) : null;
+    if (srv) {
+        return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs w-20 shrink-0 pt-1", children: "Priority" }), _jsx(CopyableValue, { value: srv.priority, copyLabel: `Copy priority for the ${recordName} record` })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs w-20 shrink-0 pt-1", children: "Weight" }), _jsx(CopyableValue, { value: srv.weight, copyLabel: `Copy weight for the ${recordName} record` })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs w-20 shrink-0 pt-1", children: "Port" }), _jsx(CopyableValue, { value: srv.port, copyLabel: `Copy port for the ${recordName} record` })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs w-20 shrink-0 pt-1", children: "Target" }), _jsx(CopyableValue, { value: srv.target, copyLabel: `Copy target for the ${recordName} record` })] })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs w-20 shrink-0 pt-1", children: "Priority" }), _jsx(CopyableValue, { value: mx.priority, copyLabel: `Copy priority for the ${recordName} record` })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs w-20 shrink-0 pt-1", children: "Mail server" }), _jsx(CopyableValue, { value: mx.server, copyLabel: `Copy mail server for the ${recordName} record` })] })] }));
+    return _jsx(CopyableValue, { value: value, copyLabel: `Copy value for the ${recordName} record` });
 }

package/dist/apps/shared/components/admin/settings/MailboxCreateForm.js

@@ -6,10 +6,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
-import { createMailbox, listMailboxDomains } from "@rapidmx/react-shared/mail/mailApi.js";
+import { createMailbox, listMailboxDomains, resolveMailboxOwner } 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 FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+import PrincipalResolver, { describePerson } from "../../sharing/PrincipalResolver.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";
 const SELECT_CLASS = "text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /**
@@ -22,7 +23,8 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [domains, setDomains] = useState([]);
     const [domain, setDomain] = useState("");
     const [displayName, setDisplayName] = useState(defaults?.displayName ?? "");
-    const [ownerUserUid, setOwnerUserUid] = useState(defaults?.ownerUserUid ?? "");
+    const [ownerMode, setOwnerMode] = useState(defaults?.ownerUserUid ? "owned" : "shared");
+    const [resolvedOwner, setResolvedOwner] = useState(null);
     const [timezone, setTimezone] = useState("UTC");
     const [quotaGb, setQuotaGb] = useState(5);
     // Only replaced by the mailbox policy's default if the admin hasn't typed a quota of their own yet.
@@ -75,15 +77,18 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             setError("A display name can't contain \"@\" (or a look-alike) or line breaks.");
             return;
         }
+        if (ownerMode === "owned" && !resolvedOwner) {
+            setError("Look up and confirm the mailbox's owner, or choose a shared mailbox instead.");
+            return;
+        }
         setSaving(true);
         try {
-            // ownerUserUid left blank creates a true ownerless shared mailbox (e.g. support@example.com);
-            // delegates are then granted access from the mailbox's detail page. A resource mailbox is
-            // ownerless the same way — leave "Owner user uid" blank for one too.
+            // "Shared mailbox" creates a true ownerless mailbox (e.g. support@example.com); delegates are then
+            // granted access from the mailbox's detail page. A resource mailbox is ownerless the same way.
             const mailbox = await createMailbox({
                 primarySmtpAddress: address,
                 displayName: displayName.trim(),
-                ownerUserUid: ownerUserUid.trim() || undefined,
+                ownerUserUid: ownerMode === "owned" ? resolvedOwner.userUid : undefined,
                 timezone,
                 quotaBytes: Math.round(quotaGb * 1000000000),
                 ...(isResource && {
@@ -105,7 +110,13 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             setSaving(false);
         }
     }
-    return (_jsxs(_Fragment, { children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [constrained ? (_jsx(FormField, { label: "Local part", htmlFor: "localPart", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("input", { id: "localPart", type: "text", className: INPUT_CLASS, value: localPart, onChange: (e) => setLocalPart(e.target.value), placeholder: "support" }), _jsx("span", { className: "text-text-muted shrink-0", children: "@" }), _jsx("select", { "aria-label": "Domain", className: SELECT_CLASS, value: domain, onChange: (e) => setDomain(e.target.value), children: domains.map((d) => (_jsx("option", { value: d, children: d }, d))) })] }) })) : (_jsx(FormField, { label: "Primary SMTP address", htmlFor: "primarySmtpAddress", children: _jsx("input", { id: "primarySmtpAddress", type: "email", className: INPUT_CLASS, value: primarySmtpAddress, onChange: (e) => setPrimarySmtpAddress(e.target.value), placeholder: "support@example.com" }) })), _jsx(FormField, { label: "Display name", htmlFor: "displayName", children: _jsx("input", { id: "displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Support" }) }), _jsx(FormField, { label: "Owner user uid (optional)", htmlFor: "ownerUserUid", children: _jsx("input", { id: "ownerUserUid", type: "text", className: INPUT_CLASS, value: ownerUserUid, onChange: (e) => setOwnerUserUid(e.target.value), placeholder: "Leave blank for a shared mailbox" }) }), _jsx(FormField, { label: "Timezone", htmlFor: "timezone", children: _jsx("input", { id: "timezone", type: "text", className: INPUT_CLASS, value: timezone, onChange: (e) => setTimezone(e.target.value), placeholder: "America/Los_Angeles" }) }), _jsx(FormField, { label: "Quota (GB)", htmlFor: "quotaGb", children: _jsx("input", { id: "quotaGb", type: "number", min: 1, step: 1, className: INPUT_CLASS, value: quotaGb, onChange: (e) => {
+    return (_jsxs(_Fragment, { children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleSubmit, className: "bg-surface border border-border rounded-md p-6", children: [constrained ? (_jsx(FormField, { label: "Local part", htmlFor: "localPart", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("input", { id: "localPart", type: "text", className: INPUT_CLASS, value: localPart, onChange: (e) => setLocalPart(e.target.value), placeholder: "support" }), _jsx("span", { className: "text-text-muted shrink-0", children: "@" }), _jsx("select", { "aria-label": "Domain", className: SELECT_CLASS, value: domain, onChange: (e) => setDomain(e.target.value), children: domains.map((d) => (_jsx("option", { value: d, children: d }, d))) })] }) })) : (_jsx(FormField, { label: "Primary SMTP address", htmlFor: "primarySmtpAddress", children: _jsx("input", { id: "primarySmtpAddress", type: "email", className: INPUT_CLASS, value: primarySmtpAddress, onChange: (e) => setPrimarySmtpAddress(e.target.value), placeholder: "support@example.com" }) })), _jsx(FormField, { label: "Display name", htmlFor: "displayName", children: _jsx("input", { id: "displayName", type: "text", className: INPUT_CLASS, value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Support" }) }), _jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: "Owner" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "ownerMode", checked: ownerMode === "shared", onChange: () => {
+                                                    setOwnerMode("shared");
+                                                    setResolvedOwner(null);
+                                                } }), "Shared mailbox (no single owner)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", name: "ownerMode", checked: ownerMode === "owned", onChange: () => setOwnerMode("owned") }), "Owned by a specific person"] }), ownerMode === "owned" &&
+                                        (resolvedOwner ? (_jsxs("div", { className: "flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm", children: [_jsxs("span", { children: ["Owner: ", _jsx("strong", { className: "break-all", children: describePerson(resolvedOwner) })] }), _jsx(Button, { type: "button", variant: "text", className: "!w-auto", onClick: () => setResolvedOwner(null), children: "Change" })] })) : (_jsx(PrincipalResolver, { resolve: resolveMailboxOwner, onResolved: (person) => {
+                                                setResolvedOwner(person);
+                                            }, initialPrincipal: defaults?.ownerUserUid, placeholder: "Email address, username or user id", ariaLabel: "Mailbox owner", confirmLabel: "Use this owner", confirmErrorMessage: "Could not confirm this person.", describeConfirm: (person) => (_jsxs(_Fragment, { children: ["Make ", _jsx("strong", { className: "break-all", children: describePerson(person) }), " the owner?"] })) })))] })] }), _jsx(FormField, { label: "Timezone", htmlFor: "timezone", children: _jsx("input", { id: "timezone", type: "text", className: INPUT_CLASS, value: timezone, onChange: (e) => setTimezone(e.target.value), placeholder: "America/Los_Angeles" }) }), _jsx(FormField, { label: "Quota (GB)", htmlFor: "quotaGb", children: _jsx("input", { id: "quotaGb", type: "number", min: 1, step: 1, className: INPUT_CLASS, value: quotaGb, onChange: (e) => {
                                 quotaTouched.current = true;
                                 setQuotaGb(Number(e.target.value));
                             } }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm mb-4", children: [_jsx("input", { type: "checkbox", checked: isResource, onChange: (e) => setIsResource(e.target.checked) }), "This is a resource mailbox (a bookable room or piece of equipment)"] }), isResource && (_jsxs("div", { className: "border border-border rounded-sm p-4 mb-4 flex flex-col gap-4", children: [_jsx(FormField, { label: "Resource type", htmlFor: "resourceType", children: _jsxs("select", { id: "resourceType", className: SELECT_CLASS, value: resourceType, onChange: (e) => setResourceType(e.target.value), children: [_jsx("option", { value: "room", children: "Room" }), _jsx("option", { value: "equipment", children: "Equipment" })] }) }), _jsx(FormField, { label: "Capacity (optional)", htmlFor: "resourceCapacity", children: _jsx("input", { id: "resourceCapacity", type: "number", min: 0, step: 1, className: INPUT_CLASS, value: resourceCapacity, onChange: (e) => setResourceCapacity(e.target.value), placeholder: "Informational only" }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: autoAcceptBookings, onChange: (e) => setAutoAcceptBookings(e.target.checked) }), "Automatically accept booking requests"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", checked: allowConflicts, onChange: (e) => setAllowConflicts(e.target.checked) }), "Allow conflicting bookings (skip conflict checking entirely)"] }), _jsx(FormField, { label: "Booking window, in days (optional)", htmlFor: "bookingWindowDays", children: _jsx("input", { id: "bookingWindowDays", type: "number", min: 0, step: 1, className: INPUT_CLASS, value: bookingWindowDays, onChange: (e) => setBookingWindowDays(e.target.value), placeholder: "No limit" }) }), _jsx(FormField, { label: "Maximum duration, in minutes (optional)", htmlFor: "maxDurationMinutes", children: _jsx("input", { id: "maxDurationMinutes", type: "number", min: 0, step: 1, className: INPUT_CLASS, value: maxDurationMinutes, onChange: (e) => setMaxDurationMinutes(e.target.value), placeholder: "No limit" }) })] })), _jsxs("div", { className: "flex gap-3 mt-2", children: [_jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: submitLabel }), cancelHref && (_jsx("a", { href: cancelHref, children: _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", children: "Cancel" }) }))] })] })] }));

package/dist/apps/shared/components/sharing/PrincipalListField.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+export interface PrincipalListFieldProps {
+    label: string;
+    values: string[];
+    onChange: (values: string[]) => void;
+    /** Exact-match resolve call for what's typed - see `PrincipalResolver`. */
+    resolve: (principal: string) => Promise<ResolvedPrincipal>;
+    placeholder?: string;
+    emptyMessage?: string;
+    disabled?: boolean;
+}
+/**
+ * A list-of-user-uids editor - the same visual list/per-item-remove shape `StringListField` established, but a
+ * uid can only be ADDED by looking it up and confirming who it is first (`PrincipalResolver`), never typed
+ * directly. Unlike `StringListField`'s free-text values (a distribution list's member addresses, a legal hold's
+ * custodian MAILBOX uids - values nobody needs to be "looked up" as a person for), every value here is a PERSON's
+ * user uid, granted a real role purely by what gets typed here - the exact "raw uid text field with no way to see
+ * whose it is" gap this app closes everywhere else a person is assigned by identifier.
+ *
+ * An already-added uid is still shown as plain text (same as `StringListField`, and as `ShareAccessCard`'s own
+ * member list) - it was already resolved and confirmed when it was added, so there is nothing left to look up.
+ */
+export default function PrincipalListField({ label, values, onChange, resolve, placeholder, emptyMessage, disabled }: PrincipalListFieldProps): React.JSX.Element;

package/dist/apps/shared/components/sharing/PrincipalListField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PrincipalResolver, { describePerson } from "./PrincipalResolver.js";
+/**
+ * A list-of-user-uids editor - the same visual list/per-item-remove shape `StringListField` established, but a
+ * uid can only be ADDED by looking it up and confirming who it is first (`PrincipalResolver`), never typed
+ * directly. Unlike `StringListField`'s free-text values (a distribution list's member addresses, a legal hold's
+ * custodian MAILBOX uids - values nobody needs to be "looked up" as a person for), every value here is a PERSON's
+ * user uid, granted a real role purely by what gets typed here - the exact "raw uid text field with no way to see
+ * whose it is" gap this app closes everywhere else a person is assigned by identifier.
+ *
+ * An already-added uid is still shown as plain text (same as `StringListField`, and as `ShareAccessCard`'s own
+ * member list) - it was already resolved and confirmed when it was added, so there is nothing left to look up.
+ */
+export default function PrincipalListField({ label, values, onChange, resolve, placeholder, emptyMessage = "None added yet.", disabled }) {
+    function handleRemove(uid) {
+        onChange(values.filter((v) => v !== uid));
+    }
+    return (_jsxs("div", { className: "mb-4", children: [_jsx("span", { className: "block text-sm font-semibold mb-1.5 text-text", children: label }), _jsxs("ul", { className: "flex flex-col gap-2 mb-2", children: [values.length === 0 && (_jsx("li", { className: "text-sm text-text-muted", children: emptyMessage }, "empty")), values.map((uid) => (_jsxs("li", { className: "flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm", children: [_jsx("span", { className: "text-sm font-medium break-all", children: uid }), _jsx("button", { type: "button", onClick: () => handleRemove(uid), disabled: disabled, className: "text-sm text-danger hover:underline disabled:opacity-55 shrink-0", children: "Remove" })] }, uid)))] }), !disabled && (_jsx(PrincipalResolver, { resolve: resolve, onResolved: (person) => {
+                    if (!values.includes(person.userUid)) {
+                        onChange([...values, person.userUid]);
+                    }
+                }, placeholder: placeholder ?? "Email address, username or user id", ariaLabel: label, confirmLabel: "Add", confirmErrorMessage: "Could not add this person.", describeConfirm: (person) => (_jsxs(_Fragment, { children: ["Add ", _jsx("strong", { className: "break-all", children: describePerson(person) }), "?"] })) }))] }));
+}

package/dist/apps/shared/components/sharing/PrincipalPicker.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 import { MailboxAccessRole, ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import { describePerson } from "./PrincipalResolver.js";
+export { describePerson };
 export interface PrincipalPickerProps {
     mailboxUid: string;
     /** What each access level is called on this page. */
@@ -15,12 +17,12 @@ export interface PrincipalPickerProps {
     /** Shown as a Cancel button next to the box when set (replacing an entry). */
     onCancel?: () => void;
 }
-/** Who a resolved person is, for a person to check before saving: their name and address, else their uid. */
-export declare function describePerson(person: ResolvedPrincipal): string;
 /**
- * "Who?" for a sharing screen. What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id -
- * is RESOLVED by the server (`resolveMailboxPrincipal()`) to the person it names before anything is saved, and the person
- * is shown (name and address) for the caller to confirm; only then is the grant made, against that person's uid. Free text
- * is never stored: an ACL record matches a user uid and nothing else, so a grant to a typed username applies to nobody.
+ * "Who?" for a sharing screen - a thin wrapper around the general `PrincipalResolver`, supplying mailbox sharing's
+ * own resolve call (`resolveMailboxPrincipal()`), its role selector, and its grant action (`setMailboxAccess()`).
+ * What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id - is RESOLVED by the
+ * server before anything is saved, and the person is shown (name and address) for the caller to confirm; only then
+ * is the grant made, against that person's uid. Free text is never stored: an ACL record matches a user uid and
+ * nothing else, so a grant to a typed username applies to nobody.
  */
 export default function PrincipalPicker({ mailboxUid, roleLabels, initialPrincipal, defaultRole, placeholder, onGranted, onCancel }: PrincipalPickerProps): React.JSX.Element;

package/dist/apps/shared/components/sharing/PrincipalPicker.js

@@ -1,77 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 ///////////////////////////////////////////////////////////////////////////////
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { useState } from "react";
 import { resolveMailboxPrincipal, setMailboxAccess, } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-/** Who a resolved person is, for a person to check before saving: their name and address, else their uid. */
-export function describePerson(person) {
-    if (person.displayName && person.address)
-        return `${person.displayName} <${person.address}>`;
-    return person.displayName ?? person.address ?? `user ${person.userUid}`;
-}
+import PrincipalResolver, { describePerson } from "./PrincipalResolver.js";
+export { describePerson };
 /**
- * "Who?" for a sharing screen. What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id -
- * is RESOLVED by the server (`resolveMailboxPrincipal()`) to the person it names before anything is saved, and the person
- * is shown (name and address) for the caller to confirm; only then is the grant made, against that person's uid. Free text
- * is never stored: an ACL record matches a user uid and nothing else, so a grant to a typed username applies to nobody.
+ * "Who?" for a sharing screen - a thin wrapper around the general `PrincipalResolver`, supplying mailbox sharing's
+ * own resolve call (`resolveMailboxPrincipal()`), its role selector, and its grant action (`setMailboxAccess()`).
+ * What is typed - a mailbox address, an auth-server username or e-mail alias, or a user id - is RESOLVED by the
+ * server before anything is saved, and the person is shown (name and address) for the caller to confirm; only then
+ * is the grant made, against that person's uid. Free text is never stored: an ACL record matches a user uid and
+ * nothing else, so a grant to a typed username applies to nobody.
  */
 export default function PrincipalPicker({ mailboxUid, roleLabels, initialPrincipal, defaultRole = "viewer", placeholder, onGranted, onCancel }) {
-    const [typed, setTyped] = useState(initialPrincipal ?? "");
     const [role, setRole] = useState(defaultRole);
-    const [person, setPerson] = useState(null);
-    const [busy, setBusy] = useState(false);
-    const [error, setError] = useState(null);
-    // A stored entry being replaced is looked up straight away, so its person is shown without a click.
-    useEffect(() => {
-        if (initialPrincipal) {
-            void find(initialPrincipal);
-        }
-    }, [initialPrincipal]);
-    async function find(principal) {
-        setBusy(true);
-        setError(null);
-        setPerson(null);
-        try {
-            setPerson(await resolveMailboxPrincipal(mailboxUid, principal));
-        }
-        catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not look that person up.");
-        }
-        finally {
-            setBusy(false);
-        }
-    }
-    function handleFind(e) {
-        e.preventDefault();
-        const principal = typed.trim();
-        if (principal) {
-            void find(principal);
-        }
-    }
-    // Only reachable from the confirm button, which only renders once `person` is set.
-    async function handleGrant() {
-        setBusy(true);
-        setError(null);
-        try {
+    return (_jsx(PrincipalResolver, { resolve: (principal) => resolveMailboxPrincipal(mailboxUid, principal), onResolved: async (person) => {
             await setMailboxAccess(mailboxUid, person.userUid, role);
             await onGranted(person, role);
-            setTyped("");
-            setPerson(null);
-        }
-        catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
-        }
-        finally {
-            setBusy(false);
-        }
-    }
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [error && _jsx(Alert, { children: error }), _jsxs("form", { onSubmit: handleFind, className: "flex gap-2", children: [_jsx("input", { type: "text", "aria-label": "Who to share with", placeholder: placeholder ?? "Email address, username or user id", className: "flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text", value: typed, onChange: (e) => {
-                            setTyped(e.target.value);
-                            setPerson(null);
-                        }, disabled: busy }), _jsx("select", { "aria-label": "Access level", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text", value: role, onChange: (e) => setRole(e.target.value), disabled: busy, children: Object.keys(roleLabels).map((value) => (_jsx("option", { value: value, children: roleLabels[value] }, value))) }), _jsx(Button, { type: "submit", variant: "secondary", loading: busy && !person, disabled: busy, className: "!w-auto", children: "Find" }), onCancel && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto", onClick: onCancel, children: "Cancel" }))] }), person && (_jsxs("div", { className: "flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm", children: [_jsxs("span", { children: ["Share with ", _jsx("strong", { className: "break-all", children: describePerson(person) }), " as ", _jsx("em", { children: roleLabels[role] }), "?"] }), _jsx(Button, { type: "button", loading: busy, disabled: busy, className: "!w-auto", onClick: () => void handleGrant(), children: "Grant" })] }))] }));
+        }, initialPrincipal: initialPrincipal, placeholder: placeholder ?? "Email address, username or user id", ariaLabel: "Who to share with", confirmLabel: "Grant", confirmErrorMessage: "Could not grant access.", describeConfirm: (person) => (_jsxs(_Fragment, { children: ["Share with ", _jsx("strong", { className: "break-all", children: describePerson(person) }), " as ", _jsx("em", { children: roleLabels[role] }), "?"] })), onCancel: onCancel, children: _jsx("select", { "aria-label": "Access level", className: "text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text", value: role, onChange: (e) => setRole(e.target.value), children: Object.keys(roleLabels).map((value) => (_jsx("option", { value: value, children: roleLabels[value] }, value))) }) }));
 }

package/dist/apps/shared/components/sharing/PrincipalResolver.d.ts

@@ -0,0 +1,44 @@
+import React, { ReactNode } from "react";
+import { ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+export interface PrincipalResolverProps {
+    /** Resolves what was typed - a mailbox address, an auth-server username or e-mail alias, or a user uid - to
+     * the one person it names, exact match only. Rejects (typically with an `ApiRequestError`) for nobody. */
+    resolve: (principal: string) => Promise<ResolvedPrincipal>;
+    /** Called once the caller confirms the resolved person is the right one. The box is cleared once this
+     * resolves - throw (or reject) to keep the person on screen and show an error instead. */
+    onResolved: (person: ResolvedPrincipal) => void | Promise<void>;
+    /** Text put in the box to start with - a stored entry being replaced, say - looked up automatically on mount. */
+    initialPrincipal?: string;
+    /** What the box asks for. */
+    placeholder: string;
+    /** The box's accessible name. */
+    ariaLabel: string;
+    /** Extra controls rendered between the text box and the Find button (e.g. a role selector). */
+    children?: ReactNode;
+    /** The confirm button's label (e.g. "Grant", "Use this owner"). */
+    confirmLabel: string;
+    /** What the confirmation row says once a person is found - e.g. "Share with X as Y?". */
+    describeConfirm: (person: ResolvedPrincipal) => ReactNode;
+    /** Shown if `onResolved` rejects, unless it was an `ApiRequestError` (then its own message is shown). */
+    confirmErrorMessage: string;
+    /** Shown as a Cancel button next to the box when set (replacing an entry). */
+    onCancel?: () => void;
+}
+/** Who a resolved person is, for a person to check before confirming: their name and address, else their uid. */
+export declare function describePerson(person: ResolvedPrincipal): string;
+/**
+ * "Who?" - anywhere a person is assigned by typed identifier rather than picked from an already-loaded list. What
+ * is typed is RESOLVED by the server (`resolve`) to the person it names before anything is saved, and the person is
+ * shown (name and address) for the caller to confirm; only `onResolved` ever sees the resolved, verified person -
+ * never the free text. This is deliberately exact-match, type-then-confirm - never a live/fuzzy search-as-you-type
+ * autocomplete, which would let anyone with access to the field enumerate the user directory by partial name.
+ *
+ * Parameterized entirely by `resolve`/`onResolved` (and the wording props) so every caller - mailbox sharing
+ * (`PrincipalPicker`, a thin wrapper around this component), mailbox ownership, escrow-scope holders, ... - reuses
+ * the same resolve-then-confirm UX and privacy posture rather than each reimplementing it.
+ *
+ * Deliberately renders no `<form>` of its own (Enter-to-find is wired up by hand instead, see `handleKeyDown()`) -
+ * some callers (`MailboxCreateForm`) use this as one field of their own, larger `<form>`, and a nested `<form>` is
+ * invalid HTML that real browsers mis-handle (an inner Enter keypress can submit the wrong one).
+ */
+export default function PrincipalResolver({ resolve, onResolved, initialPrincipal, placeholder, ariaLabel, children, confirmLabel, describeConfirm, confirmErrorMessage, onCancel, }: PrincipalResolverProps): React.JSX.Element;