@rapidmx/web-client 0.3.1 → 0.5.0

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

@@ -0,0 +1,112 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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;
+}
+
+/** The end-to-end encryption policy editor, shared by the Encryption Policy page and the setup wizard. */
+export default function EncryptionPolicyForm({ policy, onChange, onDirtyChange }: 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">
+            <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/LoadedSettingsForm.tsx

@@ -0,0 +1,34 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { ReactNode, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+
+export interface LoadedSettingsFormProps<T> {
+    load: () => Promise<T>;
+    /** Shown when loading fails with something other than an API error message. */
+    loadErrorMessage: string;
+    children: (value: T, onChange: (value: T) => void) => ReactNode;
+}
+
+/** Loads a settings object, then renders its form - the loading and error states every settings page shares. */
+export default function LoadedSettingsForm<T>({ load, loadErrorMessage, children }: LoadedSettingsFormProps<T>) {
+    const [value, setValue] = useState<T | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        load()
+            .then(setValue)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : loadErrorMessage));
+    }, []);
+
+    if (error) {
+        return <Alert>{error}</Alert>;
+    }
+    if (value === null) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    return <>{children(value, setValue)}</>;
+}

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

@@ -0,0 +1,308 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+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 { createMailbox, listMailboxDomains, Mailbox } from "@rapidmx/react-shared/mail/mailApi.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";
+
+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";
+const SELECT_CLASS =
+    "text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export interface MailboxCreateFormProps {
+    onCreated: (mailbox: Mailbox) => void;
+    /** Initial field values, e.g. the signed-in admin's own mailbox in the setup wizard. */
+    defaults?: { localPart?: string; domain?: string; displayName?: string; ownerUserUid?: string };
+    submitLabel?: string;
+    cancelHref?: string;
+}
+
+/**
+ * The "New mailbox" form, shared by the New Mailbox page and the setup wizard. The quota starts at the mailbox
+ * policy's default.
+ */
+export default function MailboxCreateForm({ onCreated, defaults, submitLabel = "Create mailbox", cancelHref }: MailboxCreateFormProps) {
+    const [primarySmtpAddress, setPrimarySmtpAddress] = useState("");
+    const [localPart, setLocalPart] = useState(defaults?.localPart ?? "");
+    const [domains, setDomains] = useState<string[]>([]);
+    const [domain, setDomain] = useState("");
+    const [displayName, setDisplayName] = useState(defaults?.displayName ?? "");
+    const [ownerUserUid, setOwnerUserUid] = useState(defaults?.ownerUserUid ?? "");
+    const [timezone, setTimezone] = useState("UTC");
+    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);
+    const [isResource, setIsResource] = useState(false);
+    const [resourceType, setResourceType] = useState<"room" | "equipment">("room");
+    const [resourceCapacity, setResourceCapacity] = useState("");
+    const [autoAcceptBookings, setAutoAcceptBookings] = useState(false);
+    const [allowConflicts, setAllowConflicts] = useState(false);
+    const [bookingWindowDays, setBookingWindowDays] = useState("");
+    const [maxDurationMinutes, setMaxDurationMinutes] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    // 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
+    // domain, every mailbox this server creates must be on one of them (enforced server-side too, in
+    // `BaseMailboxRoute.create()`), so the form switches to a local-part input + domain dropdown to
+    // make that restriction visible rather than let an admin discover it only via a rejected submit.
+    useEffect(() => {
+        listMailboxDomains()
+            .then((list) => {
+                setDomains(list);
+                setDomain(defaults?.domain && list.includes(defaults.domain) ? defaults.domain : (list[0] ?? ""));
+            })
+            .catch(() => undefined);
+        getMailboxPolicy()
+            .then((policy) => {
+                if (!quotaTouched.current) {
+                    setQuotaGb(Math.round(policy.defaultQuotaBytes / 1_000_000_000));
+                }
+            })
+            .catch(() => undefined);
+    }, []);
+
+    const constrained = domains.length > 0;
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        const address = constrained ? `${localPart.trim()}@${domain}` : primarySmtpAddress.trim();
+        if (constrained ? !localPart.trim() : !primarySmtpAddress.trim()) {
+            setError("A primary SMTP address is required.");
+            return;
+        }
+        if (!displayName.trim()) {
+            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);
+            // delegates are then granted access from the mailbox's detail page. A resource mailbox is
+            // ownerless the same way — leave "Owner user uid" blank for one too.
+            const mailbox = await createMailbox({
+                primarySmtpAddress: address,
+                displayName: displayName.trim(),
+                ownerUserUid: ownerUserUid.trim() || undefined,
+                timezone,
+                quotaBytes: Math.round(quotaGb * 1_000_000_000),
+                ...(isResource && {
+                    isResource: true,
+                    resourceType,
+                    resourceCapacity: resourceCapacity ? Number(resourceCapacity) : undefined,
+                    autoAcceptBookings,
+                    allowConflicts,
+                    bookingWindowDays: bookingWindowDays ? Number(bookingWindowDays) : undefined,
+                    maxDurationMinutes: maxDurationMinutes ? Number(maxDurationMinutes) : undefined,
+                }),
+            });
+            onCreated(mailbox);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <>
+            {error && <Alert>{error}</Alert>}
+
+            <form 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">
+                            <input
+                                id="localPart"
+                                type="text"
+                                className={INPUT_CLASS}
+                                value={localPart}
+                                onChange={(e) => setLocalPart(e.target.value)}
+                                placeholder="support"
+                            />
+                            <span className="text-text-muted shrink-0">@</span>
+                            <select
+                                aria-label="Domain"
+                                className={SELECT_CLASS}
+                                value={domain}
+                                onChange={(e) => setDomain(e.target.value)}
+                            >
+                                {domains.map((d) => (
+                                    <option key={d} value={d}>
+                                        {d}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                    </FormField>
+                ) : (
+                    <FormField label="Primary SMTP address" htmlFor="primarySmtpAddress">
+                        <input
+                            id="primarySmtpAddress"
+                            type="email"
+                            className={INPUT_CLASS}
+                            value={primarySmtpAddress}
+                            onChange={(e) => setPrimarySmtpAddress(e.target.value)}
+                            placeholder="support@example.com"
+                        />
+                    </FormField>
+                )}
+
+                <FormField label="Display name" htmlFor="displayName">
+                    <input
+                        id="displayName"
+                        type="text"
+                        className={INPUT_CLASS}
+                        value={displayName}
+                        onChange={(e) => setDisplayName(e.target.value)}
+                        placeholder="Support"
+                    />
+                </FormField>
+
+                <FormField label="Owner user uid (optional)" htmlFor="ownerUserUid">
+                    <input
+                        id="ownerUserUid"
+                        type="text"
+                        className={INPUT_CLASS}
+                        value={ownerUserUid}
+                        onChange={(e) => setOwnerUserUid(e.target.value)}
+                        placeholder="Leave blank for a shared mailbox"
+                    />
+                </FormField>
+
+                <FormField label="Timezone" htmlFor="timezone">
+                    <input
+                        id="timezone"
+                        type="text"
+                        className={INPUT_CLASS}
+                        value={timezone}
+                        onChange={(e) => setTimezone(e.target.value)}
+                        placeholder="America/Los_Angeles"
+                    />
+                </FormField>
+
+                <FormField label="Quota (GB)" htmlFor="quotaGb">
+                    <input
+                        id="quotaGb"
+                        type="number"
+                        min={1}
+                        step={1}
+                        className={INPUT_CLASS}
+                        value={quotaGb}
+                        onChange={(e) => {
+                            quotaTouched.current = true;
+                            setQuotaGb(Number(e.target.value));
+                        }}
+                    />
+                </FormField>
+
+                <label className="flex items-center gap-2 text-sm mb-4">
+                    <input type="checkbox" checked={isResource} onChange={(e) => setIsResource(e.target.checked)} />
+                    This is a resource mailbox (a bookable room or piece of equipment)
+                </label>
+
+                {isResource && (
+                    <div className="border border-border rounded-sm p-4 mb-4 flex flex-col gap-4">
+                        <FormField label="Resource type" htmlFor="resourceType">
+                            <select
+                                id="resourceType"
+                                className={SELECT_CLASS}
+                                value={resourceType}
+                                onChange={(e) => setResourceType(e.target.value as "room" | "equipment")}
+                            >
+                                <option value="room">Room</option>
+                                <option value="equipment">Equipment</option>
+                            </select>
+                        </FormField>
+
+                        <FormField label="Capacity (optional)" htmlFor="resourceCapacity">
+                            <input
+                                id="resourceCapacity"
+                                type="number"
+                                min={0}
+                                step={1}
+                                className={INPUT_CLASS}
+                                value={resourceCapacity}
+                                onChange={(e) => setResourceCapacity(e.target.value)}
+                                placeholder="Informational only"
+                            />
+                        </FormField>
+
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={autoAcceptBookings}
+                                onChange={(e) => setAutoAcceptBookings(e.target.checked)}
+                            />
+                            Automatically accept booking requests
+                        </label>
+
+                        <label className="flex items-center gap-2 text-sm">
+                            <input
+                                type="checkbox"
+                                checked={allowConflicts}
+                                onChange={(e) => setAllowConflicts(e.target.checked)}
+                            />
+                            Allow conflicting bookings (skip conflict checking entirely)
+                        </label>
+
+                        <FormField label="Booking window, in days (optional)" htmlFor="bookingWindowDays">
+                            <input
+                                id="bookingWindowDays"
+                                type="number"
+                                min={0}
+                                step={1}
+                                className={INPUT_CLASS}
+                                value={bookingWindowDays}
+                                onChange={(e) => setBookingWindowDays(e.target.value)}
+                                placeholder="No limit"
+                            />
+                        </FormField>
+
+                        <FormField label="Maximum duration, in minutes (optional)" htmlFor="maxDurationMinutes">
+                            <input
+                                id="maxDurationMinutes"
+                                type="number"
+                                min={0}
+                                step={1}
+                                className={INPUT_CLASS}
+                                value={maxDurationMinutes}
+                                onChange={(e) => setMaxDurationMinutes(e.target.value)}
+                                placeholder="No limit"
+                            />
+                        </FormField>
+                    </div>
+                )}
+
+                <div className="flex gap-3 mt-2">
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        {submitLabel}
+                    </Button>
+                    {cancelHref && (
+                        <a href={cancelHref}>
+                            <Button type="button" variant="secondary" className="!w-auto">
+                                Cancel
+                            </Button>
+                        </a>
+                    )}
+                </div>
+            </form>
+        </>
+    );
+}

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

@@ -0,0 +1,152 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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);
+}
+
+/** 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;
+}
+
+/** The mailbox defaults editor, shared by the Mailbox Policy page and the setup wizard. */
+export default function MailboxPolicyForm({ policy, onChange, onDirtyChange }: MailboxPolicyFormProps) {
+    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">
+            <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>
+                <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>
+                {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>
+                )}
+                <div>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}