@rapidmx/web-client 0.11.0 → 0.12.0

package/apps/admin/mailboxes/new/index.tsx

@@ -12,9 +12,9 @@ export default function NewMailboxPage(props: Omit<AdminShellProps, "active">) {
             <div className="max-w-xl">
                 <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New mailbox</h1>
                 <p className="text-sm text-text-muted mb-5">
-                    Leave "Owner user uid" blank to create a true ownerless shared mailbox (the Exchange "shared
-                    mailbox" concept) — 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.
+                    Choose "Shared mailbox" to create a true ownerless mailbox (the Exchange "shared mailbox"
+                    concept) — 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.
                 </p>
                 <MailboxCreateForm
                     cancelHref="/admin"

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

@@ -4,8 +4,9 @@
 ///////////////////////////////////////////////////////////////////////////////
 import React from "react";
 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";
@@ -150,12 +151,11 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                     deliberately separate role from server administration. At least one holder is required.
                 </p>
 
-                <StringListField
+                <PrincipalListField
                     label="Holder user uids"
-                    id="holderUserUids"
                     values={value.holderUserUids}
                     onChange={(holderUserUids) => set("holderUserUids", holderUserUids)}
-                    placeholder="User uid to add"
+                    resolve={resolveEscrowScopeHolder}
                     emptyMessage="No holders added yet."
                     disabled={disabled}
                 />

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

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

@@ -0,0 +1,82 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailboxAccessApi.js";
+import PrincipalResolver, { describePerson } from "./PrincipalResolver.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 = "None added yet.", disabled }: PrincipalListFieldProps) {
+    function handleRemove(uid: string) {
+        onChange(values.filter((v) => v !== uid));
+    }
+
+    return (
+        <div className="mb-4">
+            <span className="block text-sm font-semibold mb-1.5 text-text">{label}</span>
+
+            <ul className="flex flex-col gap-2 mb-2">
+                {values.length === 0 && (
+                    <li key="empty" className="text-sm text-text-muted">
+                        {emptyMessage}
+                    </li>
+                )}
+                {values.map((uid) => (
+                    <li key={uid} className="flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm">
+                        <span className="text-sm font-medium break-all">{uid}</span>
+                        <button
+                            type="button"
+                            onClick={() => handleRemove(uid)}
+                            disabled={disabled}
+                            className="text-sm text-danger hover:underline disabled:opacity-55 shrink-0"
+                        >
+                            Remove
+                        </button>
+                    </li>
+                ))}
+            </ul>
+
+            {!disabled && (
+                <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) => (
+                        <>
+                            Add <strong className="break-all">{describePerson(person)}</strong>?
+                        </>
+                    )}
+                />
+            )}
+        </div>
+    );
+}

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

@@ -2,16 +2,16 @@
 // 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 React, { useState } from "react";
 import {
     MailboxAccessRole,
     ResolvedPrincipal,
     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";
+import PrincipalResolver, { describePerson } from "./PrincipalResolver.js";
+
+export { describePerson };
 
 export interface PrincipalPickerProps {
     mailboxUid: string;
@@ -29,117 +29,48 @@ export interface PrincipalPickerProps {
     onCancel?: () => void;
 }
 
-/** Who a resolved person is, for a person to check before saving: 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?" 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 }: PrincipalPickerProps) {
-    const [typed, setTyped] = useState(initialPrincipal ?? "");
     const [role, setRole] = useState<MailboxAccessRole>(defaultRole);
-    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 resolveMailboxPrincipal(mailboxUid, principal));
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not look that person up.");
-        } finally {
-            setBusy(false);
-        }
-    }
-
-    function handleFind(e: FormEvent) {
-        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 {
-            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 (
-        <div className="flex flex-col gap-2">
-            {error && <Alert>{error}</Alert>}
-            <form onSubmit={handleFind} className="flex gap-2">
-                <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}
-                />
-                <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 as MailboxAccessRole)}
-                    disabled={busy}
-                >
-                    {(Object.keys(roleLabels) as MailboxAccessRole[]).map((value) => (
-                        <option key={value} value={value}>
-                            {roleLabels[value]}
-                        </option>
-                    ))}
-                </select>
-                <Button type="submit" variant="secondary" loading={busy && !person} disabled={busy} className="!w-auto">
-                    Find
-                </Button>
-                {onCancel && (
-                    <Button type="button" variant="text" className="!w-auto" onClick={onCancel}>
-                        Cancel
-                    </Button>
-                )}
-            </form>
-            {person && (
-                <div className="flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm">
-                    <span>
-                        Share with <strong className="break-all">{describePerson(person)}</strong> as <em>{roleLabels[role]}</em>?
-                    </span>
-                    <Button type="button" loading={busy} disabled={busy} className="!w-auto" onClick={() => void handleGrant()}>
-                        Grant
-                    </Button>
-                </div>
+        <PrincipalResolver
+            resolve={(principal) => resolveMailboxPrincipal(mailboxUid, principal)}
+            onResolved={async (person) => {
+                await setMailboxAccess(mailboxUid, person.userUid, role);
+                await onGranted(person, role);
+            }}
+            initialPrincipal={initialPrincipal}
+            placeholder={placeholder ?? "Email address, username or user id"}
+            ariaLabel="Who to share with"
+            confirmLabel="Grant"
+            confirmErrorMessage="Could not grant access."
+            describeConfirm={(person) => (
+                <>
+                    Share with <strong className="break-all">{describePerson(person)}</strong> as <em>{roleLabels[role]}</em>?
+                </>
             )}
-        </div>
+            onCancel={onCancel}
+        >
+            <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 as MailboxAccessRole)}
+            >
+                {(Object.keys(roleLabels) as MailboxAccessRole[]).map((value) => (
+                    <option key={value} value={value}>
+                        {roleLabels[value]}
+                    </option>
+                ))}
+            </select>
+        </PrincipalResolver>
     );
 }