@rapidmx/web-client 0.3.0 → 0.4.0

package/apps/admin/mailboxes/new/index.tsx

@@ -1,291 +1,28 @@
-///////////////////////////////////////////////////////////////////////////////
-// 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 { createMailbox, listMailboxDomains } from "@rapidmx/react-shared/mail/mailApi.js";
-import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.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 default function NewMailboxPage(props: Omit<AdminShellProps, "active">) {
-    return (
-        <AdminShell {...props} active="mailboxes">
-            <NewMailboxForm />
-        </AdminShell>
-    );
-}
-
-function NewMailboxForm() {
-    const [primarySmtpAddress, setPrimarySmtpAddress] = useState("");
-    const [localPart, setLocalPart] = useState("");
-    const [domains, setDomains] = useState<string[]>([]);
-    const [domain, setDomain] = useState("");
-    const [displayName, setDisplayName] = useState("");
-    const [ownerUserUid, setOwnerUserUid] = useState("");
-    const [timezone, setTimezone] = useState("UTC");
-    const [quotaGb, setQuotaGb] = useState(5);
-    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(list[0] ?? "");
-            })
-            .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;
-        }
-
-        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,
-                }),
-            });
-            window.location.href = `/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`;
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not create the mailbox.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    return (
-        <div className="max-w-xl">
-            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New mailbox</h1>
-            <p className="text-sm text-text-muted mb-5">
-                Leave "Owner user uid" blank to create a true ownerless shared mailbox (the Exchange "shared
-                mailbox" concept) — access is then granted entirely to delegates afterward, not to a single
-                owner. Set an owner to create a mailbox for a specific user instead.
-            </p>
-
-            {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) => 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">
-                        Create mailbox
-                    </Button>
-                    <a href="/admin">
-                        <Button type="button" variant="secondary" className="!w-auto">
-                            Cancel
-                        </Button>
-                    </a>
-                </div>
-            </form>
-        </div>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import MailboxCreateForm from "../../../shared/components/admin/settings/MailboxCreateForm.js";
+
+export default function NewMailboxPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="mailboxes">
+            <div className="max-w-xl">
+                <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New mailbox</h1>
+                <p className="text-sm text-text-muted mb-5">
+                    Leave "Owner user uid" blank to create a true ownerless shared mailbox (the Exchange "shared
+                    mailbox" concept) — access is then granted entirely to delegates afterward, not to a single
+                    owner. Set an owner to create a mailbox for a specific user instead.
+                </p>
+                <MailboxCreateForm
+                    cancelHref="/admin"
+                    onCreated={(mailbox) => {
+                        window.location.href = `/admin/mailboxes/${encodeURIComponent(mailbox.uid)}`;
+                    }}
+                />
+            </div>
+        </AdminShell>
+    );
+}

package/apps/admin/plugins/index.tsx

@@ -0,0 +1,15 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import PluginsManager from "../../shared/components/admin/settings/PluginsManager.js";
+
+export default function PluginsPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="plugins">
+            <PluginsManager />
+        </AdminShell>
+    );
+}

package/apps/admin/retention-policy/index.tsx

