@rapidmx/web-client 0.10.0 → 0.12.0

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

@@ -2,68 +2,69 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { AccessControlList, getMailboxAcl, grantMailboxAccess, revokeMailboxAccess } from "@rapidmx/react-shared/mail/mailApi.js";
+import {
+    listMailboxAccess,
+    MailboxAccessMember,
+    MailboxAccessRole,
+    removeMailboxAccess,
+    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";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+import PrincipalPicker from "../../sharing/PrincipalPicker.js";
 
-const DEFAULT_DELEGATE_ACTIONS = ["read", "list", "count", "exists"];
+const ROLE_LABELS: Record<MailboxAccessRole, string> = { viewer: "Read only", manager: "Full access" };
 
 export interface ShareAccessCardProps {
     mailboxUid: string;
-    /** The mailbox's owner - their own grant is shown but can't be revoked from here. */
+    /** The mailbox's owner: with one, only the owner can grant access to it. Without, the mailbox is shared and an
+     * administrator grants access here - to themselves included. */
     ownerUserUid?: string;
+    /** The signed-in administrator, for "Add me" on a shared mailbox. */
+    currentUserUid?: string;
+}
+
+function roleLabel(member: MailboxAccessMember): string {
+    if (member.role === "viewer") return ROLE_LABELS.viewer;
+    if (member.role === "manager") return ROLE_LABELS.manager;
+    return (member.actions ?? []).join(", ");
 }
 
 /**
- * Lets an admin (or, eventually, the mailbox owner) view and edit a mailbox's delegate access — the
- * 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`.
+ * A mailbox's members - the mechanism behind Exchange-style shared mailboxes - through the Sharing endpoints
+ * (`/mail/mailboxes/:id/access`), the audited way an administrator reaches a mailbox they hold no grant on. An
+ * administrator can review any mailbox's members and revoke any of them; they can grant access only on a shared
+ * (ownerless) mailbox - themselves included, which is how it appears in their own mail client. A personal mailbox is
+ * shared by its owner (or by an administrator impersonating them).
  */
-export default function ShareAccessCard({ mailboxUid, ownerUserUid }: ShareAccessCardProps) {
-    const [acl, setAcl] = useState<AccessControlList | null>(null);
+export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserUid }: ShareAccessCardProps) {
+    const [members, setMembers] = useState<MailboxAccessMember[]>([]);
     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);
+    // An entry that is not a user uid, being replaced with the user it was meant for.
+    const [replacing, setReplacing] = useState<MailboxAccessMember | null>(null);
 
     function reload() {
         setLoading(true);
         setError(null);
-        getMailboxAcl(mailboxUid)
-            .then(setAcl)
+        listMailboxAccess(mailboxUid)
+            .then(setMembers)
             .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load share settings."))
             .finally(() => setLoading(false));
     }
 
     useEffect(reload, [mailboxUid]);
 
-    async function handleGrant(e: FormEvent) {
-        e.preventDefault();
-        const userUid = newUserUid.trim();
-        if (!userUid) {
-            return;
-        }
+    async function addMe(userUid: string) {
         setSaving(true);
         setError(null);
-        setNotice(null);
         try {
-            // `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("");
+            await setMailboxAccess(mailboxUid, userUid, "manager");
             reload();
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
@@ -72,15 +73,33 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid }: ShareAcces
         }
     }
 
+    // Once the person is granted, the entry they replace (if any) is removed: the string it named never matched anyone.
+    async function handleGranted() {
+        const stale = replacing;
+        setReplacing(null);
+        let failure: string | null = null;
+        if (stale) {
+            try {
+                await removeMailboxAccess(mailboxUid, stale.userOrRoleId);
+            } catch (err) {
+                failure = err instanceof ApiRequestError ? err.message : "Could not remove the old entry.";
+            }
+        }
+        reload();
+        // After the reload, which clears the error it started with.
+        if (failure) {
+            setError(failure);
+        }
+    }
+
     // 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);
+            await removeMailboxAccess(mailboxUid, userOrRoleId);
             reload();
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not revoke access.");
@@ -89,61 +108,89 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid }: ShareAcces
         }
     }
 
