@rapidmx/web-client 0.3.1 → 0.5.0

package/apps/admin/index.tsx

@@ -1,82 +1,118 @@
-///////////////////////////////////////////////////////////////////////////////
-// 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 { listMailboxes, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
-import AdminShell, { AdminShellProps } from "../shared/components/admin/layout/AdminShell.js";
-import MailboxTable from "../shared/components/admin/mailboxes/MailboxTable.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
-import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-
-const PAGE_SIZE = 25;
-
-export default function MailboxesListPage(props: Omit<AdminShellProps, "active">) {
-    return (
-        <AdminShell {...props} active="mailboxes">
-            <MailboxesListContent />
-        </AdminShell>
-    );
-}
-
-function MailboxesListContent() {
-    const [page, setPage] = useState(0);
-    const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-        setLoading(true);
-        setError(null);
-        listMailboxes({ page, limit: PAGE_SIZE })
-            .then(setMailboxes)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load mailboxes."))
-            .finally(() => setLoading(false));
-    }, [page]);
-
-    const hasNextPage = mailboxes.length === PAGE_SIZE;
-
-    return (
-        <>
-            <div className="flex items-center justify-between mb-5">
-                <h1 className="text-xl font-bold uppercase tracking-wide">Mailboxes</h1>
-                <a href="/admin/mailboxes/new">
-                    <Button type="button" className="!w-auto">
-                        + New mailbox
-                    </Button>
-                </a>
-            </div>
-
-            {error && <Alert>{error}</Alert>}
-
-            {loading ? (
-                <p className="text-sm text-text-muted">Loading&hellip;</p>
-            ) : (
-                <MailboxTable mailboxes={mailboxes} />
-            )}
-
-            <div className="flex gap-3 items-center mt-4">
-                <Button
-                    variant="secondary"
-                    type="button"
-                    className="!w-auto"
-                    disabled={page === 0 || loading}
-                    onClick={() => setPage((p) => Math.max(0, p - 1))}
-                >
-                    Previous
-                </Button>
-                <span className="text-sm text-text-muted">Page {page + 1}</span>
-                <Button
-                    variant="secondary"
-                    type="button"
-                    className="!w-auto"
-                    disabled={!hasNextPage || loading}
-                    onClick={() => setPage((p) => p + 1)}
-                >
-                    Next
-                </Button>
-            </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 { listMailboxes, Mailbox } from "@rapidmx/react-shared/mail/mailApi.js";
+import { reopenSetup } from "@rapidmx/react-shared/admin/setupApi.js";
+import AdminShell, { AdminShellProps } from "../shared/components/admin/layout/AdminShell.js";
+import MailboxTable from "../shared/components/admin/mailboxes/MailboxTable.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+
+const PAGE_SIZE = 25;
+
+export default function MailboxesListPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="mailboxes">
+            <MailboxesListContent />
+        </AdminShell>
+    );
+}
+
+function MailboxesListContent() {
+    const [page, setPage] = useState(0);
+    const [mailboxes, setMailboxes] = useState<Mailbox[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        listMailboxes({ page, limit: PAGE_SIZE })
+            .then(setMailboxes)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load mailboxes."))
+            .finally(() => setLoading(false));
+    }, [page]);
+
+    const hasNextPage = mailboxes.length === PAGE_SIZE;
+    const [reopening, setReopening] = useState(false);
+    const [confirmingSetup, setConfirmingSetup] = useState(false);
+
+    async function handleRunSetup() {
+        setReopening(true);
+        try {
+            await reopenSetup();
+            window.location.href = "/admin/setup";
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not reopen setup.");
+            setReopening(false);
+            setConfirmingSetup(false);
+        }
+    }
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-5">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Mailboxes</h1>
+                <div className="flex gap-2">
+                    <Button type="button" variant="secondary" className="!w-auto" disabled={reopening} onClick={() => setConfirmingSetup(true)}>
+                        Run setup again
+                    </Button>
+                    <a href="/admin/mailboxes/new">
+                        <Button type="button" className="!w-auto">
+                            + New mailbox
+                        </Button>
+                    </a>
+                </div>
+            </div>
+
+            {error && <Alert>{error}</Alert>}
+
+            <Modal open={confirmingSetup} onClose={() => setConfirmingSetup(false)} title="Run setup again?">
+                <p className="text-sm mb-4">
+                    Setup starts again from its first step, and the admin console sends administrators to it until
+                    it&apos;s finished. Your existing settings, domains and mailboxes are kept.
+                </p>
+                <div className="flex gap-2 justify-end">
+                    <Button type="button" variant="secondary" className="!w-auto" onClick={() => setConfirmingSetup(false)}>
+                        Cancel
+                    </Button>
+                    <Button type="button" className="!w-auto" loading={reopening} disabled={reopening} onClick={() => void handleRunSetup()}>
+                        Run setup
+                    </Button>
+                </div>
+            </Modal>
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : (
+                <MailboxTable mailboxes={mailboxes} />
+            )}
+
+            <div className="flex gap-3 items-center mt-4">
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={page === 0 || loading}
+                    onClick={() => setPage((p) => Math.max(0, p - 1))}
+                >
+                    Previous
+                </Button>
+                <span className="text-sm text-text-muted">Page {page + 1}</span>
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={!hasNextPage || loading}
+                    onClick={() => setPage((p) => p + 1)}
+                >
+                    Next
+                </Button>
+            </div>
+        </>
+    );
+}

