@byline/admin 2.5.2 → 2.6.0

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

@@ -1,26 +1,21 @@
 "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 { LocalDateTime } from "@byline/admin/react";
+import { useTranslation } from "@byline/i18n/react";
+import { Button, CloseIcon, Drawer, EditIcon, IconButton } from "@byline/ui/react";
 import classnames from "classnames";
 import { ChangeAccountPassword } from "./change-password.js";
 import container_module from "./container.module.js";
+import { Preferences } from "./preferences.js";
 import { UpdateAccount } from "./update.js";
-const panels = {
-    update: {
-        title: 'Profile',
-        component: UpdateAccount
-    },
-    change_password: {
-        title: 'Change Password',
-        component: ChangeAccountPassword
-    },
-    empty: {
-        title: '',
-        component: ()=>null
-    }
+const panelComponents = {
+    update: UpdateAccount,
+    change_password: ChangeAccountPassword,
+    preferences: Preferences,
+    empty: ()=>null
 };
-function ContainerSection({ title, onEdit, children }) {
+function ContainerSection({ title, onEdit, editAriaLabel, children }) {
     return /*#__PURE__*/ jsxs("div", {
         className: classnames('byline-account-section', container_module.section),
         children: [
@@ -33,7 +28,7 @@ function ContainerSection({ title, onEdit, children }) {
                     onEdit ? /*#__PURE__*/ jsx(IconButton, {
                         variant: "text",
                         onClick: onEdit,
-                        "aria-label": `Edit ${title}`,
+                        "aria-label": editAriaLabel ?? title,
                         children: /*#__PURE__*/ jsx(EditIcon, {
                             width: "20px",
                             height: "20px"
@@ -48,6 +43,7 @@ function ContainerSection({ title, onEdit, children }) {
     });
 }
 function AccountSelfContainer({ account }) {
+    const { t } = useTranslation('byline-admin');
     const [currentAccount, setCurrentAccount] = useState(account);
     const [current, setCurrent] = useState('empty');
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -62,149 +58,204 @@ function AccountSelfContainer({ account }) {
     const handleSuccess = (updated)=>{
         setCurrentAccount(updated);
     };
-    const Panel = panels[current].component;
+    const Panel = panelComponents[current];
+    const panelTitles = {
+        update: t('account.sections.profile'),
+        change_password: t('account.sections.password'),
+        preferences: t('account.sections.preferences'),
+        empty: ''
+    };
+    const editAriaFor = (section)=>t('account.editAriaLabel', {
+            section
+        });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: classnames('byline-account-grid', container_module.grid),
                 children: [
-                    /*#__PURE__*/ jsx("div", {
+                    /*#__PURE__*/ jsxs("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"
-                                                })
-                                            ]
+                        children: [
+                            /*#__PURE__*/ jsxs(ContainerSection, {
+                                title: t('account.sections.profile'),
+                                onEdit: openDrawer('update'),
+                                editAriaLabel: editAriaFor(t('account.sections.profile')),
+                                children: [
+                                    /*#__PURE__*/ jsxs("p", {
+                                        className: classnames('byline-account-line', container_module.line),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "muted",
+                                                children: t('account.profile.emailColon')
+                                            }),
+                                            ' ',
+                                            currentAccount.email
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("p", {
+                                        className: classnames('byline-account-line', container_module.line),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "muted",
+                                                children: t('account.profile.givenName')
+                                            }),
+                                            ' ',
+                                            currentAccount.given_name ?? /*#__PURE__*/ jsx("span", {
+                                                className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                                children: t('common.notSet')
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("p", {
+                                        className: classnames('byline-account-line', container_module.line),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "muted",
+                                                children: t('account.profile.familyName')
+                                            }),
+                                            ' ',
+                                            currentAccount.family_name ?? /*#__PURE__*/ jsx("span", {
+                                                className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                                children: t('common.notSet')
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("p", {
+                                        className: classnames('byline-account-cta-line', container_module["cta-line"]),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "muted",
+                                                children: t('account.profile.username')
+                                            }),
+                                            ' ',
+                                            currentAccount.username ?? /*#__PURE__*/ jsx("span", {
+                                                className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                                children: t('common.notSet')
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        size: "sm",
+                                        onClick: openDrawer('update'),
+                                        children: t('account.profile.editButton')
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: classnames('muted', 'byline-account-meta', container_module.meta),
+                                        children: [
+                                            /*#__PURE__*/ jsxs("p", {
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("span", {
+                                                        className: "font-bold",
+                                                        children: [
+                                                            t('account.profile.created'),
+                                                            "\xa0"
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx(LocalDateTime, {
+                                                        value: currentAccount.created_at
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsxs("p", {
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("span", {
+                                                        className: "font-bold",
+                                                        children: [
+                                                            t('account.profile.updated'),
+                                                            "\xa0"
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx(LocalDateTime, {
+                                                        value: currentAccount.updated_at
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsxs("p", {
+                                                className: classnames('byline-account-line', container_module.line),
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("span", {
+                                                        className: "font-bold",
+                                                        children: [
+                                                            t('account.profile.lastLogin'),
+                                                            "\xa0"
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx(LocalDateTime, {
+                                                        value: currentAccount.last_login,
+                                                        fallback: t('common.never')
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(ContainerSection, {
+                                title: t('account.sections.preferences'),
+                                onEdit: openDrawer('preferences'),
+                                editAriaLabel: editAriaFor(t('account.sections.preferences')),
+                                children: [
+                                    /*#__PURE__*/ jsxs("p", {
+                                        className: classnames('byline-account-line', container_module.line),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "muted",
+                                                children: t('account.preferences.interfaceLanguage')
+                                            }),
+                                            ' ',
+                                            currentAccount.preferred_locale ?? /*#__PURE__*/ jsx("span", {
+                                                className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                                children: t('language.useBrowserDefault')
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: classnames('byline-account-cta-line', container_module["cta-line"]),
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            size: "sm",
+                                            onClick: openDrawer('preferences'),
+                                            children: t('account.preferences.editButton')
                                         })
-                                    ]
-                                })
-                            ]
-                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        className: classnames('muted', 'byline-account-status-help', container_module["status-help"]),
+                                        children: t('account.preferences.help')
+                                    })
+                                ]
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsxs("div", {
                         className: classnames('byline-account-column', container_module.column),
                         children: [
                             /*#__PURE__*/ jsxs(ContainerSection, {
-                                title: "Password",
+                                title: t('account.sections.password'),
                                 onEdit: openDrawer('change_password'),
+                                editAriaLabel: editAriaFor(t('account.sections.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."
+                                        children: t('account.password.intro')
                                     }),
                                     /*#__PURE__*/ jsx(Button, {
                                         size: "sm",
                                         onClick: openDrawer('change_password'),
-                                        children: "Change Password"
+                                        children: t('account.password.editButton')
                                     })
                                 ]
                             }),
                             /*#__PURE__*/ jsxs(ContainerSection, {
-                                title: "Account Status",
+                                title: t('account.sections.status'),
                                 children: [
                                     /*#__PURE__*/ jsxs("p", {
                                         className: classnames('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
-                                                children: "Super admin:"
+                                                children: t('account.status.superAdmin')
                                             }),
                                             ' ',
-                                            currentAccount.is_super_admin ? 'Yes' : 'No'
+                                            currentAccount.is_super_admin ? t('common.boolean.yes') : t('common.boolean.no')
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("p", {
@@ -212,10 +263,10 @@ function AccountSelfContainer({ account }) {
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
-                                                children: "Email verified:"
+                                                children: t('account.status.emailVerified')
                                             }),
                                             ' ',
-                                            currentAccount.is_email_verified ? 'Yes' : 'No'
+                                            currentAccount.is_email_verified ? t('common.boolean.yes') : t('common.boolean.no')
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("p", {
@@ -223,18 +274,18 @@ function AccountSelfContainer({ account }) {
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
-                                                children: "Status:"
+                                                children: t('account.status.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'
+                                                children: currentAccount.is_enabled ? t('account.status.enabled') : t('account.status.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."
+                                        children: t('account.status.help')
                                     })
                                 ]
                             })
@@ -263,7 +314,7 @@ function AccountSelfContainer({ account }) {
                                     children: "no action"
                                 }),
                                 /*#__PURE__*/ jsx(IconButton, {
-                                    "aria-label": "Close",
+                                    "aria-label": t('common.actions.close'),
                                     size: "sm",
                                     onClick: closeDrawer,
                                     children: /*#__PURE__*/ jsx(CloseIcon, {
@@ -276,7 +327,7 @@ function AccountSelfContainer({ account }) {
                         }),
                         /*#__PURE__*/ jsx(Drawer.Header, {
                             children: /*#__PURE__*/ jsx("h2", {
-                                children: panels[current].title
+                                children: panelTitles[current]
                             })
                         }),
                         /*#__PURE__*/ jsx(Drawer.Content, {

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

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

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

@@ -0,0 +1,152 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { revalidateLogic, useForm } from "@tanstack/react-form-start";
+import { getClientConfig } from "@byline/core";
+import { Alert, Button, LoaderEllipsis, Select } from "@byline/ui/react";
+import classnames from "classnames";
+import { z } from "zod";
+import { useBylineAdminServices } from "../../../services/admin-services-context.js";
+import preferences_module from "./preferences.module.js";
+const AUTO_VALUE = '__auto__';
+const preferencesSchema = z.object({
+    locale: z.string().min(1, {
+        message: 'Select a language'
+    })
+});
+function defaultsFrom(account) {
+    return {
+        locale: account.preferred_locale ?? AUTO_VALUE
+    };
+}
+function Preferences({ account, onClose, onSuccess }) {
+    const { setInterfaceLocale } = useBylineAdminServices();
+    const [formError, setFormError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    const localeItems = useMemo(()=>{
+        const { i18n } = getClientConfig();
+        const definitionByCode = new Map((i18n.interface.localeDefinitions ?? []).map((d)=>[
+                d.code,
+                d.nativeName
+            ]));
+        const items = i18n.interface.locales.map((code)=>({
+                value: code,
+                label: definitionByCode.get(code) ?? code
+            }));
+        return [
+            {
+                value: AUTO_VALUE,
+                label: 'Use browser default'
+            },
+            ...items
+        ];
+    }, []);
+    const form = useForm({
+        defaultValues: defaultsFrom(account),
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change'
+        }),
+        validators: {
+            onDynamic: preferencesSchema
+        },
+        onSubmit: async ({ value })=>{
+            setFormError(null);
+            setSuccessMessage(null);
+            const nextLocale = value.locale === AUTO_VALUE ? null : value.locale;
+            if (nextLocale === (account.preferred_locale ?? null)) return void setSuccessMessage('No changes to save.');
+            try {
+                const result = await setInterfaceLocale({
+                    data: {
+                        locale: nextLocale
+                    }
+                });
+                if (null != result.account) {
+                    setSuccessMessage('Saved.');
+                    onSuccess?.(result.account);
+                } else setSuccessMessage('Saved.');
+            } catch  {
+                setFormError('Could not save changes. Please try again.');
+            }
+        }
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('byline-account-preferences-wrap', preferences_module.wrap),
+        children: /*#__PURE__*/ jsxs("form", {
+            noValidate: true,
+            onSubmit: (event)=>{
+                event.preventDefault();
+                event.stopPropagation();
+                form.handleSubmit();
+            },
+            className: classnames('byline-account-preferences-form', preferences_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: "locale",
+                    children: (field)=>/*#__PURE__*/ jsxs("div", {
+                            className: classnames('byline-account-preferences-row', preferences_module.row),
+                            children: [
+                                /*#__PURE__*/ jsx("label", {
+                                    htmlFor: "preferences-locale-select",
+                                    className: classnames('byline-account-preferences-label', preferences_module.label),
+                                    children: "Interface language"
+                                }),
+                                /*#__PURE__*/ jsx(Select, {
+                                    id: "preferences-locale-select",
+                                    size: "sm",
+                                    ariaLabel: "Interface language",
+                                    value: field.state.value,
+                                    items: localeItems,
+                                    onValueChange: (value)=>{
+                                        if (null != value) field.handleChange(value);
+                                    }
+                                }),
+                                /*#__PURE__*/ jsx("p", {
+                                    className: classnames('muted', 'byline-account-preferences-help', preferences_module.help),
+                                    children: 'Choose "Use browser default" to let your browser\'s language settings decide.'
+                                })
+                            ]
+                        })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('byline-account-preferences-actions', preferences_module.actions),
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            type: "button",
+                            intent: "secondary",
+                            size: "sm",
+                            onClick: onClose,
+                            className: classnames('byline-account-preferences-action', preferences_module.action),
+                            children: successMessage ? 'Close' : 'Cancel'
+                        }),
+                        /*#__PURE__*/ jsx(form.Subscribe, {
+                            selector: (state)=>({
+                                    canSubmit: state.canSubmit,
+                                    isSubmitting: state.isSubmitting
+                                }),
+                            children: ({ canSubmit, isSubmitting })=>/*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "primary",
+                                    type: "submit",
+                                    disabled: !canSubmit || isSubmitting,
+                                    className: classnames('byline-account-preferences-action', preferences_module.action),
+                                    children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
+                                        size: 42
+                                    }) : 'Save'
+                                })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { Preferences };

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

@@ -0,0 +1,11 @@
+import "./preferences_module.css";
+const preferences_module = {
+    wrap: "wrap-Z0_u4U",
+    form: "form-vgAqtC",
+    row: "row-v7Li8f",
+    label: "label-Y07C1f",
+    help: "help-pf3pyB",
+    actions: "actions-cxaMe0",
+    action: "action-k1vCLN"
+};
+export default preferences_module;

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

@@ -0,0 +1,41 @@
+:is(.wrap-Z0_u4U, .byline-account-preferences-wrap) {
+  gap: var(--spacing-8);
+  padding: var(--spacing-4);
+  margin-top: var(--spacing-4);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.form-vgAqtC, .byline-account-preferences-form) {
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.row-v7Li8f, .byline-account-preferences-row) {
+  gap: var(--spacing-4);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.label-Y07C1f, .byline-account-preferences-label) {
+  font-weight: 500;
+}
+
+:is(.help-pf3pyB, .byline-account-preferences-help) {
+  font-size: .875rem;
+}
+
+:is(.actions-cxaMe0, .byline-account-preferences-actions) {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+  display: flex;
+}
+
+:is(.action-k1vCLN, .byline-account-preferences-action) {
+  min-width: 4rem;
+}
+