@byline/admin 6.7.2 → 6.8.0

package/dist/modules/auth/components/passkey-manager.js

@@ -0,0 +1,406 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { getAdminConfig } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
+import { Alert, Button, CloseIcon, Drawer, IconButton, Input, InputPassword, Modal } from "@byline/ui/react";
+import { useBylineAdminServices } from "../../../services/admin-services-context.js";
+import { enrollPasskey, passkeyErrorKey, provePasskeyAction } from "./passkey-browser.js";
+import passkey_manager_module from "./passkey-manager.module.js";
+function PasskeyManager({ targetUserId, targetIsSuperAdmin = false, section: Section, ownAccountNotice }) {
+    const { passkeys } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const id = useId();
+    const binding = useRef(null);
+    const [enabled, setEnabled] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [allowed, setAllowed] = useState(false);
+    const [self, setSelf] = useState(false);
+    const [credentials, setCredentials] = useState([]);
+    const [edit, setEdit] = useState(null);
+    const [name, setName] = useState('');
+    const [password, setPassword] = useState('');
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const mounted = useRef(false);
+    useEffect(()=>{
+        let active = true;
+        mounted.current = true;
+        setAllowed(false);
+        setEnabled(false);
+        setLoading(true);
+        setError(null);
+        if (passkeys) (async ()=>{
+            if (!(await passkeys.capability()).enabled || !active) return;
+            setEnabled(true);
+            const captured = passkeys.captureLogin();
+            const page = {
+                ...captured,
+                assertCurrent: ()=>{
+                    if (!active) throw new Error('Passkey page closed');
+                    captured.assertCurrent();
+                }
+            };
+            binding.current = page;
+            const actor = await passkeys.managementContext(page);
+            const isSelf = actor.id === targetUserId;
+            if (!isSelf && (!actor.canManagePasskeys || targetIsSuperAdmin && !actor.isSuperAdmin)) return;
+            page.assertCurrent();
+            setSelf(isSelf);
+            setAllowed(true);
+            const rows = await passkeys.list({
+                data: {
+                    expectedSessionId: page.expectedSessionId,
+                    targetUserId
+                }
+            });
+            page.assertCurrent();
+            setCredentials(rows);
+            setLoading(false);
+        })().catch((error)=>{
+            if (active) setError(passkeyErrorKey(error));
+        });
+        return ()=>{
+            active = false;
+            mounted.current = false;
+            binding.current = null;
+        };
+    }, [
+        passkeys,
+        targetUserId,
+        targetIsSuperAdmin
+    ]);
+    function open(value) {
+        setEdit(value);
+        setName('rename' === value.kind ? value.credential.name : '');
+        setPassword('');
+        setError(null);
+        setNotice(null);
+    }
+    function close() {
+        if (pending) return;
+        setEdit(null);
+        setPassword('');
+        setError(null);
+    }
+    async function perform(usePassword) {
+        const page = binding.current;
+        if (!passkeys || !edit || !page?.expectedSessionId || pending) return;
+        setPending(true);
+        setError(null);
+        const suppliedPassword = usePassword ? password : void 0;
+        setPassword('');
+        try {
+            page.assertCurrent();
+            const expectedSessionId = page.expectedSessionId;
+            if ('rename' === edit.kind) {
+                const updated = await passkeys.rename({
+                    data: {
+                        expectedSessionId,
+                        credentialRecordId: edit.credential.id,
+                        name: name.trim()
+                    }
+                });
+                page.assertCurrent();
+                setCredentials((rows)=>rows.map((row)=>row.id === updated.id ? updated : row));
+                setNotice('passkeys.renamed');
+            } else if ('enroll' === edit.kind) {
+                const created = await enrollPasskey(passkeys, page, name.trim(), suppliedPassword);
+                page.assertCurrent();
+                setCredentials((rows)=>[
+                        ...rows,
+                        created
+                    ]);
+                setNotice('passkeys.added');
+            } else {
+                const grant = await provePasskeyAction(passkeys, page, {
+                    purpose: 'remove',
+                    targetUserId,
+                    credentialRecordId: edit.credential.id
+                }, suppliedPassword);
+                page.assertCurrent();
+                const result = await passkeys.remove({
+                    data: {
+                        expectedSessionId,
+                        grantId: grant.grantId
+                    }
+                });
+                if (result.signedOut) return void window.location.assign(getAdminConfig().routes.signIn);
+                page.assertCurrent();
+                setCredentials((rows)=>rows.filter((row)=>row.id !== edit.credential.id));
+                setNotice('passkeys.removed');
+            }
+            setEdit(null);
+        } catch (error) {
+            if (mounted.current) setError(passkeyErrorKey(error));
+        } finally{
+            if (mounted.current) setPending(false);
+        }
+    }
+    if (!passkeys || !enabled) return null;
+    if (!allowed) return error ? /*#__PURE__*/ jsx(Alert, {
+        intent: "danger",
+        children: t(error)
+    }) : null;
+    const selfService = self && void 0 === ownAccountNotice;
+    const fields = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            error && /*#__PURE__*/ jsx(Alert, {
+                intent: "danger",
+                children: t(error)
+            }),
+            edit?.kind === 'remove' ? /*#__PURE__*/ jsx("p", {
+                children: t('passkeys.removeWarning', {
+                    name: edit.credential.name
+                })
+            }) : /*#__PURE__*/ jsx(Input, {
+                id: `${id}-name`,
+                name: "passkey-name",
+                label: t('passkeys.name'),
+                value: name,
+                maxLength: 80,
+                disabled: pending,
+                onChange: (event)=>setName(event.currentTarget.value)
+            }),
+            edit?.kind !== 'rename' && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        children: t("passkeys.proofDescription")
+                    }),
+                    /*#__PURE__*/ jsx(InputPassword, {
+                        id: `${id}-password`,
+                        name: "passkey-password",
+                        label: t('common.fields.password'),
+                        autoComplete: "current-password",
+                        value: password,
+                        disabled: pending,
+                        onChange: (event)=>setPassword(event.currentTarget.value),
+                        showPasswordLabel: t('common.actions.showPassword'),
+                        hidePasswordLabel: t('common.actions.hidePassword')
+                    })
+                ]
+            }),
+            pending && /*#__PURE__*/ jsx("p", {
+                role: "status",
+                children: t('passkeys.waiting')
+            })
+        ]
+    });
+    const actions = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                type: "button",
+                size: "sm",
+                intent: "noeffect",
+                disabled: pending,
+                onClick: close,
+                children: t('common.actions.cancel')
+            }),
+            edit?.kind === 'rename' ? /*#__PURE__*/ jsx(Button, {
+                type: "button",
+                size: "sm",
+                disabled: pending || !name.trim(),
+                onClick: ()=>void perform(false),
+                children: t('common.actions.save')
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "button",
+                        size: "sm",
+                        disabled: pending || !password || edit?.kind === 'enroll' && !name.trim(),
+                        onClick: ()=>void perform(true),
+                        children: t('passkeys.usePassword')
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "button",
+                        size: "sm",
+                        disabled: pending || edit?.kind === 'enroll' && !name.trim(),
+                        onClick: ()=>void perform(false),
+                        children: t('passkeys.usePasskey')
+                    })
+                ]
+            })
+        ]
+    });
+    const body = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            self && void 0 !== ownAccountNotice ? ownAccountNotice : /*#__PURE__*/ jsx("p", {
+                children: t(selfService ? "passkeys.description" : "passkeys.recoveryDescription")
+            }),
+            !edit && error && /*#__PURE__*/ jsx(Alert, {
+                intent: "danger",
+                children: t(error)
+            }),
+            notice && /*#__PURE__*/ jsx("p", {
+                role: "status",
+                children: t(notice)
+            }),
+            loading ? /*#__PURE__*/ jsx("p", {
+                role: "status",
+                children: t('common.loading')
+            }) : 0 === credentials.length ? /*#__PURE__*/ jsx("p", {
+                className: passkey_manager_module.empty,
+                children: t('passkeys.empty')
+            }) : /*#__PURE__*/ jsx("ul", {
+                className: passkey_manager_module.list,
+                children: credentials.map((credential)=>/*#__PURE__*/ jsxs("li", {
+                        className: passkey_manager_module.row,
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("strong", {
+                                        children: credential.name
+                                    }),
+                                    /*#__PURE__*/ jsxs("p", {
+                                        children: [
+                                            t('passkeys.lastUsed'),
+                                            ":",
+                                            ' ',
+                                            credential.lastUsedAt ? new Date(credential.lastUsedAt).toLocaleString() : t('common.never')
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: passkey_manager_module.actions,
+                                children: [
+                                    selfService && /*#__PURE__*/ jsx(Button, {
+                                        type: "button",
+                                        size: "sm",
+                                        variant: "text",
+                                        onClick: ()=>open({
+                                                kind: 'rename',
+                                                credential
+                                            }),
+                                        "aria-label": t('passkeys.renameNamed', {
+                                            name: credential.name
+                                        }),
+                                        children: t('passkeys.rename')
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        type: "button",
+                                        size: "sm",
+                                        intent: "danger",
+                                        variant: "text",
+                                        onClick: ()=>open({
+                                                kind: 'remove',
+                                                credential
+                                            }),
+                                        "aria-label": t('passkeys.removeNamed', {
+                                            name: credential.name
+                                        }),
+                                        children: t('passkeys.remove')
+                                    })
+                                ]
+                            })
+                        ]
+                    }, credential.id))
+            }),
+            selfService && /*#__PURE__*/ jsx(Button, {
+                type: "button",
+                size: "sm",
+                disabled: loading,
+                onClick: ()=>open({
+                        kind: 'enroll'
+                    }),
+                className: passkey_manager_module.add,
+                children: t('passkeys.add')
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                isOpen: edit?.kind === 'remove',
+                onDismiss: close,
+                closeOnOverlayClick: false,
+                ariaLabel: t('passkeys.remove'),
+                children: /*#__PURE__*/ jsxs(Modal.Container, {
+                    className: `byline-passkey-modal ${passkey_manager_module.modal}`,
+                    children: [
+                        /*#__PURE__*/ jsx(Modal.Header, {
+                            children: /*#__PURE__*/ jsx("h2", {
+                                children: t('passkeys.remove')
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Modal.Content, {
+                            children: fields
+                        }),
+                        /*#__PURE__*/ jsx(Modal.Actions, {
+                            className: `byline-passkey-modal-actions ${passkey_manager_module["modal-actions"]}`,
+                            children: actions
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Drawer, {
+                id: `${id}-passkey-drawer`,
+                closeOnOverlayClick: false,
+                width: "medium",
+                topOffset: "46px",
+                isOpen: null !== edit && 'remove' !== edit.kind,
+                onDismiss: close,
+                className: `byline-passkey-drawer ${passkey_manager_module.drawer}`,
+                children: /*#__PURE__*/ jsxs(Drawer.Container, {
+                    "aria-hidden": null === edit || 'remove' === edit.kind,
+                    className: `byline-passkey-drawer-body ${passkey_manager_module["drawer-body"]}`,
+                    children: [
+                        /*#__PURE__*/ jsxs(Drawer.TopActions, {
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    tabIndex: 0,
+                                    className: passkey_manager_module["drawer-skip"],
+                                    children: "no action"
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    "aria-label": t('common.actions.close'),
+                                    size: "sm",
+                                    onClick: close,
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        width: "14px",
+                                        height: "14px",
+                                        svgClassName: "white-icon stroke-white"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Drawer.Header, {
+                            children: /*#__PURE__*/ jsx("h2", {
+                                children: t(edit?.kind === 'rename' ? 'passkeys.rename' : 'passkeys.add')
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Drawer.Content, {
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: `byline-passkey-drawer-form ${passkey_manager_module["drawer-form"]}`,
+                                children: [
+                                    fields,
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: `byline-passkey-drawer-actions ${passkey_manager_module["drawer-actions"]} ${passkey_manager_module["modal-actions"]}`,
+                                        children: actions
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+    if (Section) return /*#__PURE__*/ jsx(Section, {
+        title: t('passkeys.title'),
+        children: /*#__PURE__*/ jsx("div", {
+            className: "byline-passkey-manager",
+            children: body
+        })
+    });
+    return /*#__PURE__*/ jsxs("section", {
+        className: `byline-passkey-manager ${passkey_manager_module.manager}`,
+        "aria-labelledby": `${id}-title`,
+        children: [
+            /*#__PURE__*/ jsx("h2", {
+                id: `${id}-title`,
+                children: t('passkeys.title')
+            }),
+            body
+        ]
+    });
+}
+export { PasskeyManager };

package/dist/modules/auth/components/passkey-manager.module.js

@@ -0,0 +1,22 @@
+import "./passkey-manager_module.css";
+const passkey_manager_module = {
+    manager: "manager-mPrpUs",
+    list: "list-Mb1OlA",
+    empty: "empty-pDRaVX",
+    add: "add-Mmfyxh",
+    row: "row-We5Ooj",
+    actions: "actions-Cu2Zmf",
+    modal: "modal-T_EV6A",
+    "drawer-body": "drawer-body-GlBpJK",
+    drawerBody: "drawer-body-GlBpJK",
+    "drawer-form": "drawer-form-Qi9gs0",
+    drawerForm: "drawer-form-Qi9gs0",
+    "drawer-actions": "drawer-actions-wJGh5j",
+    drawerActions: "drawer-actions-wJGh5j",
+    "drawer-skip": "drawer-skip-Vzeo1m",
+    drawerSkip: "drawer-skip-Vzeo1m",
+    "modal-actions": "modal-actions-j4wk2d",
+    modalActions: "modal-actions-j4wk2d",
+    drawer: "drawer-pc4pSE"
+};
+export default passkey_manager_module;

package/dist/modules/auth/components/passkey-manager_module.css

@@ -0,0 +1,104 @@
+.manager-mPrpUs {
+  border: 1px solid var(--border-color, #8885);
+  border-radius: .5rem;
+  padding: 1.25rem;
+}
+
+.list-Mb1OlA {
+  margin: 1rem 0;
+  padding: 0;
+  list-style: none;
+}
+
+.empty-pDRaVX + .add-Mmfyxh {
+  margin-top: .25rem;
+}
+
+.row-We5Ooj {
+  border-bottom: 1px solid var(--border-color, #8885);
+  overflow-wrap: anywhere;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: .75rem;
+  padding: .75rem 0;
+  display: flex;
+}
+
+.row-We5Ooj p {
+  margin: .25rem 0;
+  font-size: .875rem;
+}
+
+.actions-Cu2Zmf {
+  flex-wrap: wrap;
+  gap: .5rem;
+  display: flex;
+}
+
+.modal-T_EV6A {
+  width: calc(100% - 2 * var(--spacing-8));
+  max-width: 540px;
+  margin-bottom: var(--spacing-8);
+}
+
+.drawer-body-GlBpJK {
+  padding: var(--spacing-8);
+}
+
+.drawer-form-Qi9gs0 {
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+  flex-direction: column;
+  display: flex;
+}
+
+.drawer-actions-wJGh5j {
+  justify-content: flex-end;
+  gap: var(--spacing-12);
+  margin-top: var(--spacing-8);
+  display: flex;
+}
+
+.drawer-skip-Vzeo1m {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.modal-actions-j4wk2d {
+  flex-direction: column-reverse;
+  align-items: stretch;
+}
+
+@media (max-width: 39.99rem) {
+  .modal-actions-j4wk2d > * {
+    min-height: 2.5rem;
+  }
+}
+
+@media (min-width: 40rem) {
+  .modal-T_EV6A {
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+  .modal-actions-j4wk2d {
+    align-items: center;
+    gap: var(--spacing-8);
+    flex-flow: wrap;
+  }
+}
+
+@media (min-width: 48rem) {
+  .drawer-pc4pSE {
+    width: 540px;
+  }
+}
+

package/dist/modules/auth/components/sign-in-form.js

@@ -1,20 +1,52 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { getAdminConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
-import { Alert, Button, Card, Input, InputPassword, LoaderEllipsis } from "@byline/ui/react";
+import { Alert, Button, Card, Input, InputPassword, LoaderEllipsis, PasskeyIcon } from "@byline/ui/react";
 import clsx from "clsx";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import { normalizeRootRelativeRedirect, resolveSignInFormRedirect } from "../safe-redirect.js";
+import { passkeyErrorKey, signInWithPasskey } from "./passkey-browser.js";
 import sign_in_form_module from "./sign-in-form.module.js";
 function SignInForm({ redirectTo, homeUrl }) {
-    const { adminSignIn } = useBylineAdminServices();
+    const { adminSignIn, passkeys } = useBylineAdminServices();
     const { t } = useTranslation('byline-admin');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [pending, setPending] = useState(false);
     const [error, setError] = useState(null);
+    const mounted = useRef(false);
+    const [passkeysEnabled, setPasskeysEnabled] = useState(false);
+    useEffect(()=>{
+        let active = true;
+        mounted.current = true;
+        passkeys?.capability().then(({ enabled })=>{
+            if (active) setPasskeysEnabled(enabled);
+        }).catch(()=>{});
+        return ()=>{
+            active = false;
+            mounted.current = false;
+        };
+    }, [
+        passkeys
+    ]);
+    async function handlePasskey() {
+        if (!passkeys || pending) return;
+        setPending(true);
+        setError(null);
+        try {
+            await signInWithPasskey(passkeys, ()=>mounted.current);
+        } catch (error) {
+            if (mounted.current) {
+                setError(t(passkeyErrorKey(error)));
+                setPending(false);
+            }
+            return;
+        }
+        const destination = resolveSignInFormRedirect(redirectTo, getAdminConfig().routes.admin);
+        window.location.assign(normalizeRootRelativeRedirect(destination) ?? '/');
+    }
     async function handleSubmit(event) {
         event.preventDefault();
         if (pending) return;
@@ -115,6 +147,33 @@ function SignInForm({ redirectTo, homeUrl }) {
                         })
                     ]
                 })
+            }),
+            passkeysEnabled && /*#__PURE__*/ jsxs(Card.Footer, {
+                className: clsx('byline-sign-in-alternate', sign_in_form_module.alternate),
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: clsx('byline-sign-in-divider', sign_in_form_module.divider),
+                        children: /*#__PURE__*/ jsx("span", {
+                            children: t('auth.signIn.alternate')
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Button, {
+                        type: "button",
+                        variant: "outlined",
+                        disabled: pending,
+                        onClick: handlePasskey,
+                        className: clsx('byline-passkey-sign-in-button', sign_in_form_module["passkey-button"]),
+                        children: [
+                            /*#__PURE__*/ jsx(PasskeyIcon, {
+                                width: "20px",
+                                height: "20px"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: t('passkeys.signIn')
+                            })
+                        ]
+                    })
+                ]
             })
         ]
     });

package/dist/modules/auth/components/sign-in-form.module.js

@@ -7,6 +7,10 @@ const sign_in_form_module = {
     actions: "actions-bVKfoJ",
     "home-link": "home-link-YfGVyd",
     homeLink: "home-link-YfGVyd",
-    button: "button-paNjW_"
+    button: "button-paNjW_",
+    alternate: "alternate-bC6QfW",
+    divider: "divider-QyDRIH",
+    "passkey-button": "passkey-button-LpEiWc",
+    passkeyButton: "passkey-button-LpEiWc"
 };
 export default sign_in_form_module;

package/dist/modules/auth/components/sign-in-form_module.css

@@ -39,3 +39,43 @@
   margin-left: auto;
 }
 
+:is(.alternate-bC6QfW, .byline-sign-in-alternate) {
+  align-items: stretch;
+  gap: var(--spacing-16);
+  padding-bottom: var(--spacing-24);
+  flex-direction: column;
+}
+
+:is(.divider-QyDRIH, .byline-sign-in-divider) {
+  align-items: center;
+  gap: var(--spacing-12);
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  display: flex;
+}
+
+.divider-QyDRIH:before, .divider-QyDRIH:after {
+  content: "";
+  border-top: var(--border-width-thin) var(--border-style-solid) var(--border-color, #8885);
+  flex: 1;
+}
+
+.byline-sign-in-divider:before {
+  content: "";
+  border-top: var(--border-width-thin) var(--border-style-solid) var(--border-color, #8885);
+  flex: 1;
+}
+
+.byline-sign-in-divider:after {
+  content: "";
+  border-top: var(--border-width-thin) var(--border-style-solid) var(--border-color, #8885);
+  flex: 1;
+}
+
+:is(.passkey-button-LpEiWc, .byline-passkey-sign-in-button) {
+  gap: var(--spacing-8);
+  width: 100%;
+}
+