@atlasauth/angular 0.5.1 → 0.6.1

package/dist/fesm2022/atlasauth-angular.mjs

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, PLATFORM_ID, computed, Injectable, TemplateRef, ViewContainerRef, Directive, Input, ElementRef, Renderer2, EventEmitter, Output, ChangeDetectionStrategy, Component, signal, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, NgModule } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, combineLatest, firstValueFrom } from 'rxjs';
+import { BehaviorSubject, Subject, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
-import { TokenCache, resolveFrontendApi, catalogLocale, FapiClient, SignOutGuard, localizedErrorMessage, getProviderToken, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, readExpiry, msUntilRefresh, nextStep, createCaptchaController, flowFromPending, initialFlow, fetchInstanceSettings, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, planFirstFactor, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
-export { FapiClient, SignOutError, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
+import { TokenCache, SignOutNotifier, resolveFrontendApi, catalogLocale, FapiClient, SignOutGuard, localizedErrorMessage, getTemplateToken, getProviderToken, signOutReasonFromClient, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, SDK_HEADER, sdkHeaderValue, reportSdkAdvisory, readExpiry, msUntilRefresh, nextStep, createCaptchaController, atlasCaptchaLabels, flowFromPending, initialFlow, fetchInstanceSettings, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, planFirstFactor, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
+export { FapiClient, SIGN_OUT_EVENT, SignOutError, advance, flowFromPending, getProviderToken, initialFlow, onAtlasSignOut, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
 import { evaluate } from '@atlasauth/authz';
 export { evaluate, hasFromClaims } from '@atlasauth/authz';
 import { renderDesignAppearance, instanceDesignFrom, applyAppearanceToDom } from '@atlasauth/design/runtime';
@@ -190,6 +190,12 @@ const EN_US = {
     'captcha.prompt': 'Complete the security check to continue.',
     'captcha.required': 'Please complete the security check, then try again.',
     'captcha.failed': "The security check didn't pass. Please try again.",
+    'captcha.checking': 'Checking your browser…',
+    'captcha.verified': 'Security check complete.',
+    'captcha.puzzlePrompt': "Select every picture that shows the same shape as this one. Colour and size don't matter.",
+    'captcha.puzzleConfirm': 'Confirm',
+    'captcha.puzzleTile': 'Picture {n}',
+    'captcha.puzzleAlternative': "Can't do the picture check? Use a longer automatic check instead.",
     'mfa.title': 'Two-step verification',
     'mfa.subtitle': 'Enter the code from your authenticator app.',
     'mfa.codeLabel': 'Code',
@@ -213,6 +219,11 @@ const EN_US = {
     'userProfile.addEmail': 'Add an email address',
     'userProfile.makePrimary': 'Make primary',
     'userProfile.unverified': 'Unverified',
+    'userProfile.verify': 'Verify',
+    'userProfile.verifyConfirm': 'Confirm',
+    'userProfile.verifyCodePlaceholder': 'Code from the email',
+    'userProfile.verifySendFailed': 'We could not send a code right now. Try again in a minute.',
+    'userProfile.verifyCodeRejected': 'That code was not accepted.',
     'userProfile.revokeDevice': 'Sign out',
     'userProfile.deleteAccount': 'Delete account',
     'organization.switcher': 'Switch organization',
@@ -279,6 +290,10 @@ function withFallback(locale) {
     return { ...EN_US, ...locale };
 }
 
+/** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
+const ATLAS_ANGULAR_VERSION = '0.6.1';
+const ATLAS_ANGULAR_SDK = { name: '@atlasauth/angular', version: ATLAS_ANGULAR_VERSION };
+
 /**
  * `AtlasService` — the Angular peer of React's `<AtlasProvider>` + hooks.
  *
@@ -333,6 +348,16 @@ class AtlasService {
     _session = new BehaviorSubject(null);
     _claims = new BehaviorSubject(null);
     _memberships = new BehaviorSubject([]);
+    // ATL-S-30 sign-out events, on every path.
+    notifier = new SignOutNotifier();
+    _signOut = new Subject();
+    /**
+     * Emits once each time a signed-in user becomes signed out: `reason` is
+     * `user`, `other_tab`, `session_expired`, `revoked` (ended elsewhere, seen on
+     * the next token refresh) or `unknown`. The place to reset an embedded
+     * third party (a chat widget). Also dispatched as `atlas:signout` on `window`.
+     */
+    signOut$ = this._signOut.asObservable();
     /** The three-state auth lifecycle: `loading` → `signed_in` | `signed_out`. */
     status$ = this._status.asObservable();
     user$ = this._user.asObservable();
@@ -382,7 +407,11 @@ class AtlasService {
             baseUrl: this.baseUrl,
             fetchImpl: this.doFetch,
             locale: this.requestLocale,
+            sdk: ATLAS_ANGULAR_SDK,
         });
+        this.notifier.subscribe((event) => this._signOut.next(event));
+        if (options.onSignOut)
+            this.notifier.subscribe(options.onSignOut);
         this.guard = new SignOutGuard({
             request: (path, init) => this.call(path, init),
             frontendApi: this.baseUrl,
@@ -397,6 +426,7 @@ class AtlasService {
             // Another tab signed out of THIS session (its tombstone reached the shared
             // store): drop the token and re-check, which then refuses the session.
             this.stopWatchingSignOut = this.guard.watch(() => this.cache.peek()?.sessionId ?? this._session.value?.id, () => {
+                this.notifier.expect('other_tab');
                 this.cache.clear();
                 void this.reload();
             });
@@ -413,6 +443,7 @@ class AtlasService {
         this._session.complete();
         this._claims.complete();
         this._memberships.complete();
+        this._signOut.complete();
     }
     // --- Configuration accessors ------------------------------------------------
     get appearance() {
@@ -477,6 +508,7 @@ class AtlasService {
             publishableKey: this.publishableKey,
             baseUrl: this.baseUrl,
             locale: this.requestLocale,
+            sdk: ATLAS_ANGULAR_SDK,
         });
     }
     // --- Imperative API (mirrors the React hooks' actions) ----------------------
@@ -484,7 +516,12 @@ class AtlasService {
      * The current session's JWT, always fresh: if the cached token is within 5s of
      * expiry it is refreshed first rather than handed over. Null when signed out.
      */
-    async getToken() {
+    /** The session JWT; with `{ template }` a short-lived named-template token (e.g. `'chatly'`). */
+    async getToken(options) {
+        if (options?.template) {
+            const sessionId = this.cache.peek()?.sessionId ?? this._session.value?.id ?? null;
+            return sessionId ? ((await getTemplateToken(this.fapiClient, sessionId, options.template))?.jwt ?? null) : null;
+        }
         const usable = this.cache.get(5_000);
         if (usable)
             return usable.jwt;
@@ -498,6 +535,10 @@ class AtlasService {
      * kept none. The server refreshes a stale token on read; the refresh token is
      * never exposed.
      */
+    /** Listen for sign-out on every path (see {@link signOut$}); returns the unsubscribe. */
+    onSignOut(listener) {
+        return this.notifier.subscribe(listener);
+    }
     getProviderToken(provider) {
         return getProviderToken(this.fapiClient, provider);
     }
@@ -521,8 +562,9 @@ class AtlasService {
         // With no cached token the guard finds the cookie session itself
         // (GET /v1/client), so a missing JWT never skips the revoke.
         const sessionId = this.cache.peek()?.sessionId ?? this._session.value?.id ?? null;
+        this.notifier.expect('user');
         const attempt = await this.guard.revoke(sessionId, options);
-        this.clearLocalState();
+        this.clearLocalState('user');
         if (this.guard.promoted(attempt))
             await this.reload();
         return this.guard.settle(attempt, options);
@@ -556,9 +598,10 @@ class AtlasService {
             // A session this browser signed out of is never re-adopted from the
             // refresh cookie; the guard re-tries its revoke in the background.
             if (!body.session || !body.user || this.guard.refuse(body.session.id)) {
-                this.clearLocalState();
+                this.clearLocalState(body.session ? 'other_tab' : signOutReasonFromClient(body));
                 return;
             }
+            this.notifier.clear();
             this._user.next(body.user);
             this._session.next(body.session);
             this._memberships.next(body.organization_memberships ?? []);
@@ -626,18 +669,22 @@ class AtlasService {
             ? { id: result.attemptId, status: result.status }
             : null;
     }
-    call(path, init) {
-        return this.doFetch(`${this.baseUrl}${path}`, {
+    async call(path, init) {
+        const response = await this.doFetch(`${this.baseUrl}${path}`, {
             ...init,
             // Cookies carry the session; a request without this is indistinguishable
             // from being signed out.
             credentials: 'include',
             headers: {
                 'x-publishable-key': this.publishableKey,
+                // Names this SDK so the Frontend API can flag a version with a known bug.
+                [SDK_HEADER]: sdkHeaderValue(ATLAS_ANGULAR_SDK),
                 ...(init?.body ? { 'content-type': 'application/json' } : {}),
                 ...init?.headers,
             },
         });
+        reportSdkAdvisory(response, ATLAS_ANGULAR_SDK);
+        return response;
     }
     applyToken(jwt, sessionId) {
         // An in-flight refresh must not resurrect a session signed out meanwhile.
@@ -668,7 +715,11 @@ class AtlasService {
             await this.reload();
         }
     }
-    clearLocalState() {
+    clearLocalState(reason) {
+        // A signed-in → signed-out transition tells the sign-out listeners why.
+        const ended = this._status.value === 'signed_in'
+            ? (this._session.value?.id ?? this.cache.peek()?.sessionId ?? null)
+            : undefined;
         this.clearRefreshTimer();
         this.cache.clear();
         this._status.next('signed_out');
@@ -676,6 +727,10 @@ class AtlasService {
         this._session.next(null);
         this._claims.next(null);
         this._memberships.next([]);
+        if (ended !== undefined)
+            this.notifier.signedOut(ended, reason);
+        else
+            this.notifier.clear();
     }
     /** §7.4: proactive, jittered refresh scheduled from the token's own expiry. */
     scheduleRefresh() {
@@ -1318,9 +1373,14 @@ class AtlasFlowController {
      */
     settings = signal(null);
     /** The sign-in captcha (identifier step / `needs_captcha` challenge). */
-    captcha = createCaptchaController();
+    captcha = createCaptchaController(undefined, {
+        // The Atlas captcha's words follow the form's catalog (read when drawn).
+        atlasLabels: () => atlasCaptchaLabels(this.t),
+    });
     /** The sign-up captcha (the create-account step). */
-    signUpCaptcha = createCaptchaController();
+    signUpCaptcha = createCaptchaController(undefined, {
+        atlasLabels: () => atlasCaptchaLabels(this.t),
+    });
     /** Whether {@link captcha} currently draws a widget (for templates). */
     captchaDrawn = signal(false);
     /** Whether {@link signUpCaptcha} currently draws a widget (for templates). */
@@ -2248,6 +2308,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  */
 class UserProfileComponent {
     atlas = inject(AtlasService);
+    // An unverified address (added and never confirmed, or the sign-up address on
+    // an app that did not require verification) can be proven here: send a code,
+    // then enter it.
+    verifying = signal(null);
+    code = signal('');
+    busy = signal(false);
+    verifyError = signal(null);
+    client = this.atlas.createFapiClient();
+    async sendCode(id) {
+        this.verifyError.set(null);
+        this.busy.set(true);
+        const res = await this.client.post(`/v1/client/me/email_addresses/${id}/prepare_verification`);
+        this.busy.set(false);
+        if (!res.ok) {
+            this.verifyError.set(this.t('userProfile.verifySendFailed'));
+            return;
+        }
+        this.code.set('');
+        this.verifying.set(id);
+    }
+    async confirmCode() {
+        const id = this.verifying();
+        if (!id)
+            return;
+        this.verifyError.set(null);
+        this.busy.set(true);
+        const res = await this.client.post(`/v1/client/me/email_addresses/${id}/attempt_verification`, {
+            code: this.code(),
+        });
+        this.busy.set(false);
+        if (!res.ok) {
+            this.verifyError.set(this.t('userProfile.verifyCodeRejected'));
+            return;
+        }
+        this.verifying.set(null);
+        await this.atlas.reload();
+    }
     t(key) {
         return translate(this.atlas.localization, key);
     }
@@ -2268,10 +2365,42 @@ class UserProfileComponent {
                 {{ email.email_address }}
                 @if (!email.verified) {
                   <em> — {{ t('userProfile.unverified') }}</em>
+                  @if (verifying() === email.id) {
+                    <span data-atlas="email-verify">
+                      <input
+                        [class]="cls('formFieldInput', 'atlas-account-input')"
+                        inputmode="numeric"
+                        autocomplete="one-time-code"
+                        [placeholder]="t('userProfile.verifyCodePlaceholder')"
+                        [value]="code()"
+                        (input)="code.set($any($event.target).value)"
+                      />
+                      <button
+                        [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                        type="button"
+                        [disabled]="busy()"
+                        (click)="confirmCode()"
+                      >
+                        {{ t('userProfile.verifyConfirm') }}
+                      </button>
+                    </span>
+                  } @else {
+                    <button
+                      [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                      type="button"
+                      [disabled]="busy()"
+                      (click)="sendCode(email.id)"
+                    >
+                      {{ t('userProfile.verify') }}
+                    </button>
+                  }
                 }
               </li>
             }
           </ul>
+          @if (verifyError(); as message) {
+            <p role="alert">{{ message }}</p>
+          }
         </section>
 
         <section>
@@ -2301,10 +2430,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 {{ email.email_address }}
                 @if (!email.verified) {
                   <em> — {{ t('userProfile.unverified') }}</em>
+                  @if (verifying() === email.id) {
+                    <span data-atlas="email-verify">
+                      <input
+                        [class]="cls('formFieldInput', 'atlas-account-input')"
+                        inputmode="numeric"
+                        autocomplete="one-time-code"
+                        [placeholder]="t('userProfile.verifyCodePlaceholder')"
+                        [value]="code()"
+                        (input)="code.set($any($event.target).value)"
+                      />
+                      <button
+                        [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                        type="button"
+                        [disabled]="busy()"
+                        (click)="confirmCode()"
+                      >
+                        {{ t('userProfile.verifyConfirm') }}
+                      </button>
+                    </span>
+                  } @else {
+                    <button
+                      [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                      type="button"
+                      [disabled]="busy()"
+                      (click)="sendCode(email.id)"
+                    >
+                      {{ t('userProfile.verify') }}
+                    </button>
+                  }
                 }
               </li>
             }
           </ul>
+          @if (verifyError(); as message) {
+            <p role="alert">{{ message }}</p>
+          }
         </section>
 
         <section>
@@ -2538,5 +2699,5 @@ function atlasChildGuard(options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { ATLAS_OPTIONS, ATLAS_UI, AtlasCaptchaSlotDirective, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, SignUpFormComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, explicitTokens, provideAtlas, renderAppearance, resolveTokens, translate, withFallback };
+export { ATLAS_ANGULAR_SDK, ATLAS_ANGULAR_VERSION, ATLAS_OPTIONS, ATLAS_UI, AtlasCaptchaSlotDirective, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, SignUpFormComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, explicitTokens, provideAtlas, renderAppearance, resolveTokens, translate, withFallback };
 //# sourceMappingURL=atlasauth-angular.mjs.map