@rapidmx/web-client 0.20.0 → 0.21.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/MailboxPolicyForm.tsx

@@ -1,198 +1,198 @@
-///////////////////////////////////////////////////////////////////////////////
-// 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 { MailboxPolicy, 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 = 1_000_000_000;
-
-/** 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: number): string {
-    return String(bytes / GB);
-}
-
-/** Whether a quota field's text is not the given number of bytes. */
-function differsFromBytes(text: string, bytes: number): boolean {
-    return Math.round(Number(text) * GB) !== bytes;
-}
-
-/** Puts a field back to the server's config value; nothing is saved until the form is. */
-function ResetToDefault({ label, shown, onClick }: { label: string; shown: boolean; onClick: () => void }) {
-    if (!shown) {
-        return null;
-    }
-    return (
-        <Button type="button" variant="text" className="!w-auto self-start text-xs -mt-2" onClick={onClick}>
-            Reset to server default ({label})
-        </Button>
-    );
-}
-
-/** The form's values as they were loaded or last saved. */
-interface Baseline {
-    defaultQuotaGb: string;
-    autoProvisionEnabled: boolean;
-    autoProvisionQuotaGb: string;
-}
-
-export interface MailboxPolicyFormProps {
-    policy: MailboxPolicy;
-    onChange: (policy: MailboxPolicy) => 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 mailbox defaults editor, shared by the Mailbox Policy page and the setup wizard. Each field can be reset to what
- * the server's config currently says (`policy.defaults`), which lets an administrator take a newly deployed value
- * without typing it in; the reset fills the field in and is saved with the rest of the form.
- */
-export default function MailboxPolicyForm({ policy, onChange, onDirtyChange, embedded = false }: MailboxPolicyFormProps) {
-    const defaults = policy.defaults;
-    const [defaultQuotaGb, setDefaultQuotaGb] = useState(toGb(policy.defaultQuotaBytes));
-    const [autoProvisionEnabled, setAutoProvisionEnabled] = useState(policy.autoProvisionEnabled);
-    const [autoProvisionQuotaGb, setAutoProvisionQuotaGb] = useState(toGb(policy.autoProvisionQuotaBytes));
-    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 [baseline, setBaseline] = useState<Baseline>({ defaultQuotaGb, autoProvisionEnabled, autoProvisionQuotaGb });
-    const dirty: boolean =
-        defaultQuotaGb !== baseline.defaultQuotaGb ||
-        autoProvisionEnabled !== baseline.autoProvisionEnabled ||
-        autoProvisionQuotaGb !== baseline.autoProvisionQuotaGb;
-    useEffect(() => onDirtyChange?.(dirty), [dirty]);
-
-    async function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        setError(null);
-        setSaved(false);
-        // Only fields the administrator changed are sent, so a quota left alone keeps its exact stored bytes.
-        const patch: Partial<MailboxPolicy> = {};
-        for (const [field, text, base] of [
-            ["defaultQuotaBytes", defaultQuotaGb, baseline.defaultQuotaGb],
-            ["autoProvisionQuotaBytes", autoProvisionQuotaGb, baseline.autoProvisionQuotaGb],
-        ] as const) {
-            if (text === base) {
-                continue;
-            }
-            const bytes: number = 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: Baseline = { defaultQuotaGb, autoProvisionEnabled, autoProvisionQuotaGb };
-        if (Object.keys(patch).length === 0) {
-            setSaved(true);
-            return;
-        }
-        setSaving(true);
-        try {
-            const updated = await updateMailboxPolicy(patch);
-            onChange(updated);
-            setBaseline(current);
-            setSaved(true);
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save the mailbox policy.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    return (
-        <div className="max-w-xl">
-            {embedded ? (
-                <h3 className="text-base font-bold uppercase tracking-wide mb-1">Mailboxes</h3>
-            ) : (
-                <h2 className="text-lg font-bold uppercase tracking-wide mb-1">Mailboxes</h2>
-            )}
-            <p className="text-sm text-text-muted mb-5">Defaults for new mailboxes on this server.</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">
-                <label className="flex flex-col gap-1.5 text-sm">
-                    <span className="font-semibold">Default quota (GB)</span>
-                    <input
-                        aria-label="Default quota (GB)"
-                        type="number"
-                        min={0}
-                        step="any"
-                        className={INPUT_CLASS}
-                        value={defaultQuotaGb}
-                        onChange={(e) => setDefaultQuotaGb(e.target.value)}
-                    />
-                    <span className="text-xs text-text-muted">The storage a mailbox starts with when an administrator creates it.</span>
-                </label>
-                <ResetToDefault
-                    label={defaults ? `${toGb(defaults.defaultQuotaBytes)} GB` : ""}
-                    shown={!!defaults && differsFromBytes(defaultQuotaGb, defaults.defaultQuotaBytes)}
-                    onClick={() => setDefaultQuotaGb(toGb(defaults!.defaultQuotaBytes))}
-                />
-                <label className="flex items-start gap-2 text-sm">
-                    <input
-                        type="checkbox"
-                        className="mt-1"
-                        checked={autoProvisionEnabled}
-                        onChange={(e) => setAutoProvisionEnabled(e.target.checked)}
-                    />
-                    <span>
-                        <span className="font-semibold block">Let people create their own mailbox</span>
-                        <span className="text-xs text-text-muted">
-                            Someone who signs in without a mailbox can create one, using their username on one of this
-                            server&rsquo;s verified domains.
-                        </span>
-                    </span>
-                </label>
-                <ResetToDefault
-                    label={defaults?.autoProvisionEnabled ? "on" : "off"}
-                    shown={!!defaults && autoProvisionEnabled !== defaults.autoProvisionEnabled}
-                    onClick={() => setAutoProvisionEnabled(defaults!.autoProvisionEnabled)}
-                />
-                {autoProvisionEnabled && (
-                    <>
-                        <label className="flex flex-col gap-1.5 text-sm">
-                            <span className="font-semibold">Quota for self-created mailboxes (GB)</span>
-                            <input
-                                aria-label="Quota for self-created mailboxes (GB)"
-                                type="number"
-                                min={0}
-                                step="any"
-                                className={INPUT_CLASS}
-                                value={autoProvisionQuotaGb}
-                                onChange={(e) => setAutoProvisionQuotaGb(e.target.value)}
-                            />
-                        </label>
-                        <ResetToDefault
-                            label={defaults ? `${toGb(defaults.autoProvisionQuotaBytes)} GB` : ""}
-                            shown={!!defaults && differsFromBytes(autoProvisionQuotaGb, defaults.autoProvisionQuotaBytes)}
-                            onClick={() => setAutoProvisionQuotaGb(toGb(defaults!.autoProvisionQuotaBytes))}
-                        />
-                    </>
-                )}
-                <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 { MailboxPolicy, 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 = 1_000_000_000;
+
+/** 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: number): string {
+    return String(bytes / GB);
+}
+
+/** Whether a quota field's text is not the given number of bytes. */
+function differsFromBytes(text: string, bytes: number): boolean {
+    return Math.round(Number(text) * GB) !== bytes;
+}
+
+/** Puts a field back to the server's config value; nothing is saved until the form is. */
+function ResetToDefault({ label, shown, onClick }: { label: string; shown: boolean; onClick: () => void }) {
+    if (!shown) {
+        return null;
+    }
+    return (
+        <Button type="button" variant="text" className="!w-auto self-start text-xs -mt-2" onClick={onClick}>
+            Reset to server default ({label})
+        </Button>
+    );
+}
+
+/** The form's values as they were loaded or last saved. */
+interface Baseline {
+    defaultQuotaGb: string;
+    autoProvisionEnabled: boolean;
+    autoProvisionQuotaGb: string;
+}
+
+export interface MailboxPolicyFormProps {
+    policy: MailboxPolicy;
+    onChange: (policy: MailboxPolicy) => 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 mailbox defaults editor, shared by the Mailbox Policy page and the setup wizard. Each field can be reset to what
+ * the server's config currently says (`policy.defaults`), which lets an administrator take a newly deployed value
+ * without typing it in; the reset fills the field in and is saved with the rest of the form.
+ */
+export default function MailboxPolicyForm({ policy, onChange, onDirtyChange, embedded = false }: MailboxPolicyFormProps) {
+    const defaults = policy.defaults;
+    const [defaultQuotaGb, setDefaultQuotaGb] = useState(toGb(policy.defaultQuotaBytes));
+    const [autoProvisionEnabled, setAutoProvisionEnabled] = useState(policy.autoProvisionEnabled);
+    const [autoProvisionQuotaGb, setAutoProvisionQuotaGb] = useState(toGb(policy.autoProvisionQuotaBytes));
+    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 [baseline, setBaseline] = useState<Baseline>({ defaultQuotaGb, autoProvisionEnabled, autoProvisionQuotaGb });
+    const dirty: boolean =
+        defaultQuotaGb !== baseline.defaultQuotaGb ||
+        autoProvisionEnabled !== baseline.autoProvisionEnabled ||
+        autoProvisionQuotaGb !== baseline.autoProvisionQuotaGb;
+    useEffect(() => onDirtyChange?.(dirty), [dirty]);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+        setSaved(false);
+        // Only fields the administrator changed are sent, so a quota left alone keeps its exact stored bytes.
+        const patch: Partial<MailboxPolicy> = {};
+        for (const [field, text, base] of [
+            ["defaultQuotaBytes", defaultQuotaGb, baseline.defaultQuotaGb],
+            ["autoProvisionQuotaBytes", autoProvisionQuotaGb, baseline.autoProvisionQuotaGb],
+        ] as const) {
+            if (text === base) {
+                continue;
+            }
+            const bytes: number = 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: Baseline = { defaultQuotaGb, autoProvisionEnabled, autoProvisionQuotaGb };
+        if (Object.keys(patch).length === 0) {
+            setSaved(true);
+            return;
+        }
+        setSaving(true);
+        try {
+            const updated = await updateMailboxPolicy(patch);
+            onChange(updated);
+            setBaseline(current);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save the mailbox policy.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-xl">
+            {embedded ? (
+                <h3 className="text-base font-bold uppercase tracking-wide mb-1">Mailboxes</h3>
+            ) : (
+                <h2 className="text-lg font-bold uppercase tracking-wide mb-1">Mailboxes</h2>
+            )}
+            <p className="text-sm text-text-muted mb-5">Defaults for new mailboxes on this server.</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">
+                <label className="flex flex-col gap-1.5 text-sm">
+                    <span className="font-semibold">Default quota (GB)</span>
+                    <input
+                        aria-label="Default quota (GB)"
+                        type="number"
+                        min={0}
+                        step="any"
+                        className={INPUT_CLASS}
+                        value={defaultQuotaGb}
+                        onChange={(e) => setDefaultQuotaGb(e.target.value)}
+                    />
+                    <span className="text-xs text-text-muted">The storage a mailbox starts with when an administrator creates it.</span>
+                </label>
+                <ResetToDefault
+                    label={defaults ? `${toGb(defaults.defaultQuotaBytes)} GB` : ""}
+                    shown={!!defaults && differsFromBytes(defaultQuotaGb, defaults.defaultQuotaBytes)}
+                    onClick={() => setDefaultQuotaGb(toGb(defaults!.defaultQuotaBytes))}
+                />
+                <label className="flex items-start gap-2 text-sm">
+                    <input
+                        type="checkbox"
+                        className="mt-1"
+                        checked={autoProvisionEnabled}
+                        onChange={(e) => setAutoProvisionEnabled(e.target.checked)}
+                    />
+                    <span>
+                        <span className="font-semibold block">Let people create their own mailbox</span>
+                        <span className="text-xs text-text-muted">
+                            Someone who signs in without a mailbox can create one, using their username on one of this
+                            server&rsquo;s verified domains.
+                        </span>
+                    </span>
+                </label>
+                <ResetToDefault
+                    label={defaults?.autoProvisionEnabled ? "on" : "off"}
+                    shown={!!defaults && autoProvisionEnabled !== defaults.autoProvisionEnabled}
+                    onClick={() => setAutoProvisionEnabled(defaults!.autoProvisionEnabled)}
+                />
+                {autoProvisionEnabled && (
+                    <>
+                        <label className="flex flex-col gap-1.5 text-sm">
+                            <span className="font-semibold">Quota for self-created mailboxes (GB)</span>
+                            <input
+                                aria-label="Quota for self-created mailboxes (GB)"
+                                type="number"
+                                min={0}
+                                step="any"
+                                className={INPUT_CLASS}
+                                value={autoProvisionQuotaGb}
+                                onChange={(e) => setAutoProvisionQuotaGb(e.target.value)}
+                            />
+                        </label>
+                        <ResetToDefault
+                            label={defaults ? `${toGb(defaults.autoProvisionQuotaBytes)} GB` : ""}
+                            shown={!!defaults && differsFromBytes(autoProvisionQuotaGb, defaults.autoProvisionQuotaBytes)}
+                            onClick={() => setAutoProvisionQuotaGb(toGb(defaults!.autoProvisionQuotaBytes))}
+                        />
+                    </>
+                )}
+                <div>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}