@rapidmx/web-client 0.2.0

package/apps/admin/quarantine/index.tsx

@@ -0,0 +1,171 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { listQuarantine, QuarantineEntry, releaseQuarantineEntry } 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;
+    return new URLSearchParams(window.location.search).get("mailboxUid");
+}
+
+export default function QuarantinePage(props: Omit<AdminShellProps, "active"> & { userUid?: string }) {
+    return (
+        <AdminShell {...props} active="quarantine">
+            <QuarantineContent userUid={props.userUid} />
+        </AdminShell>
+    );
+}
+
+function QuarantineContent({ userUid }: { userUid?: string }) {
+    const [mailboxUid, setMailboxUid] = useState<string | null>(null);
+    const [page, setPage] = useState(0);
+    const [entries, setEntries] = useState<QuarantineEntry[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [releasing, setReleasing] = useState<string | null>(null);
+
+    useEffect(() => {
+        setMailboxUid(readMailboxUid());
+    }, []);
+
+    function reload(uid: string) {
+        setLoading(true);
+        setError(null);
+        listQuarantine(uid, { page, limit: PAGE_SIZE })
+            .then(setEntries)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load quarantine."))
+            .finally(() => setLoading(false));
+    }
+
+    useEffect(() => {
+        if (mailboxUid) {
+            reload(mailboxUid);
+        }
+    }, [mailboxUid, page]);
+
+    const hasNextPage = entries.length === PAGE_SIZE;
+
+    // Only ever invoked from the "Release" button below, which itself only renders once `mailboxUid` is
+    // known and `AdminShell` has already confirmed `userUid` (children only render once authorized) — both
+    // non-null assertions reflect that real invariant, not an unchecked assumption.
+    async function handleRelease(entry: QuarantineEntry) {
+        setReleasing(entry.uid);
+        setError(null);
+        try {
+            await releaseQuarantineEntry(entry.uid, entry.version, userUid!);
+            reload(mailboxUid!);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not release this message.");
+        } finally {
+            setReleasing(null);
+        }
+    }
+
+    if (!mailboxUid) {
+        return <Alert>No mailbox specified. Open a mailbox's detail page and choose "View quarantine".</Alert>;
+    }
+
+    return (
+        <div className="max-w-4xl flex flex-col gap-4">
+            <div>
+                <a
+                    href={`/admin/mailboxes/${encodeURIComponent(mailboxUid)}`}
+                    className="text-sm text-primary-dark hover:underline"
+                >
+                    &larr; Back to mailbox
+                </a>
+                <h1 className="text-xl font-bold uppercase tracking-wide mt-1">Quarantine</h1>
+            </div>
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : entries.length === 0 ? (
+                <p className="text-sm text-text-muted">Nothing quarantined for this mailbox.</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Reason", "Quarantined", "Status", ""].map((h) => (
+                                    <th
+                                        key={h}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {h}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {entries.map((entry) => (
+                                <tr key={entry.uid}>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{entry.reason}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {new Date(entry.dateCreated).toLocaleString()}
+                                    </td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">
+                                        {entry.releasedAt ? (
+                                            <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-success text-white">
+                                                Released
+                                            </span>
+                                        ) : (
+                                            <span className="text-xs font-bold uppercase tracking-wide py-0.5 px-2 rounded-pill bg-surface-alt text-text-muted">
+                                                Held
+                                            </span>
+                                        )}
+                                    </td>
+                                    <td className="py-2.5 px-2.5 border-b border-border text-right">
+                                        {!entry.releasedAt && (
+                                            <Button
+                                                type="button"
+                                                variant="secondary"
+                                                className="!w-auto"
+                                                loading={releasing === entry.uid}
+                                                disabled={releasing === entry.uid}
+                                                onClick={() => handleRelease(entry)}
+                                            >
+                                                Release
+                                            </Button>
+                                        )}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <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>
+        </div>
+    );
+}

package/apps/admin/transport-rules/[uid].tsx

@@ -0,0 +1,143 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 {
+    getTransportRule,
+    TransportRule,
+    TransportRuleAction,
+    TransportRuleConditions,
+    updateTransportRule,
+} from "@rapidmx/react-shared/admin/transportRulesApi.js";
+import AdminShell, { AdminShellProps } from "../../shared/components/admin/layout/AdminShell.js";
+import RuleBuilder, { RuleBuilderValue } from "../../shared/components/rules/RuleBuilder.js";
+import { TRANSPORT_RULE_ACTION_TYPES, TRANSPORT_RULE_CONDITION_FIELDS } from "./_transportRuleConfig.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";
+
+export default function TransportRuleDetailPage(props: Omit<AdminShellProps, "active"> & { params: { uid: string } }) {
+    return (
+        <AdminShell {...props} active="transportRules">
+            <TransportRuleDetailContent uid={props.params.uid} />
+        </AdminShell>
+    );
+}
+
+function TransportRuleDetailContent({ uid }: { uid: string }) {
+    const [original, setOriginal] = useState<TransportRule | null>(null);
+    const [name, setName] = useState("");
+    const [rule, setRule] = useState<RuleBuilderValue<TransportRuleConditions, TransportRuleAction> | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getTransportRule(uid)
+            .then((loaded) => {
+                setOriginal(loaded);
+                if (loaded) {
+                    setName(loaded.name);
+                    setRule({
+                        enabled: loaded.enabled,
+                        sequence: loaded.sequence,
+                        stopProcessingRules: loaded.stopProcessingRules,
+                        conditions: loaded.conditions,
+                        actions: loaded.actions,
+                    });
+                }
+            })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this transport rule."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+
+    // Only ever invoked from the form below, which itself only renders once `original`/`rule` are
+    // loaded (the early returns above cover every other state) — the non-null assertions reflect that
+    // real invariant, not an unchecked assumption. Matches `QuarantineContent.handleRelease`'s and
+    // `DomainDetailContent.handleVerify`'s identical pattern.
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+
+        setSaving(true);
+        setSaved(false);
+        try {
+            const updated = await updateTransportRule({
+                uid: original!.uid,
+                version: original!.version,
+                name: name.trim(),
+                ...rule!,
+            });
+            setOriginal(updated);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this transport rule.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    if (loading) {
+        return <p className="text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (error && !original) {
+        return <Alert>{error}</Alert>;
+    }
+    if (!original || !rule) {
+        return <Alert>Transport rule not found.</Alert>;
+    }
+
+    return (
+        <div className="max-w-3xl">
+            <a href="/admin/transport-rules" className="text-sm text-primary-dark hover:underline">
+                &larr; All transport rules
+            </a>
+            <h1 className="text-xl font-bold tracking-tight mt-1 mb-5">{original.name}</h1>
+
+            {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-5">
+                <div className="bg-surface border border-border rounded-md p-6">
+                    <FormField label="Name" htmlFor="name">
+                        <input
+                            id="name"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                        />
+                    </FormField>
+                </div>
+
+                <RuleBuilder
+                    value={rule}
+                    onChange={setRule}
+                    conditionFields={TRANSPORT_RULE_CONDITION_FIELDS}
+                    actionTypes={TRANSPORT_RULE_ACTION_TYPES}
+                />
+
+                <div>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Save changes
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}

package/apps/admin/transport-rules/_transportRuleConfig.tsx

@@ -0,0 +1,75 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { TransportRuleAction } from "@rapidmx/react-shared/admin/transportRulesApi.js";
+import { ActionTypeDef, ConditionFieldDef } from "../../shared/components/rules/RuleBuilder.js";
+
+const FIELD_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 const TRANSPORT_RULE_CONDITION_FIELDS: ConditionFieldDef[] = [
+    { key: "fromContains", label: "From contains", kind: "list" },
+    { key: "subjectContains", label: "Subject contains", kind: "list" },
+    { key: "bodyContains", label: "Body contains", kind: "list" },
+    { key: "recipientContains", label: "Any recipient contains", kind: "list" },
+    { key: "anyRecipientExternal", label: "Any recipient is external", kind: "boolean" },
+    { key: "hasAttachment", label: "Has an attachment", kind: "boolean" },
+    { key: "attachmentNameContains", label: "Attachment filename contains", kind: "list" },
+];
+
+export const TRANSPORT_RULE_ACTION_TYPES: ActionTypeDef<TransportRuleAction>[] = [
+    {
+        value: "reject",
+        label: "Reject the message",
+        createDefault: () => ({ type: "reject" }),
+        render: () => null,
+    },
+    {
+        value: "quarantine",
+        label: "Quarantine every recipient's copy",
+        createDefault: () => ({ type: "quarantine" }),
+        render: () => null,
+    },
+    {
+        value: "add_header",
+        label: "Add a header",
+        createDefault: () => ({ type: "add_header", headerName: "", headerValue: "" }),
+        render: (action, onChange) => (
+            <div className="flex gap-2">
+                <input
+                    type="text"
+                    aria-label="Header name"
+                    className={FIELD_INPUT_CLASS}
+                    placeholder="X-Compliance-Flag"
+                    value={action.headerName ?? ""}
+                    onChange={(e) => onChange({ ...action, headerName: e.target.value })}
+                />
+                <input
+                    type="text"
+                    aria-label="Header value"
+                    className={FIELD_INPUT_CLASS}
+                    placeholder="reviewed"
+                    value={action.headerValue ?? ""}
+                    onChange={(e) => onChange({ ...action, headerValue: e.target.value })}
+                />
+            </div>
+        ),
+    },
+    {
+        value: "add_recipient",
+        label: "Deliver an additional copy to",
+        createDefault: () => ({ type: "add_recipient", recipientAddress: "" }),
+        render: (action, onChange) => (
+            <input
+                type="email"
+                aria-label="Recipient address"
+                className={FIELD_INPUT_CLASS}
+                placeholder="compliance@example.com"
+                value={action.recipientAddress ?? ""}
+                onChange={(e) => onChange({ ...action, recipientAddress: e.target.value })}
+            />
+        ),
+    },
+];

package/apps/admin/transport-rules/index.tsx

@@ -0,0 +1,117 @@
+///////////////////////////////////////////////////////////////////////////////
+// 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 { listTransportRules, TransportRule } from "@rapidmx/react-shared/admin/transportRulesApi.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 default function TransportRulesPage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="transportRules">
+            <TransportRulesContent />
+        </AdminShell>
+    );
+}
+
+function TransportRulesContent() {
+    const [page, setPage] = useState(0);
+    const [rules, setRules] = useState<TransportRule[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        listTransportRules({ page, limit: PAGE_SIZE })
+            .then(setRules)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load transport rules."))
+            .finally(() => setLoading(false));
+    }, [page]);
+
+    const hasNextPage = rules.length === PAGE_SIZE;
+    const sorted = [...rules].sort((a, b) => a.sequence - b.sequence);
+
+    return (
+        <>
+            <div className="flex items-center justify-between mb-5">
+                <h1 className="text-xl font-bold uppercase tracking-wide">Transport rules</h1>
+                <a href="/admin/transport-rules/new">
+                    <Button type="button" className="!w-auto">
+                        + New transport rule
+                    </Button>
+                </a>
+            </div>
+
+            {error && <Alert>{error}</Alert>}
+
+            {loading ? (
+                <p className="text-sm text-text-muted">Loading&hellip;</p>
+            ) : sorted.length === 0 ? (
+                <p className="text-sm text-text-muted">No transport rules yet.</p>
+            ) : (
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm border-collapse">
+                        <thead>
+                            <tr>
+                                {["Sequence", "Name", "Enabled", "Actions", ""].map((h) => (
+                                    <th
+                                        key={h}
+                                        className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                    >
+                                        {h}
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {sorted.map((rule) => (
+                                <tr key={rule.uid}>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{rule.sequence}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{rule.name}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{rule.enabled ? "Yes" : "No"}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border">{rule.actions.length}</td>
+                                    <td className="py-2.5 px-2.5 border-b border-border text-right">
+                                        <a
+                                            href={`/admin/transport-rules/${encodeURIComponent(rule.uid)}`}
+                                            className="text-primary-dark hover:underline font-medium"
+                                        >
+                                            View
+                                        </a>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+
+            <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/transport-rules/new/index.tsx

@@ -0,0 +1,105 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import {
+    createTransportRule,
+    TransportRuleAction,
+    TransportRuleConditions,
+} from "@rapidmx/react-shared/admin/transportRulesApi.js";
+import AdminShell, { AdminShellProps } from "../../../shared/components/admin/layout/AdminShell.js";
+import RuleBuilder, { RuleBuilderValue } from "../../../shared/components/rules/RuleBuilder.js";
+import { TRANSPORT_RULE_ACTION_TYPES, TRANSPORT_RULE_CONDITION_FIELDS } from "../_transportRuleConfig.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";
+
+export default function NewTransportRulePage(props: Omit<AdminShellProps, "active">) {
+    return (
+        <AdminShell {...props} active="transportRules">
+            <NewTransportRuleForm />
+        </AdminShell>
+    );
+}
+
+function NewTransportRuleForm() {
+    const [name, setName] = useState("");
+    const [rule, setRule] = useState<RuleBuilderValue<TransportRuleConditions, TransportRuleAction>>({
+        enabled: true,
+        sequence: 0,
+        stopProcessingRules: false,
+        conditions: {},
+        actions: [],
+    });
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const created = await createTransportRule({ name: name.trim(), ...rule });
+            window.location.href = `/admin/transport-rules/${encodeURIComponent(created.uid)}`;
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the transport rule.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="max-w-3xl">
+            <h1 className="text-xl font-bold uppercase tracking-wide mb-1">New transport rule</h1>
+            <p className="text-sm text-text-muted mb-5">
+                Evaluated once per SMTP transaction, before any message is resolved to an individual mailbox.
+            </p>
+
+            {error && <Alert>{error}</Alert>}
+
+            <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                <div className="bg-surface border border-border rounded-md p-6">
+                    <FormField label="Name" htmlFor="name">
+                        <input
+                            id="name"
+                            type="text"
+                            className={INPUT_CLASS}
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="Flag external senders"
+                        />
+                    </FormField>
+                </div>
+
+                <RuleBuilder
+                    value={rule}
+                    onChange={setRule}
+                    conditionFields={TRANSPORT_RULE_CONDITION_FIELDS}
+                    actionTypes={TRANSPORT_RULE_ACTION_TYPES}
+                />
+
+                <div className="flex gap-3">
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Create transport rule
+                    </Button>
+                    <a href="/admin/transport-rules">
+                        <Button type="button" variant="secondary" className="!w-auto">
+                            Cancel
+                        </Button>
+                    </a>
+                </div>
+            </form>
+        </div>
+    );
+}