@@ -1,132 +1,39 @@
-///////////////////////////////////////////////////////////////////////////////
-// 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 {
-    MIN_AUDIT_LOG_RETENTION_DAYS,
-    RetentionPolicy,
-    getRetentionPolicy,
-    updateRetentionPolicy,
-} from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
-import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.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";
-
-export default function RetentionPolicyPage(props: Omit<AdminShellProps, "active">) {
-    return (
-        <AdminShell {...props} active="retentionPolicy">
-            <RetentionPolicyContent />
-        </AdminShell>
-    );
-}
-
-function RetentionPolicyContent() {
-    const [policy, setPolicy] = useState<RetentionPolicy | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [loadError, setLoadError] = useState<string | null>(null);
-
-    useEffect(() => {
-        getRetentionPolicy()
-            .then(setPolicy)
-            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load the retention policy."))
-            .finally(() => setLoading(false));
-    }, []);
-
-    if (loading) {
-        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
-    }
-    if (loadError || !policy) {
-        return <Alert>{loadError}</Alert>;
-    }
-    return <RetentionPolicyForm policy={policy} onChange={setPolicy} />;
-}
-
-function RetentionPolicyForm({ policy, onChange }: { policy: RetentionPolicy; onChange: (p: RetentionPolicy) => void }) {
-    const [messageRetentionDays, setMessageRetentionDays] = useState(policy.messageRetentionDays?.toString() ?? "");
-    const [auditLogRetentionDays, setAuditLogRetentionDays] = useState(policy.auditLogRetentionDays?.toString() ?? "");
-    const [error, setError] = useState<string | null>(null);
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-
-    async function handleSubmit(e: FormEvent) {
-        e.preventDefault();
-        setError(null);
-        setSaved(false);
-        setSaving(true);
-        try {
-            const patch: Partial<RetentionPolicy> = {};
-            if (messageRetentionDays.trim() !== "") {
-                patch.messageRetentionDays = Number(messageRetentionDays);
-            }
-            if (auditLogRetentionDays.trim() !== "") {
-                patch.auditLogRetentionDays = Number(auditLogRetentionDays);
-            }
-            const updated = await updateRetentionPolicy(patch);
-            onChange(updated);
-            setSaved(true);
-        } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save the retention policy.");
-        } finally {
-            setSaving(false);
-        }
-    }
-
-    return (
-        <div className="max-w-xl">
-            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">Retention Policy</h1>
-            <p className="text-sm text-text-muted mb-5">
-                Automatically and permanently deletes mail/audit-log entries older than the configured age.
-                Leave a field blank for no automatic purge. This does not apply to a mailbox that is a
-                custodian on an active legal hold — a held message is skipped and retried on a later run once
-                the hold is lifted.
-            </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">Message retention (days)</span>
-                    <input
-                        aria-label="Message retention (days)"
-                        type="number"
-                        min={1}
-                        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.
-                    </span>
-                </label>
-                <label className="flex flex-col gap-1.5 text-sm">
-                    <span className="font-semibold">Audit log retention (days)</span>
-                    <input
-                        aria-label="Audit log retention (days)"
-                        type="number"
-                        min={MIN_AUDIT_LOG_RETENTION_DAYS}
-                        className={INPUT_CLASS}
-                        value={auditLogRetentionDays}
-                        onChange={(e) => setAuditLogRetentionDays(e.target.value)}
-                        placeholder="Keep forever"
-                    />
-                    <span className="text-xs text-text-muted">
-                        Cannot be set below {MIN_AUDIT_LOG_RETENTION_DAYS} days. Never applies to the
-                        tamper-evident escrow audit chain.
-                    </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, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { RetentionPolicy, getRetentionPolicy } from "@rapidmx/react-shared/admin/retentionPolicyApi.js";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import RetentionPolicyForm from "../../shared/components/admin/settings/RetentionPolicyForm.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+
+export default function RetentionPolicyPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="retentionPolicy">
+            <RetentionPolicyContent />
+        </AdminShell>
+    );
+}
+
+function RetentionPolicyContent() {
+    const [policy, setPolicy] = useState<RetentionPolicy | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [loadError, setLoadError] = useState<string | null>(null);
+
+    useEffect(() => {
+        getRetentionPolicy()
+            .then(setPolicy)
+            .catch((err) => setLoadError(err instanceof ApiRequestError ? err.message : "Could not load the retention policy."))
+            .finally(() => setLoading(false));
+    }, []);
+
+    if (loading) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (loadError || !policy) {
+        return <Alert>{loadError}</Alert>;
+    }
+    return <RetentionPolicyForm policy={policy} onChange={setPolicy} />;
+}

package/apps/admin/setup/index.tsx

@@ -0,0 +1,15 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import SetupWizard from "../../shared/components/admin/setup/SetupWizard.js";
+
+export default function SetupPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="setup">
+            <SetupWizard userUid={props.userUid ?? ""} />
+        </AdminShell>
+    );
+}