+    const shared = !ownerUserUid;
+    const isMember = members.some((member) => member.userOrRoleId === currentUserUid);
+
     return (
         <div className="bg-surface border border-border rounded-md p-6">
             <h2 className="text-base font-bold uppercase tracking-wide mb-1">Shared access</h2>
             <p className="text-sm text-text-muted mb-4">
-                Grants read access to this mailbox for another user, independent of ownership.
+                {shared
+                    ? "Who has access to this shared mailbox. Adding yourself is how it appears in your own mail client; every change is recorded in the audit log."
+                    : "Who the owner has shared this mailbox with. You can review and revoke access; only the owner can grant it (impersonate them to do so)."}
             </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>
             ) : (
                 <ul className="flex flex-col gap-2 mb-4">
-                    {(acl?.records ?? []).length === 0 && (
-                        <li className="text-sm text-text-muted">No grants on this mailbox yet.</li>
-                    )}
-                    {acl?.records.map((record) => (
+                    {members.length === 0 && <li className="text-sm text-text-muted">No grants on this mailbox yet.</li>}
+                    {members.map((member) => (
                         <li
-                            key={record.userOrRoleId}
+                            key={member.userOrRoleId}
                             className="flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm"
                         >
                             <div>
-                                <div className="text-sm font-medium">{record.userOrRoleId}</div>
-                                <div className="text-xs text-text-muted">{record.actions.join(", ")}</div>
+                                <div className="text-sm font-medium">{member.userOrRoleId}</div>
+                                <div className="text-xs text-text-muted">{roleLabel(member)}</div>
+                                {member.noEffect && (
+                                    <div className="text-xs text-danger mt-0.5">
+                                        Not a user - this entry has no effect
+                                        {shared ? " - replace it with the user it was meant for or remove it." : " - remove it."}
+                                    </div>
+                                )}
                             </div>
-                            {record.userOrRoleId === ownerUserUid ? (
-                                <span className="text-xs font-bold uppercase tracking-wide text-text-muted">Owner</span>
-                            ) : (
+                            <span className="flex items-center gap-3 shrink-0">
+                                {member.noEffect && shared && (
+                                    <button
+                                        type="button"
+                                        onClick={() => setReplacing(member)}
+                                        disabled={saving}
+                                        className="text-sm text-primary-dark hover:underline disabled:opacity-55"
+                                    >
+                                        Replace with a user
+                                    </button>
+                                )}
                                 <button
                                     type="button"
-                                    onClick={() => setRevokeTarget(record.userOrRoleId)}
+                                    onClick={() => setRevokeTarget(member.userOrRoleId)}
                                     disabled={saving}
                                     className="text-sm text-danger hover:underline disabled:opacity-55"
                                 >
                                     Revoke
                                 </button>
-                            )}
+                            </span>
                         </li>
                     ))}
                 </ul>
             )}
 
-            <form onSubmit={handleGrant} className="flex gap-2">
-                <input
-                    type="text"
-                    value={newUserUid}
-                    onChange={(e) => setNewUserUid(e.target.value)}
-                    placeholder="User uid to grant access to"
-                    className="flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary"
-                />
-                <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
-                    Grant
-                </Button>
-            </form>
+            {shared && (
+                <>
+                    {currentUserUid && !isMember && !loading && (
+                        <Button
+                            type="button"
+                            variant="secondary"
+                            className="!w-auto mb-3"
+                            disabled={saving}
+                            onClick={() => void addMe(currentUserUid)}
+                        >
+                            Add me
+                        </Button>
+                    )}
+                    <PrincipalPicker
+                        key={replacing?.userOrRoleId ?? "new"}
+                        mailboxUid={mailboxUid}
+                        roleLabels={ROLE_LABELS}
+                        initialPrincipal={replacing?.userOrRoleId}
+                        defaultRole={replacing?.role === "manager" ? "manager" : "viewer"}
+                        onGranted={handleGranted}
+                        onCancel={replacing ? () => setReplacing(null) : undefined}
+                    />
+                </>
+            )}
 
             <Modal open={revokeTarget !== null} onClose={() => setRevokeTarget(null)} title="Revoke access">
                 <p className="text-sm mb-5">

package/apps/shared/components/admin/settings/BrandingForm.tsx

@@ -16,12 +16,19 @@ import {
 } from "@rapidmx/react-shared/branding/brandingApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
 
 const INPUT_CLASS =
     "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 
 const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
 
+/** A header that uses both variables - the snippet the Branding page offers to copy. */
+export const HEADER_HTML_EXAMPLE = `<div style="display:flex; align-items:center; justify-content:space-between; padding:0.5rem 1rem">
+    <span>{APP_TITLE}</span>
+    <span>{USER_MENU}</span>
+</div>`;
+
 /** SVG logo/icon uploads are refused (the server refuses them too): an SVG served from this origin can carry script. */
 export function isSvgFile(file: File): boolean {
     return file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg");
@@ -376,7 +383,21 @@ export default function BrandingForm({ branding, onChange, embedded = false }: B
                             value={headerHtml}
                             onChange={(e) => setHeaderHtml(e.target.value)}
                         />
+                        <span className="text-xs text-text-muted">
+                            A header replaces the app's own title bar and the icon at the top of the icon rail, and stays at the top of the window. Write{" "}
+                            <code>{"{USER_MENU}"}</code> where the account menu (avatar, Settings, Sign Out) should go, and <code>{"{APP_TITLE}"}</code>{" "}
+                            where the name of the app on screen should show. Both work in the footer too. <code>{"{USER_MENU}"}</code> is replaced once
+                            (the header's, else the footer's); without it the menu sits in a small cell at the right end of the header, so it is never lost.
+                            Put it where your styles don't hide it on a phone.
+                        </span>
                     </label>
+                    <div className="flex flex-col gap-1.5 text-sm" role="group" aria-label="Header example">
+                        <div className="flex items-center justify-between gap-2">
+                            <span className="font-semibold">Example header</span>
+                            <CopyButton value={HEADER_HTML_EXAMPLE} label="Copy the example header HTML" />
+                        </div>
+                        <pre className="overflow-x-auto rounded-sm border border-border bg-surface-alt p-3 font-mono text-xs text-text">{HEADER_HTML_EXAMPLE}</pre>
+                    </div>
                     <label className="flex flex-col gap-1.5 text-sm">
                         <span className="font-semibold">Footer HTML (optional)</span>
                         <textarea
@@ -386,6 +407,9 @@ export default function BrandingForm({ branding, onChange, embedded = false }: B
                             value={footerHtml}
                             onChange={(e) => setFooterHtml(e.target.value)}
                         />
+                        <span className="text-xs text-text-muted">
+                            <code>{"{APP_TITLE}"}</code> works here as well, and <code>{"{USER_MENU}"}</code> takes the account menu (opening upward) when the header has none.
+                        </span>
                     </label>
                     <div>
                         <Button type="submit" loading={saving} disabled={saving} className="!w-auto">

package/apps/shared/components/admin/settings/DomainDnsSetup.tsx

@@ -15,6 +15,8 @@ const RECORD_TYPE_LABELS: Record<DnsRecordCheck["type"], string> = {
     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"). */
@@ -24,6 +26,17 @@ const RECORD_TYPE_NAMES: Record<DnsRecordCheck["type"], string> = {
     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: Partial<Record<DnsRecordCheck["type"], string>> = {
+    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. */
@@ -32,6 +45,12 @@ function splitMxValue(value: string): { priority: string; server: string } | nul
     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: string): { priority: string; weight: string; port: string; target: string } | null {
+    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 }: { value: string; copyLabel: string }) {
     return (
@@ -181,6 +200,9 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                                         <td className="py-2.5 px-2.5 border-b border-border">
                                             {RECORD_TYPE_LABELS[check.type]}
                                             <div className="text-xs text-text-muted">Type: {check.recordKind}</div>
+                                            {RECORD_TYPE_HELP[check.type] && (
+                                                <div className="text-xs text-text-muted mt-1 max-w-xs">{RECORD_TYPE_HELP[check.type]}</div>
+                                            )}
                                         </td>
                                         <td className="py-2.5 px-2.5 border-b border-border">
                                             {!check.configured ? (
@@ -228,23 +250,47 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
     );
 }
 
-/** 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 }: { check: DnsRecordCheck; value: string }) {
     const recordName = RECORD_TYPE_NAMES[check.type];
     const mx = check.type === "mx" ? splitMxValue(value) : null;
-    if (!mx) {
-        return <CopyableValue value={value} copyLabel={`Copy value for the ${recordName} record`} />;
-    }
-    return (
-        <div className="flex flex-col gap-1.5">
-            <div className="flex items-start gap-2">
-                <span className="text-xs w-20 shrink-0 pt-1">Priority</span>
-                <CopyableValue value={mx.priority} copyLabel={`Copy priority for the ${recordName} record`} />
+    if (mx) {
+        return (
+            <div className="flex flex-col gap-1.5">
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Priority</span>
+                    <CopyableValue value={mx.priority} copyLabel={`Copy priority for the ${recordName} record`} />
+                </div>
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Mail server</span>
+                    <CopyableValue value={mx.server} copyLabel={`Copy mail server for the ${recordName} record`} />
+                </div>
             </div>
-            <div className="flex items-start gap-2">
-                <span className="text-xs w-20 shrink-0 pt-1">Mail server</span>
-                <CopyableValue value={mx.server} copyLabel={`Copy mail server for the ${recordName} record`} />
+        );
+    }
+    const srv = check.type === "autodiscover_srv" ? splitSrvValue(value) : null;
+    if (srv) {
+        return (
+            <div className="flex flex-col gap-1.5">
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Priority</span>
+                    <CopyableValue value={srv.priority} copyLabel={`Copy priority for the ${recordName} record`} />
+                </div>
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Weight</span>
+                    <CopyableValue value={srv.weight} copyLabel={`Copy weight for the ${recordName} record`} />
+                </div>
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Port</span>
+                    <CopyableValue value={srv.port} copyLabel={`Copy port for the ${recordName} record`} />
+                </div>
+                <div className="flex items-start gap-2">
+                    <span className="text-xs w-20 shrink-0 pt-1">Target</span>
+                    <CopyableValue value={srv.target} copyLabel={`Copy target for the ${recordName} record`} />
+                </div>
             </div>
-        </div>
-    );
+        );
+    }
+    return <CopyableValue value={value} copyLabel={`Copy value for the ${recordName} record`} />;
 }

package/apps/shared/components/admin/settings/MailboxCreateForm.tsx

@@ -5,10 +5,11 @@
 import React, { FormEvent, 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, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { createMailbox, listMailboxDomains, Mailbox, resolveMailboxOwner, ResolvedPrincipal } 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";
@@ -33,7 +34,8 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [domains, setDomains] = useState<string[]>([]);
     const [domain, setDomain] = useState("");
     const [displayName, setDisplayName] = useState(defaults?.displayName ?? "");
-    const [ownerUserUid, setOwnerUserUid] = useState(defaults?.ownerUserUid ?? "");
+    const [ownerMode, setOwnerMode] = useState<"shared" | "owned">(defaults?.ownerUserUid ? "owned" : "shared");
+    const [resolvedOwner, setResolvedOwner] = useState<ResolvedPrincipal | null>(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.
@@ -90,16 +92,19 @@ 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 * 1_000_000_000),
                 ...(isResource && {
@@ -175,16 +180,60 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
                     />
                 </FormField>
 
-                <FormField label="Owner user uid (optional)" htmlFor="ownerUserUid">
-                    <input
-                        id="ownerUserUid"
-                        type="text"
-                        className={INPUT_CLASS}
-                        value={ownerUserUid}
-                        onChange={(e) => setOwnerUserUid(e.target.value)}
-                        placeholder="Leave blank for a shared mailbox"
-                    />
-                </FormField>
+                <div className="mb-4">
+                    <span className="block text-sm font-semibold mb-1.5 text-text">Owner</span>
+                    <div className="flex flex-col gap-2">
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="radio"
+                                name="ownerMode"
+                                checked={ownerMode === "shared"}
+                                onChange={() => {
+                                    setOwnerMode("shared");
+                                    setResolvedOwner(null);
+                                }}
+                            />
+                            Shared mailbox (no single owner)
+                        </label>
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="radio"
+                                name="ownerMode"
+                                checked={ownerMode === "owned"}
+                                onChange={() => setOwnerMode("owned")}
+                            />
+                            Owned by a specific person
+                        </label>
+                        {ownerMode === "owned" &&
+                            (resolvedOwner ? (
+                                <div className="flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm">
+                                    <span>
+                                        Owner: <strong className="break-all">{describePerson(resolvedOwner)}</strong>
+                                    </span>
+                                    <Button type="button" variant="text" className="!w-auto" onClick={() => setResolvedOwner(null)}>
+                                        Change
+                                    </Button>
+                                </div>
+                            ) : (
+                                <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) => (
+                                        <>
+                                            Make <strong className="break-all">{describePerson(person)}</strong> the owner?
+                                        </>
+                                    )}
+                                />
+                            ))}
+                    </div>
+                </div>
 
                 <FormField label="Timezone" htmlFor="timezone">
                     <input