@atlasauth/angular 0.6.0 → 0.7.0

package/dist/fesm2022/atlasauth-angular.mjs

@@ -4,7 +4,7 @@ import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, Subject, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
-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';
+import { TokenCache, SignOutNotifier, resolveFrontendApi, catalogLocale, configureReferralCapture, 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';
@@ -219,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',
@@ -286,7 +291,7 @@ function withFallback(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.0';
+const ATLAS_ANGULAR_VERSION = '0.7.0';
 const ATLAS_ANGULAR_SDK = { name: '@atlasauth/angular', version: ATLAS_ANGULAR_VERSION };
 
 /**
@@ -397,6 +402,8 @@ class AtlasService {
         this.catalog = options.localization ? withFallback(options.localization) : EN_US;
         this.errorCatalog = options.localization ?? EN_US;
         this.requestLocale = catalogLocale(options.localization);
+        // Referral attribution: app-wide options every FAPI client on the page falls back to.
+        configureReferralCapture({ referral: options.referral, referralConsent: options.referralConsent });
         this.fapiClient = new FapiClient({
             publishableKey: this.publishableKey,
             baseUrl: this.baseUrl,
@@ -2303,6 +2310,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);
     }
@@ -2323,10 +2367,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>
@@ -2356,10 +2432,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>