@byline/admin 6.7.2 → 6.9.0

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

@@ -0,0 +1,118 @@
+import { browserSupportsWebAuthn, startAuthentication, startRegistration } from "@simplewebauthn/browser";
+function ready(binding, expiresAt) {
+    binding.assertCurrent();
+    if (expiresAt && Date.parse(expiresAt) <= Date.now()) throw Object.assign(new Error('Expired ceremony'), {
+        code: 'ERR_INVALID_TOKEN'
+    });
+}
+function supported() {
+    if (!browserSupportsWebAuthn()) throw Object.assign(new Error('WebAuthn unavailable'), {
+        code: 'PASSKEY_UNSUPPORTED'
+    });
+}
+async function signInWithPasskey(services, isActive = ()=>true) {
+    supported();
+    const captured = services.captureLogin(true);
+    const binding = {
+        ...captured,
+        assertCurrent: ()=>{
+            if (!isActive()) throw new Error('Sign-in page closed');
+            captured.assertCurrent();
+        }
+    };
+    const ceremony = await services.signInOptions({
+        data: {}
+    });
+    ready(binding, ceremony.expiresAt);
+    const response = await startAuthentication({
+        optionsJSON: ceremony.options
+    });
+    ready(binding, ceremony.expiresAt);
+    return services.signIn({
+        data: {
+            ceremonyId: ceremony.ceremonyId,
+            response
+        }
+    }, binding);
+}
+async function provePasskeyAction(services, binding, action, password) {
+    ready(binding);
+    const expectedSessionId = binding.expectedSessionId;
+    if (!expectedSessionId) throw Object.assign(new Error('Login changed'), {
+        code: 'ERR_SESSION_CHANGED'
+    });
+    if (void 0 !== password) {
+        const grant = await services.passwordProof({
+            data: {
+                expectedSessionId,
+                action,
+                password
+            }
+        });
+        ready(binding, grant.expiresAt);
+        return grant;
+    }
+    supported();
+    const ceremony = await services.proofOptions({
+        data: {
+            expectedSessionId,
+            action
+        }
+    });
+    ready(binding, ceremony.expiresAt);
+    const response = await startAuthentication({
+        optionsJSON: ceremony.options
+    });
+    ready(binding, ceremony.expiresAt);
+    const grant = await services.proof({
+        data: {
+            expectedSessionId,
+            ceremonyId: ceremony.ceremonyId,
+            response
+        }
+    });
+    ready(binding, grant.expiresAt);
+    return grant;
+}
+async function enrollPasskey(services, binding, name, password) {
+    supported();
+    const grant = await provePasskeyAction(services, binding, {
+        purpose: 'enroll'
+    }, password);
+    const expectedSessionId = binding.expectedSessionId;
+    const ceremony = await services.enrollmentOptions({
+        data: {
+            expectedSessionId,
+            grantId: grant.grantId
+        }
+    });
+    ready(binding, ceremony.expiresAt);
+    const response = await startRegistration({
+        optionsJSON: ceremony.options
+    });
+    ready(binding, ceremony.expiresAt);
+    return services.enrollment({
+        data: {
+            expectedSessionId,
+            ceremonyId: ceremony.ceremonyId,
+            response,
+            name
+        }
+    });
+}
+function passkeyErrorKey(error) {
+    const value = error;
+    const name = value?.cause?.name ?? value?.name;
+    if ('AbortError' === name || 'NotAllowedError' === name || value?.code === 'ERROR_CEREMONY_ABORTED') return 'passkeys.errors.cancelled';
+    if ('ConstraintError' === name || 'NotSupportedError' === name || value?.code === 'PASSKEY_UNSUPPORTED' || value?.code?.startsWith('ERROR_AUTHENTICATOR_MISSING_') || value?.code === 'ERROR_AUTHENTICATOR_NO_SUPPORTED_PUBKEYCREDPARAMS_ALG') return 'passkeys.errors.unsupported';
+    if ('UnknownError' === name || value?.code === 'ERROR_AUTHENTICATOR_GENERAL_ERROR') return 'passkeys.errors.device';
+    if (value?.code === 'ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED') return 'passkeys.errors.duplicate';
+    if (value?.code === 'ERR_INVALID_TOKEN') return 'passkeys.errors.expired';
+    if (value?.code === 'ERR_SESSION_CHANGED') return 'passkeys.errors.sessionChanged';
+    if (value?.code === 'ERR_PASSKEY_LIMIT') return 'passkeys.errors.limit';
+    if (value?.code === 'ERR_FORBIDDEN') return 'passkeys.errors.forbidden';
+    if (value?.code === 'ERR_INVALID_CREDENTIALS') return 'passkeys.errors.proof';
+    if (value?.status === 429) return 'passkeys.errors.rateLimited';
+    return 'passkeys.errors.unavailable';
+}
+export { enrollPasskey, passkeyErrorKey, provePasskeyAction, signInWithPasskey };

package/dist/modules/auth/components/passkey-browser.test.node.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modules/auth/components/passkey-manager.d.ts

@@ -0,0 +1,26 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type React from 'react';
+/** A host page's card component, so the passkey panel matches the cards around it. */
+type PasskeySectionComponent = React.ComponentType<{
+    title: string;
+    children: React.ReactNode;
+}>;
+export declare function PasskeyManager({ targetUserId, targetIsSuperAdmin, section: Section, ownAccountNotice, }: {
+    targetUserId: string;
+    targetIsSuperAdmin?: boolean;
+    /** Renders the panel inside the page's own card; defaults to a standalone card. */
+    section?: PasskeySectionComponent;
+    /**
+     * Admin screens pass this to keep the admin (recovery) view even when the
+     * target is the signed-in user; it replaces the description in that case,
+     * typically pointing the user to their own account page.
+     */
+    ownAccountNotice?: React.ReactNode;
+}): React.JSX.Element | null;
+export {};

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