vestrycms 0.0.0-stage → 0.1.0

package/dist/ui/pages/EntryEditor.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AlertTriangle, ExternalLink, Save, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { serializeEntry } from "../../core/entries.js";
+import { collectionFormat, dirname, entryPath, fillTemplate as fillPathTemplate, normalizePath, parsePathPattern, relativePath, resolveRelative, slugify, } from "../../core/paths.js";
+import { applyAutoFields, assetToRepoPath, repoPathToAsset, toStoredValues, } from "../../core/values.js";
+import { ApiError } from "../api.js";
+import { RichTextEditor } from "../components/editor/RichTextEditor.js";
+import { FieldSet } from "../components/fields/FieldRenderer.js";
+import { TopBar } from "../components/Layout.js";
+import { Alert, Badge, Button, ConfirmDialog, Loading, Spinner, Toggle, useToast, } from "../components/ui.js";
+import { useVestry } from "../context.js";
+import { formatSource } from "../lib/format.js";
+import { defaultValues, deepEqual, fieldLabel, fillTemplate, formatDate, validate, } from "../lib/utils.js";
+export function CollectionEntryPage() {
+    const { collection = "", "*": slug = "" } = useParams();
+    return (_jsx(EntryEditor, { kind: "collection", collectionKey: collection, slug: slug || null }, `${collection}:${slug}`));
+}
+export function NewEntryPage() {
+    const { collection = "" } = useParams();
+    return (_jsx(EntryEditor, { kind: "collection", collectionKey: collection, slug: null, isNew: true }, `${collection}:new`));
+}
+export function SingletonPage() {
+    const { singleton = "" } = useParams();
+    return (_jsx(EntryEditor, { kind: "singleton", collectionKey: singleton, slug: null }, `singleton:${singleton}`));
+}
+function EntryEditor({ kind, collectionKey, slug, isNew = false, }) {
+    const { config, api, client } = useVestry();
+    const navigate = useNavigate();
+    const toast = useToast();
+    const qc = useQueryClient();
+    const col = kind === "collection"
+        ? config.collections?.[collectionKey]
+        : config.singletons?.[collectionKey];
+    const collection = kind === "collection" ? col : null;
+    const query = useQuery({
+        queryKey: kind === "collection"
+            ? ["entry", collectionKey, slug]
+            : ["singleton", collectionKey],
+        queryFn: () => kind === "collection"
+            ? api.getEntry(collectionKey, slug)
+            : api.getSingleton(collectionKey),
+        enabled: Boolean(col) && !isNew,
+        staleTime: 0,
+    });
+    const [state, setState] = useState(null);
+    const [initial, setInitial] = useState(null);
+    const [errors, setErrors] = useState([]);
+    const [uploads, setUploads] = useState({});
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [slugInput, setSlugInput] = useState("");
+    const [sha, setSha] = useState(null);
+    // Initialise state from the loaded entry (or defaults for a new one).
+    useEffect(() => {
+        if (!col || state)
+            return;
+        if (isNew) {
+            const init = { data: defaultValues(col.schema), body: "" };
+            setState(init);
+            setInitial(init);
+            return;
+        }
+        if (query.data) {
+            const init = { data: query.data.data, body: query.data.body };
+            setState(init);
+            setInitial(init);
+            setSha(query.data.sha);
+        }
+    }, [col, isNew, query.data, state]);
+    const dirty = state !== null && initial !== null && !deepEqual(state, initial);
+    useEffect(() => {
+        if (!dirty)
+            return;
+        const onBeforeUnload = (e) => {
+            e.preventDefault();
+        };
+        window.addEventListener("beforeunload", onBeforeUnload);
+        return () => window.removeEventListener("beforeunload", onBeforeUnload);
+    }, [dirty]);
+    const format = col ? collectionFormat(col) : "mdx";
+    const pattern = useMemo(() => (col ? parsePathPattern(col.path) : null), [col]);
+    const effectiveSlug = useMemo(() => {
+        if (!collection || !state)
+            return slug ?? "";
+        if (!isNew)
+            return slug ?? "";
+        if (slugInput)
+            return slugInput;
+        const template = collection.slug?.template;
+        if (template)
+            return fillPathTemplate(template, state.data, { slug: true });
+        const from = collection.slug?.from ?? collection.titleField ?? "title";
+        const v = state.data[from];
+        return slugify(String(v ?? ""));
+    }, [collection, state, isNew, slug, slugInput]);
+    const filePath = useMemo(() => {
+        if (!pattern)
+            return "";
+        if (kind === "singleton")
+            return normalizePath(col.path);
+        if (pattern.single)
+            return pattern.prefix;
+        return entryPath(pattern, effectiveSlug || "new-entry");
+    }, [pattern, kind, col, effectiveSlug]);
+    // Body editor environment: resolve image references relative to this file.
+    const bodyConfig = col?.body === false ? null : (col?.body ?? {});
+    const env = useMemo(() => {
+        const images = bodyConfig?.images;
+        const fileDir = dirname(filePath);
+        const toRepoPath = (src) => {
+            if (/^https?:\/\//.test(src))
+                return null;
+            if (images)
+                return assetToRepoPath(images, src, filePath);
+            if (src.startsWith("/"))
+                return `public${src}`;
+            if (src.startsWith("."))
+                return resolveRelative(fileDir, src);
+            return null;
+        };
+        const components = Object.fromEntries((bodyConfig?.components ?? [])
+            .map((n) => [n, config.components?.[n]])
+            .filter(([, c]) => c));
+        return {
+            components,
+            imageDirectory: images?.directory,
+            toRepoPath,
+            toDocPath: (repoPath) => images
+                ? repoPathToAsset(images, repoPath, filePath)
+                : relativePath(fileDir, repoPath),
+            resolveImage: (src) => {
+                const repo = toRepoPath(src);
+                if (!repo)
+                    return src;
+                const pending = uploads[repo];
+                return pending ? pending.previewUrl : api.fileUrl(repo);
+            },
+        };
+    }, [bodyConfig, filePath, config.components, uploads, api]);
+    const save = useMutation({
+        mutationFn: async () => {
+            if (!col || !state)
+                throw new Error("Nothing to save");
+            const errs = validate(col.schema, state.data);
+            setErrors(errs);
+            if (errs.length)
+                throw new Error(errs[0].message);
+            const data = applyAutoFields(col.schema, state.data);
+            const input = {
+                data,
+                body: state.body,
+                sha: isNew ? undefined : sha,
+                uploads: Object.values(uploads).map((u) => ({
+                    path: u.path,
+                    base64: u.base64,
+                })),
+            };
+            // Compose the whole file here (and format it with the project's
+            // Prettier) whenever the file holds just this entry. Single-file
+            // collections are merged on the server instead.
+            if (kind === "singleton" || (pattern && !pattern.single)) {
+                const stored = toStoredValues(col.schema, data, filePath);
+                let raw = serializeEntry(format, { data: stored, body: state.body });
+                try {
+                    raw = await formatSource(raw, filePath);
+                }
+                catch (e) {
+                    console.warn("[vestry] formatting failed, saving unformatted", e);
+                }
+                input.raw = raw;
+            }
+            if (kind === "singleton")
+                return {
+                    ...(await api.saveSingleton(collectionKey, input)),
+                    slug: collectionKey,
+                    data,
+                };
+            if (isNew) {
+                input.slug = effectiveSlug;
+                return { ...(await api.createEntry(collectionKey, input)), data };
+            }
+            return { ...(await api.updateEntry(collectionKey, slug, input)), data };
+        },
+        onSuccess: (res) => {
+            toast("success", client.mode === "local" ? "Saved to disk" : "Saved and committed");
+            setUploads({});
+            setSha(res.sha);
+            setInitial(state ? { data: res.data, body: state.body } : null);
+            setState((s) => (s ? { ...s, data: res.data } : s));
+            qc.invalidateQueries({ queryKey: ["entries", collectionKey] });
+            qc.invalidateQueries({ queryKey: ["assets"] });
+            if (kind === "collection")
+                qc.setQueryData(["entry", collectionKey, res.slug], undefined);
+            if (isNew)
+                navigate(`/collections/${collectionKey}/${res.slug}`, {
+                    replace: true,
+                });
+        },
+        onError: (e) => {
+            if (e instanceof ApiError && e.status === 409) {
+                toast("error", `${e.message} Reload the page to pick up the latest version.`);
+            }
+            else {
+                toast("error", e.message);
+            }
+        },
+    });
+    const remove = useMutation({
+        mutationFn: () => api.deleteEntry(collectionKey, slug),
+        onSuccess: () => {
+            toast("success", "Entry deleted");
+            qc.invalidateQueries({ queryKey: ["entries", collectionKey] });
+            navigate(`/collections/${collectionKey}`);
+        },
+        onError: (e) => toast("error", e.message),
+    });
+    const saveRef = useRef(save);
+    saveRef.current = save;
+    useEffect(() => {
+        const onKey = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "s") {
+                e.preventDefault();
+                if (!saveRef.current.isPending)
+                    saveRef.current.mutate();
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+    const setData = useCallback((data) => setState((s) => (s ? { ...s, data } : s)), []);
+    const setBody = useCallback((body) => setState((s) => (s ? { ...s, body } : s)), []);
+    const addUpload = useCallback((u) => setUploads((m) => ({ ...m, [u.path]: u })), []);
+    if (!col)
+        return (_jsxs(Alert, { kind: "error", children: ["Unknown ", kind, " \u201C", collectionKey, "\u201D."] }));
+    if (!isNew && query.isLoading)
+        return _jsx(Loading, {});
+    if (!isNew && query.error) {
+        return (_jsx("div", { className: "v-page", children: _jsx(Alert, { kind: "error", children: query.error.message }) }));
+    }
+    if (!state)
+        return _jsx(Loading, {});
+    const titleField = kind === "collection" ? (collection.titleField ?? "title") : null;
+    const titleIsText = titleField
+        ? col.schema[titleField]?.type === "text"
+        : false;
+    const statusField = collection?.status?.field ?? null;
+    const publishedWhen = collection?.status?.publishedWhen ?? true;
+    const isPublished = statusField
+        ? Boolean(state.data[statusField]) === publishedWhen
+        : null;
+    const titleValue = titleField
+        ? String(state.data[titleField] ?? "")
+        : col.label;
+    const previewHref = col.previewUrl && !isNew
+        ? `${config.siteUrl ?? ""}${fillTemplate(col.previewUrl, { ...state.data, slug: effectiveSlug })}`
+        : null;
+    const entry = query.data;
+    const sections = col.sections ?? [];
+    const sectioned = new Set(sections.flatMap((s) => (typeof s === "string" ? [] : s.fields)));
+    const isEditable = (key) => key !== statusField && !(titleIsText && key === titleField);
+    const isMain = (key, f) => !f.sidebar && !sectioned.has(key) && isEditable(key);
+    const isSidebar = (key, f) => Boolean(f.sidebar) && !sectioned.has(key) && isEditable(key);
+    const hasVisible = (filter) => Object.entries(col.schema).some(([k, f]) => filter(k, f) && !f.hidden);
+    const bodyPlaced = sections.includes("body");
+    const sectionCard = (section, i) => {
+        const inSection = (key) => section.fields.includes(key) && isEditable(key);
+        if (!hasVisible(inSection))
+            return null;
+        // A lone field named like its section doesn't need a second heading.
+        const lone = section.fields.length === 1 ? section.fields[0] : null;
+        const hideLabels = lone &&
+            col.schema[lone] &&
+            fieldLabel(lone, col.schema[lone]) === section.label
+            ? [lone]
+            : undefined;
+        return (_jsxs("div", { className: "v-card", children: [_jsxs("div", { className: "v-card__header", children: [_jsx("h3", { className: "v-card__title", children: section.label }), section.description && (_jsx("span", { className: "v-muted", style: { fontSize: 12.5 }, children: section.description }))] }), _jsx("div", { className: "v-card__body", children: _jsx(FieldSet, { schema: Object.fromEntries(section.fields
+                            .filter((k) => col.schema[k])
+                            .map((k) => [k, col.schema[k]])), values: state.data, onChange: setData, errors: errors, filter: inSection, ctx: ctx, hideLabels: hideLabels }) })] }, `section-${i}`));
+    };
+    const bodyCard = bodyConfig && (format === "md" || format === "mdx") ? (_jsxs("div", { className: "v-card v-card--editor", children: [_jsx("div", { className: "v-card__header", children: _jsx("h3", { className: "v-card__title", children: bodyConfig.label ?? "Content" }) }), _jsx(RichTextEditor, { value: state.body, onChange: setBody, components: bodyConfig.components ?? [], env: env, format: format, placeholder: bodyConfig.placeholder, onUpload: addUpload, flush: true })] }, "body")) : null;
+    const ctx = {
+        addUpload,
+        pendingUploads: uploads,
+        isNew,
+        siblings: state.data,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { status: isPublished === null ? null : isPublished ? "published" : "draft", crumbs: kind === "collection"
+                    ? [
+                        {
+                            label: collection.label,
+                            to: `/collections/${collectionKey}`,
+                        },
+                    ]
+                    : undefined, title: isNew
+                    ? `New ${collection?.singular ?? "entry"}`
+                    : titleValue || effectiveSlug, actions: _jsxs(_Fragment, { children: [dirty && (_jsxs("span", { className: "v-unsaved", children: [_jsx(AlertTriangle, { size: 13 }), " Unsaved changes"] })), previewHref && (_jsxs("a", { className: "v-btn", href: previewHref, target: "_blank", rel: "noreferrer", children: [_jsx(ExternalLink, {}), " View"] })), kind === "collection" &&
+                            !isNew &&
+                            collection.delete !== false && (_jsx(Button, { variant: "danger", icon: true, title: "Delete", onClick: () => setConfirmDelete(true), children: _jsx(Trash2, {}) })), _jsxs(Button, { variant: "primary", onClick: () => save.mutate(), disabled: save.isPending ||
+                                (!dirty && !isNew && Object.keys(uploads).length === 0), children: [save.isPending ? _jsx(Spinner, {}) : _jsx(Save, {}), " ", isNew ? "Create" : "Save", _jsx("span", { className: "v-kbd", children: "\u2318S" })] })] }) }), _jsxs("div", { className: "v-page", children: [errors.length > 0 && (_jsx("div", { style: { marginBottom: 18 }, children: _jsxs(Alert, { kind: "error", children: [_jsx("strong", { children: "Please fix the following:" }), _jsx("ul", { style: { margin: "4px 0 0 16px", padding: 0 }, children: errors.map((e) => (_jsx("li", { children: e.message }, e.path))) })] }) })), _jsxs("div", { className: "v-editor-layout", children: [_jsxs("div", { className: "v-stack", style: { gap: 20 }, children: [titleIsText && (_jsx("div", { className: "v-card", children: _jsxs("div", { className: "v-card__body", style: { padding: "14px 18px" }, children: [_jsx("input", { className: "v-title-input", value: titleValue, placeholder: `${fieldLabel(titleField, col.schema[titleField])}…`, onChange: (e) => setData({ ...state.data, [titleField]: e.target.value }), autoFocus: isNew }), errors.some((e) => e.path === titleField) && (_jsx("div", { className: "v-field__error", children: errors.find((e) => e.path === titleField).message }))] }) })), sections.map((section, i) => section === "body"
+                                        ? bodyCard
+                                        : section.sidebar
+                                            ? null
+                                            : sectionCard(section, i)), hasVisible(isMain) && (_jsxs("div", { className: "v-card", children: [_jsx("div", { className: "v-card__header", children: _jsx("h3", { className: "v-card__title", children: "Details" }) }), _jsx("div", { className: "v-card__body", children: _jsx(FieldSet, { schema: col.schema, values: state.data, onChange: setData, errors: errors, filter: isMain, ctx: ctx }) })] })), !bodyPlaced && bodyCard] }), _jsxs("aside", { className: "v-editor-sidebar v-stack", children: [(statusField || kind === "collection") && (_jsxs("div", { className: "v-card", children: [_jsxs("div", { className: "v-card__header", children: [_jsx("h3", { className: "v-card__title", children: "Publish" }), isPublished !== null && (_jsx("span", { style: { marginLeft: "auto" }, children: _jsx(Badge, { status: isPublished ? "published" : "draft" }) }))] }), _jsxs("div", { className: "v-card__body v-stack", children: [statusField && (_jsx(Toggle, { checked: isPublished ?? false, label: isPublished ? "Published" : "Draft", onChange: (on) => setData({
+                                                            ...state.data,
+                                                            [statusField]: on ? publishedWhen : !publishedWhen,
+                                                        }) })), kind === "collection" && (_jsxs("div", { children: [_jsx("label", { className: "v-field__label", children: "Slug" }), isNew && !pattern?.single ? (_jsx("input", { className: "v-input v-input--mono", value: slugInput || effectiveSlug, onChange: (e) => setSlugInput(e.target.value), placeholder: "auto" })) : (_jsx("input", { className: "v-input v-input--mono", readOnly: true, value: effectiveSlug })), isNew && pattern && !pattern.single && (_jsx("div", { className: "v-field__hint v-mono", style: { fontSize: 11.5 }, children: entryPath(pattern, effectiveSlug || "…") }))] })), entry && (_jsxs("dl", { className: "v-meta", children: [_jsx("dt", { children: "File" }), _jsx("dd", { title: entry.path, children: entry.path }), Object.entries(col.schema)
+                                                                .filter(([, f]) => f.type === "datetime" && f.autoUpdate)
+                                                                .map(([k]) => (_jsxs("span", { style: { display: "contents" }, children: [_jsx("dt", { children: fieldLabel(k, col.schema[k]) }), _jsx("dd", { children: state.data[k] ? formatDate(state.data[k]) : "—" })] }, k)))] }))] })] })), sections.map((section, i) => section !== "body" && section.sidebar
+                                        ? sectionCard(section, i)
+                                        : null), hasVisible(isSidebar) && (_jsx("div", { className: "v-card", children: _jsx("div", { className: "v-card__body", children: _jsx(FieldSet, { schema: col.schema, values: state.data, onChange: setData, errors: errors, filter: isSidebar, ctx: ctx }) }) })), Object.keys(uploads).length > 0 && (_jsxs(Alert, { kind: "info", children: [Object.keys(uploads).length, " new file", Object.keys(uploads).length === 1 ? "" : "s", " will be committed with this entry."] }))] })] })] }), confirmDelete && (_jsx(ConfirmDialog, { title: `Delete “${titleValue}”?`, message: "The file will be removed from the repository in a new commit.", confirmLabel: "Delete", danger: true, busy: remove.isPending, onCancel: () => setConfirmDelete(false), onConfirm: () => remove.mutate() }))] }));
+}

