@rapidmx/web-client 0.4.0 → 0.6.0

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

@@ -31,6 +31,8 @@ export interface EscrowScopeKeyAndHoldersFieldsProps {
     value: EscrowScopeKeyAndHoldersValue;
     onChange: (value: EscrowScopeKeyAndHoldersValue) => void;
     disabled?: boolean;
+    /** Shows the public key fields without letting them be edited, e.g. for keys generated in the browser. */
+    keyReadOnly?: boolean;
 }
 
 /** Builds an all-zeroes starting point for the "new" page — `notBefore`/`notAfter` default to "now" so an
@@ -49,7 +51,21 @@ export function emptyEscrowScopeKeyAndHoldersValue(): EscrowScopeKeyAndHoldersVa
     };
 }
 
-export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabled }: EscrowScopeKeyAndHoldersFieldsProps) {
+/** The message shown when an administrator tries to make themselves a holder: whoever configures a scope must not
+ * also be able to approve access under it (separation of duties - the server refuses it too). Holders who were
+ * already on the scope (`existingHolderUserUids`) aren't treated as newly added. */
+export function selfAsHolderError(
+    holderUserUids: string[],
+    adminUid: string | undefined,
+    existingHolderUserUids: string[] = [],
+): string | null {
+    if (!adminUid || !holderUserUids.includes(adminUid) || existingHolderUserUids.includes(adminUid)) {
+        return null;
+    }
+    return "You can't add yourself as a holder of an escrow scope you configure. Ask another administrator to add you, or choose different holders.";
+}
+
+export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabled, keyReadOnly }: EscrowScopeKeyAndHoldersFieldsProps) {
     function set<K extends keyof EscrowScopeKeyAndHoldersValue>(key: K, next: EscrowScopeKeyAndHoldersValue[K]) {
         onChange({ ...value, [key]: next });
     }
@@ -70,6 +86,7 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                         rows={4}
                         value={value.publicKey}
                         disabled={disabled}
+                        readOnly={keyReadOnly}
                         onChange={(e) => set("publicKey", e.target.value)}
                     />
                 </FormField>
@@ -81,6 +98,7 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                         className={INPUT_CLASS}
                         value={value.keyType}
                         disabled={disabled}
+                        readOnly={keyReadOnly}
                         onChange={(e) => set("keyType", e.target.value)}
                         placeholder="x509"
                     />
@@ -93,6 +111,7 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                         className={`${INPUT_CLASS} font-mono`}
                         value={value.fingerprint}
                         disabled={disabled}
+                        readOnly={keyReadOnly}
                         onChange={(e) => set("fingerprint", e.target.value)}
                     />
                 </FormField>
@@ -105,6 +124,7 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                             className={INPUT_CLASS}
                             value={value.notBefore}
                             disabled={disabled}
+                            readOnly={keyReadOnly}
                             onChange={(e) => set("notBefore", e.target.value)}
                         />
                     </FormField>
@@ -116,6 +136,7 @@ export default function EscrowScopeKeyAndHoldersFields({ value, onChange, disabl
                             className={INPUT_CLASS}
                             value={value.notAfter}
                             disabled={disabled}
+                            readOnly={keyReadOnly}
                             onChange={(e) => set("notAfter", e.target.value)}
                         />
                     </FormField>

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

@@ -29,6 +29,8 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import BottomTabBar, { NavItem } from "@rapidmx/react-shared/components/navigation/BottomTabBar.js";
 import { BrandingFooter, BrandingHeader } from "../../layout/BrandingChrome.js";
 import UserMenu from "../../layout/UserMenu.js";
+import { signOutOfConsole } from "../signOut.js";
+import { mergePluginNavItems, PluginNav, PluginNavProps } from "../../../plugins/pluginNav.js";
 
 export type AdminSection =
     | "mailboxes"
@@ -47,9 +49,13 @@ export type AdminSection =
     | "plugins"
     | "branding";
 
-export interface AdminShellProps {
-    /** Which icon in the rail is highlighted as the current section. */
-    active: AdminSection;
+/** A core `AdminSection`, or a plugin's `adminNav` item id (see `PluginNav`). */
+export type AdminShellActive = AdminSection | (string & {});
+
+export interface AdminShellProps extends PluginNavProps {
+    /** Which icon in the rail is highlighted as the current section - a plugin admin page passes its own
+     * `adminNav` item id. */
+    active: AdminShellActive;
     /** Populated automatically by the framework from an authenticated request (e.g. a valid `jwt` cookie). */
     userUid?: string;
     /** auth-server's base URL, injected via the route's `fetchProps` — see `src/mongo/routes/AdminConsoleRoute.ts`. */
@@ -128,7 +134,18 @@ const MAILBOX_SCOPED_ITEMS: NavItem[] = [
 /** The setup wizard - reached by redirect or from the Mailboxes page, not from the rail. */
 const SETUP_ITEM: NavItem = { id: "setup", href: "/admin/setup", label: "Setup", icon: HiOutlineRocketLaunch };
 
-const ALL_ITEMS: NavItem[] = [...NAV_ITEMS, ...MAILBOX_SCOPED_ITEMS, SETUP_ITEM];
+const OFF_RAIL_ITEMS: NavItem[] = [...MAILBOX_SCOPED_ITEMS, SETUP_ITEM];
+
+/** `NAV_ITEMS` followed by the plugins' `adminNav` items (generic icon). Core ids win, including the
+ * off-rail sections' - see `mergePluginNavItems`. */
+export function adminNavItems(pluginNav?: PluginNav): NavItem[] {
+    return mergePluginNavItems<NavItem>(
+        NAV_ITEMS,
+        pluginNav?.adminNav,
+        ({ id, href, label }) => ({ id, href, label, icon: HiOutlinePuzzlePiece }),
+        OFF_RAIL_ITEMS.map((item) => item.id),
+    );
+}
 
 /**
  * Gates every `apps/admin` page behind the `admin` trusted role. Uses `GET /api/admin/release-notes` (any
@@ -136,7 +153,7 @@ const ALL_ITEMS: NavItem[] = [...NAV_ITEMS, ...MAILBOX_SCOPED_ITEMS, SETUP_ITEM]
  * caller's JWT carries a trusted role, a 403 means it doesn't. There is no local step-up/elevation flow
  * (that would need a cross-origin call to auth-server's own elevation endpoint — not wired up yet).
  */
-export default function AdminShell({ active, userUid, authServerUrl, children }: PropsWithChildren<AdminShellProps>) {
+export default function AdminShell({ active, userUid, authServerUrl, pluginNav, children }: PropsWithChildren<AdminShellProps>) {
     const [status, setStatus] = useState<Status>("checking");
     const [error, setError] = useState<string | null>(null);
     const { branding, iconSrc } = useBranding();
@@ -174,7 +191,8 @@ export default function AdminShell({ active, userUid, authServerUrl, children }:
     }, [userUid]);
 
     function handleSignOut() {
-        window.location.href = authServerUrl ?? "/";
+        // Ends the auth-server session and tells other tabs, not just navigates - see `signOutOfConsole()`.
+        void signOutOfConsole(authServerUrl);
     }
 
     let content: ReactNode;
@@ -197,7 +215,8 @@ export default function AdminShell({ active, userUid, authServerUrl, children }:
             </div>
         );
     } else {
-        const activeItem = ALL_ITEMS.find((item) => item.id === active);
+        const navItems = adminNavItems(pluginNav);
+        const activeItem = [...navItems, ...OFF_RAIL_ITEMS].find((item) => item.id === active);
         content = (
             <div className="min-h-screen flex flex-col bg-surface-alt">
                 <div className="flex-1 flex min-h-0">
@@ -206,7 +225,7 @@ export default function AdminShell({ active, userUid, authServerUrl, children }:
                         className="hidden md:flex w-16 shrink-0 bg-surface border-r border-border flex-col items-center py-3 gap-1"
                     >
                         <img src={iconSrc} width="96" height="96" alt="" className="mb-3" />
-                        {NAV_ITEMS.map(({ id, href, label, icon: Icon }) => (
+                        {navItems.map(({ id, href, label, icon: Icon }) => (
                             <a
                                 key={id}
                                 href={href}
@@ -224,7 +243,7 @@ export default function AdminShell({ active, userUid, authServerUrl, children }:
                             </a>
                         ))}
                     </nav>
-                    <BottomTabBar apps={NAV_ITEMS} active={active} />
+                    <BottomTabBar apps={navItems} active={active} />
                     <div className="flex-1 flex flex-col min-w-0">
                         <header className="h-16 shrink-0 bg-surface border-b border-border flex items-center justify-between gap-4 px-6">
                             <span className="font-display font-bold text-lg uppercase tracking-wide">{activeItem?.label}</span>

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

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

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

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

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

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

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

@@ -22,6 +22,13 @@ const INPUT_CLASS =
 
 const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
 
+/** 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");
+}
+
+const RASTER_IMAGE_ACCEPT = "image/png,image/jpeg,image/gif,image/webp,image/x-icon,image/vnd.microsoft.icon";
+
 /** The branding editor, shared by the Branding page and the setup wizard. */
 export default function BrandingForm({ branding, onChange }: { branding: Branding; onChange: (b: Branding) => void }) {
     const [companyName, setCompanyName] = useState(branding.companyName);
@@ -58,7 +65,9 @@ export default function BrandingForm({ branding, onChange }: { branding: Brandin
     function handleLogoFileChange(e: ChangeEvent<HTMLInputElement>) {
         const file = e.target.files?.[0];
         if (!file) return;
-        if (file.size > MAX_UPLOAD_BYTES) {
+        if (isSvgFile(file)) {
+            setError(`"${file.name}" is an SVG — upload a PNG, JPEG, GIF, or WebP logo instead.`);
+        } else if (file.size > MAX_UPLOAD_BYTES) {
             setError(`"${file.name}" is too large — logos must be 5MB or smaller.`);
         } else {
             void runAsset("logo-upload", () => uploadBrandingLogo(file));
@@ -69,7 +78,9 @@ export default function BrandingForm({ branding, onChange }: { branding: Brandin
     function handleIconFileChange(e: ChangeEvent<HTMLInputElement>) {
         const file = e.target.files?.[0];
         if (!file) return;
-        if (file.size > MAX_UPLOAD_BYTES) {
+        if (isSvgFile(file)) {
+            setError(`"${file.name}" is an SVG — upload a PNG, JPEG, GIF, WebP, or ICO icon instead.`);
+        } else if (file.size > MAX_UPLOAD_BYTES) {
             setError(`"${file.name}" is too large — icons must be 5MB or smaller.`);
         } else {
             void runAsset("icon-upload", () => uploadBrandingIcon(file));
@@ -140,7 +151,7 @@ export default function BrandingForm({ branding, onChange }: { branding: Brandin
                             <input
                                 ref={logoFileRef}
                                 type="file"
-                                accept="image/*"
+                                accept={RASTER_IMAGE_ACCEPT}
                                 aria-label="Upload logo"
                                 className="hidden"
                                 onChange={handleLogoFileChange}
@@ -212,7 +223,7 @@ export default function BrandingForm({ branding, onChange }: { branding: Brandin
                             <input
                                 ref={iconFileRef}
                                 type="file"
-                                accept="image/*"
+                                accept={RASTER_IMAGE_ACCEPT}
                                 aria-label="Upload icon"
                                 className="hidden"
                                 onChange={handleIconFileChange}

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

@@ -32,12 +32,13 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [verifying, setVerifying] = useState(false);
+    const [verifyError, setVerifyError] = useState<string | null>(null);
     const [copied, setCopied] = useState(false);
 
     function reload(id: string) {
         setLoading(true);
         setError(null);
-        Promise.all([getDomain(id), getDnsSetup(id)])
+        return Promise.all([getDomain(id), getDnsSetup(id)])
             .then(([d, checks]) => {
                 setDomain(d);
                 setDnsSetup(checks);
@@ -48,18 +49,23 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
     }
 
     useEffect(() => {
-        reload(uid);
+        void reload(uid);
     }, [uid]);
 
-    // Only ever invoked from the "Verify now" button below, which only renders once `domain` is loaded.
+    // Only ever invoked from the "Verify now" button below, which only renders once `domain` is loaded. Any failure -
+    // verifying, or refreshing afterwards - is shown next to the button with the panel kept, so it can be retried
+    // (e.g. once a DNS record has propagated) instead of the whole panel being replaced by an error.
     async function handleVerify() {
         setVerifying(true);
-        setError(null);
+        setVerifyError(null);
         try {
             await verifyDomain(domain!.uid);
-            reload(domain!.uid);
+            const [d, checks] = await Promise.all([getDomain(domain!.uid), getDnsSetup(domain!.uid)]);
+            setDomain(d);
+            setDnsSetup(checks);
+            onLoaded?.(d);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not verify this domain.");
+            setVerifyError(err instanceof ApiRequestError ? err.message : "Could not verify this domain.");
         } finally {
             setVerifying(false);
         }
@@ -120,8 +126,13 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                                 {copied ? "Copied" : "Copy"}
                             </Button>
                         </div>
+                        {verifyError && (
+                            <div className="mt-3">
+                                <Alert>{verifyError}</Alert>
+                            </div>
+                        )}
                         <Button type="button" className="!w-auto mt-3" loading={verifying} disabled={verifying} onClick={handleVerify}>
-                            Verify now
+                            {verifyError ? "Try again" : "Verify now"}
                         </Button>
                     </div>
                 )}

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

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useState } from "react";
+import React, { FormEvent, useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { EncryptionPolicy, PolicyState, updateEncryptionPolicy } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
@@ -35,15 +35,22 @@ export function isEncryptionEnabled(policy: EncryptionPolicy): boolean {
 export interface EncryptionPolicyFormProps {
     policy: EncryptionPolicy;
     onChange: (policy: EncryptionPolicy) => void;
+    /** Told whether the form has edits that haven't been saved. */
+    onDirtyChange?: (dirty: boolean) => void;
 }
 
 /** The end-to-end encryption policy editor, shared by the Encryption Policy page and the setup wizard. */
-export default function EncryptionPolicyForm({ policy, onChange }: EncryptionPolicyFormProps) {
+export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange }: EncryptionPolicyFormProps) {
     const [values, setValues] = useState<EncryptionPolicy>(policy);
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
 
+    // Edits are unsaved until they match what was loaded or last saved.
+    const [savedValues, setSavedValues] = useState<EncryptionPolicy>(policy);
+    const dirty: boolean = TIERS.some((tier) => values[tier.key] !== savedValues[tier.key]);
+    useEffect(() => onDirtyChange?.(dirty), [dirty]);
+
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
         setError(null);
@@ -52,6 +59,7 @@ export default function EncryptionPolicyForm({ policy, onChange }: EncryptionPol
         try {
             const updated = await updateEncryptionPolicy(values);
             onChange(updated);
+            setSavedValues(values);
             setSaved(true);
         } catch (err) {
             setError(err instanceof ApiRequestError ? err.message : "Could not save the encryption policy.");

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

@@ -84,6 +84,12 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             setError("A display name is required.");
             return;
         }
+        // restapi refuses these (400): a display name shown in From must not look like an address. The fullwidth and
+        // small look-alike @ signs are refused too (restapi's `AT_SIGN_LIKE`).
+        if (/[@＠﹫\r\n]/.test(displayName)) {
+            setError("A display name can't contain \"@\" (or a look-alike) or line breaks.");
+            return;
+        }
 
         setSaving(true);
         try {