@franzzemen/brokenstock-shell 0.9.5 → 0.10.1

package/fesm2022/franzzemen-brokenstock-shell.mjs

@@ -360,6 +360,7 @@ function authenticatorMessage(reason) {
         case 'too-many-attempts': return TOO_MANY_ATTEMPTS;
         case 'authenticator-not-set-up': return 'This account has no authenticator set up. Ask the administrator to reset it.';
         case 'setup-required': return 'Scan this QR code with your authenticator app, then enter the 6-digit code it shows.';
+        case 'passkey-refused': return 'That passkey was not accepted. Try again, or sign in with your password.';
         default: return 'Unable to sign in';
     }
 }
@@ -377,6 +378,146 @@ function recoveryCodesFile(appName, username, codes, now = new Date()) {
     ].join('\n');
 }
 
+/*
+Created by Franz Zemen 2026-10-21
+License Type: UNLICENSED
+
+The browser half of passkeys (passkey-sign-in.prd.md): turn the server's JSON options into what
+`navigator.credentials` takes, and the passkey it returns back into JSON for the server.
+
+No library. Browsers that can do one passkey across brokenstock.com and brokenstock.org (D3) can
+do all of this natively; the base64url conversion below is the whole of what a library adds, and
+it saves shipping one to every page. A browser without passkeys gets `passkeysSupported() ===
+false` and the screens hide the passkey buttons — password + code always remains (D2).
+*/
+/** The user cancelled or the browser timed out — not an error worth a red message. */
+class PasskeyCancelledError extends Error {
+    constructor() { super('Passkey prompt cancelled'); this.name = 'PasskeyCancelledError'; }
+}
+function passkeysSupported() {
+    return typeof window !== 'undefined'
+        && typeof window.PublicKeyCredential === 'function'
+        && typeof navigator !== 'undefined'
+        && !!navigator.credentials;
+}
+/** Whether the browser can offer passkeys in the username box's suggestions (D9). */
+async function passkeyAutofillSupported() {
+    if (!passkeysSupported())
+        return false;
+    const pkc = window.PublicKeyCredential;
+    try {
+        return typeof pkc.isConditionalMediationAvailable === 'function' && await pkc.isConditionalMediationAvailable();
+    }
+    catch {
+        return false;
+    }
+}
+function base64urlToBuffer(value) {
+    const base64 = value.replace(/-/g, '+').replace(/_/g, '/');
+    const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+    const binary = atob(padded);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++)
+        bytes[i] = binary.charCodeAt(i);
+    return bytes.buffer;
+}
+function bufferToBase64url(buffer) {
+    const bytes = buffer instanceof ArrayBuffer ? new Uint8Array(buffer) : new Uint8Array(buffer.buffer, buffer.byteOffset, buffer.byteLength);
+    let binary = '';
+    for (let i = 0; i < bytes.length; i++)
+        binary += String.fromCharCode(bytes[i]);
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+function descriptors(list) {
+    return list?.map(c => ({
+        id: base64urlToBuffer(c.id),
+        type: 'public-key',
+        ...(c.transports ? { transports: c.transports } : {}),
+    }));
+}
+function toRequestOptions(json) {
+    return {
+        challenge: base64urlToBuffer(json.challenge),
+        ...(json.rpId ? { rpId: json.rpId } : {}),
+        ...(json.timeout ? { timeout: json.timeout } : {}),
+        ...(json.userVerification ? { userVerification: json.userVerification } : {}),
+        ...(json.allowCredentials?.length ? { allowCredentials: descriptors(json.allowCredentials) } : {}),
+    };
+}
+function toCreationOptions(json) {
+    return {
+        challenge: base64urlToBuffer(json.challenge),
+        rp: json.rp,
+        user: { id: base64urlToBuffer(json.user.id), name: json.user.name, displayName: json.user.displayName },
+        pubKeyCredParams: json.pubKeyCredParams,
+        ...(json.timeout ? { timeout: json.timeout } : {}),
+        ...(json.excludeCredentials?.length ? { excludeCredentials: descriptors(json.excludeCredentials) } : {}),
+        ...(json.authenticatorSelection ? { authenticatorSelection: json.authenticatorSelection } : {}),
+        ...(json.attestation ? { attestation: json.attestation } : {}),
+    };
+}
+function credentialToJSON(credential) {
+    const r = credential.response;
+    const response = { clientDataJSON: bufferToBase64url(r.clientDataJSON) };
+    if ('attestationObject' in r && r.attestationObject) {
+        response['attestationObject'] = bufferToBase64url(r.attestationObject);
+        if (typeof r.getTransports === 'function')
+            response['transports'] = r.getTransports();
+    }
+    if ('authenticatorData' in r && r.authenticatorData) {
+        response['authenticatorData'] = bufferToBase64url(r.authenticatorData);
+        response['signature'] = bufferToBase64url(r.signature);
+        if (r.userHandle)
+            response['userHandle'] = bufferToBase64url(r.userHandle);
+    }
+    return {
+        id: credential.id,
+        rawId: bufferToBase64url(credential.rawId),
+        type: credential.type,
+        response,
+        clientExtensionResults: credential.getClientExtensionResults(),
+        ...(credential.authenticatorAttachment ? { authenticatorAttachment: credential.authenticatorAttachment } : {}),
+    };
+}
+function cancelled(err) {
+    return err instanceof DOMException && (err.name === 'NotAllowedError' || err.name === 'AbortError');
+}
+/**
+ * Ask the browser for a passkey. `conditional` waits quietly for the user to pick one from the
+ * username box's suggestions; pass a `signal` to stop waiting when the screen goes away.
+ */
+async function getPasskey(options, conditional = false, signal) {
+    try {
+        const credential = await navigator.credentials.get({
+            publicKey: toRequestOptions(options),
+            ...(conditional ? { mediation: 'conditional' } : {}),
+            ...(signal ? { signal } : {}),
+        });
+        if (!credential)
+            throw new PasskeyCancelledError();
+        return credentialToJSON(credential);
+    }
+    catch (err) {
+        if (cancelled(err))
+            throw new PasskeyCancelledError();
+        throw err;
+    }
+}
+/** Ask the browser to make a passkey. */
+async function createPasskey(options) {
+    try {
+        const credential = await navigator.credentials.create({ publicKey: toCreationOptions(options) });
+        if (!credential)
+            throw new PasskeyCancelledError();
+        return credentialToJSON(credential);
+    }
+    catch (err) {
+        if (cancelled(err))
+            throw new PasskeyCancelledError();
+        throw err;
+    }
+}
+
 /**
  * A refusal from an authenticator route, carrying the server's `reason`
  * (authenticator-sign-in.prd.md). `message` is plain words for the screen.
@@ -391,6 +532,8 @@ class AuthenticatorError extends Error {
 }
 /** Sign-in rejected because the next step is a code (or setting one up), not because anything failed. */
 const CODE_STEP = 'code-step';
+/** The user dismissed the passkey prompt — nothing failed, nothing to say. */
+const PASSKEY_CANCELLED = 'passkey-cancelled';
 /**
  * The sign-in request body, exactly as sent (multiple-devices E8, authenticator-sign-in.prd.md).
  *
@@ -476,6 +619,12 @@ class AuthenticationService {
          */
         this.bypassActive = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bypassActive" }] : /* istanbul ignore next */ []));
+        /**
+         * The open "already signed in elsewhere" choice came from a passkey sign-in, so its retry goes
+         * to the passkey route with the ticket, not to /login with a password (passkey-sign-in.prd.md D8).
+         */
+        this.pendingPasskey = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pendingPasskey" }] : /* istanbul ignore next */ []));
         this.#refreshing = null;
         this.#auth = 'Bearer ..';
         this.#httpClient = inject(HttpClient);
@@ -566,6 +715,7 @@ class AuthenticationService {
         this.conflictSessions.set(undefined);
         this.additionalSignInAllowed.set(false);
         this.pendingCredentials.set(undefined);
+        this.pendingPasskey.set(false);
         this.#signInTicket = undefined;
     }
     /** Back to the password form from the code or setup step. */
@@ -632,11 +782,119 @@ class AuthenticationService {
         }
         this.conflictSessions.set(undefined);
         this.#thinkingService.startThinking();
+        // A ticket from a passkey sign-in's 409 stands in for a passkey, never for a code: it must not
+        // ride along on a password sign-in, where it would be checked — and counted — as a wrong code.
+        const ticket = this.pendingPasskey() ? undefined : this.#signInTicket;
+        const body = buildLoginBody(credentials, force, options, ticket);
+        return this.#signIn(this.#authUrls.login, body, credentials);
+    }
+    // ---------------------------------------------------------------------------
+    // Passkey sign-in (passkey-sign-in.prd.md D1, D8, D9)
+    // ---------------------------------------------------------------------------
+    /**
+     * Sign in with a passkey: no username, password or code. `conditional` waits quietly for the user
+     * to pick a passkey from the username box's suggestions (D9); abort `signal` when the screen goes.
+     * Rejects with PASSKEY_CANCELLED when the user dismissed the prompt, 'conflict' on a 409 (retry
+     * with `retryPasskeySignIn`), or a plain-words message.
+     */
+    async loginWithPasskey(opts = {}) {
+        const options = await firstValueFrom(this.#httpClient.post(`${this.#authUrls.login}/passkey/options`, {}, { headers: { [HttpHeader.ContentType]: 'application/json', [HttpHeader.AppContext]: 'brokenstock' } }));
+        let response;
+        try {
+            response = await getPasskey(options, opts.conditional === true, opts.signal);
+        }
+        catch (err) {
+            if (err instanceof PasskeyCancelledError)
+                throw PASSKEY_CANCELLED;
+            throw authenticatorMessage('passkey-refused');
+        }
+        this.conflictSessions.set(undefined);
+        this.#signInTicket = undefined;
+        this.#thinkingService.startThinking();
+        return this.#signIn(`${this.#authUrls.login}/passkey`, { response }, undefined);
+    }
+    /** The answer to "already signed in elsewhere" after a passkey sign-in: the ticket stands in for the passkey (D8). */
+    retryPasskeySignIn(force, choice = {}) {
+        const ticket = this.#signInTicket;
+        if (!ticket)
+            return Promise.reject(authenticatorMessage('passkey-refused'));
+        this.conflictSessions.set(undefined);
+        this.#thinkingService.startThinking();
+        return this.#signIn(`${this.#authUrls.login}/passkey`, {
+            signInTicket: ticket,
+            ...(force ? { force: true } : {}),
+            ...(choice.additional ? { additional: true } : {}),
+            ...(choice.endSessionIds?.length ? { endSessionIds: choice.endSessionIds } : {}),
+        }, undefined);
+    }
+    // ---------------------------------------------------------------------------
+    // Passkey settings and the on-demand check (passkey-sign-in.prd.md D11, D13–D15)
+    // ---------------------------------------------------------------------------
+    /** This user's passkeys. */
+    async listPasskeys() {
+        const { passkeys } = await this.#authenticatorCall('GET', 'passkeys');
+        return passkeys;
+    }
+    /**
+     * Add a passkey (D13, D14). `proof` is password + code (or recovery code), or 'passkey' to prove
+     * with one already added. Opens the browser's passkey prompt; resolves with the new passkey.
+     */
+    async addPasskey(name, proof) {
+        const proofBody = proof === 'passkey' ? { passkey: await this.#passkeyResponse('confirm') } : proof;
+        const options = await this.#authenticatorCall('POST', 'passkeys/add/options', proofBody);
+        let response;
+        try {
+            response = await createPasskey(options);
+        }
+        catch (err) {
+            if (err instanceof PasskeyCancelledError)
+                throw new AuthenticatorError(undefined, 'Cancelled — no passkey was added.', 0);
+            if (err instanceof DOMException && err.name === 'InvalidStateError') {
+                throw new AuthenticatorError(undefined, 'This device already has a passkey for this account.', 0);
+            }
+            throw new AuthenticatorError(undefined, 'The browser could not make a passkey.', 0);
+        }
+        return this.#authenticatorCall('POST', 'passkeys/add', { name, response });
+    }
+    /** Remove one of your passkeys (D15), proved with a code, a recovery code, or a passkey. */
+    async removePasskey(credentialId, proof) {
+        const proofBody = proof === 'passkey' ? { passkey: await this.#passkeyResponse('confirm') } : proof;
+        const { removed } = await this.#authenticatorCall('POST', 'passkeys/remove', { credentialId, ...proofBody });
+        return removed;
+    }
+    /**
+     * The on-demand check with a passkey (D11) — the passkey twin of `verifyCode`. Opens the
+     * browser's prompt (fingerprint or PIN, always) and, on success, the server records it on this
+     * session exactly as a code would. `purpose` is a label for the log, e.g. 'arm-trading'.
+     * Resolves with when it was recorded; rejects with an AuthenticatorError (cancelled, refused, or
+     * no passkey on this account — reason 'passkey-refused').
+     */
+    async verifyWithPasskey(purpose) {
+        const response = await this.#passkeyResponse('verify', purpose);
+        const { codeVerifiedAtEpoch } = await this.#authenticatorCall('POST', 'passkey/verify', { response, ...(purpose ? { purpose } : {}) });
+        return codeVerifiedAtEpoch;
+    }
+    /** A challenge bound to this session, answered by one of this user's passkeys. */
+    async #passkeyResponse(kind, purpose) {
+        const options = await this.#authenticatorCall('POST', 'passkeys/challenge', { kind, ...(purpose ? { purpose } : {}) });
+        try {
+            return await getPasskey(options);
+        }
+        catch (err) {
+            if (err instanceof PasskeyCancelledError)
+                throw new AuthenticatorError(undefined, 'Cancelled.', 0);
+            throw new AuthenticatorError('passkey-refused', authenticatorMessage('passkey-refused'), 0);
+        }
+    }
+    /**
+     * Post a sign-in and adopt what comes back — shared by the password and passkey routes.
+     * `credentials` is undefined for a passkey sign-in, which has none.
+     */
+    #signIn(url, body, credentials) {
         return new Promise((resolve, reject) => {
             this.authenticating.set(true);
-            const body = buildLoginBody(credentials, force, options, this.#signInTicket);
             const subscription = this.#httpClient
-                .post(this.#authUrls.login, body, {
+                .post(url, body, {
                 headers: {
                     [HttpHeader.ContentType]: 'application/json',
                     [HttpHeader.AppContext]: 'brokenstock',
@@ -666,6 +924,7 @@ class AuthenticationService {
                         this.codeStep.set('none');
                         this.setupChallenge.set(undefined);
                         this.#signInTicket = undefined;
+                        this.pendingPasskey.set(false);
                         this.authenticated.set(true);
                         this.pendingCredentials.set(undefined);
                         resolve();
@@ -698,6 +957,9 @@ class AuthenticationService {
                             // offer it.
                             this.additionalSignInAllowed.set(err.error?.additionalSignInAllowed === true);
                             this.pendingCredentials.set(credentials);
+                            // A passkey sign-in has no password to send again: its retry goes back to the
+                            // passkey route with the ticket alone (passkey-sign-in.prd.md D8).
+                            this.pendingPasskey.set(credentials === undefined);
                             reject('conflict');
                         }
                         else if (reason === 'code-required') {
@@ -719,7 +981,7 @@ class AuthenticationService {
                             reject(authenticatorMessage(reason));
                         }
                         else if (err.status === 401) {
-                            reject('Wrong username or password');
+                            reject(credentials ? 'Wrong username or password' : authenticatorMessage('passkey-refused'));
                         }
                         else {
                             reject(err.message ?? 'Unable to login');
@@ -906,6 +1168,7 @@ class AuthenticationService {
         this.recoveryCodesToShow.set(undefined);
         this.recoveryCodesLeft.set(undefined);
         this.bypassActive.set(false);
+        this.pendingPasskey.set(false);
         this.#signInTicket = undefined;
         this.#auth = 'Bearer ..';
         this.#store.clear();
@@ -4137,6 +4400,8 @@ class Login {
     #commandService;
     #terminalFocusService;
     #activatedRoute;
+    /** The quiet wait for a passkey picked from the username box's suggestions (passkey D9). */
+    #autofill;
     constructor(authenticationService, router) {
         this.authenticationService = authenticationService;
         this.router = router;
@@ -4169,6 +4434,65 @@ class Login {
         this.#commandService = inject(CommandService);
         this.#terminalFocusService = inject(TerminalFocusService);
         this.#activatedRoute = inject(ActivatedRoute);
+        /** Whether this browser can sign in with a passkey at all; the button is hidden otherwise (passkey D2). */
+        this.passkeys = passkeysSupported();
+        /**
+         * Shown when the passkey prompt closed without a passkey: most often this device has none (a
+         * passkey lives on the device or account that made it). Plain advice, not an error.
+         */
+        this.passkeyHint = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "passkeyHint" }] : /* istanbul ignore next */ []));
+    }
+    /** Safe on the server: the support check is false wherever there is no browser. */
+    ngOnInit() {
+        void this.#startPasskeyAutofill();
+    }
+    ngOnDestroy() {
+        this.#autofill?.abort();
+    }
+    /** "Sign in with a passkey". The quiet wait must stop first: a browser runs one passkey prompt at a time. */
+    onPasskey() {
+        this.errors = [];
+        this.passkeyHint.set(false);
+        this.#autofill?.abort();
+        this.#autofill = undefined;
+        this.submitted = true;
+        this.#passkeySignIn(false);
+    }
+    /**
+     * Offer passkeys in the username box's suggestions (D9): a passkey request that waits until the
+     * user picks one there. Silent when unsupported or when anything goes wrong — the button and the
+     * password form are still on screen.
+     */
+    async #startPasskeyAutofill() {
+        if (!(await passkeyAutofillSupported()))
+            return;
+        if (this.authenticationService.authenticated())
+            return;
+        this.#autofill?.abort();
+        const controller = new AbortController();
+        this.#autofill = controller;
+        this.#passkeySignIn(true, controller.signal);
+    }
+    #passkeySignIn(conditional, signal) {
+        this.authenticationService
+            .loginWithPasskey({ conditional, ...(signal ? { signal } : {}) })
+            .then(() => this.#afterSignIn(undefined))
+            .catch((err) => {
+            // The quiet wait ending says nothing about a button press that may be in flight.
+            if (!conditional)
+                this.submitted = false;
+            if (err === 'conflict')
+                return;
+            if (err === PASSKEY_CANCELLED && !conditional)
+                this.passkeyHint.set(true);
+            if (err !== PASSKEY_CANCELLED && !conditional) {
+                this.errors.push({ ndx: 0, message: typeof err === 'string' ? err : 'Unable to sign in with a passkey' });
+            }
+            // Offer the suggestions again, unless this screen is going away.
+            if (!signal?.aborted)
+                void this.#startPasskeyAutofill();
+        });
     }
     /**
      * Returns the post-login destination. Honors a `returnUrl` query param if
@@ -4309,20 +4633,14 @@ class Login {
         this.submitted = false;
     }
     #doLogin(force, choice = {}) {
-        this.authenticationService
-            .login(this.model, force, choice)
-            .then(() => {
-            this.#commandService.echoCommand(`login ${this.model.username}`);
-            this.codeText = '';
-            this.useRecovery.set(false);
-            // Setup finished during this sign-in: the codes are on screen and must be
-            // seen before the app takes over the page.
-            if (this.authenticationService.recoveryCodesToShow()) {
-                this.submitted = false;
-                return;
-            }
-            this.#navigateAfterLogin();
-        })
+        // The open "already signed in elsewhere" choice came from a passkey: its retry carries the
+        // ticket to the passkey route — there is no password to send (passkey D8).
+        const viaPasskey = this.authenticationService.pendingPasskey();
+        const attempt = viaPasskey
+            ? this.authenticationService.retryPasskeySignIn(force, choice)
+            : this.authenticationService.login(this.model, force, choice);
+        attempt
+            .then(() => this.#afterSignIn(viaPasskey ? undefined : this.model.username))
             .catch((err) => {
             if (err !== 'conflict' && err !== CODE_STEP) {
                 this.errors.push({ ndx: 0, message: typeof err === 'string' ? err : 'Unable to login' });
@@ -4331,13 +4649,26 @@ class Login {
             this.submitted = false;
         });
     }
+    #afterSignIn(username) {
+        this.#autofill?.abort();
+        this.#commandService.echoCommand(username ? `login ${username}` : 'login (passkey)');
+        this.codeText = '';
+        this.useRecovery.set(false);
+        // Setup finished during this sign-in: the codes are on screen and must be
+        // seen before the app takes over the page.
+        if (this.authenticationService.recoveryCodesToShow()) {
+            this.submitted = false;
+            return;
+        }
+        this.#navigateAfterLogin();
+    }
     #navigateAfterLogin() {
         this.router.navigateByUrl(this.#resolvePostLoginUrl()).then(() => {
             setTimeout(() => this.#terminalFocusService.requestFocus());
         }).catch(console.error);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Login, deps: [{ token: AuthenticationService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Login, isStandalone: true, selector: "shell-login", ngImport: i0, template: "@let usernameRegex = USERNAME_REGEX;\n@let passwordRegex = PASSWORD_REGEX;\n<div class=\"login-container\">\n  <div class=\"login-header\">\n    <h2 class=\"text-text-primary\">{{ appName }}</h2>\n    <p class=\"text-secondary-info\">Sign in to continue</p>\n  </div>\n  @let step = authenticationService.codeStep();\n  @if (authenticationService.recoveryCodesToShow(); as codes) {\n    <shell-recovery-codes [codes]=\"codes\" [appName]=\"appName\" [username]=\"model.username\" (done)=\"onRecoveryCodesSaved()\" />\n  } @else if (step !== 'none') {\n    <form (submit)=\"onSubmitCode($event)\" class=\"login-form\" aria-label=\"Authenticator code\">\n      @if (step === 'setup' && authenticationService.setupChallenge(); as challenge) {\n        <p class=\"text-secondary-info login-code-lead\">\n          Set up your authenticator: scan this with Google Authenticator (or Authy, 1Password),\n          then enter the 6-digit code it shows.\n        </p>\n        <img class=\"login-qr\" [src]=\"challenge.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n        <p class=\"text-secondary-info login-key\">Can't scan? Enter this key: <code>{{ challenge.key }}</code></p>\n      } @else {\n        <p class=\"text-secondary-info login-code-lead\">\n          @if (useRecovery()) {\n            Enter one of your recovery codes.\n          } @else {\n            Enter the 6-digit code from your authenticator app.\n          }\n        </p>\n      }\n      <mat-form-field appearance=\"outline\" class=\"login-field\">\n        <mat-label>{{ useRecovery() ? 'Recovery code' : 'Code' }}</mat-label>\n        <input\n          matInput\n          name=\"code\"\n          [(ngModel)]=\"codeText\"\n          [disabled]=\"submitted\"\n          [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n          [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\"\n          [attr.maxlength]=\"useRecovery() ? 16 : 7\"\n          [placeholder]=\"useRecovery() ? 'xxxxx-xxxxx' : '123456'\"\n          autofocus\n        />\n      </mat-form-field>\n      <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n        {{ step === 'setup' ? 'Finish setup and sign in' : 'Sign in' }}\n      </button>\n      <div class=\"login-code-links\">\n        @if (step === 'code') {\n          <button mat-button type=\"button\" (click)=\"onToggleRecovery()\">\n            {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n          </button>\n        }\n        <button mat-button type=\"button\" (click)=\"onCancelCode()\">Back</button>\n      </div>\n    </form>\n  } @else {\n  <form #loginForm=\"ngForm\" (ngSubmit)=\"onSubmit($event)\" class=\"login-form\">\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Username</mat-label>\n      <input\n        #usernameInput\n        matInput\n        placeholder=\"Enter username\"\n        [(ngModel)]=\"model.username\"\n        name=\"username\"\n        [disabled]=\"submitted\"\n        required\n        regexValidator\n        [regex]=\"usernameRegex\"\n        (cdkAutofill)=\"onAutofill($event, usernameInput)\"\n      />\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Password</mat-label>\n      <input\n        #passwordInput\n        matInput\n        placeholder=\"Enter password\"\n        [type]=\"hide() ? 'password' : 'text'\"\n        [(ngModel)]=\"model.password\"\n        name=\"password\"\n        [disabled]=\"submitted\"\n        regexValidator\n        [regex]=\"passwordRegex\"\n        (cdkAutofill)=\"onAutofill($event, passwordInput)\"\n      />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"clickEvent($event)\"\n        [attr.aria-label]=\"'Hide password'\"\n        [attr.aria-pressed]=\"hide()\"\n      >\n        <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n      Login\n    </button>\n  </form>\n  }\n  @if (errors.length > 0) {\n    <div class=\"login-errors\">\n      @for (error of errors; track error.ndx) {\n        <div class=\"login-error text-loss\">{{ error.message }}</div>\n      }\n    </div>\n  }\n  @if (authenticationService.conflictSessions(); as sessions) {\n    <div class=\"login-conflict\">\n      <p class=\"text-secondary-info\">\n        You are already signed in {{ sessions.length === 1 ? 'somewhere else' : 'on other devices' }}:\n      </p>\n      @for (session of sessions; track session.sessionId ?? $index) {\n        <div class=\"login-conflict-session\">\n          @if (canEndIndividually()) {\n            <mat-checkbox\n              [checked]=\"isSelected(session)\"\n              [disabled]=\"!session.sessionId\"\n              (change)=\"toggleSelected(session, $event.checked)\"\n              [attr.aria-label]=\"'End ' + deviceLabel(session)\"\n            ></mat-checkbox>\n          }\n          <span class=\"text-secondary-info\">\n            <strong>{{ deviceLabel(session) }}</strong>\n            <!-- signedInAtEpoch is when the password was typed. startEpoch is\n                 when the row was written, which renewal resets \u2014 so it is shown\n                 only when there is nothing better, and labelled for what it is. -->\n            @if (session.signedInAtEpoch) {\n              \u2014 since {{ session.signedInAtEpoch | date:'short' }}\n            } @else {\n              \u2014 last active {{ session.startEpoch | date:'short' }}\n            }\n          </span>\n        </div>\n      }\n      <div class=\"login-conflict-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"onCancelConflict()\">Cancel</button>\n        @if (selectedCount() > 0) {\n          <button mat-stroked-button type=\"button\" (click)=\"onEndSelected()\">\n            End {{ selectedCount() === 1 ? 'that one' : selectedCount() + ' of them' }} and sign in\n          </button>\n        }\n        <button mat-stroked-button type=\"button\" (click)=\"onTakeOver()\">\n          {{ sessions.length === 1 ? 'End it and sign in' : 'End them all and sign in' }}\n        </button>\n        @if (authenticationService.additionalSignInAllowed()) {\n          <button mat-flat-button type=\"button\" (click)=\"onSignInAsWell()\">Sign in here as well</button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.login-header{margin-bottom:32px}.login-header h2{font-size:1.5rem;font-weight:300;margin-bottom:8px}.login-form{display:flex;flex-direction:column;align-items:center;gap:8px;width:320px}.login-field{width:100%;text-align:left}.login-takeover{align-self:flex-start;margin-top:4px}.login-button{margin-top:8px;width:100%}.login-errors{margin-top:16px;max-width:320px}.login-conflict{margin-top:16px;max-width:320px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);font-size:.85rem;text-align:left}.login-conflict p{margin:0 0 8px}.login-conflict-session{display:flex;align-items:center;gap:8px;margin:4px 0}.login-conflict-actions{flex-wrap:wrap;display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.login-error{padding:8px 12px;margin-bottom:4px;font-size:.85rem;border-radius:4px;background-color:var(--color-surface-light)}.login-code-lead{margin:0 0 8px;font-size:.9rem}.login-qr{display:block;margin:4px auto 8px;image-rendering:pixelated}.login-key{margin:0 0 8px;font-size:.8rem;word-break:break-all}.login-code-links{display:flex;justify-content:space-between;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.CdkAutofill, selector: "[cdkAutofill]", outputs: ["cdkAutofill"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RegexValidatorDirective, selector: "[regexValidator]", inputs: ["regex"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "component", type: RecoveryCodes, selector: "shell-recovery-codes", inputs: ["codes", "appName", "username"], outputs: ["done"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Login, isStandalone: true, selector: "shell-login", ngImport: i0, template: "@let usernameRegex = USERNAME_REGEX;\n@let passwordRegex = PASSWORD_REGEX;\n<div class=\"login-container\">\n  <div class=\"login-header\">\n    <h2 class=\"text-text-primary\">{{ appName }}</h2>\n    <p class=\"text-secondary-info\">Sign in to continue</p>\n  </div>\n  @let step = authenticationService.codeStep();\n  @if (authenticationService.recoveryCodesToShow(); as codes) {\n    <shell-recovery-codes [codes]=\"codes\" [appName]=\"appName\" [username]=\"model.username\" (done)=\"onRecoveryCodesSaved()\" />\n  } @else if (step !== 'none') {\n    <form (submit)=\"onSubmitCode($event)\" class=\"login-form\" aria-label=\"Authenticator code\">\n      @if (step === 'setup' && authenticationService.setupChallenge(); as challenge) {\n        <p class=\"text-secondary-info login-code-lead\">\n          Set up your authenticator: scan this with Google Authenticator (or Authy, 1Password),\n          then enter the 6-digit code it shows.\n        </p>\n        <img class=\"login-qr\" [src]=\"challenge.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n        <p class=\"text-secondary-info login-key\">Can't scan? Enter this key: <code>{{ challenge.key }}</code></p>\n      } @else {\n        <p class=\"text-secondary-info login-code-lead\">\n          @if (useRecovery()) {\n            Enter one of your recovery codes.\n          } @else {\n            Enter the 6-digit code from your authenticator app.\n          }\n        </p>\n      }\n      <mat-form-field appearance=\"outline\" class=\"login-field\">\n        <mat-label>{{ useRecovery() ? 'Recovery code' : 'Code' }}</mat-label>\n        <input\n          matInput\n          name=\"code\"\n          [(ngModel)]=\"codeText\"\n          [disabled]=\"submitted\"\n          [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n          [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\"\n          [attr.maxlength]=\"useRecovery() ? 16 : 7\"\n          [placeholder]=\"useRecovery() ? 'xxxxx-xxxxx' : '123456'\"\n          autofocus\n        />\n      </mat-form-field>\n      <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n        {{ step === 'setup' ? 'Finish setup and sign in' : 'Sign in' }}\n      </button>\n      <div class=\"login-code-links\">\n        @if (step === 'code') {\n          <button mat-button type=\"button\" (click)=\"onToggleRecovery()\">\n            {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n          </button>\n        }\n        <button mat-button type=\"button\" (click)=\"onCancelCode()\">Back</button>\n      </div>\n    </form>\n  } @else {\n  <form #loginForm=\"ngForm\" (ngSubmit)=\"onSubmit($event)\" class=\"login-form\">\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Username</mat-label>\n      <input\n        #usernameInput\n        matInput\n        placeholder=\"Enter username\"\n        [(ngModel)]=\"model.username\"\n        name=\"username\"\n        autocomplete=\"username webauthn\"\n        [disabled]=\"submitted\"\n        required\n        regexValidator\n        [regex]=\"usernameRegex\"\n        (cdkAutofill)=\"onAutofill($event, usernameInput)\"\n      />\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Password</mat-label>\n      <input\n        #passwordInput\n        matInput\n        placeholder=\"Enter password\"\n        [type]=\"hide() ? 'password' : 'text'\"\n        [(ngModel)]=\"model.password\"\n        name=\"password\"\n        [disabled]=\"submitted\"\n        regexValidator\n        [regex]=\"passwordRegex\"\n        (cdkAutofill)=\"onAutofill($event, passwordInput)\"\n      />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"clickEvent($event)\"\n        [attr.aria-label]=\"'Hide password'\"\n        [attr.aria-pressed]=\"hide()\"\n      >\n        <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n      Login\n    </button>\n    @if (passkeys) {\n      <button mat-stroked-button type=\"button\" [disabled]=\"submitted\" class=\"login-button\" (click)=\"onPasskey()\">\n        <mat-icon>fingerprint</mat-icon>\n        Sign in with a passkey\n      </button>\n    }\n    @if (passkeyHint()) {\n      <p class=\"text-secondary-info login-passkey-hint\">\n        No passkey on this device? Sign in with your password and code, then add one under Sign-in Code.\n      </p>\n    }\n  </form>\n  }\n  @if (errors.length > 0) {\n    <div class=\"login-errors\">\n      @for (error of errors; track error.ndx) {\n        <div class=\"login-error text-loss\">{{ error.message }}</div>\n      }\n    </div>\n  }\n  @if (authenticationService.conflictSessions(); as sessions) {\n    <div class=\"login-conflict\">\n      <p class=\"text-secondary-info\">\n        You are already signed in {{ sessions.length === 1 ? 'somewhere else' : 'on other devices' }}:\n      </p>\n      @for (session of sessions; track session.sessionId ?? $index) {\n        <div class=\"login-conflict-session\">\n          @if (canEndIndividually()) {\n            <mat-checkbox\n              [checked]=\"isSelected(session)\"\n              [disabled]=\"!session.sessionId\"\n              (change)=\"toggleSelected(session, $event.checked)\"\n              [attr.aria-label]=\"'End ' + deviceLabel(session)\"\n            ></mat-checkbox>\n          }\n          <span class=\"text-secondary-info\">\n            <strong>{{ deviceLabel(session) }}</strong>\n            <!-- signedInAtEpoch is when the password was typed. startEpoch is\n                 when the row was written, which renewal resets \u2014 so it is shown\n                 only when there is nothing better, and labelled for what it is. -->\n            @if (session.signedInAtEpoch) {\n              \u2014 since {{ session.signedInAtEpoch | date:'short' }}\n            } @else {\n              \u2014 last active {{ session.startEpoch | date:'short' }}\n            }\n          </span>\n        </div>\n      }\n      <div class=\"login-conflict-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"onCancelConflict()\">Cancel</button>\n        @if (selectedCount() > 0) {\n          <button mat-stroked-button type=\"button\" (click)=\"onEndSelected()\">\n            End {{ selectedCount() === 1 ? 'that one' : selectedCount() + ' of them' }} and sign in\n          </button>\n        }\n        <button mat-stroked-button type=\"button\" (click)=\"onTakeOver()\">\n          {{ sessions.length === 1 ? 'End it and sign in' : 'End them all and sign in' }}\n        </button>\n        @if (authenticationService.additionalSignInAllowed()) {\n          <button mat-flat-button type=\"button\" (click)=\"onSignInAsWell()\">Sign in here as well</button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.login-header{margin-bottom:32px}.login-header h2{font-size:1.5rem;font-weight:300;margin-bottom:8px}.login-form{display:flex;flex-direction:column;align-items:center;gap:8px;width:320px}.login-field{width:100%;text-align:left}.login-takeover{align-self:flex-start;margin-top:4px}.login-button{margin-top:8px;width:100%}.login-errors{margin-top:16px;max-width:320px}.login-conflict{margin-top:16px;max-width:320px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);font-size:.85rem;text-align:left}.login-conflict p{margin:0 0 8px}.login-conflict-session{display:flex;align-items:center;gap:8px;margin:4px 0}.login-conflict-actions{flex-wrap:wrap;display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.login-error{padding:8px 12px;margin-bottom:4px;font-size:.85rem;border-radius:4px;background-color:var(--color-surface-light)}.login-code-lead{margin:0 0 8px;font-size:.9rem}.login-qr{display:block;margin:4px auto 8px;image-rendering:pixelated}.login-key{margin:0 0 8px;font-size:.8rem;word-break:break-all}.login-code-links{display:flex;justify-content:space-between;width:100%}.login-passkey-hint{margin:4px 0 0;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.CdkAutofill, selector: "[cdkAutofill]", outputs: ["cdkAutofill"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RegexValidatorDirective, selector: "[regexValidator]", inputs: ["regex"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "component", type: RecoveryCodes, selector: "shell-recovery-codes", inputs: ["codes", "appName", "username"], outputs: ["done"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Login, decorators: [{
             type: Component,
@@ -4354,7 +4685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         TextFieldModule,
                         DatePipe,
                         RecoveryCodes,
-                    ], template: "@let usernameRegex = USERNAME_REGEX;\n@let passwordRegex = PASSWORD_REGEX;\n<div class=\"login-container\">\n  <div class=\"login-header\">\n    <h2 class=\"text-text-primary\">{{ appName }}</h2>\n    <p class=\"text-secondary-info\">Sign in to continue</p>\n  </div>\n  @let step = authenticationService.codeStep();\n  @if (authenticationService.recoveryCodesToShow(); as codes) {\n    <shell-recovery-codes [codes]=\"codes\" [appName]=\"appName\" [username]=\"model.username\" (done)=\"onRecoveryCodesSaved()\" />\n  } @else if (step !== 'none') {\n    <form (submit)=\"onSubmitCode($event)\" class=\"login-form\" aria-label=\"Authenticator code\">\n      @if (step === 'setup' && authenticationService.setupChallenge(); as challenge) {\n        <p class=\"text-secondary-info login-code-lead\">\n          Set up your authenticator: scan this with Google Authenticator (or Authy, 1Password),\n          then enter the 6-digit code it shows.\n        </p>\n        <img class=\"login-qr\" [src]=\"challenge.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n        <p class=\"text-secondary-info login-key\">Can't scan? Enter this key: <code>{{ challenge.key }}</code></p>\n      } @else {\n        <p class=\"text-secondary-info login-code-lead\">\n          @if (useRecovery()) {\n            Enter one of your recovery codes.\n          } @else {\n            Enter the 6-digit code from your authenticator app.\n          }\n        </p>\n      }\n      <mat-form-field appearance=\"outline\" class=\"login-field\">\n        <mat-label>{{ useRecovery() ? 'Recovery code' : 'Code' }}</mat-label>\n        <input\n          matInput\n          name=\"code\"\n          [(ngModel)]=\"codeText\"\n          [disabled]=\"submitted\"\n          [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n          [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\"\n          [attr.maxlength]=\"useRecovery() ? 16 : 7\"\n          [placeholder]=\"useRecovery() ? 'xxxxx-xxxxx' : '123456'\"\n          autofocus\n        />\n      </mat-form-field>\n      <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n        {{ step === 'setup' ? 'Finish setup and sign in' : 'Sign in' }}\n      </button>\n      <div class=\"login-code-links\">\n        @if (step === 'code') {\n          <button mat-button type=\"button\" (click)=\"onToggleRecovery()\">\n            {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n          </button>\n        }\n        <button mat-button type=\"button\" (click)=\"onCancelCode()\">Back</button>\n      </div>\n    </form>\n  } @else {\n  <form #loginForm=\"ngForm\" (ngSubmit)=\"onSubmit($event)\" class=\"login-form\">\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Username</mat-label>\n      <input\n        #usernameInput\n        matInput\n        placeholder=\"Enter username\"\n        [(ngModel)]=\"model.username\"\n        name=\"username\"\n        [disabled]=\"submitted\"\n        required\n        regexValidator\n        [regex]=\"usernameRegex\"\n        (cdkAutofill)=\"onAutofill($event, usernameInput)\"\n      />\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Password</mat-label>\n      <input\n        #passwordInput\n        matInput\n        placeholder=\"Enter password\"\n        [type]=\"hide() ? 'password' : 'text'\"\n        [(ngModel)]=\"model.password\"\n        name=\"password\"\n        [disabled]=\"submitted\"\n        regexValidator\n        [regex]=\"passwordRegex\"\n        (cdkAutofill)=\"onAutofill($event, passwordInput)\"\n      />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"clickEvent($event)\"\n        [attr.aria-label]=\"'Hide password'\"\n        [attr.aria-pressed]=\"hide()\"\n      >\n        <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n      Login\n    </button>\n  </form>\n  }\n  @if (errors.length > 0) {\n    <div class=\"login-errors\">\n      @for (error of errors; track error.ndx) {\n        <div class=\"login-error text-loss\">{{ error.message }}</div>\n      }\n    </div>\n  }\n  @if (authenticationService.conflictSessions(); as sessions) {\n    <div class=\"login-conflict\">\n      <p class=\"text-secondary-info\">\n        You are already signed in {{ sessions.length === 1 ? 'somewhere else' : 'on other devices' }}:\n      </p>\n      @for (session of sessions; track session.sessionId ?? $index) {\n        <div class=\"login-conflict-session\">\n          @if (canEndIndividually()) {\n            <mat-checkbox\n              [checked]=\"isSelected(session)\"\n              [disabled]=\"!session.sessionId\"\n              (change)=\"toggleSelected(session, $event.checked)\"\n              [attr.aria-label]=\"'End ' + deviceLabel(session)\"\n            ></mat-checkbox>\n          }\n          <span class=\"text-secondary-info\">\n            <strong>{{ deviceLabel(session) }}</strong>\n            <!-- signedInAtEpoch is when the password was typed. startEpoch is\n                 when the row was written, which renewal resets \u2014 so it is shown\n                 only when there is nothing better, and labelled for what it is. -->\n            @if (session.signedInAtEpoch) {\n              \u2014 since {{ session.signedInAtEpoch | date:'short' }}\n            } @else {\n              \u2014 last active {{ session.startEpoch | date:'short' }}\n            }\n          </span>\n        </div>\n      }\n      <div class=\"login-conflict-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"onCancelConflict()\">Cancel</button>\n        @if (selectedCount() > 0) {\n          <button mat-stroked-button type=\"button\" (click)=\"onEndSelected()\">\n            End {{ selectedCount() === 1 ? 'that one' : selectedCount() + ' of them' }} and sign in\n          </button>\n        }\n        <button mat-stroked-button type=\"button\" (click)=\"onTakeOver()\">\n          {{ sessions.length === 1 ? 'End it and sign in' : 'End them all and sign in' }}\n        </button>\n        @if (authenticationService.additionalSignInAllowed()) {\n          <button mat-flat-button type=\"button\" (click)=\"onSignInAsWell()\">Sign in here as well</button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.login-header{margin-bottom:32px}.login-header h2{font-size:1.5rem;font-weight:300;margin-bottom:8px}.login-form{display:flex;flex-direction:column;align-items:center;gap:8px;width:320px}.login-field{width:100%;text-align:left}.login-takeover{align-self:flex-start;margin-top:4px}.login-button{margin-top:8px;width:100%}.login-errors{margin-top:16px;max-width:320px}.login-conflict{margin-top:16px;max-width:320px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);font-size:.85rem;text-align:left}.login-conflict p{margin:0 0 8px}.login-conflict-session{display:flex;align-items:center;gap:8px;margin:4px 0}.login-conflict-actions{flex-wrap:wrap;display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.login-error{padding:8px 12px;margin-bottom:4px;font-size:.85rem;border-radius:4px;background-color:var(--color-surface-light)}.login-code-lead{margin:0 0 8px;font-size:.9rem}.login-qr{display:block;margin:4px auto 8px;image-rendering:pixelated}.login-key{margin:0 0 8px;font-size:.8rem;word-break:break-all}.login-code-links{display:flex;justify-content:space-between;width:100%}\n"] }]
+                    ], template: "@let usernameRegex = USERNAME_REGEX;\n@let passwordRegex = PASSWORD_REGEX;\n<div class=\"login-container\">\n  <div class=\"login-header\">\n    <h2 class=\"text-text-primary\">{{ appName }}</h2>\n    <p class=\"text-secondary-info\">Sign in to continue</p>\n  </div>\n  @let step = authenticationService.codeStep();\n  @if (authenticationService.recoveryCodesToShow(); as codes) {\n    <shell-recovery-codes [codes]=\"codes\" [appName]=\"appName\" [username]=\"model.username\" (done)=\"onRecoveryCodesSaved()\" />\n  } @else if (step !== 'none') {\n    <form (submit)=\"onSubmitCode($event)\" class=\"login-form\" aria-label=\"Authenticator code\">\n      @if (step === 'setup' && authenticationService.setupChallenge(); as challenge) {\n        <p class=\"text-secondary-info login-code-lead\">\n          Set up your authenticator: scan this with Google Authenticator (or Authy, 1Password),\n          then enter the 6-digit code it shows.\n        </p>\n        <img class=\"login-qr\" [src]=\"challenge.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n        <p class=\"text-secondary-info login-key\">Can't scan? Enter this key: <code>{{ challenge.key }}</code></p>\n      } @else {\n        <p class=\"text-secondary-info login-code-lead\">\n          @if (useRecovery()) {\n            Enter one of your recovery codes.\n          } @else {\n            Enter the 6-digit code from your authenticator app.\n          }\n        </p>\n      }\n      <mat-form-field appearance=\"outline\" class=\"login-field\">\n        <mat-label>{{ useRecovery() ? 'Recovery code' : 'Code' }}</mat-label>\n        <input\n          matInput\n          name=\"code\"\n          [(ngModel)]=\"codeText\"\n          [disabled]=\"submitted\"\n          [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n          [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\"\n          [attr.maxlength]=\"useRecovery() ? 16 : 7\"\n          [placeholder]=\"useRecovery() ? 'xxxxx-xxxxx' : '123456'\"\n          autofocus\n        />\n      </mat-form-field>\n      <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n        {{ step === 'setup' ? 'Finish setup and sign in' : 'Sign in' }}\n      </button>\n      <div class=\"login-code-links\">\n        @if (step === 'code') {\n          <button mat-button type=\"button\" (click)=\"onToggleRecovery()\">\n            {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n          </button>\n        }\n        <button mat-button type=\"button\" (click)=\"onCancelCode()\">Back</button>\n      </div>\n    </form>\n  } @else {\n  <form #loginForm=\"ngForm\" (ngSubmit)=\"onSubmit($event)\" class=\"login-form\">\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Username</mat-label>\n      <input\n        #usernameInput\n        matInput\n        placeholder=\"Enter username\"\n        [(ngModel)]=\"model.username\"\n        name=\"username\"\n        autocomplete=\"username webauthn\"\n        [disabled]=\"submitted\"\n        required\n        regexValidator\n        [regex]=\"usernameRegex\"\n        (cdkAutofill)=\"onAutofill($event, usernameInput)\"\n      />\n    </mat-form-field>\n    <mat-form-field appearance=\"outline\" class=\"login-field\">\n      <mat-label>Password</mat-label>\n      <input\n        #passwordInput\n        matInput\n        placeholder=\"Enter password\"\n        [type]=\"hide() ? 'password' : 'text'\"\n        [(ngModel)]=\"model.password\"\n        name=\"password\"\n        [disabled]=\"submitted\"\n        regexValidator\n        [regex]=\"passwordRegex\"\n        (cdkAutofill)=\"onAutofill($event, passwordInput)\"\n      />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"clickEvent($event)\"\n        [attr.aria-label]=\"'Hide password'\"\n        [attr.aria-pressed]=\"hide()\"\n      >\n        <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-flat-button type=\"submit\" [disabled]=\"submitted\" class=\"login-button\">\n      Login\n    </button>\n    @if (passkeys) {\n      <button mat-stroked-button type=\"button\" [disabled]=\"submitted\" class=\"login-button\" (click)=\"onPasskey()\">\n        <mat-icon>fingerprint</mat-icon>\n        Sign in with a passkey\n      </button>\n    }\n    @if (passkeyHint()) {\n      <p class=\"text-secondary-info login-passkey-hint\">\n        No passkey on this device? Sign in with your password and code, then add one under Sign-in Code.\n      </p>\n    }\n  </form>\n  }\n  @if (errors.length > 0) {\n    <div class=\"login-errors\">\n      @for (error of errors; track error.ndx) {\n        <div class=\"login-error text-loss\">{{ error.message }}</div>\n      }\n    </div>\n  }\n  @if (authenticationService.conflictSessions(); as sessions) {\n    <div class=\"login-conflict\">\n      <p class=\"text-secondary-info\">\n        You are already signed in {{ sessions.length === 1 ? 'somewhere else' : 'on other devices' }}:\n      </p>\n      @for (session of sessions; track session.sessionId ?? $index) {\n        <div class=\"login-conflict-session\">\n          @if (canEndIndividually()) {\n            <mat-checkbox\n              [checked]=\"isSelected(session)\"\n              [disabled]=\"!session.sessionId\"\n              (change)=\"toggleSelected(session, $event.checked)\"\n              [attr.aria-label]=\"'End ' + deviceLabel(session)\"\n            ></mat-checkbox>\n          }\n          <span class=\"text-secondary-info\">\n            <strong>{{ deviceLabel(session) }}</strong>\n            <!-- signedInAtEpoch is when the password was typed. startEpoch is\n                 when the row was written, which renewal resets \u2014 so it is shown\n                 only when there is nothing better, and labelled for what it is. -->\n            @if (session.signedInAtEpoch) {\n              \u2014 since {{ session.signedInAtEpoch | date:'short' }}\n            } @else {\n              \u2014 last active {{ session.startEpoch | date:'short' }}\n            }\n          </span>\n        </div>\n      }\n      <div class=\"login-conflict-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"onCancelConflict()\">Cancel</button>\n        @if (selectedCount() > 0) {\n          <button mat-stroked-button type=\"button\" (click)=\"onEndSelected()\">\n            End {{ selectedCount() === 1 ? 'that one' : selectedCount() + ' of them' }} and sign in\n          </button>\n        }\n        <button mat-stroked-button type=\"button\" (click)=\"onTakeOver()\">\n          {{ sessions.length === 1 ? 'End it and sign in' : 'End them all and sign in' }}\n        </button>\n        @if (authenticationService.additionalSignInAllowed()) {\n          <button mat-flat-button type=\"button\" (click)=\"onSignInAsWell()\">Sign in here as well</button>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.login-header{margin-bottom:32px}.login-header h2{font-size:1.5rem;font-weight:300;margin-bottom:8px}.login-form{display:flex;flex-direction:column;align-items:center;gap:8px;width:320px}.login-field{width:100%;text-align:left}.login-takeover{align-self:flex-start;margin-top:4px}.login-button{margin-top:8px;width:100%}.login-errors{margin-top:16px;max-width:320px}.login-conflict{margin-top:16px;max-width:320px;padding:12px 16px;border-radius:4px;background-color:var(--color-surface-light);font-size:.85rem;text-align:left}.login-conflict p{margin:0 0 8px}.login-conflict-session{display:flex;align-items:center;gap:8px;margin:4px 0}.login-conflict-actions{flex-wrap:wrap;display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.login-error{padding:8px 12px;margin-bottom:4px;font-size:.85rem;border-radius:4px;background-color:var(--color-surface-light)}.login-code-lead{margin:0 0 8px;font-size:.9rem}.login-qr{display:block;margin:4px auto 8px;image-rendering:pixelated}.login-key{margin:0 0 8px;font-size:.8rem;word-break:break-all}.login-code-links{display:flex;justify-content:space-between;width:100%}.login-passkey-hint{margin:4px 0 0;font-size:.85rem}\n"] }]
         }], ctorParameters: () => [{ type: AuthenticationService }, { type: i2$1.Router }] });
 
 /*
@@ -4370,6 +4701,11 @@ Settings → Sign-in code (authenticator-sign-in.prd.md D5, D7). Shared by every
 
 ⛔ There is deliberately no "remove" and no "turn off" here (D13). Those are AWS-only; the screen
 says how to get them done.
+
+Passkeys (passkey-sign-in.prd.md D13–D17), shown when the browser can do them and an authenticator
+is set up (D2 — a passkey is an option beside it, never instead):
+  - Add one: a name, then password + code (or recovery code), or a passkey already added (D14).
+  - Remove one: a code, a recovery code, or a passkey (D15). Removing only takes a way in away.
 */
 class AuthenticatorSettings {
     constructor() {
@@ -4389,8 +4725,16 @@ class AuthenticatorSettings {
         ...(ngDevMode ? [{ debugName: "codes" }] : /* istanbul ignore next */ []));
         this.useRecovery = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "useRecovery" }] : /* istanbul ignore next */ []));
+        /** Whether this browser can make and use passkeys at all. */
+        this.passkeys = passkeysSupported();
+        this.passkeyList = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "passkeyList" }] : /* istanbul ignore next */ []));
+        /** The passkey being removed, while its confirmation is on screen. */
+        this.removing = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "removing" }] : /* istanbul ignore next */ []));
         this.password = '';
         this.code = '';
