@rapidmx/web-client 0.30.0 → 0.32.0

package/dist/apps/shared/components/admin/mailboxes/EscrowScopeCard.js

@@ -4,13 +4,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { listEscrowScopes } from "../../../../../lib/admin/escrowScopesApi.js";
 import { updateMailbox } from "../../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../elevation.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;
@@ -30,7 +30,7 @@ export default function EscrowScopeCard({ mailbox, onUpdate }) {
     useEffect(() => {
         listEscrowScopes({ limit: SCOPE_LIST_LIMIT }, client)
             .then(setScopes)
-            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load escrow scopes."));
+            .catch((err) => setLoadError(actionErrorMessage(err, "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) {
@@ -48,7 +48,7 @@ export default function EscrowScopeCard({ mailbox, onUpdate }) {
             setSaved(true);
         }
         catch (err) {
-            setSaveError(err instanceof ApiRequestError ? err.message : "Could not save the escrow scope.");
+            setSaveError(actionErrorMessage(err, "Could not save the escrow scope."));
         }
         finally {
             setSaving(false);

package/dist/apps/shared/components/admin/mailboxes/LeftoverMailboxesSection.js

@@ -4,11 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { listLeftoverMailboxes } from "../../../../../lib/admin/leftoverMailboxApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import EraseLeftoverDataDialog from "./EraseLeftoverDataDialog.js";
+import { actionErrorMessage } from "../elevation.js";
 /** How many deleted mailboxes one request asks for. */
 const PAGE_SIZE = 50;
 /** How often the list is refreshed while an erasure is under way. */
@@ -45,7 +45,7 @@ export default function LeftoverMailboxesSection({ refreshIntervalMs = LEFTOVER_
         }
         catch (err) {
             if (current === generation.current) {
-                setError(err instanceof ApiRequestError ? err.message : "Could not check for deleted mailboxes with remaining data.");
+                setError(actionErrorMessage(err, "Could not check for deleted mailboxes with remaining data."));
             }
         }
     }
@@ -61,7 +61,7 @@ export default function LeftoverMailboxesSection({ refreshIntervalMs = LEFTOVER_
         }
         catch (err) {
             if (current === generation.current) {
-                setError(err instanceof ApiRequestError ? err.message : "Could not load more deleted mailboxes.");
+                setError(actionErrorMessage(err, "Could not load more deleted mailboxes."));
             }
         }
         finally {

package/dist/apps/shared/components/admin/mailboxes/ResourceSettingsCard.js

@@ -4,11 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { updateMailbox } from "../../../../../lib/mail/mailApi.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../elevation.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 SELECT_CLASS = "text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /**
@@ -51,7 +51,7 @@ export default function ResourceSettingsCard({ mailbox, onUpdate }) {
             setSaved(true);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save resource settings.");
+            setError(actionErrorMessage(err, "Could not save resource settings."));
         }
         finally {
             setSaving(false);

package/dist/apps/shared/components/admin/mailboxes/ShareAccessCard.js

@@ -4,12 +4,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { listMailboxAccess, removeMailboxAccess, setMailboxAccess, } from "../../../../../lib/mail/mailboxAccessApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
 import PrincipalPicker from "../../sharing/PrincipalPicker.js";
+import { actionErrorMessage } from "../elevation.js";
 const ROLE_LABELS = { viewer: "Read only", manager: "Full access" };
 function roleLabel(member) {
     if (member.role === "viewer")
@@ -38,7 +38,7 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserU
         setError(null);
         listMailboxAccess(mailboxUid)
             .then(setMembers)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load share settings."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load share settings.")))
             .finally(() => setLoading(false));
     }
     useEffect(reload, [mailboxUid]);
@@ -50,7 +50,7 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserU
             reload();
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
+            setError(actionErrorMessage(err, "Could not grant access."));
         }
         finally {
             setSaving(false);
@@ -66,7 +66,7 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserU
                 await removeMailboxAccess(mailboxUid, stale.userOrRoleId);
             }
             catch (err) {
-                failure = err instanceof ApiRequestError ? err.message : "Could not remove the old entry.";
+                failure = actionErrorMessage(err, "Could not remove the old entry.");
             }
         }
         reload();
@@ -86,7 +86,7 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserU
             reload();
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not revoke access.");
+            setError(actionErrorMessage(err, "Could not revoke access."));
         }
         finally {
             setSaving(false);

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

@@ -4,11 +4,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { deleteBrandingIcon, deleteBrandingLogo, deleteBrandingStylesheet, updateBranding, uploadBrandingIcon, uploadBrandingLogo, uploadBrandingStylesheet, } from "../../../../../lib/branding/brandingApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import CopyButton from "../../../../../lib/components/buttons/CopyButton.js";
+import { actionErrorMessage } from "../elevation.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. */
@@ -48,9 +48,19 @@ export default function BrandingForm({ branding, onChange, embedded = false }) {
             setIconUrlInput(updated.iconUrl ?? "");
             setStylesheetUrlInput(updated.stylesheetUrl ?? "");
         })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not update branding."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not update branding.")))
             .finally(() => setAssetBusy(null));
     }
+    /** Sets a branding asset to an address the administrator typed. Every visitor's browser loads it - the anonymous booking pages too - so it must be an
+     * encrypted (`https:`) address or one on this server (a path), not `http:`, `data:` or `javascript:`. */
+    function runUrl(name, field, value) {
+        const address = value.trim();
+        if (address !== "" && !/^https:\/\/[^\s/]/i.test(address) && !/^\/(?![/\\])/.test(address)) {
+            setError("Use an https:// address, or a path on this server, or upload a file instead.");
+            return;
+        }
+        void runAsset(name, () => updateBranding({ [field]: address }));
+    }
     function handleLogoFileChange(e) {
         const file = e.target.files?.[0];
         if (!file)
@@ -104,7 +114,7 @@ export default function BrandingForm({ branding, onChange, embedded = false }) {
             setSaved(true);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save branding.");
+            setError(actionErrorMessage(err, "Could not save branding."));
         }
         finally {
             setSaving(false);
@@ -113,11 +123,11 @@ export default function BrandingForm({ branding, onChange, embedded = false }) {
     return (_jsxs("div", { className: "max-w-2xl", children: [!embedded && (_jsxs(_Fragment, { children: [_jsx("h1", { className: "text-xl font-bold uppercase tracking-wide mb-1", children: "Branding" }), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Customize the logo, nav-header icon, product name, and chrome shown to every visitor of the webmail and admin console \u2014 including anonymous booking-page visitors. The header appears on the webmail and public pages, not in the admin console; the footer appears in both." })] })), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Logo" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: branding.logoUrl || "/images/logo.svg", alt: "Current logo", width: "64", height: "64", className: "border border-border rounded-sm bg-surface-alt p-1" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "logo-upload", disabled: assetBusy !== null, onClick: () => logoFileRef.current?.click(), children: "Upload logo" }), _jsx("input", { ref: logoFileRef, type: "file", accept: RASTER_IMAGE_ACCEPT, "aria-label": "Upload logo", className: "hidden", onChange: handleLogoFileChange }), branding.logoUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "logo-delete", onClick: () => void runAsset("logo-delete", async () => {
                                                     await deleteBrandingLogo();
                                                     return { ...branding, logoUrl: undefined };
-                                                }), children: "Remove logo" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Logo URL", className: INPUT_CLASS, value: logoUrlInput, onChange: (e) => setLogoUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || logoUrlInput === (branding.logoUrl ?? ""), loading: assetBusy === "logo-url", onClick: () => void runAsset("logo-url", () => updateBranding({ logoUrl: logoUrlInput })), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Icon" }), _jsx("p", { className: "text-xs text-text-muted -mt-1", children: "A compact mark for navigation headers, independent of the full logo above. Falls back to the logo, then a default asset, when not set." }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: branding.iconUrl || branding.logoUrl || "/images/logo.svg", alt: "Current icon", width: "64", height: "64", className: "border border-border rounded-sm bg-surface-alt p-1" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "icon-upload", disabled: assetBusy !== null, onClick: () => iconFileRef.current?.click(), children: "Upload icon" }), _jsx("input", { ref: iconFileRef, type: "file", accept: RASTER_IMAGE_ACCEPT, "aria-label": "Upload icon", className: "hidden", onChange: handleIconFileChange }), branding.iconUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "icon-delete", onClick: () => void runAsset("icon-delete", async () => {
+                                                }), children: "Remove logo" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Logo URL", className: INPUT_CLASS, value: logoUrlInput, onChange: (e) => setLogoUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || logoUrlInput === (branding.logoUrl ?? ""), loading: assetBusy === "logo-url", onClick: () => runUrl("logo-url", "logoUrl", logoUrlInput), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Icon" }), _jsx("p", { className: "text-xs text-text-muted -mt-1", children: "A compact mark for navigation headers, independent of the full logo above. Falls back to the logo, then a default asset, when not set." }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("img", { src: branding.iconUrl || branding.logoUrl || "/images/logo.svg", alt: "Current icon", width: "64", height: "64", className: "border border-border rounded-sm bg-surface-alt p-1" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "icon-upload", disabled: assetBusy !== null, onClick: () => iconFileRef.current?.click(), children: "Upload icon" }), _jsx("input", { ref: iconFileRef, type: "file", accept: RASTER_IMAGE_ACCEPT, "aria-label": "Upload icon", className: "hidden", onChange: handleIconFileChange }), branding.iconUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "icon-delete", onClick: () => void runAsset("icon-delete", async () => {
                                                     await deleteBrandingIcon();
                                                     return { ...branding, iconUrl: undefined };
-                                                }), children: "Remove icon" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Icon URL", className: INPUT_CLASS, value: iconUrlInput, onChange: (e) => setIconUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || iconUrlInput === (branding.iconUrl ?? ""), loading: assetBusy === "icon-url", onClick: () => void runAsset("icon-url", () => updateBranding({ iconUrl: iconUrlInput })), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Custom stylesheet" }), _jsx("div", { className: "flex items-center gap-3", children: _jsx("span", { className: "text-sm text-text-muted truncate", children: branding.stylesheetUrl || "None configured" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "stylesheet-upload", disabled: assetBusy !== null, onClick: () => stylesheetFileRef.current?.click(), children: "Upload CSS file" }), _jsx("input", { ref: stylesheetFileRef, type: "file", accept: "text/css,.css", "aria-label": "Upload stylesheet", className: "hidden", onChange: handleStylesheetFileChange }), branding.stylesheetUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "stylesheet-delete", onClick: () => void runAsset("stylesheet-delete", async () => {
+                                                }), children: "Remove icon" }))] })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external image URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Icon URL", className: INPUT_CLASS, value: iconUrlInput, onChange: (e) => setIconUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || iconUrlInput === (branding.iconUrl ?? ""), loading: assetBusy === "icon-url", onClick: () => runUrl("icon-url", "iconUrl", iconUrlInput), children: "Set" })] })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsx(SectionHeading, { className: "text-sm font-bold uppercase tracking-wide text-text-muted", children: "Custom stylesheet" }), _jsx("div", { className: "flex items-center gap-3", children: _jsx("span", { className: "text-sm text-text-muted truncate", children: branding.stylesheetUrl || "None configured" }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", loading: assetBusy === "stylesheet-upload", disabled: assetBusy !== null, onClick: () => stylesheetFileRef.current?.click(), children: "Upload CSS file" }), _jsx("input", { ref: stylesheetFileRef, type: "file", accept: "text/css,.css", "aria-label": "Upload stylesheet", className: "hidden", onChange: handleStylesheetFileChange }), branding.stylesheetUrl && (_jsx(Button, { type: "button", variant: "text", disabled: assetBusy !== null, loading: assetBusy === "stylesheet-delete", onClick: () => void runAsset("stylesheet-delete", async () => {
                                             await deleteBrandingStylesheet();
                                             return { ...branding, stylesheetUrl: undefined };
-                                        }), children: "Remove stylesheet" }))] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external stylesheet URL" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Stylesheet URL", className: INPUT_CLASS, value: stylesheetUrlInput, onChange: (e) => setStylesheetUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || stylesheetUrlInput === (branding.stylesheetUrl ?? ""), loading: assetBusy === "stylesheet-url", onClick: () => void runAsset("stylesheet-url", () => updateBranding({ stylesheetUrl: stylesheetUrlInput })), children: "Set" })] })] })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 pt-2 border-t border-border", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Company name" }), _jsx("input", { "aria-label": "Company name", className: INPUT_CLASS, value: companyName, onChange: (e) => setCompanyName(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Product title" }), _jsx("input", { "aria-label": "Product title", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "Shown as the browser tab title." })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Header HTML (optional)" }), _jsx("textarea", { "aria-label": "Header HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: headerHtml, onChange: (e) => setHeaderHtml(e.target.value) }), _jsxs("span", { className: "text-xs text-text-muted", children: ["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", " ", _jsx("code", { children: "{USER_MENU}" }), " where the account menu (avatar, Settings, Sign Out) should go, and ", _jsx("code", { children: "{APP_TITLE}" }), " ", "where the name of the app on screen should show. Both work in the footer too. ", _jsx("code", { children: "{USER_MENU}" }), " 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."] })] }), _jsxs("div", { className: "flex flex-col gap-1.5 text-sm", role: "group", "aria-label": "Header example", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "font-semibold", children: "Example header" }), _jsx(CopyButton, { value: HEADER_HTML_EXAMPLE, label: "Copy the example header HTML" })] }), _jsx("pre", { className: "overflow-x-auto rounded-sm border border-border bg-surface-alt p-3 font-mono text-xs text-text", children: HEADER_HTML_EXAMPLE })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Footer HTML (optional)" }), _jsx("textarea", { "aria-label": "Footer HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: footerHtml, onChange: (e) => setFooterHtml(e.target.value) }), _jsxs("span", { className: "text-xs text-text-muted", children: [_jsx("code", { children: "{APP_TITLE}" }), " works here as well, and ", _jsx("code", { children: "{USER_MENU}" }), " takes the account menu (opening upward) when the header has none."] })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] })] }));
+                                        }), children: "Remove stylesheet" }))] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Or use an external stylesheet URL" }), _jsx("span", { className: "text-xs text-text-muted", children: "Every visitor\u2019s browser loads it, and a stylesheet can read what the page shows: only use an address you control, or upload the file instead." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { "aria-label": "Stylesheet URL", className: INPUT_CLASS, value: stylesheetUrlInput, onChange: (e) => setStylesheetUrlInput(e.target.value) }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", disabled: assetBusy !== null || stylesheetUrlInput === (branding.stylesheetUrl ?? ""), loading: assetBusy === "stylesheet-url", onClick: () => runUrl("stylesheet-url", "stylesheetUrl", stylesheetUrlInput), children: "Set" })] })] })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 pt-2 border-t border-border", children: [_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Company name" }), _jsx("input", { "aria-label": "Company name", className: INPUT_CLASS, value: companyName, onChange: (e) => setCompanyName(e.target.value) })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Product title" }), _jsx("input", { "aria-label": "Product title", className: INPUT_CLASS, value: title, onChange: (e) => setTitle(e.target.value) }), _jsx("span", { className: "text-xs text-text-muted", children: "Shown as the browser tab title." })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Header HTML (optional)" }), _jsx("textarea", { "aria-label": "Header HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: headerHtml, onChange: (e) => setHeaderHtml(e.target.value) }), _jsxs("span", { className: "text-xs text-text-muted", children: ["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", " ", _jsx("code", { children: "{USER_MENU}" }), " where the account menu (avatar, Settings, Sign Out) should go, and ", _jsx("code", { children: "{APP_TITLE}" }), " ", "where the name of the app on screen should show. Both work in the footer too. ", _jsx("code", { children: "{USER_MENU}" }), " 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."] })] }), _jsxs("div", { className: "flex flex-col gap-1.5 text-sm", role: "group", "aria-label": "Header example", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "font-semibold", children: "Example header" }), _jsx(CopyButton, { value: HEADER_HTML_EXAMPLE, label: "Copy the example header HTML" })] }), _jsx("pre", { className: "overflow-x-auto rounded-sm border border-border bg-surface-alt p-3 font-mono text-xs text-text", children: HEADER_HTML_EXAMPLE })] }), _jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: "Footer HTML (optional)" }), _jsx("textarea", { "aria-label": "Footer HTML", className: `${INPUT_CLASS} font-mono`, rows: 3, value: footerHtml, onChange: (e) => setFooterHtml(e.target.value) }), _jsxs("span", { className: "text-xs text-text-muted", children: [_jsx("code", { children: "{APP_TITLE}" }), " works here as well, and ", _jsx("code", { children: "{USER_MENU}" }), " takes the account menu (opening upward) when the header has none."] })] }), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] })] }));
 }

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

@@ -4,11 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { getDnsSetup, getDomain, verifyDomain } from "../../../../../lib/admin/domainsApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import CopyButton from "../../../../../lib/components/buttons/CopyButton.js";
+import { actionErrorMessage } from "../elevation.js";
 const RECORD_TYPE_LABELS = {
     ownership: "Ownership (TXT)",
     mx: "MX",
@@ -68,7 +68,7 @@ export default function DomainDnsSetup({ uid, onLoaded }) {
             setDnsSetup(checks);
             onLoaded?.(d);
         })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this domain."))
+            .catch((err) => setError(actionErrorMessage(err, "Could not load this domain.")))
             .finally(() => setLoading(false));
     }
     useEffect(() => {
@@ -88,7 +88,7 @@ export default function DomainDnsSetup({ uid, onLoaded }) {
             onLoaded?.(d);
         }
         catch (err) {
-            setVerifyError(err instanceof ApiRequestError ? err.message : "Could not verify this domain.");
+            setVerifyError(actionErrorMessage(err, "Could not verify this domain."));
         }
         finally {
             setVerifying(false);

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

@@ -4,10 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { updateEncryptionPolicy } from "../../../../../lib/crypto/keyvaultApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
+import Modal from "../../../../../lib/components/overlays/Modal.js";
+import { actionErrorMessage } from "../elevation.js";
 const SELECT_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 TIERS = [
     { key: "encryptSameOrg", label: "Mail within this server", help: "Messages between mailboxes hosted on this server." },
@@ -37,8 +38,19 @@ export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange,
     const [savedValues, setSavedValues] = useState(policy);
     const dirty = TIERS.some((tier) => values[tier.key] !== savedValues[tier.key]);
     useEffect(() => onDirtyChange?.(dirty), [dirty]);
-    async function handleSubmit(e) {
+    // Tiers this save would newly set to "Never encrypt", which switches encryption off for everyone's mail of that kind: confirmed first.
+    const [confirmingProhibit, setConfirmingProhibit] = useState(null);
+    function handleSubmit(e) {
         e.preventDefault();
+        const newlyProhibited = TIERS.filter((tier) => values[tier.key] === "prohibited" && savedValues[tier.key] !== "prohibited");
+        if (newlyProhibited.length > 0) {
+            setConfirmingProhibit(newlyProhibited.map((tier) => tier.label));
+            return;
+        }
+        void save();
+    }
+    async function save() {
+        setConfirmingProhibit(null);
         setError(null);
         setSaved(false);
         setSaving(true);
@@ -49,7 +61,7 @@ export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange,
             setSaved(true);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save the encryption policy.");
+            setError(actionErrorMessage(err, "Could not save the encryption policy."));
         }
         finally {
             setSaving(false);
@@ -58,5 +70,5 @@ export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange,
     return (_jsxs("div", { className: "max-w-xl", children: [embedded ? (_jsx("h3", { className: "text-base font-bold uppercase tracking-wide mb-1", children: "End-to-end encryption" })) : (_jsx("h2", { className: "text-lg font-bold uppercase tracking-wide mb-1", children: "End-to-end encryption" })), _jsx("p", { className: "text-sm text-text-muted mb-5", children: "Encrypted messages can only be read by their senders and recipients - not by this server or its administrators. Choose how encryption applies to each kind of mail." }), error && _jsx(Alert, { children: error }), saved && !error && _jsx("div", { className: "mb-4 text-sm text-success font-medium", children: "Saved." }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [TIERS.map((tier) => (_jsxs("label", { className: "flex flex-col gap-1.5 text-sm", children: [_jsx("span", { className: "font-semibold", children: tier.label }), _jsx("select", { "aria-label": tier.label, className: SELECT_CLASS, value: values[tier.key], onChange: (e) => {
                                     setSaved(false);
                                     setValues({ ...values, [tier.key]: e.target.value });
-                                }, children: STATES.map((state) => (_jsx("option", { value: state.value, children: state.label }, state.value))) }), _jsx("span", { className: "text-xs text-text-muted", children: tier.help })] }, tier.key))), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] })] }));
+                                }, children: STATES.map((state) => (_jsx("option", { value: state.value, children: state.label }, state.value))) }), _jsx("span", { className: "text-xs text-text-muted", children: tier.help })] }, tier.key))), _jsx("div", { children: _jsx(Button, { type: "submit", loading: saving, disabled: saving, className: "!w-auto", children: "Save" }) })] }), _jsxs(Modal, { open: confirmingProhibit !== null, onClose: () => setConfirmingProhibit(null), title: "Turn off encryption?", children: [_jsxs("p", { className: "text-sm mb-3", children: ["Saving sets ", _jsx("strong", { children: confirmingProhibit?.join(", ") }), " to Never encrypt. Nobody on this server can then encrypt that mail end to end, whatever they have chosen for themselves, until an administrator allows it again."] }), _jsxs("div", { className: "flex gap-3 justify-end", children: [_jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setConfirmingProhibit(null), children: "Cancel" }), _jsx(Button, { type: "button", className: "!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger", onClick: () => void save(), children: "Save and turn off encryption" })] })] })] }));
 }

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