package/dist/ui/pages/Login.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Two-step sign-in: an email address, then the six-digit code we emailed.
+ * The first step always "succeeds" so the page never reveals who has an
+ * account.
+ */
+export declare function LoginPage(): import("react").JSX.Element;

package/dist/ui/pages/Login.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, KeyRound, Mail } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { authErrorMessage } from "../auth-client.js";
+import { Alert, Spinner } from "../components/ui.js";
+import { useVestry } from "../context.js";
+/**
+ * Two-step sign-in: an email address, then the six-digit code we emailed.
+ * The first step always "succeeds" so the page never reveals who has an
+ * account.
+ */
+export function LoginPage() {
+    const { api, authClient, client, name, refresh } = useVestry();
+    const [step, setStep] = useState("email");
+    const [email, setEmail] = useState("");
+    const [code, setCode] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const codeRef = useRef(null);
+    useEffect(() => {
+        if (step === "code")
+            codeRef.current?.focus();
+    }, [step]);
+    const logo = client.config.logo
+        ? /^https?:\/\//.test(client.config.logo)
+            ? client.config.logo
+            : api.fileUrl(client.config.logo)
+        : null;
+    /** Asks for a code; resolves true when the request was accepted. */
+    async function requestCode(e) {
+        e?.preventDefault();
+        setError(null);
+        setNotice(null);
+        setBusy(true);
+        try {
+            const result = await authClient.emailOtp.sendVerificationOtp({
+                email: email.trim(),
+                type: "sign-in",
+            });
+            if (result.error)
+                throw result.error;
+            setCode("");
+            setStep("code");
+            return true;
+        }
+        catch (err) {
+            setError(authErrorMessage(err));
+            return false;
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function verify(e) {
+        e.preventDefault();
+        setError(null);
+        setBusy(true);
+        try {
+            const result = await authClient.signIn.emailOtp({
+                email: email.trim(),
+                otp: code,
+            });
+            if (result.error)
+                throw result.error;
+            // Once the config reloads with a user, the /login route redirects to `next`.
+            await refresh();
+        }
+        catch (err) {
+            const e = err;
+            setError(authErrorMessage(e));
+            if (e.code === "OTP_EXPIRED" || e.code === "TOO_MANY_ATTEMPTS") {
+                setStep("email");
+            }
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsx("div", { className: "v-login", children: _jsxs("div", { className: "v-card v-login__card", children: [logo ? (_jsx("div", { className: "v-login__logo", children: _jsx("img", { src: logo, alt: name }) })) : (_jsx("div", { className: "v-login__mark", children: name.slice(0, 1) })), _jsx("h1", { children: name }), client.setupError ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "Vestry isn't configured yet." }), _jsx(Alert, { kind: "error", children: client.setupError })] })) : step === "email" ? (_jsxs("form", { onSubmit: requestCode, className: "v-login__form", children: [_jsx("p", { children: "Enter your email address and we'll send you a code to sign in." }), _jsxs("label", { className: "v-login__field", children: [_jsx("span", { className: "v-field__label", children: "Email" }), _jsx("input", { className: "v-input", type: "email", name: "email", autoComplete: "email", autoFocus: true, required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.org" })] }), error && _jsx(Alert, { kind: "error", children: error }), _jsxs("button", { className: "v-btn v-btn--primary", type: "submit", disabled: busy || !email, children: [busy ? _jsx(Spinner, {}) : _jsx(Mail, {}), " Email me a code"] })] })) : (_jsxs("form", { onSubmit: verify, className: "v-login__form", children: [_jsxs("p", { children: ["If ", _jsx("strong", { children: email }), " can edit this site, we've emailed it a six-digit code. It expires in 10 minutes."] }), _jsxs("label", { className: "v-login__field", children: [_jsx("span", { className: "v-field__label", children: "Code" }), _jsx("input", { ref: codeRef, className: "v-input v-login__code", inputMode: "numeric", autoComplete: "one-time-code", pattern: "[0-9 ]*", maxLength: 7, required: true, value: code, onChange: (e) => setCode(e.target.value.replace(/[^\d]/g, "").slice(0, 6)), placeholder: "123456" })] }), error && _jsx(Alert, { kind: "error", children: error }), notice && _jsx(Alert, { kind: "info", children: notice }), _jsxs("button", { className: "v-btn v-btn--primary", type: "submit", disabled: busy || code.length !== 6, children: [busy ? _jsx(Spinner, {}) : _jsx(KeyRound, {}), " Sign in"] }), _jsxs("div", { className: "v-login__links", children: [_jsxs("button", { type: "button", className: "v-link", disabled: busy, onClick: () => {
+                                        setStep("email");
+                                        setError(null);
+                                        setNotice(null);
+                                    }, children: [_jsx(ArrowLeft, { size: 13 }), " Use a different email"] }), _jsx("button", { type: "button", className: "v-link", disabled: busy, onClick: async () => {
+                                        if (await requestCode())
+                                            setNotice("We sent a new code.");
+                                    }, children: "Send a new code" })] })] }))] }) }));
+}

