@rapidmx/web-client 0.30.0 → 0.31.0

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);
         }

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

@@ -3,12 +3,13 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useCallback, useEffect, useId, useRef, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
 import {
     addPlugin,
     expectedPlanOf,
     getPluginStatus,
     getPluginUpdates,
+    isSecretSetting,
+    isSecretSettingKey,
     listPluginNamespaces,
     listPlugins,
     lookupPluginPackage,
@@ -21,6 +22,7 @@ import {
     PluginPurgeInfo,
     PluginPurgeState,
     PluginRegistryLookup,
+    PluginSavedSetting,
     PluginSearchResult,
     PluginSettingDefinition,
     PluginSettingValue,
@@ -32,11 +34,11 @@ import {
     searchPlugins,
     updatePlugin,
 } from "../../../../../lib/admin/pluginsApi.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 { notify } from "../../../notifications/store.js";
-import { isElevationRequired } from "../elevation.js";
+import { actionErrorMessage, isElevationMessage, isElevationRequired } from "../elevation.js";
 import { getAllowPrerelease, setAllowPrerelease } from "./pluginPreferences.js";
 
 const INPUT_CLASS =
@@ -52,7 +54,7 @@ const AFTER_CHANGE_POLL_MS = 2 * 60 * 1000;
 const MAX_STATUS_RETRY_MS = 60 * 1000;
 
 function errorMessage(err: unknown, fallback: string): string {
-    return err instanceof ApiRequestError ? err.message : fallback;
+    return actionErrorMessage(err, fallback);
 }
 
 /** Runs `action`, resolving why it failed, or `null`. */
@@ -212,6 +214,8 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
     const allowPrereleaseRef = useRef(allowPrerelease);
     /** Identifies the latest update check, so a slower earlier one can't replace what it found. */
     const updatesRequest = useRef(0);
+    // Set while a bulk action runs, which looks for updates once at its end rather than after each plugin it changes.
+    const bulkRunning = useRef(false);
     /** The plugins ticked for a bulk action. */
     const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
     /** Set while a bulk action runs. */
@@ -378,7 +382,9 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
             return [...next].sort((a, b) => a.name.localeCompare(b.name));
         });
         watchRollout();
-        void refreshUpdates();
+        if (!bulkRunning.current) {
+            void refreshUpdates();
+        }
     }
 
     /** Runs an action on a plugin's row (an installed plugin's, or an uninstalled one's), which is busy meanwhile, and
@@ -579,6 +585,7 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
         setError(null);
         setRetryEnableUid(null);
         setBulkFailure(null);
+        bulkRunning.current = true;
         await track(
             (async () => {
                 for (const [index, plugin] of ordered.entries()) {
@@ -594,7 +601,7 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                     }
                     failed.add(plugin.uid);
                     reasons.push(`${plugin.manifest.displayName}: ${problem}`);
-                    if (problem === ELEVATION_MESSAGE) {
+                    if (isElevationMessage(problem)) {
                         for (const untried of ordered.slice(index + 1)) {
                             failed.add(untried.uid);
                             reasons.push(`${untried.manifest.displayName}: Not attempted.`);
@@ -604,12 +611,16 @@ export default function PluginsManager({ embedded = false }: PluginsManagerProps
                 }
             })(),
         );
+        bulkRunning.current = false;
         setBulk(null);
         setSelected(failed);
         const succeeded: number = ordered.length - failed.size;
         if (kind === "uninstall" && succeeded > 0) {
             watchRollout();
         }
+        if (kind !== "uninstall" && succeeded > 0) {
+            void refreshUpdates();
+        }
         if (succeeded > 0) {
             notify({
                 kind: "success",
@@ -1675,7 +1686,7 @@ function ConfirmDependenciesModal({
 }
 
 /** Whether a required select has no value to fall back on, so the form has to pick (and save) one. */
