@rapidmx/web-client 0.4.0 → 0.5.0

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

@@ -25,11 +25,12 @@ export default function DomainDnsSetup({ uid, onLoaded }) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [verifying, setVerifying] = useState(false);
+    const [verifyError, setVerifyError] = useState(null);
     const [copied, setCopied] = useState(false);
     function reload(id) {
         setLoading(true);
         setError(null);
-        Promise.all([getDomain(id), getDnsSetup(id)])
+        return Promise.all([getDomain(id), getDnsSetup(id)])
             .then(([d, checks]) => {
             setDomain(d);
             setDnsSetup(checks);
@@ -39,18 +40,23 @@ export default function DomainDnsSetup({ uid, onLoaded }) {
             .finally(() => setLoading(false));
     }
     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);
@@ -73,5 +79,5 @@ export default function DomainDnsSetup({ uid, onLoaded }) {
         return _jsx(Alert, { children: error ?? "Domain not found." });
     }
     const ownershipValue = dnsSetup.find((c) => c.type === "ownership")?.recommendedValue ?? `rapidmx-domain-verification=${domain.verificationToken}`;
-    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm", children: [_jsx("dt", { className: "text-text-muted", children: "Enabled" }), _jsx("dd", { children: domain.enabled ? "Yes" : "No" }), _jsx("dt", { className: "text-text-muted", children: "Verification" }), _jsx("dd", { children: domain.verified ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Verified" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Unverified" })) }), _jsx("dt", { className: "text-text-muted", children: "Last checked" }), _jsx("dd", { children: domain.lastCheckedAt ? new Date(domain.lastCheckedAt).toLocaleString() : "Never" })] }), !domain.verified && (_jsxs("div", { className: "mt-5 pt-5 border-t border-border", children: [_jsxs("p", { className: "text-sm mb-2", children: ["Add the following TXT record to ", _jsx("strong", { children: domain.name }), " to prove ownership, then verify:"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 text-xs bg-surface-alt border border-border rounded-sm py-2 px-3 overflow-x-auto whitespace-nowrap", children: ownershipValue }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => handleCopy(ownershipValue), children: copied ? "Copied" : "Copy" })] }), _jsx(Button, { type: "button", className: "!w-auto mt-3", loading: verifying, disabled: verifying, onClick: handleVerify, children: "Verify now" })] }))] }), dnsSetup.length > 0 && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "DNS setup checklist" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Record", "Status", "Recommended value"].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: dnsSetup.map((check) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: RECORD_TYPE_LABELS[check.type] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: !check.configured ? (_jsx("span", { className: "text-xs text-text-muted", children: "Not configured" })) : check.matches ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Live" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Not found" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted", children: _jsx("code", { className: "text-xs", children: check.recommendedValue ?? "—" }) })] }, check.type))) })] }) })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsxs("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 text-sm", children: [_jsx("dt", { className: "text-text-muted", children: "Enabled" }), _jsx("dd", { children: domain.enabled ? "Yes" : "No" }), _jsx("dt", { className: "text-text-muted", children: "Verification" }), _jsx("dd", { children: domain.verified ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Verified" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Unverified" })) }), _jsx("dt", { className: "text-text-muted", children: "Last checked" }), _jsx("dd", { children: domain.lastCheckedAt ? new Date(domain.lastCheckedAt).toLocaleString() : "Never" })] }), !domain.verified && (_jsxs("div", { className: "mt-5 pt-5 border-t border-border", children: [_jsxs("p", { className: "text-sm mb-2", children: ["Add the following TXT record to ", _jsx("strong", { children: domain.name }), " to prove ownership, then verify:"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 text-xs bg-surface-alt border border-border rounded-sm py-2 px-3 overflow-x-auto whitespace-nowrap", children: ownershipValue }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto shrink-0", onClick: () => handleCopy(ownershipValue), children: copied ? "Copied" : "Copy" })] }), verifyError && (_jsx("div", { className: "mt-3", children: _jsx(Alert, { children: verifyError }) })), _jsx(Button, { type: "button", className: "!w-auto mt-3", loading: verifying, disabled: verifying, onClick: handleVerify, children: verifyError ? "Try again" : "Verify now" })] }))] }), dnsSetup.length > 0 && (_jsxs("div", { className: "bg-surface border border-border rounded-md p-6", children: [_jsx("h2", { className: "text-sm font-bold uppercase tracking-wide mb-3", children: "DNS setup checklist" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm border-collapse", children: [_jsx("thead", { children: _jsx("tr", { children: ["Record", "Status", "Recommended value"].map((h) => (_jsx("th", { className: "text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border", children: h }, h))) }) }), _jsx("tbody", { children: dnsSetup.map((check) => (_jsxs("tr", { children: [_jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: RECORD_TYPE_LABELS[check.type] }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border", children: !check.configured ? (_jsx("span", { className: "text-xs text-text-muted", children: "Not configured" })) : check.matches ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white", children: "Live" })) : (_jsx("span", { className: "text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted", children: "Not found" })) }), _jsx("td", { className: "py-2.5 px-2.5 border-b border-border text-text-muted", children: _jsx("code", { className: "text-xs", children: check.recommendedValue ?? "—" }) })] }, check.type))) })] }) })] }))] }));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { updateEncryptionPolicy } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
@@ -28,11 +28,15 @@ export function isEncryptionEnabled(policy) {
     return TIERS.some((tier) => policy[tier.key] !== "prohibited");
 }
 /** The end-to-end encryption policy editor, shared by the Encryption Policy page and the setup wizard. */
-export default function EncryptionPolicyForm({ policy, onChange }) {
+export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange }) {
     const [values, setValues] = useState(policy);
     const [error, setError] = useState(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(policy);
+    const dirty = TIERS.some((tier) => values[tier.key] !== savedValues[tier.key]);
+    useEffect(() => onDirtyChange?.(dirty), [dirty]);
     async function handleSubmit(e) {
         e.preventDefault();
         setError(null);
@@ -41,6 +45,7 @@ export default function EncryptionPolicyForm({ policy, onChange }) {
         try {
             const updated = await updateEncryptionPolicy(values);
             onChange(updated);
+            setSavedValues(values);
             setSaved(true);
         }
         catch (err) {

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

@@ -69,6 +69,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 {
             // ownerUserUid left blank creates a true ownerless shared mailbox (e.g. support@example.com);

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

@@ -3,42 +3,64 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { updateMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.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. */
 function toGb(bytes) {
-    return String(Math.round((bytes / GB) * 100) / 100);
+    return String(bytes / GB);
 }
 /** The mailbox defaults editor, shared by the Mailbox Policy page and the setup wizard. */
-export default function MailboxPolicyForm({ policy, onChange }) {
+export default function MailboxPolicyForm({ policy, onChange, onDirtyChange }) {
     const [defaultQuotaGb, setDefaultQuotaGb] = useState(toGb(policy.defaultQuotaBytes));
     const [autoProvisionEnabled, setAutoProvisionEnabled] = useState(policy.autoProvisionEnabled);
     const [autoProvisionQuotaGb, setAutoProvisionQuotaGb] = useState(toGb(policy.autoProvisionQuotaBytes));
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
+    // Edits are unsaved until they match what was loaded or last saved.
+    const [baseline, setBaseline] = useState({ defaultQuotaGb, autoProvisionEnabled, autoProvisionQuotaGb });
+    const dirty = defaultQuotaGb !== baseline.defaultQuotaGb ||
+        autoProvisionEnabled !== baseline.autoProvisionEnabled ||
+        autoProvisionQuotaGb !== baseline.autoProvisionQuotaGb;
+    useEffect(() => onDirtyChange?.(dirty), [dirty]);
     async function handleSubmit(e) {
         e.preventDefault();
         setError(null);
         setSaved(false);
-        const defaultQuota = Number(defaultQuotaGb);
-        const autoQuota = Number(autoProvisionQuotaGb);
-        if (!(defaultQuota > 0) || !(autoQuota > 0)) {
-            setError("Quotas must be more than 0 GB.");
+        // Only fields the administrator changed are sent, so a quota left alone keeps its exact stored bytes.
+        const patch = {};
+        for (const [field, text, base] of [
+            ["defaultQuotaBytes", defaultQuotaGb, baseline.defaultQuotaGb],
+            ["autoProvisionQuotaBytes", autoProvisionQuotaGb, baseline.autoProvisionQuotaGb],
+        ]) {
+            if (text === base) {
+                continue;
+            }
+            const bytes = Math.round(Number(text) * GB);
+            if (!(bytes >= 1)) {
+                setError("Quotas must be more than 0 GB.");
+                return;
+            }
+            patch[field] = bytes;
+        }
+        if (autoProvisionEnabled !== baseline.autoProvisionEnabled) {
+            patch.autoProvisionEnabled = autoProvisionEnabled;
+        }
+        const current = { defaultQuotaGb, autoProvisionEnabled, autoProvisionQuotaGb };
+        if (Object.keys(patch).length === 0) {
+            setSaved(true);
             return;
         }
         setSaving(true);
         try {
-            const updated = await updateMailboxPolicy({
-                defaultQuotaBytes: Math.round(defaultQuota * GB),
-                autoProvisionEnabled,
-                autoProvisionQuotaBytes: Math.round(autoQuota * GB),
-            });
+            const updated = await updateMailboxPolicy(patch);
             onChange(updated);
+            setBaseline(current);
             setSaved(true);
         }
         catch (err) {