@byline/admin 2.4.0 → 2.4.2

package/dist/modules/admin-account/components/container.js

@@ -0,0 +1,298 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, CloseIcon, Drawer, EditIcon, IconButton, LocalDateTime } from "@byline/ui/react";
+import classnames from "classnames";
+import { ChangeAccountPassword } from "./change-password.js";
+import container_module from "./container.module.js";
+import { UpdateAccount } from "./update.js";
+const panels = {
+    update: {
+        title: 'Profile',
+        component: UpdateAccount
+    },
+    change_password: {
+        title: 'Change Password',
+        component: ChangeAccountPassword
+    },
+    empty: {
+        title: '',
+        component: ()=>null
+    }
+};
+function ContainerSection({ title, onEdit, children }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-account-section', container_module.section),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-account-section-head', container_module["section-head"]),
+                children: [
+                    /*#__PURE__*/ jsx("h2", {
+                        children: title
+                    }),
+                    onEdit ? /*#__PURE__*/ jsx(IconButton, {
+                        variant: "text",
+                        onClick: onEdit,
+                        "aria-label": `Edit ${title}`,
+                        children: /*#__PURE__*/ jsx(EditIcon, {
+                            width: "20px",
+                            height: "20px"
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                children: children
+            })
+        ]
+    });
+}
+function AccountSelfContainer({ account }) {
+    const [currentAccount, setCurrentAccount] = useState(account);
+    const [current, setCurrent] = useState('empty');
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const openDrawer = (key)=>()=>{
+            setCurrent(key);
+            setIsDrawerOpen(true);
+        };
+    const closeDrawer = ()=>{
+        setCurrent('empty');
+        setIsDrawerOpen(false);
+    };
+    const handleSuccess = (updated)=>{
+        setCurrentAccount(updated);
+    };
+    const Panel = panels[current].component;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-account-grid', container_module.grid),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-account-column', container_module.column),
+                        children: /*#__PURE__*/ jsxs(ContainerSection, {
+                            title: "Profile",
+                            onEdit: openDrawer('update'),
+                            children: [
+                                /*#__PURE__*/ jsxs("p", {
+                                    className: classnames('byline-account-line', container_module.line),
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "muted",
+                                            children: "Email:"
+                                        }),
+                                        " ",
+                                        currentAccount.email
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("p", {
+                                    className: classnames('byline-account-line', container_module.line),
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "muted",
+                                            children: "Given name:"
+                                        }),
+                                        ' ',
+                                        currentAccount.given_name ?? /*#__PURE__*/ jsx("span", {
+                                            className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                            children: "Not set"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("p", {
+                                    className: classnames('byline-account-line', container_module.line),
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "muted",
+                                            children: "Family name:"
+                                        }),
+                                        ' ',
+                                        currentAccount.family_name ?? /*#__PURE__*/ jsx("span", {
+                                            className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                            children: "Not set"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("p", {
+                                    className: classnames('byline-account-cta-line', container_module["cta-line"]),
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "muted",
+                                            children: "Username:"
+                                        }),
+                                        ' ',
+                                        currentAccount.username ?? /*#__PURE__*/ jsx("span", {
+                                            className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                            children: "Not set"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    onClick: openDrawer('update'),
+                                    children: "Edit Profile"
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: classnames('muted', 'byline-account-meta', container_module.meta),
+                                    children: [
+                                        /*#__PURE__*/ jsxs("p", {
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "font-bold",
+                                                    children: "Created:\xa0"
+                                                }),
+                                                /*#__PURE__*/ jsx(LocalDateTime, {
+                                                    value: currentAccount.created_at
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("p", {
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "font-bold",
+                                                    children: "Updated:\xa0"
+                                                }),
+                                                /*#__PURE__*/ jsx(LocalDateTime, {
+                                                    value: currentAccount.updated_at
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("p", {
+                                            className: classnames('byline-account-line', container_module.line),
+                                            children: [
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "font-bold",
+                                                    children: "Last login:\xa0"
+                                                }),
+                                                /*#__PURE__*/ jsx(LocalDateTime, {
+                                                    value: currentAccount.last_login,
+                                                    fallback: "Never"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-account-column', container_module.column),
+                        children: [
+                            /*#__PURE__*/ jsxs(ContainerSection, {
+                                title: "Password",
+                                onEdit: openDrawer('change_password'),
+                                children: [
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: classnames('byline-account-cta-line', container_module["cta-line"]),
+                                        children: "Change the password used to sign in to the admin. You'll need to enter your current password to confirm the change."
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        size: "sm",
+                                        onClick: openDrawer('change_password'),
+                                        children: "Change Password"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(ContainerSection, {
+                                title: "Account Status",
+                                children: [
+                                    /*#__PURE__*/ jsxs("p", {
+                                        className: classnames('byline-account-line', container_module.line),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "muted",
+                                                children: "Super admin:"
+                                            }),
+                                            ' ',
+                                            currentAccount.is_super_admin ? 'Yes' : 'No'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("p", {
+                                        className: classnames('byline-account-line', container_module.line),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "muted",
+                                                children: "Email verified:"
+                                            }),
+                                            ' ',
+                                            currentAccount.is_email_verified ? 'Yes' : 'No'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("p", {
+                                        className: classnames('byline-account-line', container_module.line),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "muted",
+                                                children: "Status:"
+                                            }),
+                                            ' ',
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: currentAccount.is_enabled ? classnames('byline-account-status-on', container_module["status-on"]) : classnames('byline-account-status-off', container_module["status-off"]),
+                                                children: currentAccount.is_enabled ? 'Enabled' : 'Disabled'
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: classnames('muted', 'byline-account-status-help', container_module["status-help"]),
+                                        children: "These flags are managed by an admin with the appropriate permissions and are not self-editable."
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Drawer, {
+                id: "admin-account-drawer",
+                closeOnOverlayClick: false,
+                width: "medium",
+                topOffset: "46px",
+                isOpen: isDrawerOpen,
+                onDismiss: closeDrawer,
+                className: classnames('byline-account-drawer', container_module.drawer),
+                children: /*#__PURE__*/ jsxs(Drawer.Container, {
+                    "aria-hidden": !isDrawerOpen,
+                    className: classnames('byline-account-drawer-body', container_module["drawer-body"]),
+                    children: [
+                        /*#__PURE__*/ jsxs(Drawer.TopActions, {
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    tabIndex: 0,
+                                    className: classnames('byline-account-drawer-skip', container_module["drawer-skip"]),
+                                    children: "no action"
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    "aria-label": "Close",
+                                    size: "sm",
+                                    onClick: closeDrawer,
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        width: "14px",
+                                        height: "14px",
+                                        svgClassName: "white-icon stroke-white"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Drawer.Header, {
+                            children: /*#__PURE__*/ jsx("h2", {
+                                children: panels[current].title
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Drawer.Content, {
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: classnames('byline-account-drawer-scroll', container_module["drawer-scroll"]),
+                                children: /*#__PURE__*/ jsx(Panel, {
+                                    account: currentAccount,
+                                    onClose: closeDrawer,
+                                    onSuccess: handleSuccess
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export { AccountSelfContainer };

package/dist/modules/admin-account/components/container.module.js

@@ -0,0 +1,28 @@
+import "./container_module.css";
+const container_module = {
+    grid: "grid-TDIPZJ",
+    column: "column-RGIay3",
+    section: "section-iYQnMb",
+    "section-head": "section-head-O3uWgR",
+    sectionHead: "section-head-O3uWgR",
+    line: "line-Yue0Yc",
+    "cta-line": "cta-line-JwOIoW",
+    ctaLine: "cta-line-JwOIoW",
+    meta: "meta-CLvEpZ",
+    "status-on": "status-on-_9iyL2",
+    statusOn: "status-on-_9iyL2",
+    "status-off": "status-off-WJAcBy",
+    statusOff: "status-off-WJAcBy",
+    "status-help": "status-help-GVOlMV",
+    statusHelp: "status-help-GVOlMV",
+    "not-set": "not-set-Ek2yXe",
+    notSet: "not-set-Ek2yXe",
+    drawer: "drawer-dDlpic",
+    "drawer-body": "drawer-body-eVTFVC",
+    drawerBody: "drawer-body-eVTFVC",
+    "drawer-scroll": "drawer-scroll-T9DAB_",
+    drawerScroll: "drawer-scroll-T9DAB_",
+    "drawer-skip": "drawer-skip-neMrNH",
+    drawerSkip: "drawer-skip-neMrNH"
+};
+export default container_module;

package/dist/modules/admin-account/components/container_module.css

@@ -0,0 +1,106 @@
+:is(.grid-TDIPZJ, .byline-account-grid) {
+  gap: var(--spacing-16);
+  margin-bottom: var(--spacing-48);
+  flex-direction: column;
+  display: flex;
+}
+
+@media (min-width: 40rem) {
+  :is(.grid-TDIPZJ, .byline-account-grid) {
+    grid-template-columns: 1fr 1fr;
+    display: grid;
+  }
+}
+
+:is(.column-RGIay3, .byline-account-column) {
+  gap: var(--spacing-16);
+  margin-bottom: var(--spacing-16);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.section-iYQnMb, .byline-account-section) {
+  padding: var(--spacing-16);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  background-color: var(--canvas-25);
+  border-radius: var(--border-radius-sm);
+}
+
+:is(.section-head-O3uWgR, .byline-account-section-head) {
+  margin-bottom: var(--spacing-8);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+:is(.line-Yue0Yc, .byline-account-line) {
+  margin-bottom: 0;
+}
+
+:is(.cta-line-JwOIoW, .byline-account-cta-line) {
+  margin-bottom: var(--spacing-12);
+}
+
+:is(.meta-CLvEpZ, .byline-account-meta) {
+  margin-top: var(--spacing-16);
+  font-size: var(--font-size-xs);
+}
+
+:is(.status-on-_9iyL2, .byline-account-status-on) {
+  color: var(--green-600);
+}
+
+:is(.status-off-WJAcBy, .byline-account-status-off) {
+  color: var(--red-600);
+}
+
+:is(.status-help-GVOlMV, .byline-account-status-help) {
+  margin-top: var(--spacing-12);
+  font-size: var(--font-size-xs);
+  margin-bottom: 0;
+}
+
+:is(.not-set-Ek2yXe, .byline-account-not-set) {
+  font-style: italic;
+}
+
+@media (min-width: 48rem) {
+  :is(.drawer-dDlpic, .byline-account-drawer) {
+    width: 500px;
+  }
+}
+
+:is(.drawer-body-eVTFVC, .byline-account-drawer-body) {
+  padding: var(--spacing-8);
+}
+
+:is(.drawer-scroll-T9DAB_, .byline-account-drawer-scroll) {
+  max-height: calc(100vh - 160px);
+  overflow-y: auto;
+}
+
+:is(.drawer-skip-neMrNH, .byline-account-drawer-skip) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:is(:is([data-theme="dark"], .dark) .section-iYQnMb, :is([data-theme="dark"], .dark) .byline-account-section) {
+  border-color: var(--gray-700);
+  background-color: var(--canvas-800);
+}
+
+:is(:is([data-theme="dark"], .dark) .status-on-_9iyL2, :is([data-theme="dark"], .dark) .byline-account-status-on) {
+  color: var(--green-400);
+}
+
+:is(:is([data-theme="dark"], .dark) .status-off-WJAcBy, :is([data-theme="dark"], .dark) .byline-account-status-off) {
+  color: var(--red-400);
+}
+

package/dist/modules/admin-account/components/update.d.ts

@@ -0,0 +1,8 @@
+import type { AccountResponse } from '../index.js';
+interface UpdateAccountProps {
+    account: AccountResponse;
+    onClose?: () => void;
+    onSuccess?: (account: AccountResponse) => void;
+}
+export declare function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProps): import("react").JSX.Element;
+export {};

package/dist/modules/admin-account/components/update.js

@@ -0,0 +1,207 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { revalidateLogic, useForm } from "@tanstack/react-form-start";
+import { Alert, Button, Input, LoaderEllipsis } from "@byline/ui/react";
+import classnames from "classnames";
+import { z } from "zod";
+import { useBylineAdminServices } from "../../../services/admin-services-context.js";
+import update_module from "./update.module.js";
+const updateAccountSchema = z.object({
+    given_name: z.string().max(100, 'Given name must not exceed 100 characters'),
+    family_name: z.string().max(100, 'Family name must not exceed 100 characters'),
+    username: z.string().max(100, 'Username must not exceed 100 characters'),
+    email: z.email({
+        message: 'Enter a valid email address'
+    }).min(3).max(254, 'Email must not exceed 254 characters')
+});
+function defaultsFrom(account) {
+    return {
+        given_name: account.given_name ?? '',
+        family_name: account.family_name ?? '',
+        username: account.username ?? '',
+        email: account.email
+    };
+}
+function buildPatch(values, account) {
+    const patch = {};
+    const normaliseText = (value)=>value.trim().length > 0 ? value : null;
+    const nextGiven = normaliseText(values.given_name);
+    const nextFamily = normaliseText(values.family_name);
+    const nextUsername = normaliseText(values.username);
+    if (nextGiven !== account.given_name) patch.given_name = nextGiven;
+    if (nextFamily !== account.family_name) patch.family_name = nextFamily;
+    if (nextUsername !== account.username) patch.username = nextUsername;
+    if (values.email !== account.email) patch.email = values.email;
+    return patch;
+}
+function UpdateAccount({ account, onClose, onSuccess }) {
+    const { updateAccount } = useBylineAdminServices();
+    const [formError, setFormError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    const form = useForm({
+        defaultValues: defaultsFrom(account),
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change'
+        }),
+        validators: {
+            onDynamic: updateAccountSchema
+        },
+        onSubmit: async ({ value })=>{
+            setFormError(null);
+            setSuccessMessage(null);
+            const patch = buildPatch(value, account);
+            if (0 === Object.keys(patch).length) return void setSuccessMessage('No changes to save.');
+            try {
+                const updated = await updateAccount({
+                    data: {
+                        vid: account.vid,
+                        patch
+                    }
+                });
+                setSuccessMessage('Saved.');
+                onSuccess?.(updated);
+            } catch (err) {
+                const code = getErrorCode(err);
+                if ('admin.users.emailInUse' === code) return void form.setFieldMeta('email', (meta)=>({
+                        ...meta,
+                        errorMap: {
+                            ...meta.errorMap,
+                            onServer: 'This email is already in use.'
+                        },
+                        errors: [
+                            'This email is already in use.'
+                        ]
+                    }));
+                if ('admin.users.versionConflict' === code) return void setFormError('Your account has been modified elsewhere since you opened this form. Reload to refresh and try again.');
+                if ('admin.account.notFound' === code) return void setFormError('Your admin account could not be found. Please sign in again.');
+                setFormError('Could not save changes. Please try again.');
+            }
+        }
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('byline-account-update-wrap', update_module.wrap),
+        children: /*#__PURE__*/ jsxs("form", {
+            noValidate: true,
+            onSubmit: (event)=>{
+                event.preventDefault();
+                event.stopPropagation();
+                form.handleSubmit();
+            },
+            className: classnames('byline-account-update-form', update_module.form),
+            children: [
+                formError ? /*#__PURE__*/ jsx(Alert, {
+                    intent: "danger",
+                    children: formError
+                }) : null,
+                successMessage ? /*#__PURE__*/ jsx(Alert, {
+                    intent: "success",
+                    children: successMessage
+                }) : null,
+                /*#__PURE__*/ jsx(form.Field, {
+                    name: "given_name",
+                    children: (field)=>/*#__PURE__*/ jsx(Input, {
+                            label: "Given name",
+                            id: "given_name",
+                            name: field.name,
+                            value: field.state.value,
+                            onBlur: field.handleBlur,
+                            onChange: (e)=>field.handleChange(e.currentTarget.value),
+                            error: field.state.meta.errors.length > 0,
+                            errorText: firstError(field.state.meta.errors),
+                            autoComplete: "given-name"
+                        })
+                }),
+                /*#__PURE__*/ jsx(form.Field, {
+                    name: "family_name",
+                    children: (field)=>/*#__PURE__*/ jsx(Input, {
+                            label: "Family name",
+                            id: "family_name",
+                            name: field.name,
+                            value: field.state.value,
+                            onBlur: field.handleBlur,
+                            onChange: (e)=>field.handleChange(e.currentTarget.value),
+                            error: field.state.meta.errors.length > 0,
+                            errorText: firstError(field.state.meta.errors),
+                            autoComplete: "family-name"
+                        })
+                }),
+                /*#__PURE__*/ jsx(form.Field, {
+                    name: "username",
+                    children: (field)=>/*#__PURE__*/ jsx(Input, {
+                            label: "Username",
+                            id: "username",
+                            name: field.name,
+                            value: field.state.value,
+                            onBlur: field.handleBlur,
+                            onChange: (e)=>field.handleChange(e.currentTarget.value),
+                            error: field.state.meta.errors.length > 0,
+                            errorText: firstError(field.state.meta.errors),
+                            helpText: "Optional. Leave blank to clear.",
+                            autoComplete: "username"
+                        })
+                }),
+                /*#__PURE__*/ jsx(form.Field, {
+                    name: "email",
+                    children: (field)=>/*#__PURE__*/ jsx(Input, {
+                            label: "Email",
+                            id: "email",
+                            name: field.name,
+                            type: "email",
+                            value: field.state.value,
+                            onBlur: field.handleBlur,
+                            onChange: (e)=>field.handleChange(e.currentTarget.value),
+                            error: field.state.meta.errors.length > 0,
+                            errorText: firstError(field.state.meta.errors),
+                            autoComplete: "email",
+                            required: true
+                        })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('byline-account-update-actions', update_module.actions),
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            type: "button",
+                            intent: "secondary",
+                            size: "sm",
+                            onClick: onClose,
+                            className: classnames('byline-account-update-action', update_module.action),
+                            children: successMessage ? 'Close' : 'Cancel'
+                        }),
+                        /*#__PURE__*/ jsx(form.Subscribe, {
+                            selector: (state)=>({
+                                    canSubmit: state.canSubmit,
+                                    isSubmitting: state.isSubmitting,
+                                    isDirty: state.isDirty
+                                }),
+                            children: ({ canSubmit, isSubmitting })=>/*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "primary",
+                                    type: "submit",
+                                    disabled: !canSubmit || isSubmitting,
+                                    className: classnames('byline-account-update-action', update_module.action),
+                                    children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
+                                        size: 42
+                                    }) : 'Save'
+                                })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function firstError(errors) {
+    for (const err of errors){
+        if ('string' == typeof err) return err;
+        if (err && 'object' == typeof err && 'message' in err) {
+            const msg = err.message;
+            if ('string' == typeof msg) return msg;
+        }
+    }
+}
+function getErrorCode(err) {
+    return 'string' == typeof err?.code ? err.code : null;
+}
+export { UpdateAccount };

package/dist/modules/admin-account/components/update.module.js

@@ -0,0 +1,8 @@
+import "./update_module.css";
+const update_module = {
+    wrap: "wrap-d0Vkmj",
+    form: "form-VjOmD9",
+    actions: "actions-QYTC9w",
+    action: "action-Qs2VUY"
+};
+export default update_module;