-function needsSelection(definition: PluginSettingDefinition, saved: PluginSettingValue | undefined): boolean {
+function needsSelection(definition: PluginSettingDefinition, saved: PluginSavedSetting | undefined): boolean {
     return (
         definition.type === "select" &&
         !!definition.required &&
@@ -1693,7 +1704,7 @@ const HOST_PLACEHOLDER = "<host>";
  * saved yet - nothing, an empty value, or the placeholder itself, which an older server stores when it installs the
  * plugin. It's the default with this console's host filled in, and is only stored once the form is saved.
  */
-function suggestedHost(definition: PluginSettingDefinition, saved: PluginSettingValue | undefined): string | undefined {
+function suggestedHost(definition: PluginSettingDefinition, saved: PluginSavedSetting | undefined): string | undefined {
     if (typeof definition.default !== "string" || !definition.default.includes(HOST_PLACEHOLDER) || typeof window === "undefined") {
         return undefined;
     }
@@ -1710,12 +1721,12 @@ function configuredValue(definition: PluginSettingDefinition, configured: Plugin
 }
 
 /** Whether a saved value is absent - nothing, or the empty value a plugin's own "" default is saved as. */
-function isUnsaved(saved: PluginSettingValue | undefined): boolean {
+function isUnsaved(saved: PluginSavedSetting | undefined): boolean {
     return saved === undefined || saved === "";
 }
 
 /** The suggestion for the host, unless the deployment configures the setting, which is offered instead. */
-function hostSuggestion(definition: PluginSettingDefinition, saved: PluginSettingValue | undefined, configured: PluginConfiguredSetting | undefined): string | undefined {
+function hostSuggestion(definition: PluginSettingDefinition, saved: PluginSavedSetting | undefined, configured: PluginConfiguredSetting | undefined): string | undefined {
     return configured ? undefined : suggestedHost(definition, saved);
 }
 
@@ -1724,9 +1735,13 @@ function hostSuggestion(definition: PluginSettingDefinition, saved: PluginSettin
  * option. Kept as a string for text inputs. */
 function initialValue(
     definition: PluginSettingDefinition,
-    saved: PluginSettingValue | undefined,
+    saved: PluginSavedSetting | undefined,
     configured?: PluginConfiguredSetting,
 ): PluginSettingValue | "" {
+    if (isSecretSetting(saved)) {
+        // Write-only: the saved secret never reaches the browser, so the field starts empty. Left empty, the placeholder is sent back and the secret stays.
+        return "";
+    }
     if (configured && isUnsaved(saved)) {
         return configuredValue(definition, configured);
     }
@@ -1768,12 +1783,12 @@ function SettingsModal({ plugin, onClose, onSaved }: { plugin: Plugin; onClose:
         // A required select with nothing to fall back on, and a setting offering this console's host, are sent as the
         // form shows them. What the deployment configures is never saved as a copy, which would outrank it when it changes
         // - a field that shows it is sent as nothing.
-        const settings: Record<string, PluginSettingValue | null> = {};
+        const settings: Record<string, PluginSavedSetting | null> = {};
         let changed = false;
         for (const definition of definitions) {
             const key: string = definition.key;
             const configured: PluginConfiguredSetting | undefined = plugin.configured?.[key];
-            const saved: PluginSettingValue | undefined = plugin.settings[key];
+            const saved: PluginSavedSetting | undefined = plugin.settings[key];
             const value = values[key];
             if (resetting && value === initialValue(definition, undefined, configured)) {
                 // What a fresh install saves: only a default naming this console's host has to be, for the plugin to work.
@@ -1820,6 +1835,7 @@ function SettingsModal({ plugin, onClose, onSaved }: { plugin: Plugin; onClose:
                         definition={definition}
                         value={values[definition.key]}
                         configured={plugin.configured?.[definition.key]}
+                        secretSaved={!resetting && isSecretSetting(plugin.settings[definition.key])}
                         onChange={(value) => setValues((prev) => ({ ...prev, [definition.key]: value }))}
                     />
                 ))}
@@ -1852,11 +1868,14 @@ function SettingField({
     definition,
     value,
     configured,
+    secretSaved,
     onChange,
 }: {
     definition: PluginSettingDefinition;
     value: PluginSettingValue | "";
     configured?: PluginConfiguredSetting;
+    /** A secret is saved: the server never sends it, so the field is write-only - typing replaces it, leaving it empty keeps it. */
+    secretSaved: boolean;
     onChange: (value: PluginSettingValue | "") => void;
 }) {
     // What applies without a saved value; one saved here replaces it, and Reset goes back to it.
@@ -1865,8 +1884,10 @@ function SettingField({
             This deployment&apos;s configuration provides {configured.secret ? "a value" : "the value shown"} unless one is saved here.
         </span>
     );
-    // A secret's value never reaches the browser, so the field only says that it is set.
-    const placeholder: string | undefined = configured?.secret ? "Set by this deployment" : undefined;
+    // A secret's value never reaches the browser, so the field only says that it is set - and never shows what is typed, or offers it to the
+    // browser's form fill.
+    const secretField: boolean = definition.type === "string" && (isSecretSettingKey(definition.key) || secretSaved || !!configured?.secret);
+    const placeholder: string | undefined = secretSaved ? "Saved - type a new value to replace it" : configured?.secret ? "Set by this deployment" : undefined;
     const help = (
         <>
             {definition.help && <span className="text-xs text-text-muted">{definition.help}</span>}
@@ -1901,10 +1922,11 @@ function SettingField({
                 <input
                     aria-label={definition.label}
                     className={INPUT_CLASS}
-                    type={definition.type === "number" ? "number" : "text"}
+                    type={definition.type === "number" ? "number" : secretField ? "password" : "text"}
+                    autoComplete={secretField ? "new-password" : undefined}
                     min={definition.min}
                     max={definition.max}
-                    required={definition.required && !configured}
+                    required={definition.required && !configured && !secretSaved}
                     placeholder={placeholder}
                     value={String(value)}
                     onChange={(e) => onChange(e.target.value)}

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

@@ -3,9 +3,15 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "../../../../../lib/util/api.js";
-import { MIN_AUDIT_LOG_RETENTION_DAYS, RetentionPolicy, RetentionPolicyUpdate, updateRetentionPolicy } from "../../../../../lib/admin/retentionPolicyApi.js";
-import Alert from "../../../../../lib/components/feedback/Alert.js";
+import { actionErrorMessage } from "../elevation.js";
+import {
+    MIN_AUDIT_LOG_RETENTION_DAYS,
+    MIN_MESSAGE_RETENTION_DAYS,
+    RetentionPolicy,
+    RetentionPolicyUpdate,
+    updateRetentionPolicy,
+} from "../../../../../lib/admin/retentionPolicyApi.js";
+import Alert from "../ActionAlert.js";
 import Button from "../../../../../lib/components/buttons/Button.js";
 import Modal from "../../../../../lib/components/overlays/Modal.js";
 
@@ -49,14 +55,21 @@ export default function RetentionPolicyForm({
     const [savedMessageDays, setSavedMessageDays] = useState(policy.messageRetentionDays);
     const [savedAuditDays, setSavedAuditDays] = useState(policy.auditLogRetentionDays);
     const [pendingPatch, setPendingPatch] = useState<RetentionPolicyUpdate | null>(null);
+    // A period that is still what is stored is neither sent nor held to the floor: it may have been stored before the floor was set.
+    const messageChanged = messageRetentionDays !== (savedMessageDays?.toString() ?? "");
+    const auditChanged = auditLogRetentionDays !== (savedAuditDays?.toString() ?? "");
 
     function handleSubmit(e: FormEvent) {
         e.preventDefault();
-        // A blank field is sent as `null`, which clears a configured age back to no automatic purge.
-        const patch: RetentionPolicyUpdate = {
-            messageRetentionDays: messageRetentionDays.trim() === "" ? null : Number(messageRetentionDays),
-            auditLogRetentionDays: auditLogRetentionDays.trim() === "" ? null : Number(auditLogRetentionDays),
-        };
+        // A blank field is sent as `null`, which clears a configured age back to no automatic purge. Only a field that was changed is sent: one left as
+        // it is would be refused by a floor that came in after it was stored, and so keep the other from being saved.
+        const patch: RetentionPolicyUpdate = {};
+        if (messageChanged) {
+            patch.messageRetentionDays = messageRetentionDays.trim() === "" ? null : Number(messageRetentionDays);
+        }
+        if (auditChanged) {
+            patch.auditLogRetentionDays = auditLogRetentionDays.trim() === "" ? null : Number(auditLogRetentionDays);
+        }
         if (
             shortensRetention(patch.messageRetentionDays, savedMessageDays) ||
             shortensRetention(patch.auditLogRetentionDays, savedAuditDays)
@@ -80,7 +93,7 @@ export default function RetentionPolicyForm({
             setSavedSnapshot(snapshot);
             setSaved(true);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save the retention policy.");
+            setError(actionErrorMessage(err, "Could not save the retention policy."));
         } finally {
             setSaving(false);
         }
@@ -109,14 +122,14 @@ export default function RetentionPolicyForm({
                     <input
                         aria-label="Message retention (days)"
                         type="number"
-                        min={1}
+                        min={messageChanged ? MIN_MESSAGE_RETENTION_DAYS : undefined}
                         className={INPUT_CLASS}
                         value={messageRetentionDays}
                         onChange={(e) => setMessageRetentionDays(e.target.value)}
                         placeholder="No automatic purge"
                     />
                     <span className="text-xs text-text-muted">
-                        Applies to any message, in any folder, regardless of age.
+                        Applies to any message, in any folder, regardless of age. Cannot be set below {MIN_MESSAGE_RETENTION_DAYS} days.
                     </span>
                 </label>
                 <label className="flex flex-col gap-1.5 text-sm">
@@ -124,7 +137,7 @@ export default function RetentionPolicyForm({
                     <input
                         aria-label="Audit log retention (days)"
                         type="number"
-                        min={MIN_AUDIT_LOG_RETENTION_DAYS}
+                        min={auditChanged ? MIN_AUDIT_LOG_RETENTION_DAYS : undefined}
                         className={INPUT_CLASS}
                         value={auditLogRetentionDays}
                         onChange={(e) => setAuditLogRetentionDays(e.target.value)}