vestrycms 0.0.0-stage → 0.2.0

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);
+}