@rapidmx/web-client 0.14.1 → 0.16.0

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

@@ -1,119 +1,119 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import React, { FormEvent, useEffect, useState } from "react";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
-import { EncryptionPolicy, PolicyState, updateEncryptionPolicy } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.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: keyof EncryptionPolicy; label: string; help: string }[] = [
-    { key: "encryptSameOrg", label: "Mail within this server", help: "Messages between mailboxes hosted on this server." },
-    {
-        key: "encryptFederated",
-        label: "Mail to other RapidMX servers",
-        help: "Messages to people on another RapidMX server that publishes its encryption keys.",
-    },
-    { key: "encryptExternal", label: "Mail to everyone else", help: "Messages to any other email provider, using S/MIME." },
-];
-
-const STATES: { value: PolicyState; label: string }[] = [
-    { value: "automatic", label: "Always encrypt when possible" },
-    { value: "optional", label: "Let people choose" },
-    { value: "prohibited", label: "Never encrypt" },
-];
-
-/** Whether end-to-end encryption can be used at all under `policy` - i.e. any tier allows it. */
-export function isEncryptionEnabled(policy: EncryptionPolicy): boolean {
-    return TIERS.some((tier) => policy[tier.key] !== "prohibited");
-}
-
-export interface EncryptionPolicyFormProps {
-    policy: EncryptionPolicy;
-    onChange: (policy: EncryptionPolicy) => void;
-    /** Told whether the form has edits that haven't been saved. */
-    onDirtyChange?: (dirty: boolean) => void;
-    /** Set when shown as one section of a page with its own heading (the setup wizard), so the title is a smaller,
-     * lower-level heading. */
-    embedded?: boolean;
-}
-
-/** The end-to-end encryption policy editor, shared by the Encryption Policy page and the setup wizard. */
-export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange, embedded = false }: EncryptionPolicyFormProps) {
-    const [values, setValues] = useState<EncryptionPolicy>(policy);
-    const [error, setError] = useState<string | null>(null);
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-
-    // Edits are unsaved until they match what was loaded or last saved.
-    const [savedValues, setSavedValues] = useState<EncryptionPolicy>(policy);
-    const dirty: boolean = TIERS.some((tier) => values[tier.key] !== savedValues[tier.key]);
-    useEffect(() => onDirtyChange?.(dirty), [dirty]);
-
-    async function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        setError(null);
-        setSaved(false);
-        setSaving(true);
-        try {
-            const updated = await updateEncryptionPolicy(values);
-            onChange(updated);
-            setSavedValues(values);
-            setSaved(true);
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save the encryption policy.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    return (
-        <div className="max-w-xl">
-            {embedded ? (
-                <h3 className="text-base font-bold uppercase tracking-wide mb-1">End-to-end encryption</h3>
-            ) : (
-                <h2 className="text-lg font-bold uppercase tracking-wide mb-1">End-to-end encryption</h2>
-            )}
-            <p className="text-sm text-text-muted mb-5">
-                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.
-            </p>
-
-            {error && <Alert>{error}</Alert>}
-            {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
-
-            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-                {TIERS.map((tier) => (
-                    <label key={tier.key} className="flex flex-col gap-1.5 text-sm">
-                        <span className="font-semibold">{tier.label}</span>
-                        <select
-                            aria-label={tier.label}
-                            className={SELECT_CLASS}
-                            value={values[tier.key]}
-                            onChange={(e) => {
-                                setSaved(false);
-                                setValues({ ...values, [tier.key]: e.target.value as PolicyState });
-                            }}
-                        >
-                            {STATES.map((state) => (
-                                <option key={state.value} value={state.value}>
-                                    {state.label}
-                                </option>
-                            ))}
-                        </select>
-                        <span className="text-xs text-text-muted">{tier.help}</span>
-                    </label>
-                ))}
-                <div>
-                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
-                        Save
-                    </Button>
-                </div>
-            </form>
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { EncryptionPolicy, PolicyState, updateEncryptionPolicy } from "@rapidmx/react-shared/crypto/keyvaultApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.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: keyof EncryptionPolicy; label: string; help: string }[] = [
+    { key: "encryptSameOrg", label: "Mail within this server", help: "Messages between mailboxes hosted on this server." },
+    {
+        key: "encryptFederated",
+        label: "Mail to other RapidMX servers",
+        help: "Messages to people on another RapidMX server that publishes its encryption keys.",
+    },
+    { key: "encryptExternal", label: "Mail to everyone else", help: "Messages to any other email provider, using S/MIME." },
+];
+
+const STATES: { value: PolicyState; label: string }[] = [
+    { value: "automatic", label: "Always encrypt when possible" },
+    { value: "optional", label: "Let people choose" },
+    { value: "prohibited", label: "Never encrypt" },
+];
+
+/** Whether end-to-end encryption can be used at all under `policy` - i.e. any tier allows it. */
+export function isEncryptionEnabled(policy: EncryptionPolicy): boolean {
+    return TIERS.some((tier) => policy[tier.key] !== "prohibited");
+}
+
+export interface EncryptionPolicyFormProps {
+    policy: EncryptionPolicy;
+    onChange: (policy: EncryptionPolicy) => void;
+    /** Told whether the form has edits that haven't been saved. */
+    onDirtyChange?: (dirty: boolean) => void;
+    /** Set when shown as one section of a page with its own heading (the setup wizard), so the title is a smaller,
+     * lower-level heading. */
+    embedded?: boolean;
+}
+
+/** The end-to-end encryption policy editor, shared by the Encryption Policy page and the setup wizard. */
+export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange, embedded = false }: EncryptionPolicyFormProps) {
+    const [values, setValues] = useState<EncryptionPolicy>(policy);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    // Edits are unsaved until they match what was loaded or last saved.
+    const [savedValues, setSavedValues] = useState<EncryptionPolicy>(policy);
+    const dirty: boolean = TIERS.some((tier) => values[tier.key] !== savedValues[tier.key]);
+    useEffect(() => onDirtyChange?.(dirty), [dirty]);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        setSaving(true);
+        try {
+            const updated = await updateEncryptionPolicy(values);
+            onChange(updated);
+            setSavedValues(values);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save the encryption policy.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-xl">
+            {embedded ? (
+                <h3 className="text-base font-bold uppercase tracking-wide mb-1">End-to-end encryption</h3>
+            ) : (
+                <h2 className="text-lg font-bold uppercase tracking-wide mb-1">End-to-end encryption</h2>
+            )}
+            <p className="text-sm text-text-muted mb-5">
+                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.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+            {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+                {TIERS.map((tier) => (
+                    <label key={tier.key} className="flex flex-col gap-1.5 text-sm">
+                        <span className="font-semibold">{tier.label}</span>
+                        <select
+                            aria-label={tier.label}
+                            className={SELECT_CLASS}
+                            value={values[tier.key]}
+                            onChange={(e) => {
+                                setSaved(false);
+                                setValues({ ...values, [tier.key]: e.target.value as PolicyState });
+                            }}
+                        >
+                            {STATES.map((state) => (
+                                <option key={state.value} value={state.value}>
+                                    {state.label}
+                                </option>
+                            ))}
+                        </select>
+                        <span className="text-xs text-text-muted">{tier.help}</span>
+                    </label>
+                ))}
+                <div>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}

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

@@ -5,11 +5,14 @@
 import React, { FormEvent, useEffect, useRef, useState } from "react";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { getMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
+import { LeftoverConflict, leftoverConflictOf } from "@rapidmx/react-shared/admin/leftoverMailboxApi.js";
 import { createMailbox, listMailboxDomains, Mailbox, resolveMailboxOwner, ResolvedPrincipal } from "@rapidmx/react-shared/mail/mailApi.js";
+import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
 import PrincipalResolver, { describePerson } from "../../sharing/PrincipalResolver.js";
+import EraseLeftoverDataDialog from "../mailboxes/EraseLeftoverDataDialog.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";
@@ -36,7 +39,8 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [displayName, setDisplayName] = useState(defaults?.displayName ?? "");
     const [ownerMode, setOwnerMode] = useState<"shared" | "owned">(defaults?.ownerUserUid ? "owned" : "shared");
     const [resolvedOwner, setResolvedOwner] = useState<ResolvedPrincipal | null>(null);
-    const [timezone, setTimezone] = useState("UTC");
+    // The admin's own device zone, not "UTC": the server's "UTC" is only a placeholder for a mailbox nobody chose a zone for.
+    const [timezone, setTimezone] = useState(deviceTimeZone);
     const [quotaGb, setQuotaGb] = useState(5);
     // Only replaced by the mailbox policy's default if the admin hasn't typed a quota of their own yet.
     const quotaTouched = useRef(false);
@@ -49,6 +53,10 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     const [maxDurationMinutes, setMaxDurationMinutes] = useState("");
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
+    // The address a deleted mailbox left data at, when creating a mailbox there was refused for that - and what to do about it.
+    const [leftover, setLeftover] = useState<{ address: string; conflict: LeftoverConflict } | null>(null);
+    const [erasing, setErasing] = useState(false);
+    const formRef = useRef<HTMLFormElement>(null);
 
     // An empty `mail:domains` list (the default) means this server enforces no domain restriction —
     // the address field stays free text, exactly as before. Once an admin configures at least one
@@ -72,12 +80,18 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
     }, []);
 
     const constrained = domains.length > 0;
+    const address = constrained ? `${localPart.trim()}@${domain}` : primarySmtpAddress.trim();
+
+    // What was said about one address is not said about another: typing a different one takes the explanation away.
+    useEffect(() => {
+        setLeftover((current) => (current && current.address !== address ? null : current));
+    }, [address]);
 
     async function handleSubmit(e: FormEvent) {
         e.preventDefault();
         setError(null);
+        setLeftover(null);
 
-        const address = constrained ? `${localPart.trim()}@${domain}` : primarySmtpAddress.trim();
         if (constrained ? !localPart.trim() : !primarySmtpAddress.trim()) {
             setError("A primary SMTP address is required.");
             return;
@@ -119,7 +133,13 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
             });
             onCreated(mailbox);
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
+            const conflict = leftoverConflictOf(err);
+            if (conflict) {
+                // 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.");
+            }
         } finally {
             setSaving(false);
         }
@@ -129,7 +149,36 @@ export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "
         <>
             {error && <Alert>{error}</Alert>}
 
-            <form onSubmit={handleSubmit} className="bg-surface border border-border rounded-md p-6">
+            {leftover && (
+                <div role="alert" className="py-3 px-3.5 rounded-sm text-sm mb-5 bg-danger-bg text-danger">
+                    <p className="font-semibold mb-1">
+                        {leftover.conflict.reason === "mailbox-data-erasing"
+                            ? "The data left at this address is being erased."
+                            : "This address still has data from a deleted mailbox."}
+                    </p>
+                    <p className="mb-3">
+                        {leftover.conflict.reason === "mailbox-data-erasing"
+                            ? "A new mailbox can be created there once the erasure has finished."
+                            : "Deleting a mailbox keeps everything in it, and a new mailbox can't take the address until that data is erased."}
+                    </p>
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setErasing(true)}>
+                        {leftover.conflict.reason === "mailbox-data-erasing" ? "Show the erasure" : "Erase the leftover data"}
+                    </Button>
+                </div>
+            )}
+
+            {erasing && leftover && (
+                <EraseLeftoverDataDialog
+                    key={leftover.address}
+                    address={leftover.address}
+                    resume={leftover.conflict.reason === "mailbox-data-erasing" ? leftover.conflict.erasure : undefined}
+                    doneLabel="Create mailbox"
+                    onDone={() => formRef.current?.requestSubmit()}
+                    onClose={() => setErasing(false)}
+                />
+            )}
+
+            <form ref={formRef} onSubmit={handleSubmit} className="bg-surface border border-border rounded-md p-6">
                 {constrained ? (
                     <FormField label="Local part" htmlFor="localPart">
                         <div className="flex gap-2 items-center">