package/dist/ui/pages/Users.d.ts

@@ -0,0 +1 @@
+export declare function UsersPage(): import("react").JSX.Element;

package/dist/ui/pages/Users.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Mail, MoreHorizontal, Plus, Trash2, UserCog } from "lucide-react";
+import { useState } from "react";
+import { Navigate } from "react-router";
+import { ROLES } from "../../core/roles.js";
+import { TopBar } from "../components/Layout.js";
+import { Alert, Badge, Button, ConfirmDialog, EmptyState, Loading, Menu, Modal, Spinner, useToast, } from "../components/ui.js";
+import { useVestry } from "../context.js";
+import { formatDate, initials } from "../lib/utils.js";
+export function UsersPage() {
+    const { api, client, refresh } = useVestry();
+    const toast = useToast();
+    const queryClient = useQueryClient();
+    const me = client.user;
+    const [inviting, setInviting] = useState(false);
+    const [editing, setEditing] = useState(null);
+    const [removing, setRemoving] = useState(null);
+    const q = useQuery({
+        queryKey: ["users"],
+        queryFn: () => api.listUsers(),
+        enabled: me.role === "admin" && client.auth,
+    });
+    const invalidate = () => queryClient.invalidateQueries({ queryKey: ["users"] });
+    const resend = useMutation({
+        mutationFn: (u) => api.resendInvite(u.id),
+        onSuccess: (_r, u) => toast("success", `Invitation re-sent to ${u.email}.`),
+        onError: (e) => toast("error", message(e)),
+    });
+    const remove = useMutation({
+        mutationFn: (u) => api.removeUser(u.id),
+        onSuccess: (_r, u) => {
+            toast("success", `${u.name} was removed.`);
+            setRemoving(null);
+            invalidate();
+        },
+        onError: (e) => toast("error", message(e)),
+    });
+    if (me.role !== "admin")
+        return _jsx(Navigate, { to: "/", replace: true });
+    const crumbs = [{ label: "Users" }];
+    const users = q.data?.users ?? [];
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { title: "Users", crumbs: crumbs, actions: client.auth && (_jsxs(Button, { variant: "primary", onClick: () => setInviting(true), children: [_jsx(Plus, {}), " Invite user"] })) }), _jsx("div", { className: "v-page", children: !client.auth ? (_jsxs(Alert, { kind: "info", children: ["Sign-in is off in local mode, so there are no users to manage. Start the dev server with ", _jsx("code", { children: "VESTRY_MODE=auth" }), " to work on sign-in and users locally."] })) : q.isLoading ? (_jsx(Loading, { label: "Loading users\u2026" })) : q.error ? (_jsx(Alert, { kind: "error", children: message(q.error) })) : users.length === 0 ? (_jsx("div", { className: "v-card", children: _jsx(EmptyState, { icon: _jsx(UserCog, {}), title: "No users yet", children: _jsx("p", { children: "Invite the people who should be able to edit the site." }) }) })) : (_jsx("div", { className: "v-card", children: _jsx("div", { className: "v-table-wrap", children: _jsxs("table", { className: "v-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Role" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Last sign-in" }), _jsx("th", {})] }) }), _jsx("tbody", { children: users.map((u) => (_jsxs("tr", { children: [_jsx("td", { className: "v-table__main", children: _jsxs("span", { className: "v-user", children: [_jsx("span", { className: "v-avatar", "aria-hidden": true, children: initials(u.name || u.email) }), _jsxs("span", { className: "v-user__text", children: [_jsxs("span", { className: "v-table__title", children: [u.name, u.id === me.id && (_jsx("span", { className: "v-muted", children: " (you)" }))] }), _jsx("span", { className: "v-table__sub", children: u.email })] })] }) }), _jsxs("td", { style: { whiteSpace: "nowrap" }, children: [roleLabel(u.role), u.origin === "config" && (_jsxs("span", { className: "v-muted", title: "Listed in auth.admins in vestry.config", children: [" ", "\u00B7 config"] }))] }), _jsx("td", { children: u.status === "active" ? (_jsx(Badge, { status: "published", children: "Active" })) : (_jsx(Badge, { status: "draft", children: "Invited" })) }), _jsx("td", { className: "v-muted", style: { whiteSpace: "nowrap" }, children: u.lastLoginAt ? formatDate(u.lastLoginAt) : "—" }), _jsx("td", { className: "v-table__actions", children: _jsx(Menu, { align: "right", trigger: ({ toggle }) => (_jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Actions", onClick: toggle, children: _jsx(MoreHorizontal, {}) })), children: (close) => (_jsxs(_Fragment, { children: [_jsxs("button", { className: "v-menu__item", onClick: () => {
+                                                                    close();
+                                                                    setEditing(u);
+                                                                }, children: [_jsx(UserCog, {}), _jsx("span", { children: "Edit name and role" })] }), u.status === "invited" && (_jsxs("button", { className: "v-menu__item", onClick: () => {
+                                                                    close();
+                                                                    resend.mutate(u);
+                                                                }, children: [_jsx(Mail, {}), _jsx("span", { children: "Re-send invitation" })] })), u.id !== me.id && u.origin !== "config" && (_jsxs("button", { className: "v-menu__item v-menu__item--danger", onClick: () => {
+                                                                    close();
+                                                                    setRemoving(u);
+                                                                }, children: [_jsx(Trash2, {}), _jsx("span", { children: "Remove" })] }))] })) }) })] }, u.id))) })] }) }) })) }), inviting && (_jsx(UserForm, { title: "Invite user", submitLabel: "Send invitation", onClose: () => setInviting(false), onSubmit: async (values) => {
+                    const { user, mailError } = await api.inviteUser(values);
+                    if (mailError) {
+                        toast("error", `${user.name} was added, but the invitation email failed: ${mailError}. Use "Re-send invitation" once email is working.`);
+                    }
+                    else {
+                        toast("success", `Invitation sent to ${user.email}.`);
+                    }
+                    setInviting(false);
+                    invalidate();
+                } })), editing && (_jsx(UserForm, { title: `Edit ${editing.name}`, submitLabel: "Save", user: editing, onClose: () => setEditing(null), onSubmit: async (values) => {
+                    await api.updateUser(editing.id, {
+                        name: values.name,
+                        role: values.role,
+                    });
+                    toast("success", "User updated.");
+                    setEditing(null);
+                    invalidate();
+                    if (editing.id === me.id)
+                        await refresh();
+                } })), removing && (_jsx(ConfirmDialog, { title: `Remove ${removing.name}?`, message: `${removing.email} will no longer be able to sign in. Content they created stays as it is.`, confirmLabel: "Remove", danger: true, busy: remove.isPending, onCancel: () => setRemoving(null), onConfirm: () => remove.mutate(removing) }))] }));
+}
+function UserForm({ title, submitLabel, user, onClose, onSubmit, }) {
+    const [email, setEmail] = useState(user?.email ?? "");
+    const [name, setName] = useState(user?.name ?? "");
+    const [role, setRole] = useState(user?.role ?? "editor");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const roleLocked = user?.origin === "config";
+    async function submit(e) {
+        e.preventDefault();
+        setBusy(true);
+        setError(null);
+        try {
+            await onSubmit({ email, name, role });
+        }
+        catch (err) {
+            setError(message(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsx(Modal, { title: title, onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: onClose, disabled: busy, children: "Cancel" }), _jsxs(Button, { variant: "primary", type: "submit", form: "v-user-form", disabled: busy || (!user && !email), children: [busy ? _jsx(Spinner, {}) : null, submitLabel] })] }), children: _jsxs("form", { id: "v-user-form", onSubmit: submit, className: "v-fields", children: [!user && (_jsxs("label", { className: "v-field", children: [_jsx("span", { className: "v-field__label", children: "Email" }), _jsx("input", { className: "v-input", type: "email", autoFocus: true, required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "colleague@example.org" }), _jsx("span", { className: "v-field__hint", children: "They'll get an email with a link to sign in. No password needed: we email a code each time." })] })), _jsxs("label", { className: "v-field", children: [_jsx("span", { className: "v-field__label", children: "Name" }), _jsx("input", { className: "v-input", type: "text", autoFocus: !!user, value: name, onChange: (e) => setName(e.target.value), placeholder: user ? undefined : "Optional" })] }), _jsxs("div", { className: "v-field", children: [_jsx("span", { className: "v-field__label", children: "Role" }), _jsx("div", { className: "v-radio-cards", children: ROLES.map((r) => (_jsxs("label", { className: `v-radio-card${role === r.value ? " is-selected" : ""}${roleLocked ? " is-disabled" : ""}`, children: [_jsx("input", { type: "radio", name: "role", value: r.value, checked: role === r.value, disabled: roleLocked, onChange: () => setRole(r.value) }), _jsxs("span", { className: "v-radio-card__body", children: [_jsx("span", { className: "v-radio-card__label", children: r.label }), _jsx("span", { className: "v-radio-card__desc", children: r.description })] })] }, r.value))) }), roleLocked && (_jsxs("span", { className: "v-field__hint", children: ["This address is listed in ", _jsx("code", { children: "auth.admins" }), " in the Vestry config, so it is always an admin."] }))] }), error && _jsx(Alert, { kind: "error", children: error })] }) }));
+}
+function roleLabel(role) {
+    return ROLES.find((r) => r.value === role)?.label ?? role;
+}
+function message(e) {
+    return e instanceof Error ? e.message : String(e);
+}