@@ -4,8 +4,8 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import { actionErrorMessage } from "../elevation.js";
+import Alert from "../ActionAlert.js";
 /** Loads a settings object, then renders its form - the loading and error states every settings page shares. */
 export default function LoadedSettingsForm({ load, loadErrorMessage, children }) {
     const [value, setValue] = useState(null);
@@ -13,7 +13,7 @@ export default function LoadedSettingsForm({ load, loadErrorMessage, children })
     useEffect(() => {
         load()
             .then(setValue)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : loadErrorMessage));
+            .catch((err) => setError(actionErrorMessage(err, loadErrorMessage)));
     }, []);
     if (error) {
         return _jsx(Alert, { children: error });

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

@@ -4,17 +4,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { getMailboxPolicy } from "../../../../../lib/admin/mailboxPolicyApi.js";
 import { leftoverConflictOf } from "../../../../../lib/admin/leftoverMailboxApi.js";
 import { createMailbox, listMailboxDomains, resolveMailboxOwner } from "../../../../../lib/mail/mailApi.js";
 import { describeTimeZone, deviceTimeZone, zoneClock } from "../../../../../lib/util/timeZone.js";
 import { useApiClient } from "../../../../../lib/util/apiClientContext.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import FormField from "../../../../../lib/components/forms/FormField.js";
 import PrincipalResolver, { describePerson } from "../../sharing/PrincipalResolver.js";
 import EraseLeftoverDataDialog from "../mailboxes/EraseLeftoverDataDialog.js";
+import { actionErrorMessage } from "../elevation.js";
 const INPUT_CLASS = "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 const SELECT_CLASS = "text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
 /**
@@ -82,6 +82,11 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             setError("A primary SMTP address is required.");
             return;
         }
+        // With the domain chosen beside it, a local part with an "@" would make `a@b.com@domain`, which the server refuses without saying why.
+        if (constrained && /[@＠﹫]/.test(localPart)) {
+            setError("The part before the domain can't contain \"@\" - choose the domain from the list instead.");
+            return;
+        }
         if (!displayName.trim()) {
             setError("A display name is required.");
             return;
@@ -125,7 +130,7 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
                 setLeftover({ address, conflict });
             }
             else {
-                setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
+                setError(actionErrorMessage(err, "Could not create the mailbox."));
             }
         }
         finally {

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

@@ -4,10 +4,10 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { updateMailboxPolicy } from "../../../../../lib/admin/mailboxPolicyApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
+import { actionErrorMessage } from "../elevation.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 GB = 1000000000;
 /** Unrounded, so a quota that isn't a whole number of hundredths of a GB (say 4 MB) is shown as it is. */
@@ -80,7 +80,7 @@ export default function MailboxPolicyForm({ policy, onChange, onDirtyChange, emb
             setSaved(true);
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save the mailbox policy.");
+            setError(actionErrorMessage(err, "Could not save the mailbox policy."));
         }
         finally {
             setSaving(false);