+        this.passkeyName = '';
     }
     #auth;
     ngOnInit() {
@@ -4398,12 +4742,55 @@ class AuthenticatorSettings {
     }
     async #load() {
         try {
-            this.status.set(await this.#auth.authenticatorStatus());
+            const status = await this.#auth.authenticatorStatus();
+            this.status.set(status);
+            if (this.passkeys && status.enrolled)
+                this.passkeyList.set(await this.#auth.listPasskeys());
         }
         catch (err) {
             this.error.set(err instanceof AuthenticatorError ? err.message : 'Could not load your sign-in code settings.');
         }
     }
+    beginAddPasskey() {
+        this.#reset();
+        this.mode.set('passkey-add');
+    }
+    beginRemovePasskey(passkey) {
+        this.#reset();
+        this.removing.set(passkey);
+        this.mode.set('passkey-remove');
+    }
+    /** Add, proved with password + code (or recovery code) — or with a passkey already added. */
+    async addPasskey(event, withPasskey = false) {
+        event?.preventDefault();
+        const name = this.passkeyName.trim();
+        if (!name)
+            return;
+        await this.#run(async () => {
+            await this.#auth.addPasskey(name, withPasskey ? 'passkey' : { password: this.password, ...this.#codeEntry() });
+            await this.#passkeysChanged();
+        });
+    }
+    /** Remove, proved with a code or recovery code — or with a passkey. */
+    async removePasskey(event, withPasskey = false) {
+        event?.preventDefault();
+        const target = this.removing();
+        if (!target)
+            return;
+        await this.#run(async () => {
+            const proof = withPasskey ? 'passkey' : this.#codeEntry();
+            await this.#auth.removePasskey(target.credentialId, proof);
+            await this.#passkeysChanged();
+        });
+    }
+    #codeEntry() {
+        return this.useRecovery() ? { recoveryCode: this.code.trim() } : { code: this.code.trim() };
+    }
+    async #passkeysChanged() {
+        this.#reset();
+        this.mode.set('view');
+        this.passkeyList.set(await this.#auth.listPasskeys());
+    }
     begin(mode) {
         this.#reset();
         this.mode.set(mode);
@@ -4470,17 +4857,19 @@ class AuthenticatorSettings {
     #reset() {
         this.password = '';
         this.code = '';
+        this.passkeyName = '';
+        this.removing.set(undefined);
         this.error.set(undefined);
         this.challenge.set(undefined);
         this.codes.set(undefined);
         this.useRecovery.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthenticatorSettings, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: AuthenticatorSettings, isStandalone: true, selector: "shell-authenticator-settings", ngImport: i0, template: "<section class=\"authenticator-settings\">\n  <h2 class=\"text-text-primary\">Sign-in code</h2>\n  <p class=\"text-secondary-info\">\n    Signing in asks for your password and a 6-digit code from an authenticator app on your phone\n    (Google Authenticator, Authy, 1Password).\n  </p>\n\n  @if (status(); as s) {\n    @switch (mode()) {\n      @case ('view') {\n        <dl class=\"authenticator-facts\">\n          <dt>Authenticator</dt>\n          <dd>{{ s.enrolled ? 'Set up' : 'Not set up' }}</dd>\n          @if (s.enrolled) {\n            <dt>Recovery codes left</dt>\n            <dd [class.text-loss]=\"s.recoveryCodesLeft <= 2\">{{ s.recoveryCodesLeft }} of 10</dd>\n          }\n          <dt>Code required at sign-in</dt>\n          <dd>{{ s.enrolled ? 'Yes' : (s.codeRequired ? 'Yes' : 'Not yet \u2014 set one up') }}</dd>\n        </dl>\n        <div class=\"authenticator-actions\">\n          <button mat-flat-button type=\"button\" (click)=\"begin('password')\">\n            {{ s.enrolled ? 'Replace authenticator' : 'Set up authenticator' }}\n          </button>\n          @if (s.enrolled) {\n            <button mat-stroked-button type=\"button\" (click)=\"begin('reissue')\">New recovery codes</button>\n          }\n        </div>\n        <p class=\"text-secondary-info authenticator-note\">\n          Lost your phone? Sign in with a recovery code, then replace the authenticator here.\n          No recovery codes left? Only the administrator can reset it, from AWS \u2014 there is no way\n          to switch the code off from inside the app.\n        </p>\n      }\n\n      @case ('password') {\n        <form class=\"authenticator-form\" (submit)=\"start($event)\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Password</mat-label>\n            <input matInput type=\"password\" name=\"password\" [(ngModel)]=\"password\" autocomplete=\"current-password\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          @if (s.enrolled) {\n            <mat-form-field appearance=\"outline\">\n              <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                     [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n              {{ useRecovery() ? 'Use the 6-digit code' : 'Lost the phone? Use a recovery code' }}\n            </button>\n          }\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !password || (s.enrolled && !code.trim())\">Continue</button>\n          </div>\n        </form>\n      }\n\n      @case ('scan') {\n        @if (challenge(); as c) {\n          <form class=\"authenticator-form\" (submit)=\"confirm($event)\">\n            <p class=\"text-secondary-info\">Scan this with your authenticator app, then enter the 6-digit code it shows.</p>\n            <img class=\"authenticator-qr\" [src]=\"c.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n            <p class=\"text-secondary-info authenticator-key\">Can't scan? Enter this key: <code>{{ c.key }}</code></p>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Code</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <div class=\"authenticator-actions\">\n              <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n              <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Finish setup</button>\n            </div>\n            @if (s.enrolled) {\n              <p class=\"text-secondary-info authenticator-note\">Your old authenticator keeps working until you finish.</p>\n            }\n          </form>\n        }\n      }\n\n      @case ('reissue') {\n        <form class=\"authenticator-form\" (submit)=\"reissue($event)\">\n          <p class=\"text-secondary-info\">Ten new recovery codes. The ones you have now will stop working.</p>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Current 6-digit code</mat-label>\n            <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Make new codes</button>\n          </div>\n        </form>\n      }\n\n      @case ('codes') {\n        @if (codes(); as list) {\n          <shell-recovery-codes [codes]=\"list\" [appName]=\"appName\" (done)=\"codesSaved()\" />\n        }\n      }\n    }\n  }\n\n  @if (error(); as message) {\n    <p class=\"text-loss authenticator-error\" role=\"alert\">{{ message }}</p>\n  }\n</section>\n", styles: [".authenticator-settings{max-width:480px;padding:16px}.authenticator-settings h2{font-size:1.25rem;font-weight:400;margin:0 0 8px}.authenticator-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:16px 0}.authenticator-facts dt{color:var(--color-secondary-info)}.authenticator-facts dd{margin:0}.authenticator-form{display:flex;flex-direction:column;gap:4px;max-width:320px;margin-top:12px}.authenticator-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.authenticator-link{align-self:flex-start}.authenticator-note{margin-top:16px;font-size:.85rem}.authenticator-qr{display:block;margin:4px 0 8px;image-rendering:pixelated}.authenticator-key{font-size:.8rem;word-break:break-all}.authenticator-error{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: RecoveryCodes, selector: "shell-recovery-codes", inputs: ["codes", "appName", "username"], outputs: ["done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: AuthenticatorSettings, isStandalone: true, selector: "shell-authenticator-settings", ngImport: i0, template: "<section class=\"authenticator-settings\">\n  <h2 class=\"text-text-primary\">Sign-in code</h2>\n  <p class=\"text-secondary-info\">\n    Signing in asks for your password and a 6-digit code from an authenticator app on your phone\n    (Google Authenticator, Authy, 1Password).\n  </p>\n\n  @if (status(); as s) {\n    @switch (mode()) {\n      @case ('view') {\n        <dl class=\"authenticator-facts\">\n          <dt>Authenticator</dt>\n          <dd>{{ s.enrolled ? 'Set up' : 'Not set up' }}</dd>\n          @if (s.enrolled) {\n            <dt>Recovery codes left</dt>\n            <dd [class.text-loss]=\"s.recoveryCodesLeft <= 2\">{{ s.recoveryCodesLeft }} of 10</dd>\n          }\n          <dt>Code required at sign-in</dt>\n          <dd>{{ s.enrolled ? 'Yes' : (s.codeRequired ? 'Yes' : 'Not yet \u2014 set one up') }}</dd>\n        </dl>\n        <div class=\"authenticator-actions\">\n          <button mat-flat-button type=\"button\" (click)=\"begin('password')\">\n            {{ s.enrolled ? 'Replace authenticator' : 'Set up authenticator' }}\n          </button>\n          @if (s.enrolled) {\n            <button mat-stroked-button type=\"button\" (click)=\"begin('reissue')\">New recovery codes</button>\n          }\n        </div>\n        <p class=\"text-secondary-info authenticator-note\">\n          Lost your phone? Sign in with a recovery code, then replace the authenticator here.\n          No recovery codes left? Only the administrator can reset it, from AWS \u2014 there is no way\n          to switch the code off from inside the app.\n        </p>\n        @if (passkeys && s.enrolled) {\n          <h3 class=\"text-text-primary passkey-heading\">Passkeys</h3>\n          <p class=\"text-secondary-info\">\n            Sign in with your fingerprint, face or device PIN instead of the password and code \u2014 on\n            broken-stock and broken-stock-admin. The password and code keep working.\n          </p>\n          @if (passkeyList(); as list) {\n            @if (list.length === 0) {\n              <p class=\"text-secondary-info\">No passkeys yet.</p>\n            } @else {\n              <ul class=\"passkey-list\">\n                @for (p of list; track p.credentialId) {\n                  <li class=\"passkey-row\">\n                    <span>\n                      <strong>{{ p.name }}</strong>\n                      <span class=\"text-secondary-info\">\n                        \u2014 added {{ p.addedAtEpoch | date:'mediumDate' }},\n                        {{ p.lastUsedAtEpoch ? 'last used ' + (p.lastUsedAtEpoch | date:'short') : 'not used yet' }},\n                        <span title=\"As the browser reported when the passkey was used\">\n                          {{ p.backedUp ? 'synced between your devices' : 'kept on one device or key' }}\n                        </span>\n                      </span>\n                    </span>\n                    <button mat-button type=\"button\" (click)=\"beginRemovePasskey(p)\">Remove</button>\n                  </li>\n                }\n              </ul>\n            }\n          }\n          <div class=\"authenticator-actions\">\n            <button mat-stroked-button type=\"button\" (click)=\"beginAddPasskey()\">Add a passkey</button>\n          </div>\n        }\n      }\n\n      @case ('passkey-add') {\n        <form class=\"authenticator-form\" (submit)=\"addPasskey($event)\">\n          <p class=\"text-secondary-info\">\n            Name it after the device or key it lives on, then confirm it is you.\n          </p>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Name</mat-label>\n            <input matInput name=\"passkeyName\" [(ngModel)]=\"passkeyName\" maxlength=\"64\" placeholder=\"MacBook, iPhone, YubiKey\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Password</mat-label>\n            <input matInput type=\"password\" name=\"password\" [(ngModel)]=\"password\" autocomplete=\"current-password\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n            <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                   [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n            {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n          </button>\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            @if ((passkeyList() ?? []).length > 0) {\n              <button mat-stroked-button type=\"button\" [disabled]=\"busy() || !passkeyName.trim()\" (click)=\"addPasskey(undefined, true)\">\n                Confirm with a passkey instead\n              </button>\n            }\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !passkeyName.trim() || !password || !code.trim()\">Add passkey</button>\n          </div>\n        </form>\n      }\n\n      @case ('passkey-remove') {\n        @if (removing(); as target) {\n          <form class=\"authenticator-form\" (submit)=\"removePasskey($event)\">\n            <p class=\"text-secondary-info\">\n              Remove <strong>{{ target.name }}</strong>? It will no longer sign you in. Your password and\n              code still work.\n            </p>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                     [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n              {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n            </button>\n            <div class=\"authenticator-actions\">\n              <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n              <button mat-stroked-button type=\"button\" [disabled]=\"busy()\" (click)=\"removePasskey(undefined, true)\">Confirm with a passkey</button>\n              <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Remove</button>\n            </div>\n          </form>\n        }\n      }\n\n      @case ('password') {\n        <form class=\"authenticator-form\" (submit)=\"start($event)\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Password</mat-label>\n            <input matInput type=\"password\" name=\"password\" [(ngModel)]=\"password\" autocomplete=\"current-password\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          @if (s.enrolled) {\n            <mat-form-field appearance=\"outline\">\n              <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                     [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n              {{ useRecovery() ? 'Use the 6-digit code' : 'Lost the phone? Use a recovery code' }}\n            </button>\n          }\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !password || (s.enrolled && !code.trim())\">Continue</button>\n          </div>\n        </form>\n      }\n\n      @case ('scan') {\n        @if (challenge(); as c) {\n          <form class=\"authenticator-form\" (submit)=\"confirm($event)\">\n            <p class=\"text-secondary-info\">Scan this with your authenticator app, then enter the 6-digit code it shows.</p>\n            <img class=\"authenticator-qr\" [src]=\"c.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n            <p class=\"text-secondary-info authenticator-key\">Can't scan? Enter this key: <code>{{ c.key }}</code></p>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Code</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <div class=\"authenticator-actions\">\n              <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n              <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Finish setup</button>\n            </div>\n            @if (s.enrolled) {\n              <p class=\"text-secondary-info authenticator-note\">Your old authenticator keeps working until you finish.</p>\n            }\n          </form>\n        }\n      }\n\n      @case ('reissue') {\n        <form class=\"authenticator-form\" (submit)=\"reissue($event)\">\n          <p class=\"text-secondary-info\">Ten new recovery codes. The ones you have now will stop working.</p>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Current 6-digit code</mat-label>\n            <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Make new codes</button>\n          </div>\n        </form>\n      }\n\n      @case ('codes') {\n        @if (codes(); as list) {\n          <shell-recovery-codes [codes]=\"list\" [appName]=\"appName\" (done)=\"codesSaved()\" />\n        }\n      }\n    }\n  }\n\n  @if (error(); as message) {\n    <p class=\"text-loss authenticator-error\" role=\"alert\">{{ message }}</p>\n  }\n</section>\n", styles: [".authenticator-settings{max-width:480px;padding:16px}.authenticator-settings h2{font-size:1.25rem;font-weight:400;margin:0 0 8px}.authenticator-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:16px 0}.authenticator-facts dt{color:var(--color-secondary-info)}.authenticator-facts dd{margin:0}.authenticator-form{display:flex;flex-direction:column;gap:4px;max-width:320px;margin-top:12px}.authenticator-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.authenticator-link{align-self:flex-start}.authenticator-note{margin-top:16px;font-size:.85rem}.authenticator-qr{display:block;margin:4px 0 8px;image-rendering:pixelated}.authenticator-key{font-size:.8rem;word-break:break-all}.authenticator-error{margin-top:12px}.passkey-heading{font-size:1.05rem;font-weight:400;margin:24px 0 4px}.passkey-list{list-style:none;padding:0;margin:8px 0}.passkey-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: RecoveryCodes, selector: "shell-recovery-codes", inputs: ["codes", "appName", "username"], outputs: ["done"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: AuthenticatorSettings, decorators: [{
             type: Component,
-            args: [{ selector: 'shell-authenticator-settings', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, RecoveryCodes], template: "<section class=\"authenticator-settings\">\n  <h2 class=\"text-text-primary\">Sign-in code</h2>\n  <p class=\"text-secondary-info\">\n    Signing in asks for your password and a 6-digit code from an authenticator app on your phone\n    (Google Authenticator, Authy, 1Password).\n  </p>\n\n  @if (status(); as s) {\n    @switch (mode()) {\n      @case ('view') {\n        <dl class=\"authenticator-facts\">\n          <dt>Authenticator</dt>\n          <dd>{{ s.enrolled ? 'Set up' : 'Not set up' }}</dd>\n          @if (s.enrolled) {\n            <dt>Recovery codes left</dt>\n            <dd [class.text-loss]=\"s.recoveryCodesLeft <= 2\">{{ s.recoveryCodesLeft }} of 10</dd>\n          }\n          <dt>Code required at sign-in</dt>\n          <dd>{{ s.enrolled ? 'Yes' : (s.codeRequired ? 'Yes' : 'Not yet \u2014 set one up') }}</dd>\n        </dl>\n        <div class=\"authenticator-actions\">\n          <button mat-flat-button type=\"button\" (click)=\"begin('password')\">\n            {{ s.enrolled ? 'Replace authenticator' : 'Set up authenticator' }}\n          </button>\n          @if (s.enrolled) {\n            <button mat-stroked-button type=\"button\" (click)=\"begin('reissue')\">New recovery codes</button>\n          }\n        </div>\n        <p class=\"text-secondary-info authenticator-note\">\n          Lost your phone? Sign in with a recovery code, then replace the authenticator here.\n          No recovery codes left? Only the administrator can reset it, from AWS \u2014 there is no way\n          to switch the code off from inside the app.\n        </p>\n      }\n\n      @case ('password') {\n        <form class=\"authenticator-form\" (submit)=\"start($event)\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Password</mat-label>\n            <input matInput type=\"password\" name=\"password\" [(ngModel)]=\"password\" autocomplete=\"current-password\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          @if (s.enrolled) {\n            <mat-form-field appearance=\"outline\">\n              <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                     [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n              {{ useRecovery() ? 'Use the 6-digit code' : 'Lost the phone? Use a recovery code' }}\n            </button>\n          }\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !password || (s.enrolled && !code.trim())\">Continue</button>\n          </div>\n        </form>\n      }\n\n      @case ('scan') {\n        @if (challenge(); as c) {\n          <form class=\"authenticator-form\" (submit)=\"confirm($event)\">\n            <p class=\"text-secondary-info\">Scan this with your authenticator app, then enter the 6-digit code it shows.</p>\n            <img class=\"authenticator-qr\" [src]=\"c.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n            <p class=\"text-secondary-info authenticator-key\">Can't scan? Enter this key: <code>{{ c.key }}</code></p>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Code</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <div class=\"authenticator-actions\">\n              <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n              <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Finish setup</button>\n            </div>\n            @if (s.enrolled) {\n              <p class=\"text-secondary-info authenticator-note\">Your old authenticator keeps working until you finish.</p>\n            }\n          </form>\n        }\n      }\n\n      @case ('reissue') {\n        <form class=\"authenticator-form\" (submit)=\"reissue($event)\">\n          <p class=\"text-secondary-info\">Ten new recovery codes. The ones you have now will stop working.</p>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Current 6-digit code</mat-label>\n            <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Make new codes</button>\n          </div>\n        </form>\n      }\n\n      @case ('codes') {\n        @if (codes(); as list) {\n          <shell-recovery-codes [codes]=\"list\" [appName]=\"appName\" (done)=\"codesSaved()\" />\n        }\n      }\n    }\n  }\n\n  @if (error(); as message) {\n    <p class=\"text-loss authenticator-error\" role=\"alert\">{{ message }}</p>\n  }\n</section>\n", styles: [".authenticator-settings{max-width:480px;padding:16px}.authenticator-settings h2{font-size:1.25rem;font-weight:400;margin:0 0 8px}.authenticator-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:16px 0}.authenticator-facts dt{color:var(--color-secondary-info)}.authenticator-facts dd{margin:0}.authenticator-form{display:flex;flex-direction:column;gap:4px;max-width:320px;margin-top:12px}.authenticator-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.authenticator-link{align-self:flex-start}.authenticator-note{margin-top:16px;font-size:.85rem}.authenticator-qr{display:block;margin:4px 0 8px;image-rendering:pixelated}.authenticator-key{font-size:.8rem;word-break:break-all}.authenticator-error{margin-top:12px}\n"] }]
+            args: [{ selector: 'shell-authenticator-settings', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, DatePipe, MatButtonModule, MatFormFieldModule, MatInputModule, RecoveryCodes], template: "<section class=\"authenticator-settings\">\n  <h2 class=\"text-text-primary\">Sign-in code</h2>\n  <p class=\"text-secondary-info\">\n    Signing in asks for your password and a 6-digit code from an authenticator app on your phone\n    (Google Authenticator, Authy, 1Password).\n  </p>\n\n  @if (status(); as s) {\n    @switch (mode()) {\n      @case ('view') {\n        <dl class=\"authenticator-facts\">\n          <dt>Authenticator</dt>\n          <dd>{{ s.enrolled ? 'Set up' : 'Not set up' }}</dd>\n          @if (s.enrolled) {\n            <dt>Recovery codes left</dt>\n            <dd [class.text-loss]=\"s.recoveryCodesLeft <= 2\">{{ s.recoveryCodesLeft }} of 10</dd>\n          }\n          <dt>Code required at sign-in</dt>\n          <dd>{{ s.enrolled ? 'Yes' : (s.codeRequired ? 'Yes' : 'Not yet \u2014 set one up') }}</dd>\n        </dl>\n        <div class=\"authenticator-actions\">\n          <button mat-flat-button type=\"button\" (click)=\"begin('password')\">\n            {{ s.enrolled ? 'Replace authenticator' : 'Set up authenticator' }}\n          </button>\n          @if (s.enrolled) {\n            <button mat-stroked-button type=\"button\" (click)=\"begin('reissue')\">New recovery codes</button>\n          }\n        </div>\n        <p class=\"text-secondary-info authenticator-note\">\n          Lost your phone? Sign in with a recovery code, then replace the authenticator here.\n          No recovery codes left? Only the administrator can reset it, from AWS \u2014 there is no way\n          to switch the code off from inside the app.\n        </p>\n        @if (passkeys && s.enrolled) {\n          <h3 class=\"text-text-primary passkey-heading\">Passkeys</h3>\n          <p class=\"text-secondary-info\">\n            Sign in with your fingerprint, face or device PIN instead of the password and code \u2014 on\n            broken-stock and broken-stock-admin. The password and code keep working.\n          </p>\n          @if (passkeyList(); as list) {\n            @if (list.length === 0) {\n              <p class=\"text-secondary-info\">No passkeys yet.</p>\n            } @else {\n              <ul class=\"passkey-list\">\n                @for (p of list; track p.credentialId) {\n                  <li class=\"passkey-row\">\n                    <span>\n                      <strong>{{ p.name }}</strong>\n                      <span class=\"text-secondary-info\">\n                        \u2014 added {{ p.addedAtEpoch | date:'mediumDate' }},\n                        {{ p.lastUsedAtEpoch ? 'last used ' + (p.lastUsedAtEpoch | date:'short') : 'not used yet' }},\n                        <span title=\"As the browser reported when the passkey was used\">\n                          {{ p.backedUp ? 'synced between your devices' : 'kept on one device or key' }}\n                        </span>\n                      </span>\n                    </span>\n                    <button mat-button type=\"button\" (click)=\"beginRemovePasskey(p)\">Remove</button>\n                  </li>\n                }\n              </ul>\n            }\n          }\n          <div class=\"authenticator-actions\">\n            <button mat-stroked-button type=\"button\" (click)=\"beginAddPasskey()\">Add a passkey</button>\n          </div>\n        }\n      }\n\n      @case ('passkey-add') {\n        <form class=\"authenticator-form\" (submit)=\"addPasskey($event)\">\n          <p class=\"text-secondary-info\">\n            Name it after the device or key it lives on, then confirm it is you.\n          </p>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Name</mat-label>\n            <input matInput name=\"passkeyName\" [(ngModel)]=\"passkeyName\" maxlength=\"64\" placeholder=\"MacBook, iPhone, YubiKey\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Password</mat-label>\n            <input matInput type=\"password\" name=\"password\" [(ngModel)]=\"password\" autocomplete=\"current-password\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n            <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                   [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n            {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n          </button>\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            @if ((passkeyList() ?? []).length > 0) {\n              <button mat-stroked-button type=\"button\" [disabled]=\"busy() || !passkeyName.trim()\" (click)=\"addPasskey(undefined, true)\">\n                Confirm with a passkey instead\n              </button>\n            }\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !passkeyName.trim() || !password || !code.trim()\">Add passkey</button>\n          </div>\n        </form>\n      }\n\n      @case ('passkey-remove') {\n        @if (removing(); as target) {\n          <form class=\"authenticator-form\" (submit)=\"removePasskey($event)\">\n            <p class=\"text-secondary-info\">\n              Remove <strong>{{ target.name }}</strong>? It will no longer sign you in. Your password and\n              code still work.\n            </p>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                     [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n              {{ useRecovery() ? 'Use the 6-digit code' : 'Use a recovery code' }}\n            </button>\n            <div class=\"authenticator-actions\">\n              <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n              <button mat-stroked-button type=\"button\" [disabled]=\"busy()\" (click)=\"removePasskey(undefined, true)\">Confirm with a passkey</button>\n              <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Remove</button>\n            </div>\n          </form>\n        }\n      }\n\n      @case ('password') {\n        <form class=\"authenticator-form\" (submit)=\"start($event)\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Password</mat-label>\n            <input matInput type=\"password\" name=\"password\" [(ngModel)]=\"password\" autocomplete=\"current-password\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          @if (s.enrolled) {\n            <mat-form-field appearance=\"outline\">\n              <mat-label>{{ useRecovery() ? 'Recovery code' : 'Current 6-digit code' }}</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" [attr.inputmode]=\"useRecovery() ? 'text' : 'numeric'\"\n                     [attr.autocomplete]=\"useRecovery() ? 'off' : 'one-time-code'\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <button mat-button type=\"button\" class=\"authenticator-link\" (click)=\"toggleRecovery()\">\n              {{ useRecovery() ? 'Use the 6-digit code' : 'Lost the phone? Use a recovery code' }}\n            </button>\n          }\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !password || (s.enrolled && !code.trim())\">Continue</button>\n          </div>\n        </form>\n      }\n\n      @case ('scan') {\n        @if (challenge(); as c) {\n          <form class=\"authenticator-form\" (submit)=\"confirm($event)\">\n            <p class=\"text-secondary-info\">Scan this with your authenticator app, then enter the 6-digit code it shows.</p>\n            <img class=\"authenticator-qr\" [src]=\"c.qr\" alt=\"QR code for your authenticator app\" width=\"200\" height=\"200\" />\n            <p class=\"text-secondary-info authenticator-key\">Can't scan? Enter this key: <code>{{ c.key }}</code></p>\n            <mat-form-field appearance=\"outline\">\n              <mat-label>Code</mat-label>\n              <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n            </mat-form-field>\n            <div class=\"authenticator-actions\">\n              <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n              <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Finish setup</button>\n            </div>\n            @if (s.enrolled) {\n              <p class=\"text-secondary-info authenticator-note\">Your old authenticator keeps working until you finish.</p>\n            }\n          </form>\n        }\n      }\n\n      @case ('reissue') {\n        <form class=\"authenticator-form\" (submit)=\"reissue($event)\">\n          <p class=\"text-secondary-info\">Ten new recovery codes. The ones you have now will stop working.</p>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Current 6-digit code</mat-label>\n            <input matInput name=\"code\" [(ngModel)]=\"code\" inputmode=\"numeric\" autocomplete=\"one-time-code\" [disabled]=\"busy()\" />\n          </mat-form-field>\n          <div class=\"authenticator-actions\">\n            <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n            <button mat-flat-button type=\"submit\" [disabled]=\"busy() || !code.trim()\">Make new codes</button>\n          </div>\n        </form>\n      }\n\n      @case ('codes') {\n        @if (codes(); as list) {\n          <shell-recovery-codes [codes]=\"list\" [appName]=\"appName\" (done)=\"codesSaved()\" />\n        }\n      }\n    }\n  }\n\n  @if (error(); as message) {\n    <p class=\"text-loss authenticator-error\" role=\"alert\">{{ message }}</p>\n  }\n</section>\n", styles: [".authenticator-settings{max-width:480px;padding:16px}.authenticator-settings h2{font-size:1.25rem;font-weight:400;margin:0 0 8px}.authenticator-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:16px 0}.authenticator-facts dt{color:var(--color-secondary-info)}.authenticator-facts dd{margin:0}.authenticator-form{display:flex;flex-direction:column;gap:4px;max-width:320px;margin-top:12px}.authenticator-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.authenticator-link{align-self:flex-start}.authenticator-note{margin-top:16px;font-size:.85rem}.authenticator-qr{display:block;margin:4px 0 8px;image-rendering:pixelated}.authenticator-key{font-size:.8rem;word-break:break-all}.authenticator-error{margin-top:12px}.passkey-heading{font-size:1.05rem;font-weight:400;margin:24px 0 4px}.passkey-list{list-style:none;padding:0;margin:8px 0}.passkey-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}\n"] }]
         }] });
 
 /*
@@ -4633,5 +5022,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthenticationService, AuthenticatorError, AuthenticatorSettings, CLEAR_USAGE, CODE_STEP, CodeDialog, CommandRegistryService, CommandService, CommandTerminal, ConfirmDialog, FAQ_CONTENT_LOADER, FAQ_DEV_EDITOR, FAQ_DEV_MODE, FAQ_DEV_WORKSPACE_ROOT, FAQ_PUBLIC_PUBLISHER, FAQ_PUBLIC_SITE_BASE_URL, FaqAuthoringPanel, FaqHistoryService, FaqMarkdownRendererService, FaqModal, FaqService, HELP_USAGE, HttpFaqContentLoader, KeyboardShortcutService, Login, MainContent, PendingPromptState, PhoneLayoutService, PublicFaqIndex, PublicFaqPage, PublicFaqToc, RecoveryCodes, RegexValidatorDirective, SESSION_TOKEN_KEY, SHELL_APP_NAME, SHELL_AUTH_URLS, SHELL_COMMANDS, SHELL_MENU_ITEMS, SHELL_PHONE_MEDIA_QUERY, SHELL_POST_LOGIN_ROUTE, SHELL_SHARED_SESSION, ScreenKeysService, SessionTokenStore, Shell, SideMenu, StatusBar, TERMINAL_INPUT_CLASS, TOO_MANY_ATTEMPTS, TerminalFocusService, TerminalVisibilityService, ThemeService, ThinkingService, answerEcho, audienceAllowed, authGuard, authInterceptor, authenticatorMessage, buildFallbackChain, buildLoginBody, comboMatches, decideRenewal, guestGuard, isEligibleKey, isTypingElsewhere, isYes, matchesRoute, openCodeDialog, provideShellConfig, recoveryCodesFile, tokenize };
+export { AuthenticationService, AuthenticatorError, AuthenticatorSettings, CLEAR_USAGE, CODE_STEP, CodeDialog, CommandRegistryService, CommandService, CommandTerminal, ConfirmDialog, FAQ_CONTENT_LOADER, FAQ_DEV_EDITOR, FAQ_DEV_MODE, FAQ_DEV_WORKSPACE_ROOT, FAQ_PUBLIC_PUBLISHER, FAQ_PUBLIC_SITE_BASE_URL, FaqAuthoringPanel, FaqHistoryService, FaqMarkdownRendererService, FaqModal, FaqService, HELP_USAGE, HttpFaqContentLoader, KeyboardShortcutService, Login, MainContent, PASSKEY_CANCELLED, PendingPromptState, PhoneLayoutService, PublicFaqIndex, PublicFaqPage, PublicFaqToc, RecoveryCodes, RegexValidatorDirective, SESSION_TOKEN_KEY, SHELL_APP_NAME, SHELL_AUTH_URLS, SHELL_COMMANDS, SHELL_MENU_ITEMS, SHELL_PHONE_MEDIA_QUERY, SHELL_POST_LOGIN_ROUTE, SHELL_SHARED_SESSION, ScreenKeysService, SessionTokenStore, Shell, SideMenu, StatusBar, TERMINAL_INPUT_CLASS, TOO_MANY_ATTEMPTS, TerminalFocusService, TerminalVisibilityService, ThemeService, ThinkingService, answerEcho, audienceAllowed, authGuard, authInterceptor, authenticatorMessage, buildFallbackChain, buildLoginBody, comboMatches, decideRenewal, guestGuard, isEligibleKey, isTypingElsewhere, isYes, matchesRoute, openCodeDialog, passkeyAutofillSupported, passkeysSupported, provideShellConfig, recoveryCodesFile, tokenize };
 //# sourceMappingURL=franzzemen-brokenstock-shell.mjs.map