@rapidmx/web-client 0.30.0 → 0.32.0

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

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { LeftoverMailbox, 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;
@@ -54,7 +54,7 @@ export default function LeftoverMailboxesSection({ refreshIntervalMs = LEFTOVER_
             setError(null);
         } 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."));
             }
         }
     }
@@ -69,7 +69,7 @@ export default function LeftoverMailboxesSection({ refreshIntervalMs = LEFTOVER_
             setNext(page.next);
         } 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 {
             setLoadingMore(false);

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

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { Mailbox, 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";
@@ -65,7 +65,7 @@ export default function ResourceSettingsCard({ mailbox, onUpdate }: ResourceSett
             onUpdate(updated);
             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/apps/shared/components/admin/mailboxes/ShareAccessCard.tsx

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import {
     listMailboxAccess,
     MailboxAccessMember,
@@ -11,10 +10,11 @@ import {
     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: Record<MailboxAccessRole, string> = { viewer: "Read only", manager: "Full access" };
 
@@ -54,7 +54,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));
     }
 
@@ -67,7 +67,7 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserU
             await setMailboxAccess(mailboxUid, userUid, "manager");
             reload();
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not grant access.");
+            setError(actionErrorMessage(err, "Could not grant access."));
         } finally {
             setSaving(false);
         }
@@ -82,7 +82,7 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserU
             try {
                 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();
@@ -102,7 +102,7 @@ export default function ShareAccessCard({ mailboxUid, ownerUserUid, currentUserU
             await removeMailboxAccess(mailboxUid, userOrRoleId);
             reload();
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not revoke access.");
+            setError(actionErrorMessage(err, "Could not revoke access."));
         } finally {
             setSaving(false);
         }

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

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ChangeEvent, FormEvent, useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import {
     Branding,
     deleteBrandingIcon,
@@ -14,9 +13,10 @@ import {
     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";
@@ -74,10 +74,21 @@ export default function BrandingForm({ branding, onChange, embedded = false }: B
                 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: string, field: "logoUrl" | "iconUrl" | "stylesheetUrl", value: string) {
+        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: ChangeEvent<HTMLInputElement>) {
         const file = e.target.files?.[0];
         if (!file) return;
@@ -125,7 +136,7 @@ export default function BrandingForm({ branding, onChange, embedded = false }: B
             onChange(updated);
             setSaved(true);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save branding.");
+            setError(actionErrorMessage(err, "Could not save branding."));
         } finally {
             setSaving(false);
         }
@@ -208,7 +219,7 @@ export default function BrandingForm({ branding, onChange, embedded = false }: B
                                 className="!w-auto"
                                 disabled={assetBusy !== null || logoUrlInput === (branding.logoUrl ?? "")}
                                 loading={assetBusy === "logo-url"}
-                                onClick={() => void runAsset("logo-url", () => updateBranding({ logoUrl: logoUrlInput }))}
+                                onClick={() => runUrl("logo-url", "logoUrl", logoUrlInput)}
                             >
                                 Set
                             </Button>
@@ -280,7 +291,7 @@ export default function BrandingForm({ branding, onChange, embedded = false }: B
                                 className="!w-auto"
                                 disabled={assetBusy !== null || iconUrlInput === (branding.iconUrl ?? "")}
                                 loading={assetBusy === "icon-url"}
-                                onClick={() => void runAsset("icon-url", () => updateBranding({ iconUrl: iconUrlInput }))}
+                                onClick={() => runUrl("icon-url", "iconUrl", iconUrlInput)}
                             >
                                 Set
                             </Button>
@@ -331,6 +342,10 @@ export default function BrandingForm({ branding, onChange, embedded = false }: B
                     </div>
                     <label className="flex flex-col gap-1.5 text-sm">
                         <span className="font-semibold">Or use an external stylesheet URL</span>
+                        <span className="text-xs text-text-muted">
+                            Every visitor&rsquo;s browser loads it, and a stylesheet can read what the page shows: only use an address you control, or
+                            upload the file instead.
+                        </span>
                         <div className="flex gap-2">
                             <input
                                 aria-label="Stylesheet URL"
@@ -344,9 +359,7 @@ export default function BrandingForm({ branding, onChange, embedded = false }: B
                                 className="!w-auto"
                                 disabled={assetBusy !== null || stylesheetUrlInput === (branding.stylesheetUrl ?? "")}
                                 loading={assetBusy === "stylesheet-url"}
-                                onClick={() =>
-                                    void runAsset("stylesheet-url", () => updateBranding({ stylesheetUrl: stylesheetUrlInput }))
-                                }
+                                onClick={() => runUrl("stylesheet-url", "stylesheetUrl", stylesheetUrlInput)}
                             >
                                 Set
                             </Button>

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

@@ -3,11 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { DnsRecordCheck, Domain, 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: Record<DnsRecordCheck["type"], string> = {
     ownership: "Ownership (TXT)",
@@ -88,7 +88,7 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
                 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));
     }
 
@@ -109,7 +109,7 @@ export default function DomainDnsSetup({ uid, onLoaded }: DomainDnsSetupProps) {
             setDnsSetup(checks);
             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/apps/shared/components/admin/settings/EncryptionPolicyForm.tsx

@@ -3,10 +3,11 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { EncryptionPolicy, PolicyState, 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";
@@ -54,8 +55,21 @@ export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange,
     const dirty: boolean = TIERS.some((tier) => values[tier.key] !== savedValues[tier.key]);
     useEffect(() => onDirtyChange?.(dirty), [dirty]);
 
-    async function handleSubmit(e: FormEvent) {
+    // 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<string[] | null>(null);
+
+    function handleSubmit(e: FormEvent) {
         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);
@@ -65,7 +79,7 @@ export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange,
             setSavedValues(values);
             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);
         }
@@ -114,6 +128,21 @@ export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange,
                     </Button>
                 </div>
             </form>
+
+            <Modal open={confirmingProhibit !== null} onClose={() => setConfirmingProhibit(null)} title="Turn off encryption?">
+                <p className="text-sm mb-3">
+                    Saving sets <strong>{confirmingProhibit?.join(", ")}</strong> 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.
+                </p>
+                <div className="flex gap-3 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingProhibit(null)}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger" onClick={() => void save()}>
+                        Save and turn off encryption
+                    </Button>
+                </div>
+            </Modal>
         </div>
     );
 }

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

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { ReactNode, 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";
 
 export interface LoadedSettingsFormProps<T> {
     load: () => Promise<T>;
@@ -21,7 +21,7 @@ export default function LoadedSettingsForm<T>({ load, loadErrorMessage, children
     useEffect(() => {
         load()
             .then(setValue)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : loadErrorMessage));
+            .catch((err) => setError(actionErrorMessage(err, loadErrorMessage)));
     }, []);
 
     if (error) {

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

@@ -3,17 +3,17 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { getMailboxPolicy } from "../../../../../lib/admin/mailboxPolicyApi.js";
 import { LeftoverConflict, leftoverConflictOf } from "../../../../../lib/admin/leftoverMailboxApi.js";
 import { createMailbox, listMailboxDomains, Mailbox, resolveMailboxOwner, ResolvedPrincipal } 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";
@@ -98,6 +98,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;
@@ -143,7 +148,7 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
                 // Not a plain failure: the address is taken by what a deleted mailbox left, which can be erased right here.
                 setLeftover({ address, conflict });
             } else {
-                setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
+                setError(actionErrorMessage(err, "Could not create the mailbox."));
             }
         } finally {
             setSaving(false);

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

@@ -3,10 +3,10 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import { MailboxPolicy, 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";
@@ -109,7 +109,7 @@ export default function MailboxPolicyForm({ policy, onChange, onDirtyChange, emb
             setBaseline(current);
             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);
         }