package/apps/admin/ingest-queue/index.tsx

@@ -7,6 +7,9 @@ import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { IngestQueueEntry, listIngestQueue } 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";
+
+const PAGE_SIZE = 25;
 
 export function readMailboxUid(): string | null {
     if (typeof window === "undefined") return null;
@@ -30,6 +33,7 @@ export default function IngestQueuePage(props: Omit<AdminShellProps, "active">)
 
 function IngestQueueContent() {
     const [mailboxUid, setMailboxUid] = useState<string | null>(null);
+    const [page, setPage] = useState(0);
     const [entries, setEntries] = useState<IngestQueueEntry[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -42,13 +46,26 @@ function IngestQueueContent() {
         if (!mailboxUid) {
             return;
         }
+        // Paging quickly can leave an older page's response landing last - only the latest request's is applied.
+        let cancelled = false;
         setLoading(true);
         setError(null);
-        listIngestQueue(mailboxUid)
-            .then(setEntries)
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load the ingest queue."))
-            .finally(() => setLoading(false));
-    }, [mailboxUid]);
+        listIngestQueue(mailboxUid, { page, limit: PAGE_SIZE })
+            .then((data) => {
+                if (!cancelled) setEntries(data);
+            })
+            .catch((err) => {
+                if (!cancelled) setError(err instanceof ApiRequestError ? err.message : "Could not load the ingest queue.");
+            })
+            .finally(() => {
+                if (!cancelled) setLoading(false);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [mailboxUid, page]);
+
+    const hasNextPage = entries.length === PAGE_SIZE;
 
     if (!mailboxUid) {
         return <Alert>No mailbox specified. Open a mailbox's detail page and choose "View ingest queue".</Alert>;
@@ -111,6 +128,28 @@ function IngestQueueContent() {
                     </table>
                 </div>
             )}
+
+            <div className="flex gap-3 items-center">
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={page === 0 || loading}
+                    onClick={() => setPage((p) => Math.max(0, p - 1))}
+                >
+                    Previous
+                </Button>
+                <span className="text-sm text-text-muted">Page {page + 1}</span>
+                <Button
+                    variant="secondary"
+                    type="button"
+                    className="!w-auto"
+                    disabled={!hasNextPage || loading}
+                    onClick={() => setPage((p) => p + 1)}
+                >
+                    Next
+                </Button>
+            </div>
         </div>
     );
 }

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

@@ -0,0 +1,19 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { getMailboxPolicy } from "@rapidmx/react-shared/admin/mailboxPolicyApi.js";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import LoadedSettingsForm from "../../shared/components/admin/settings/LoadedSettingsForm.js";
+import MailboxPolicyForm from "../../shared/components/admin/settings/MailboxPolicyForm.js";
+
+export default function MailboxPolicyPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="mailboxPolicy">
+            <LoadedSettingsForm load={getMailboxPolicy} loadErrorMessage="Could not load the mailbox policy.">
+                {(policy, onChange) => <MailboxPolicyForm policy={policy} onChange={onChange} />}
+            </LoadedSettingsForm>
+        </AdminShell>
+    );
+}