@rapidmx/web-client 0.11.0 → 0.12.0

package/dist/apps/shared/components/sharing/PrincipalResolver.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+/** Who a resolved person is, for a person to check before confirming: their name and address, else their uid. */
+export function describePerson(person) {
+    if (person.displayName && person.address)
+        return `${person.displayName} <${person.address}>`;
+    return person.displayName ?? person.address ?? `user ${person.userUid}`;
+}
+/**
+ * "Who?" - anywhere a person is assigned by typed identifier rather than picked from an already-loaded list. What
+ * is typed is RESOLVED by the server (`resolve`) to the person it names before anything is saved, and the person is
+ * shown (name and address) for the caller to confirm; only `onResolved` ever sees the resolved, verified person -
+ * never the free text. This is deliberately exact-match, type-then-confirm - never a live/fuzzy search-as-you-type
+ * autocomplete, which would let anyone with access to the field enumerate the user directory by partial name.
+ *
+ * Parameterized entirely by `resolve`/`onResolved` (and the wording props) so every caller - mailbox sharing
+ * (`PrincipalPicker`, a thin wrapper around this component), mailbox ownership, escrow-scope holders, ... - reuses
+ * the same resolve-then-confirm UX and privacy posture rather than each reimplementing it.
+ *
+ * Deliberately renders no `<form>` of its own (Enter-to-find is wired up by hand instead, see `handleKeyDown()`) -
+ * some callers (`MailboxCreateForm`) use this as one field of their own, larger `<form>`, and a nested `<form>` is
+ * invalid HTML that real browsers mis-handle (an inner Enter keypress can submit the wrong one).
+ */
+export default function PrincipalResolver({ resolve, onResolved, initialPrincipal, placeholder, ariaLabel, children, confirmLabel, describeConfirm, confirmErrorMessage, onCancel, }) {
+    const [typed, setTyped] = useState(initialPrincipal ?? "");
+    const [person, setPerson] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    // A stored entry being replaced is looked up straight away, so its person is shown without a click.
+    useEffect(() => {
+        if (initialPrincipal) {
+            void find(initialPrincipal);
+        }
+    }, [initialPrincipal]);
+    async function find(principal) {
+        setBusy(true);
+        setError(null);
+        setPerson(null);
+        try {
+            setPerson(await resolve(principal));
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not look that person up.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    function submitFind() {
+        const principal = typed.trim();
+        if (principal) {
+            void find(principal);
+        }
+    }
+    /** Enter in the text box finds, same as clicking the button - handled here (not a native `<form>` submit,
+     * see this component's own doc comment on why) so it works whether or not a caller nests this inside one of
+     * their own forms (`MailboxCreateForm` does). */
+    function handleKeyDown(e) {
+        if (e.key === "Enter") {
+            // Stops the keystroke from also submitting an ANCESTOR `<form>` this component happens to be nested in.
+            e.preventDefault();
+            submitFind();
+        }
+    }
+    // Only reachable from the confirm button, which only renders once `person` is set.
+    async function handleConfirm() {
+        setBusy(true);
+        setError(null);
+        try {
+            await onResolved(person);
+            setTyped("");
+            setPerson(null);
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : confirmErrorMessage);
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [error && _jsx(Alert, { children: error }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "text", "aria-label": ariaLabel, placeholder: placeholder, className: "flex-1 text-sm border border-border rounded-sm py-1.5 px-2 bg-surface text-text", value: typed, onChange: (e) => {
+                            setTyped(e.target.value);
+                            setPerson(null);
+                        }, onKeyDown: handleKeyDown, disabled: busy }), children, _jsx(Button, { type: "button", variant: "secondary", loading: busy && !person, disabled: busy, className: "!w-auto", onClick: submitFind, children: "Find" }), onCancel && (_jsx(Button, { type: "button", variant: "text", className: "!w-auto", onClick: onCancel, children: "Cancel" }))] }), person && (_jsxs("div", { className: "flex items-center justify-between gap-3 text-sm py-2 px-3 border border-border rounded-sm", children: [_jsx("span", { children: describeConfirm(person) }), _jsx(Button, { type: "button", loading: busy, disabled: busy, className: "!w-auto", onClick: () => void handleConfirm(), children: confirmLabel })] }))] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",
@@ -39,7 +39,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@journeyapps/wa-sqlite": "^2.0.4",
     "@peculiar/x509": "^2.1.0",
-    "@rapidmx/react-shared": "^0.11.0",
+    "@rapidmx/react-shared": "^0.12.0",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-highlight": "^3.31.3",
     "@tiptap/extension-image": "^3.31.3",