@atlasauth/vue 0.8.0 → 0.9.0

package/dist/components.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OrganizationProfile = exports.UserProfile = exports.OrganizationSwitcher = exports.UserButton = exports.SignUp = exports.SignIn = exports.Protect = exports.AtlasLoaded = exports.AtlasLoading = exports.SignedOut = exports.SignedIn = void 0;
+exports.OrganizationAuditLog = exports.OrganizationProfile = exports.UserProfile = exports.OrganizationSwitcher = exports.ImpersonationBanner = exports.UserButton = exports.SignUp = exports.SignIn = exports.Protect = exports.AtlasLoaded = exports.AtlasLoading = exports.SignedOut = exports.SignedIn = void 0;
 const vue_1 = require("vue");
 const js_1 = require("@atlasauth/js");
 const context_1 = require("./context");
@@ -141,6 +141,17 @@ function slotRef(controller) {
  * Every branch comes from `nextStep`, which is exhaustive — including the
  * `unknown` case, which renders an honest message instead of nothing.
  */
+/** The recovery codes in two columns, monospaced. */
+const RECOVERY_LIST_STYLE = {
+    listStyle: 'none',
+    padding: '0',
+    margin: '8px 0 12px',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+    gap: '6px',
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+    textAlign: 'center',
+};
 const AttemptFlow = (0, vue_1.defineComponent)({
     name: 'AttemptFlow',
     props: {
@@ -171,6 +182,43 @@ const AttemptFlow = (0, vue_1.defineComponent)({
             type: Function,
             default: undefined,
         },
+        /**
+         * "Email me a code instead" at the second factor (the instance's
+         * `account.emailSecondFactor`). Without it the step asks for the code only.
+         */
+        onEmailSecondFactor: {
+            type: Function,
+            default: undefined,
+        },
+        /**
+         * "Text me a code instead" at the second factor (where the app offers
+         * texted codes). Without it the step offers no texted code.
+         */
+        onSmsSecondFactor: {
+            type: Function,
+            default: undefined,
+        },
+        /**
+         * The MFA enrolment step (`useFlow().enrollment` and its state): the
+         * authenticator app's QR code and setup key, or a texted code. Without it
+         * the step asks for two authenticator codes only.
+         */
+        enrollment: { type: Object, default: null },
+        enrollmentState: { type: Object, default: null },
+        /**
+         * The instance's `account.emailVerification`. On `link` a sign-up's
+         * verification step has nothing to type: it says to open the emailed link
+         * while the flow polls, and offers a resend ({@link onResend}).
+         */
+        emailVerification: { type: String, default: 'code' },
+        onResend: { type: Function, default: undefined },
+        /**
+         * The recovery codes an MFA enrolment just completed the sign-in with
+         * (`pendingRecoveryCodes(state)`): drawn once instead of the form, and
+         * "I've saved my codes" calls {@link onRecoveryCodesSaved} to finish.
+         */
+        recoveryCodes: { type: Array, default: null },
+        onRecoveryCodesSaved: { type: Function, default: undefined },
     },
     setup(props) {
         const t = useText();
@@ -180,8 +228,14 @@ const AttemptFlow = (0, vue_1.defineComponent)({
         // The first factor the user picked: the password field by default, or the
         // code field / "check your email" once an emailed code / link was sent.
         const factor = (0, vue_1.ref)('password');
+        // "Email me a code instead" at the second factor: where it went, or why not.
+        const emailed = (0, vue_1.ref)({});
+        // "Text me a code instead": the same, for the texted code.
+        const texted = (0, vue_1.ref)({});
         (0, vue_1.watch)(() => props.attempt?.id, () => {
             factor.value = 'password';
+            emailed.value = {};
+            texted.value = {};
         });
         // The first factors on offer for the current step, and the plan for them:
         // a password field only when the server offers `password` (planFirstFactor).
@@ -218,12 +272,13 @@ const AttemptFlow = (0, vue_1.defineComponent)({
                 void send(strategy);
             },
         }, t(labelKey));
-        const field = (name, labelKey, type = 'text') => (0, vue_1.h)('label', { class: 'atlas-field', key: name }, [
+        const field = (name, labelKey, type = 'text', autocomplete) => (0, vue_1.h)('label', { class: 'atlas-field', key: name }, [
             (0, vue_1.h)('span', t(labelKey)),
             (0, vue_1.h)('input', {
                 class: cls('formFieldInput', 'atlas-input'),
                 type,
                 name,
+                ...(autocomplete ? { autocomplete } : {}),
                 value: values[name] ?? '',
                 onInput: (event) => {
                     values[name] = event.target.value;
@@ -233,6 +288,69 @@ const AttemptFlow = (0, vue_1.defineComponent)({
                 .filter((error) => error.param === name)
                 .map((error) => (0, vue_1.h)('span', { class: cls('formFieldError', 'atlas-error'), key: error.code }, errorText(error))),
         ]);
+        /**
+         * The enrolment step: the method choice, the authenticator's QR code and
+         * setup key with its code field(s), or the phone number then the texted code.
+         */
+        const enrollmentFields = (enrol, s) => {
+            const out = [];
+            const methodButton = (m, key) => (0, vue_1.h)('button', {
+                key,
+                class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                type: 'button',
+                'data-atlas-mfa-method': m,
+                disabled: props.busy || s.busy,
+                onClick: () => {
+                    for (const k of Object.keys(values))
+                        delete values[k];
+                    void enrol.choose(m);
+                },
+            }, t(m === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption'));
+            if (s.method === null) {
+                out.push((0, vue_1.h)('p', { key: 'choose', class: 'atlas-text' }, t('mfa.enrollChoose')));
+                for (const m of s.options)
+                    out.push(methodButton(m, `method-${m}`));
+            }
+            else if (s.method === 'totp') {
+                const e = s.enrollment;
+                if (!e) {
+                    out.push((0, vue_1.h)('p', { key: 'preparing', class: 'atlas-text', 'aria-live': 'polite' }, s.busy ? t('mfa.enrollPreparing') : ''));
+                }
+                else {
+                    out.push((0, vue_1.h)('p', { key: 'scan', class: 'atlas-text' }, t('mfa.enrollScan')));
+                    if (e.qrCode) {
+                        out.push((0, vue_1.h)('img', { key: 'qr', class: 'atlas-mfa-qr', 'data-atlas': 'mfa-qr', src: e.qrCode, alt: t('mfa.enrollQrAlt'), width: 180, height: 180 }));
+                    }
+                    if (e.secret) {
+                        out.push((0, vue_1.h)('p', { key: 'secret', class: 'atlas-text', 'data-atlas': 'mfa-setup-key' }, [`${t('mfa.enrollSetupKey')}: `, (0, vue_1.h)('code', (0, js_1.groupSetupKey)(e.secret))]));
+                    }
+                    out.push(field('code', 'mfa.enrollFirstCodeLabel', 'text', 'one-time-code'));
+                    if (s.totpCodes >= 2)
+                        out.push(field('secondCode', 'mfa.enrollSecondCodeLabel', 'text', 'one-time-code'));
+                }
+            }
+            else if (!s.enrollment) {
+                out.push(field('phone', 'mfa.phoneLabel', 'tel', 'tel'), (0, vue_1.h)('p', { key: 'phone-hint', class: 'atlas-text' }, t('mfa.phoneHint')));
+            }
+            else {
+                out.push((0, vue_1.h)('p', { key: 'texted', class: 'atlas-text', 'data-atlas': 'mfa-code-texted', 'aria-live': 'polite' }, t('mfa.codeTextedTo', { phone: s.enrollment.phone ?? '' })), field('code', 'mfa.codeLabel', 'text', 'one-time-code'), (0, vue_1.h)('button', {
+                    key: 'resend',
+                    class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                    type: 'button',
+                    'data-atlas-resend': '',
+                    disabled: props.busy || s.busy,
+                    onClick: () => void enrol.resend(),
+                }, t('signIn.resendCode')));
+            }
+            for (const error of s.errors) {
+                out.push((0, vue_1.h)('p', { key: `enrol-error-${error.code}-${error.param ?? ''}`, class: cls('formFieldError', 'atlas-error'), role: 'alert' }, error.message));
+            }
+            if (s.method !== null && s.options.length > 1) {
+                const other = s.options.find((m) => m !== s.method);
+                out.push(methodButton(other, 'switch'));
+            }
+            return out;
+        };
         const fields = (step) => {
             switch (step.kind) {
                 case 'collect_identifier':
@@ -287,9 +405,59 @@ const AttemptFlow = (0, vue_1.defineComponent)({
                         offered.includes('email_link') ? emailChoice('email_link', 'signIn.useEmailLink') : null,
                     ].filter((node) => node !== null);
                 }
-                case 'collect_second_factor':
-                    return [field('code', 'mfa.codeLabel')];
+                case 'collect_second_factor': {
+                    const out = [field('code', 'mfa.codeLabel')];
+                    if (props.onSmsSecondFactor) {
+                        const state = texted.value;
+                        if (state.sentTo !== undefined) {
+                            out.push((0, vue_1.h)('p', { key: 'sms-2fa-sent', class: 'atlas-text', 'data-atlas': 'sms-second-factor-sent', 'aria-live': 'polite' }, t('mfa.codeTextedTo', { phone: state.sentTo })));
+                        }
+                        else {
+                            out.push((0, vue_1.h)('button', {
+                                key: 'sms-2fa',
+                                class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                                type: 'button',
+                                'data-atlas': 'sms-second-factor',
+                                disabled: props.busy || state.busy,
+                                onClick: () => {
+                                    texted.value = { busy: true };
+                                    void props.onSmsSecondFactor().then((r) => {
+                                        texted.value = r.error ? { error: r.error } : { sentTo: r.sentTo ?? '' };
+                                    });
+                                },
+                            }, state.busy ? t('signIn.sending') : t('mfa.smsCodeOption')));
+                            if (state.error)
+                                out.push((0, vue_1.h)('p', { key: 'sms-2fa-error', class: cls('formFieldError', 'atlas-error'), role: 'alert' }, state.error));
+                        }
+                    }
+                    if (props.onEmailSecondFactor) {
+                        const state = emailed.value;
+                        if (state.sentTo !== undefined) {
+                            out.push((0, vue_1.h)('p', { key: 'email-2fa-sent', class: 'atlas-text', 'data-atlas': 'email-second-factor-sent', 'aria-live': 'polite' }, t('signIn.codeSentTo', { email: state.sentTo })));
+                        }
+                        else {
+                            out.push((0, vue_1.h)('button', {
+                                key: 'email-2fa',
+                                class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                                type: 'button',
+                                'data-atlas': 'email-second-factor',
+                                disabled: props.busy || state.busy,
+                                onClick: () => {
+                                    emailed.value = { busy: true };
+                                    void props.onEmailSecondFactor().then((r) => {
+                                        emailed.value = r.error ? { error: r.error } : { sentTo: r.sentTo ?? '' };
+                                    });
+                                },
+                            }, state.busy ? t('signIn.sending') : t('signIn.emailCodeOption')));
+                            if (state.error)
+                                out.push((0, vue_1.h)('p', { key: 'email-2fa-error', class: cls('formFieldError', 'atlas-error'), role: 'alert' }, state.error));
+                        }
+                    }
+                    return out;
+                }
                 case 'enroll_second_factor':
+                    if (props.enrollment && props.enrollmentState)
+                        return enrollmentFields(props.enrollment, props.enrollmentState);
                     // Two codes, not one. §5.6 wants consecutive codes so a phone with a
                     // fast clock fails here rather than on every sign-in afterwards.
                     return [
@@ -297,6 +465,22 @@ const AttemptFlow = (0, vue_1.defineComponent)({
                         field('secondCode', 'mfa.enrollSecondCodeLabel'),
                     ];
                 case 'collect_email_code':
+                    if ((0, js_1.awaitingSignUpLink)(props.attempt, props.emailVerification)) {
+                        // Nothing to type: the flow polls until the emailed link is opened (anywhere).
+                        return [
+                            (0, vue_1.h)('p', { key: 'link-sent', class: 'atlas-text', 'data-atlas-link-sent': '', 'aria-live': 'polite' }, t('signUp.linkSentTo', { email: props.attempt?.identifier ?? '' })),
+                            props.onResend
+                                ? (0, vue_1.h)('button', {
+                                    key: 'resend',
+                                    class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                                    type: 'button',
+                                    'data-atlas-resend': '',
+                                    disabled: props.busy,
+                                    onClick: () => void props.onResend(),
+                                }, t('signIn.resendLink'))
+                                : null,
+                        ].filter((node) => node !== null);
+                    }
                     return [field('code', 'signIn.emailCodeLabel')];
                 case 'collect_new_password':
                     return [field('password', 'reset.newPasswordLabel', 'password')];
@@ -325,7 +509,53 @@ const AttemptFlow = (0, vue_1.defineComponent)({
                     ];
             }
         };
+        // The recovery codes: copied once ("Copied."), reset for a new set.
+        const codesCopied = (0, vue_1.ref)(false);
+        (0, vue_1.watch)(() => props.recoveryCodes, () => {
+            codesCopied.value = false;
+        });
+        const recoveryCodesCard = (codes, onSaved) => {
+            const canCopy = typeof navigator !== 'undefined' && !!navigator.clipboard?.writeText;
+            const secondary = cls('formButtonSecondary', 'atlas-button-secondary');
+            return (0, vue_1.h)('div', { class: cls('card', 'atlas-card'), 'data-atlas': 'recovery-codes' }, [
+                (0, vue_1.h)('h1', { class: cls('headerTitle', 'atlas-title') }, t('mfa.recoveryCodesTitle')),
+                (0, vue_1.h)('p', { class: 'atlas-text' }, t('mfa.recoveryCodesHelp')),
+                (0, vue_1.h)('ul', {
+                    class: 'atlas-recovery-codes',
+                    'data-atlas': 'recovery-codes-list',
+                    style: RECOVERY_LIST_STYLE,
+                }, codes.map((code) => (0, vue_1.h)('li', { key: code }, [(0, vue_1.h)('code', null, code)]))),
+                (0, vue_1.h)('div', { class: 'atlas-alternatives' }, [
+                    canCopy
+                        ? (0, vue_1.h)('button', {
+                            class: secondary,
+                            type: 'button',
+                            'data-atlas': 'recovery-codes-copy',
+                            onClick: () => void (0, js_1.copyRecoveryCodes)(codes).then((ok) => {
+                                codesCopied.value = ok;
+                            }),
+                        }, t('mfa.recoveryCodesCopy'))
+                        : null,
+                    (0, js_1.canDownloadRecoveryCodes)()
+                        ? (0, vue_1.h)('button', { class: secondary, type: 'button', 'data-atlas': 'recovery-codes-download', onClick: () => (0, js_1.downloadRecoveryCodes)(codes) }, t('mfa.recoveryCodesDownload'))
+                        : null,
+                ]),
+                codesCopied.value
+                    ? (0, vue_1.h)('p', { class: 'atlas-text', 'aria-live': 'polite', 'data-atlas': 'recovery-codes-copied' }, t('mfa.recoveryCodesCopied'))
+                    : null,
+                (0, vue_1.h)('button', {
+                    class: cls('formButtonPrimary', 'atlas-button'),
+                    type: 'button',
+                    'data-atlas': 'recovery-codes-saved',
+                    disabled: props.busy,
+                    onClick: onSaved,
+                }, t('mfa.recoveryCodesSaved')),
+            ]);
+        };
         return () => {
+            if (props.recoveryCodes?.length && props.onRecoveryCodesSaved) {
+                return recoveryCodesCard(props.recoveryCodes, props.onRecoveryCodesSaved);
+            }
             const step = props.attempt
                 ? (0, js_1.nextStep)(props.attempt)
                 : { kind: 'collect_identifier' };
@@ -344,6 +574,14 @@ const AttemptFlow = (0, vue_1.defineComponent)({
                             props.onSubmit(factor.value === 'email_code' ? { code: values.code ?? '' } : { password: values.password ?? '' });
                             return;
                         }
+                        // Enrolment: text the code to the typed number, or confirm the factor.
+                        if (current?.kind === 'enroll_second_factor' && props.enrollment) {
+                            void props.enrollment.submit({ ...values }).then((next) => {
+                                if (next)
+                                    props.onSubmit(next);
+                            });
+                            return;
+                        }
                         props.onSubmit({ ...values });
                     },
                 }, [
@@ -353,13 +591,17 @@ const AttemptFlow = (0, vue_1.defineComponent)({
                         : null,
                     step.kind !== 'done' &&
                         step.kind !== 'await_oauth' &&
+                        !(0, js_1.awaitingSignUpLink)(props.attempt, props.emailVerification) &&
                         !(step.kind === 'collect_first_factor' && factor.value === 'email_link') &&
-                        !(step.kind === 'collect_first_factor' && factor.value === 'password' && firstFactorPlan()?.password === false && (firstFactorPlan()?.email.length ?? 0) > 0)
+                        !(step.kind === 'collect_first_factor' && factor.value === 'password' && firstFactorPlan()?.password === false && (firstFactorPlan()?.email.length ?? 0) > 0) &&
+                        !(step.kind === 'enroll_second_factor' && props.enrollmentState && !(0, js_1.enrollmentSubmitKey)(props.enrollmentState))
                         ? (0, vue_1.h)('button', {
                             class: cls('formButtonPrimary', 'atlas-button'),
-                            disabled: props.busy,
+                            disabled: props.busy || (step.kind === 'enroll_second_factor' && !!props.enrollmentState?.busy),
                             type: 'submit',
-                        }, t('signIn.submit'))
+                        }, t(step.kind === 'enroll_second_factor' && props.enrollmentState
+                            ? ((0, js_1.enrollmentSubmitKey)(props.enrollmentState) ?? 'signIn.submit')
+                            : 'signIn.submit'))
                         : null,
                 ]),
             ]);
@@ -379,7 +621,7 @@ exports.SignIn = (0, vue_1.defineComponent)({
         signUpUrl: { type: null, default: undefined },
     },
     setup(props) {
-        const { state, submit, prepare, captcha, settings } = (0, flow_1.useFlow)();
+        const { state, submit, prepare, captcha, settings, lastMethod, sendEmailSecondFactor, sendSmsSecondFactor, mfaChoices, enrollment, enrollmentState, saveRecoveryCodes } = (0, flow_1.useFlow)();
         const atlas = (0, context_1.useAtlas)();
         const t = useText();
         const cls = useClass();
@@ -415,10 +657,23 @@ exports.SignIn = (0, vue_1.defineComponent)({
                 captcha: captcha.needed ? captcha : null,
                 emailDelivery: settings.value?.emailDelivery ?? null,
                 onPrepare: prepare,
+                onEmailSecondFactor: settings.value?.account.emailSecondFactor ? sendEmailSecondFactor : undefined,
+                onSmsSecondFactor: mfaChoices().sms ? sendSmsSecondFactor : undefined,
+                enrollment,
+                enrollmentState: enrollmentState.value,
+                recoveryCodes: (0, js_1.pendingRecoveryCodes)(state.value),
+                onRecoveryCodesSaved: saveRecoveryCodes,
             });
-            if (!href)
+            const lastLabel = !state.value.attempt ? (0, js_1.lastUsedMethodLabel)(lastMethod.value, t) : null;
+            const hint = lastLabel
+                ? (0, vue_1.h)('p', { key: 'last-used', class: cls('badge', 'atlas-text atlas-last-used-hint'), 'data-atlas': 'last-used', 'data-atlas-method': lastMethod.value }, `${t('signIn.lastUsed')}: ${lastLabel}`)
+                : null;
+            if (!href && !hint)
                 return flow;
+            if (!href)
+                return [hint, flow];
             return [
+                ...(hint ? [hint] : []),
                 flow,
                 (0, vue_1.h)('p', { key: 'sign-up-prompt', class: cls('footerAction', 'atlas-footer'), 'data-atlas-sign-up-prompt': '' }, [
                     `${t('signIn.noAccount')} `,
@@ -445,6 +700,10 @@ const SignUpForm = (0, vue_1.defineComponent)({
             type: Function,
             required: true,
         },
+        /** Passkey-only sign-up: no password field; the email per the instance's mode. */
+        passkey: { type: Object, default: null },
+        /** Toggle between the password and passkey forms (only when both are offered). */
+        onSwitchMode: { type: Function, default: undefined },
     },
     setup(props) {
         const t = useText();
@@ -527,14 +786,14 @@ const SignUpForm = (0, vue_1.defineComponent)({
                 }
             }
         };
-        const textField = (name, labelKey, type, autocomplete) => (0, vue_1.h)('label', { key: name, class: cls('formField', 'atlas-field') }, [
-            (0, vue_1.h)('span', { class: cls('formFieldLabel', 'atlas-field-label') }, t(labelKey)),
+        const textField = (name, labelKey, type, autocomplete, required = true) => (0, vue_1.h)('label', { key: name, class: cls('formField', 'atlas-field') }, [
+            (0, vue_1.h)('span', { class: cls('formFieldLabel', 'atlas-field-label') }, required ? t(labelKey) : t('signUp.optionalField', { label: t(labelKey) })),
             (0, vue_1.h)('input', {
                 class: cls('formFieldInput', 'atlas-input'),
                 type,
                 name,
                 autocomplete,
-                required: true,
+                required,
                 value: values[name] ?? '',
                 onInput: (e) => {
                     values[name] = e.target.value;
@@ -559,7 +818,8 @@ const SignUpForm = (0, vue_1.defineComponent)({
             // The app can't deliver the verification email, so an email + password
             // sign-up could never complete: say so up front instead of a form that
             // fails on submit.
-            if (props.settings?.emailDelivery?.passwordSignUp === false) {
+            const passkey = props.passkey;
+            if (props.settings?.emailDelivery?.passwordSignUp === false && !(passkey && passkey.email !== 'required')) {
                 return (0, vue_1.h)('div', { class: cls('card', 'atlas-card') }, [
                     (0, vue_1.h)('h1', { class: cls('headerTitle', 'atlas-title') }, t('signUp.title')),
                     (0, vue_1.h)('p', { class: cls('formFieldError', 'atlas-error'), role: 'alert', 'data-atlas-email-unavailable': '' }, t('signUp.emailUnavailable')),
@@ -585,8 +845,13 @@ const SignUpForm = (0, vue_1.defineComponent)({
                         control(f),
                         ...fieldErrors(f.key),
                     ])),
-                    textField('email', 'signUp.emailLabel', 'email', 'email'),
-                    textField('password', 'signUp.passwordLabel', 'password', 'new-password'),
+                    passkey
+                        ? passkey.email === 'off'
+                            ? null
+                            : textField('email', 'signUp.emailLabel', 'email', 'email', passkey.email === 'required')
+                        : textField('email', 'signUp.emailLabel', 'email', 'email'),
+                    passkey ? null : textField('password', 'signUp.passwordLabel', 'password', 'new-password'),
+                    passkey ? (0, vue_1.h)('p', { key: 'passkey-intro', class: 'atlas-text' }, t('signUp.passkeyIntro')) : null,
                     showLegal
                         ? (0, vue_1.h)('label', { key: 'consent', class: cls('formField', 'atlas-consent') }, [
                             legal.required
@@ -614,11 +879,42 @@ const SignUpForm = (0, vue_1.defineComponent)({
                         disabled: props.busy || !consentOk,
                         type: 'submit',
                     }, t('signUp.submit')),
+                    props.onSwitchMode
+                        ? (0, vue_1.h)('div', { key: 'alternatives', class: 'atlas-alternatives' }, [
+                            (0, vue_1.h)('button', {
+                                type: 'button',
+                                class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                                'data-atlas-sign-up-mode': passkey ? 'password' : 'passkey',
+                                disabled: props.busy,
+                                onClick: () => props.onSwitchMode?.(),
+                            }, t(passkey ? 'signUp.passwordOption' : 'signUp.passkeyOption')),
+                        ])
+                        : null,
                 ]),
             ]);
         };
     },
 });
+/** The passkey-only sign-up's last step: create the passkey (which creates the account). */
+const PasskeySignUpStep = (0, vue_1.defineComponent)({
+    name: 'PasskeySignUpStep',
+    props: {
+        busy: { type: Boolean, default: false },
+        errors: { type: Array, default: () => [] },
+        onCreate: { type: Function, required: true },
+    },
+    setup(props) {
+        const t = useText();
+        const errorText = useErrorText();
+        const cls = useClass();
+        return () => (0, vue_1.h)('div', { class: cls('card', 'atlas-card'), 'data-atlas-passkey-sign-up': '' }, [
+            (0, vue_1.h)('h1', { class: cls('headerTitle', 'atlas-title') }, t('signUp.title')),
+            ...props.errors.map((error) => (0, vue_1.h)('p', { class: cls('formFieldError', 'atlas-error'), role: 'alert', key: error.code }, errorText(error))),
+            (0, vue_1.h)('p', { class: 'atlas-text' }, t('signUp.passkeyPrompt')),
+            (0, vue_1.h)('button', { class: cls('formButtonPrimary', 'atlas-button'), type: 'button', disabled: props.busy, onClick: () => props.onCreate() }, t('signUp.passkeyCreate')),
+        ]);
+    },
+});
 /**
  * §10.2 `<SignUp/>` — creates an account. The first step is the create-account
  * form, which POSTs `/v1/client/sign_ups`; from there the flow is server-driven
@@ -632,23 +928,41 @@ exports.SignUp = (0, vue_1.defineComponent)({
         afterUrl: { type: String, default: undefined },
     },
     setup() {
-        const { state, submit, create, settings, signUpCaptcha } = (0, flow_1.useFlow)();
-        return () => state.value.attempt
-            ? (0, vue_1.h)(AttemptFlow, {
-                attempt: state.value.attempt,
-                busy: state.value.busy,
-                errors: state.value.errors,
-                sessionKept: state.value.sessionKept,
-                titleKey: 'signUp.title',
-                onSubmit: submit,
-            })
-            : (0, vue_1.h)(SignUpForm, {
-                settings: settings.value,
-                busy: state.value.busy,
-                errors: state.value.errors,
-                captcha: signUpCaptcha.needed ? signUpCaptcha : null,
-                onSubmit: create,
-            });
+        const { state, submit, create, createWithPasskey, createPasskey, resendSignUp, settings, signUpCaptcha } = (0, flow_1.useFlow)();
+        const mode = (0, vue_1.ref)('password');
+        return () => {
+            const offer = settings.value?.account.passkeySignUp ?? null;
+            const canPasskey = !!offer && (0, js_1.passkeysSupported)();
+            const usingPasskey = mode.value === 'passkey' && canPasskey;
+            if (state.value.attempt && (0, js_1.awaitingPasskey)(state.value.attempt)) {
+                return (0, vue_1.h)(PasskeySignUpStep, { busy: state.value.busy, errors: state.value.errors, onCreate: createPasskey });
+            }
+            return state.value.attempt
+                ? (0, vue_1.h)(AttemptFlow, {
+                    attempt: state.value.attempt,
+                    busy: state.value.busy,
+                    errors: state.value.errors,
+                    sessionKept: state.value.sessionKept,
+                    titleKey: 'signUp.title',
+                    onSubmit: submit,
+                    emailVerification: settings.value?.account.emailVerification ?? 'code',
+                    onResend: resendSignUp,
+                })
+                : (0, vue_1.h)(SignUpForm, {
+                    settings: settings.value,
+                    busy: state.value.busy,
+                    errors: state.value.errors,
+                    captcha: signUpCaptcha.needed ? signUpCaptcha : null,
+                    onSubmit: usingPasskey ? createWithPasskey : create,
+                    passkey: usingPasskey ? { email: offer.email } : null,
+                    onSwitchMode: canPasskey
+                        ? () => {
+                            state.value = { ...state.value, errors: [] };
+                            mode.value = usingPasskey ? 'password' : 'passkey';
+                        }
+                        : undefined,
+                });
+        };
     },
 });
 exports.UserButton = (0, vue_1.defineComponent)({
@@ -684,6 +998,46 @@ exports.UserButton = (0, vue_1.defineComponent)({
         };
     },
 });
+/**
+ * A banner shown only while the active session is an impersonation, naming the
+ * user acted as, with "Return to admin" (or "End impersonation" when there is no
+ * session of the impersonator's to resume). Emits `ended` with the outcome.
+ */
+exports.ImpersonationBanner = (0, vue_1.defineComponent)({
+    name: 'ImpersonationBanner',
+    emits: ['ended'],
+    setup(_props, { emit }) {
+        const { user } = (0, context_1.useAtlas)();
+        const { isImpersonating, canReturnToAdmin, endImpersonation } = (0, composables_1.useImpersonation)();
+        const t = useText();
+        const cls = useClass();
+        const busy = (0, vue_1.ref)(false);
+        const end = async () => {
+            busy.value = true;
+            try {
+                emit('ended', await endImpersonation());
+            }
+            finally {
+                busy.value = false;
+            }
+        };
+        return () => {
+            if (!isImpersonating.value)
+                return null;
+            const u = user.value;
+            const name = [u?.first_name, u?.last_name].filter(Boolean).join(' ') ||
+                u?.username ||
+                u?.email_addresses?.find((e) => e.primary)?.email_address ||
+                u?.id ||
+                '';
+            return (0, vue_1.h)('div', { class: cls('card', 'atlas-alert atlas-impersonation-banner'), role: 'status' }, [
+                (0, vue_1.h)('span', { class: cls('headerSubtitle', 'atlas-text') }, t('impersonation.banner', { name })),
+                ' ',
+                (0, vue_1.h)('button', { type: 'button', class: cls('formButtonPrimary', 'atlas-button'), disabled: busy.value, onClick: () => void end() }, canReturnToAdmin.value ? t('impersonation.returnToAdmin') : t('impersonation.end')),
+            ]);
+        };
+    },
+});
 exports.OrganizationSwitcher = (0, vue_1.defineComponent)({
     name: 'OrganizationSwitcher',
     setup() {
@@ -798,20 +1152,341 @@ exports.UserProfile = (0, vue_1.defineComponent)({
 });
 exports.OrganizationProfile = (0, vue_1.defineComponent)({
     name: 'OrganizationProfile',
-    setup() {
+    emits: ['exit'],
+    setup(_props, { emit }) {
+        const atlas = (0, context_1.useAtlas)();
         const { organization, membership } = (0, composables_1.useOrganization)();
+        const { userId, has } = (0, composables_1.useAuth)();
         const t = useText();
         const cls = useClass();
+        const client = new fapi_1.FapiClient({
+            publishableKey: atlas.publishableKey,
+            baseUrl: atlas.frontendApi,
+            locale: atlas.locale,
+            sdk: version_1.ATLAS_VUE_SDK,
+        });
+        const errorText = (err) => (0, js_1.localizedErrorMessage)(err, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
+        const state = (0, vue_1.shallowRef)(null);
+        const tab = (0, vue_1.ref)('members');
+        // The custom-role editor: null = creating, else the id of the role being edited.
+        const editingRole = (0, vue_1.ref)(null);
+        const roleKey = (0, vue_1.ref)('');
+        const roleName = (0, vue_1.ref)('');
+        const rolePerms = (0, vue_1.ref)([]);
+        const resetRoleForm = () => {
+            editingRole.value = null;
+            roleKey.value = '';
+            roleName.value = '';
+            rolePerms.value = [];
+        };
+        const email = (0, vue_1.ref)('');
+        const inviteRole = (0, vue_1.ref)('org:member');
+        const confirm = (0, vue_1.ref)(null);
+        const needsPassword = (0, vue_1.ref)(false);
+        const password = (0, vue_1.ref)('');
+        let controller = null;
+        let unsubscribe = null;
+        (0, vue_1.watch)(() => organization.value?.id ?? null, (id) => {
+            unsubscribe?.();
+            controller = null;
+            state.value = null;
+            if (!id)
+                return;
+            controller = new js_1.OrganizationProfileController(client, id, {
+                canManage: has({ permission: 'org:sys_memberships:manage' }),
+                onChange: async () => {
+                    await atlas.reload();
+                },
+            });
+            unsubscribe = controller.subscribe((next) => {
+                state.value = next;
+            });
+            state.value = controller.getState();
+            void controller.load();
+        }, { immediate: true });
+        (0, vue_1.onUnmounted)(() => unsubscribe?.());
+        const leave = async () => {
+            if (controller && (await controller.leave()))
+                emit('exit', 'left');
+            confirm.value = null;
+        };
+        const remove = async () => {
+            if (!controller)
+                return;
+            if (needsPassword.value) {
+                try {
+                    await (0, js_1.reauthenticate)({ strategy: 'password', password: password.value }, { api: atlas.frontendApi, publishableKey: atlas.publishableKey, locale: atlas.locale });
+                }
+                catch {
+                    return;
+                }
+                password.value = '';
+                needsPassword.value = false;
+            }
+            if (await controller.deleteOrganization()) {
+                emit('exit', 'deleted');
+                confirm.value = null;
+                return;
+            }
+            const err = controller.getState().error;
+            if (err && err.needsReverification)
+                needsPassword.value = true;
+        };
         return () => {
             const org = organization.value;
-            if (!org)
+            const st = state.value;
+            if (!org || !controller || !st)
                 return null;
-            return (0, vue_1.h)('div', { class: cls('card', 'atlas-card') }, [
+            const ctl = controller;
+            const canManage = has({ permission: 'org:sys_memberships:manage' });
+            const isAdmin = membership.value?.role === 'org:admin';
+            const roles = st.roles.length > 0 ? st.roles : [{ key: 'org:member', name: 'org:member' }];
+            const roleOptions = (selected) => roles.map((r) => (0, vue_1.h)('option', { value: r.key, selected: r.key === selected }, r.name));
+            const tabs = ['members', ...(canManage ? ['invitations', 'roles'] : []), 'settings'];
+            const customRoles = st.roles.filter((r) => Boolean(r.organization_id));
+            const secondary = cls('formButtonSecondary', 'atlas-button-secondary');
+            const rolesPanel = (0, vue_1.h)('div', { 'data-atlas': 'organization-roles' }, [
+                customRoles.length === 0
+                    ? (0, vue_1.h)('p', { class: 'atlas-text' }, t('organization.noCustomRoles'))
+                    : (0, vue_1.h)('ul', { class: 'atlas-list' }, customRoles.map((role) => (0, vue_1.h)('li', { key: role.id ?? role.key, 'data-atlas': 'organization-role' }, [
+                        (0, vue_1.h)('span', `${role.name} · ${role.key}`),
+                        (0, vue_1.h)('button', {
+                            type: 'button',
+                            class: secondary,
+                            onClick: () => {
+                                editingRole.value = role.id ?? null;
+                                roleKey.value = role.key;
+                                roleName.value = role.name;
+                                rolePerms.value = [...(role.permissions ?? [])];
+                            },
+                        }, t('organization.editRole')),
+                        (0, vue_1.h)('button', {
+                            type: 'button',
+                            class: secondary,
+                            disabled: !role.id || st.busy === `role:delete:${role.id}`,
+                            onClick: () => role.id && void ctl.deleteRole(role.id),
+                        }, t('organization.deleteRole')),
+                    ]))),
+                (0, vue_1.h)('form', {
+                    'data-atlas': 'organization-role-form',
+                    onSubmit: async (e) => {
+                        e.preventDefault();
+                        const out = editingRole.value
+                            ? await ctl.updateRole(editingRole.value, { name: roleName.value.trim(), permissions: rolePerms.value })
+                            : await ctl.createRole({ key: roleKey.value.trim(), name: roleName.value.trim(), permissions: rolePerms.value });
+                        if (out)
+                            resetRoleForm();
+                    },
+                }, [
+                    editingRole.value
+                        ? null
+                        : (0, vue_1.h)('label', { class: cls('formField', 'atlas-field') }, [
+                            (0, vue_1.h)('span', { class: cls('formFieldLabel', 'atlas-field-label') }, t('organization.roleKey')),
+                            (0, vue_1.h)('input', {
+                                name: 'role_key',
+                                class: cls('formFieldInput', 'atlas-input'),
+                                value: roleKey.value,
+                                onInput: (e) => (roleKey.value = e.target.value),
+                            }),
+                        ]),
+                    (0, vue_1.h)('label', { class: cls('formField', 'atlas-field') }, [
+                        (0, vue_1.h)('span', { class: cls('formFieldLabel', 'atlas-field-label') }, t('organization.roleName')),
+                        (0, vue_1.h)('input', {
+                            name: 'role_name',
+                            class: cls('formFieldInput', 'atlas-input'),
+                            value: roleName.value,
+                            onInput: (e) => (roleName.value = e.target.value),
+                        }),
+                    ]),
+                    (0, vue_1.h)('fieldset', { class: cls('formField', 'atlas-field') }, [
+                        (0, vue_1.h)('legend', { class: cls('formFieldLabel', 'atlas-field-label') }, t('organization.rolePermissions')),
+                        ...st.permissions.map((p) => (0, vue_1.h)('label', { key: p.key, 'data-atlas': 'organization-role-permission' }, [
+                            (0, vue_1.h)('input', {
+                                type: 'checkbox',
+                                value: p.key,
+                                checked: rolePerms.value.includes(p.key),
+                                onChange: (e) => {
+                                    const on = e.target.checked;
+                                    rolePerms.value = on
+                                        ? [...rolePerms.value, p.key]
+                                        : rolePerms.value.filter((k) => k !== p.key);
+                                },
+                            }),
+                            ` ${p.name}`,
+                        ])),
+                    ]),
+                    (0, vue_1.h)('button', {
+                        type: 'submit',
+                        class: cls('formButtonPrimary', 'atlas-button'),
+                        disabled: !roleName.value.trim() || (!editingRole.value && !roleKey.value.trim()) || Boolean(st.busy?.startsWith('role:')),
+                    }, editingRole.value ? t('organization.saveRole') : t('organization.createRole')),
+                    editingRole.value
+                        ? (0, vue_1.h)('button', { type: 'button', class: secondary, onClick: resetRoleForm }, t('organization.cancel'))
+                        : null,
+                ]),
+            ]);
+            const members = (0, vue_1.h)('ul', { class: 'atlas-list', 'data-atlas': 'organization-members' }, st.members.map((m) => {
+                const id = m.user?.id ?? m.id;
+                const self = m.user?.id === userId.value;
+                const name = [m.user?.first_name, m.user?.last_name].filter(Boolean).join(' ') || t('organization.unnamedMember');
+                return (0, vue_1.h)('li', { key: m.id, 'data-atlas': 'organization-member' }, [
+                    (0, vue_1.h)('span', self ? `${name} ${t('organization.you')}` : name),
+                    canManage && !self && m.user
+                        ? [
+                            (0, vue_1.h)('select', {
+                                'aria-label': t('organization.roleLabel'),
+                                class: cls('formFieldInput', 'atlas-input'),
+                                disabled: st.busy === `role:${id}`,
+                                onChange: (e) => void ctl.changeRole(id, e.target.value),
+                            }, roleOptions(m.role)),
+                            (0, vue_1.h)('button', {
+                                type: 'button',
+                                class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                                disabled: st.busy === `remove:${id}`,
+                                onClick: () => void ctl.removeMember(id),
+                            }, t('organization.remove')),
+                        ]
+                        : (0, vue_1.h)('span', ` · ${m.role}`),
+                ]);
+            }));
+            const invitations = (0, vue_1.h)('div', { 'data-atlas': 'organization-invitations' }, [
+                (0, vue_1.h)('form', {
+                    onSubmit: async (e) => {
+                        e.preventDefault();
+                        const address = email.value.trim();
+                        if (address && (await ctl.invite(address, inviteRole.value)))
+                            email.value = '';
+                    },
+                }, [
+                    (0, vue_1.h)('label', { class: cls('formField', 'atlas-field') }, [
+                        (0, vue_1.h)('span', { class: cls('formFieldLabel', 'atlas-field-label') }, t('organization.emailLabel')),
+                        (0, vue_1.h)('input', {
+                            type: 'email',
+                            class: cls('formFieldInput', 'atlas-input'),
+                            value: email.value,
+                            onInput: (e) => (email.value = e.target.value),
+                        }),
+                    ]),
+                    (0, vue_1.h)('label', { class: cls('formField', 'atlas-field') }, [
+                        (0, vue_1.h)('span', { class: cls('formFieldLabel', 'atlas-field-label') }, t('organization.roleLabel')),
+                        (0, vue_1.h)('select', {
+                            class: cls('formFieldInput', 'atlas-input'),
+                            onChange: (e) => (inviteRole.value = e.target.value),
+                        }, roleOptions(inviteRole.value)),
+                    ]),
+                    (0, vue_1.h)('button', { type: 'submit', class: cls('formButtonPrimary', 'atlas-button'), disabled: st.busy === 'invite' || !email.value.trim() }, t('organization.sendInvite')),
+                ]),
+                st.invitations.length === 0
+                    ? (0, vue_1.h)('p', { class: 'atlas-text' }, t('organization.noInvitations'))
+                    : (0, vue_1.h)('ul', { class: 'atlas-list' }, st.invitations.map((inv) => (0, vue_1.h)('li', { key: inv.id, 'data-atlas': 'organization-invitation' }, [
+                        (0, vue_1.h)('span', `${inv.email_address} · ${inv.role ?? ''}`),
+                        (0, vue_1.h)('button', { type: 'button', class: cls('formButtonSecondary', 'atlas-button-secondary'), onClick: () => void ctl.resendInvitation(inv.id) }, t('organization.resend')),
+                        (0, vue_1.h)('button', { type: 'button', class: cls('formButtonSecondary', 'atlas-button-secondary'), onClick: () => void ctl.revokeInvitation(inv.id) }, t('organization.revoke')),
+                    ]))),
+            ]);
+            const settings = (0, vue_1.h)('div', { 'data-atlas': 'organization-settings' }, confirm.value
+                ? [
+                    (0, vue_1.h)('p', { class: 'atlas-text' }, (0, i18n_1.translate)(atlas.catalog, confirm.value === 'leave' ? 'organization.leaveConfirm' : 'organization.deleteConfirm', { name: org.name })),
+                    needsPassword.value
+                        ? (0, vue_1.h)('label', { class: cls('formField', 'atlas-field') }, [
+                            (0, vue_1.h)('span', { class: cls('formFieldLabel', 'atlas-field-label') }, t('organization.passwordPrompt')),
+                            (0, vue_1.h)('input', {
+                                type: 'password',
+                                autocomplete: 'current-password',
+                                class: cls('formFieldInput', 'atlas-input'),
+                                value: password.value,
+                                onInput: (e) => (password.value = e.target.value),
+                            }),
+                        ])
+                        : null,
+                    (0, vue_1.h)('button', {
+                        type: 'button',
+                        class: cls('formButtonPrimary', 'atlas-button'),
+                        disabled: st.busy === 'leave' || st.busy === 'delete',
+                        onClick: () => void (confirm.value === 'leave' ? leave() : remove()),
+                    }, t('organization.confirm')),
+                    (0, vue_1.h)('button', {
+                        type: 'button',
+                        class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                        onClick: () => {
+                            confirm.value = null;
+                            needsPassword.value = false;
+                            password.value = '';
+                        },
+                    }, t('organization.cancel')),
+                ]
+                : [
+                    (0, vue_1.h)('button', { type: 'button', class: cls('formButtonSecondary', 'atlas-button-secondary'), onClick: () => (confirm.value = 'leave') }, t('organization.leave')),
+                    isAdmin
+                        ? (0, vue_1.h)('button', { type: 'button', class: cls('formButtonSecondary', 'atlas-button-secondary'), onClick: () => (confirm.value = 'delete') }, t('organization.delete'))
+                        : null,
+                ]);
+            return (0, vue_1.h)('div', { class: cls('card', 'atlas-card'), 'data-atlas': 'organization-profile' }, [
                 (0, vue_1.h)('h1', org.name),
                 (0, vue_1.h)('p', `${t('organization.roleLabel')}: ${membership.value?.role ?? ''}`),
-                // Management controls are gated on the ACTIVE org role, matching the
-                // server's §9.2 rule rather than duplicating a looser one.
-                (0, vue_1.h)(exports.Protect, { permission: 'org:sys_memberships:manage' }, () => (0, vue_1.h)('button', t('organization.invite'))),
+                (0, vue_1.h)('div', { class: cls('menu', 'atlas-menu'), role: 'tablist' }, tabs.map((key) => (0, vue_1.h)('button', {
+                    key,
+                    type: 'button',
+                    role: 'tab',
+                    'aria-selected': tab.value === key,
+                    class: cls('menuItem', 'atlas-menu-item'),
+                    'data-atlas': `organization-tab-${key}`,
+                    onClick: () => (tab.value = key),
+                }, t(`organization.${key}`)))),
+                st.error && !st.error.needsReverification
+                    ? (0, vue_1.h)('p', { class: cls('formFieldError', 'atlas-error'), role: 'alert' }, errorText(st.error))
+                    : null,
+                tab.value === 'members' ? members : null,
+                tab.value === 'invitations' && canManage ? invitations : null,
+                tab.value === 'roles' && canManage ? rolesPanel : null,
+                tab.value === 'settings' ? settings : null,
+            ]);
+        };
+    },
+});
+/**
+ * `<OrganizationAuditLog/>` — the active organization's audit trail for its
+ * admins, next to `<OrganizationProfile/>`. Renders nothing for a member who may
+ * not read it (the server is the authority; the component just follows it).
+ * Labels are props so an app can localise them.
+ */
+exports.OrganizationAuditLog = (0, vue_1.defineComponent)({
+    name: 'OrganizationAuditLog',
+    props: {
+        pageSize: { type: Number, default: undefined },
+        action: { type: String, default: undefined },
+        labels: { type: Object, default: () => ({}) },
+        formatDate: {
+            type: Function,
+            default: (ms) => new Date(ms).toLocaleString(),
+        },
+    },
+    setup(props) {
+        const { organization } = (0, composables_1.useOrganization)();
+        const log = (0, composables_1.useOrganizationAuditLog)({ pageSize: props.pageSize, action: props.action });
+        const cls = useClass();
+        return () => {
+            const state = log.state.value;
+            if (!organization.value || state.forbidden)
+                return null;
+            const labels = props.labels;
+            return (0, vue_1.h)('div', { class: cls('card', 'atlas-card'), 'data-atlas': 'organization-audit-log' }, [
+                (0, vue_1.h)('h2', { class: cls('headerTitle', 'atlas-title') }, labels.title ?? 'Audit log'),
+                state.entries.length === 0 && !state.loading
+                    ? (0, vue_1.h)('p', { class: cls('headerSubtitle', 'atlas-subtitle') }, labels.empty ?? 'No activity recorded yet.')
+                    : (0, vue_1.h)('ul', { class: cls('list', 'atlas-audit-list') }, state.entries.map((entry) => (0, vue_1.h)('li', { key: entry.id, class: cls('listItem', 'atlas-audit-item'), 'data-action': entry.action }, [
+                        (0, vue_1.h)('strong', (0, js_1.describeAuditAction)(entry.action)),
+                        (0, vue_1.h)('span', { class: 'atlas-audit-meta' }, ` · ${props.formatDate(entry.created_at)}` +
+                            (entry.actor.id ? ` · ${labels.actor ?? 'by'} ${entry.actor.type} ${entry.actor.id}` : '')),
+                    ]))),
+                state.hasMore
+                    ? (0, vue_1.h)('button', {
+                        type: 'button',
+                        class: cls('formButtonSecondary', 'atlas-button-secondary'),
+                        disabled: state.loading,
+                        onClick: () => void log.loadMore(),
+                    }, labels.loadMore ?? 'Load more')
+                    : null,
             ]);
         };
     },