@atlasauth/angular 0.4.0 → 0.5.1

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, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
-import { TokenCache, resolveFrontendApi, FapiClient, SignOutGuard, getProviderToken, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, readExpiry, msUntilRefresh, nextStep, createCaptchaController, flowFromPending, initialFlow, fetchInstanceSettings, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
+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 { evaluate } from '@atlasauth/authz';
 export { evaluate, hasFromClaims } from '@atlasauth/authz';
@@ -168,6 +168,8 @@ const EN_US = {
     'signIn.socialButton': 'Continue with {provider}',
     'signIn.emailCodeLabel': 'Verification code',
     'signIn.useEmailCode': 'Email me a code',
+    'signIn.codeSentTo': 'We sent a code to {email}. Enter it below.',
+    'signIn.resendCode': 'Resend code',
     'signIn.magicLinkSent': 'Check your email for a sign-in link.',
     'signIn.checkOtherTab': 'You can close this tab — you are signed in where you started.',
     'signUp.title': 'Create your account',
@@ -220,6 +222,46 @@ const EN_US = {
     'organization.roleLabel': 'Role',
     'error.generic': 'Something went wrong. Please try again.',
     'error.network': 'We could not reach the server. Check your connection.',
+    // Server errors, by the stable `reason` the Frontend API sends. Shown instead
+    // of the server's `message` (see `localizedErrorMessage` in @atlasauth/js).
+    'error.form_password_incorrect': 'Those credentials are incorrect.',
+    'error.form_code_incorrect': 'That code is incorrect.',
+    'error.form_code_already_used': 'That code has already been used. Wait for a new one.',
+    'error.form_code_expired': 'That code has expired. Request a new one.',
+    'error.form_code_max_attempts': 'Too many incorrect codes. Request a new code.',
+    'error.form_link_invalid': 'That sign-in link is invalid or has already been used.',
+    'error.form_identifier_not_found': "We couldn't find an account with those details.",
+    'error.form_identifier_exists': "There's already an account for this email. Sign in with {methods}.",
+    'error.form_password_pwned': 'This password has appeared in a known data breach. Please choose a different one.',
+    'error.form_password_too_short': 'Password must be at least {min_length} characters.',
+    'error.form_password_too_long': 'Password must be at most {max_length} characters.',
+    'error.form_password_requires_uppercase': 'Password must contain an uppercase letter.',
+    'error.form_password_requires_lowercase': 'Password must contain a lowercase letter.',
+    'error.form_password_requires_number': 'Password must contain a number.',
+    'error.form_password_requires_symbol': 'Password must contain a symbol.',
+    'error.form_password_not_allowed': 'That password is not allowed. Choose a different one.',
+    'error.form_password_contains_identifier': 'Password must not contain your email or username.',
+    'error.form_password_same_as_current': 'Your new password must be different from your current one.',
+    'error.form_password_reused': 'Your new password must not match any of your last {history_count} passwords.',
+    'error.password_expired': 'Your password has expired. Reset it to continue.',
+    'error.email_not_verified': 'Your email address is not verified yet. Verify it before signing in with your password.',
+    'error.sign_in_token_invalid': 'That sign-in token is invalid or has expired.',
+    'error.too_many_attempts': 'Too many failed attempts. Try again later.',
+    'error.too_many_requests': 'Too many requests. Please try again later.',
+    'error.captcha_required': 'Please complete the security check, then try again.',
+    'error.captcha_failed': "The security check didn't pass. Please try again.",
+    'error.captcha_unavailable': 'The security check is unavailable right now. Please try again later.',
+    'error.email_delivery_unavailable': "This app can't send email right now. Try another sign-in method or contact the app owner.",
+    'error.strategy_disabled': 'This sign-in method is not available for this app.',
+    'error.sign_up_restricted': 'Sign-up on this app is by invitation only.',
+    'error.waitlisted': "You're on the waitlist. We'll email you when a place opens up.",
+    'error.identifier_not_allowed': 'This email or phone number is not allowed on this app.',
+    'error.disposable_email_blocked': 'Sign-up with a disposable or temporary email address is not allowed.',
+    'error.sso_required': 'This organization requires signing in through single sign-on.',
+    'error.sign_ins_disabled': 'Sign-ins are temporarily disabled.',
+    'error.sign_ups_disabled': 'Sign-ups are temporarily disabled.',
+    'error.high_risk_blocked': 'This sign-in was blocked because it looked unusual.',
+    'error.sms_region_blocked': 'Text messages are not available for this phone number.',
 };
 /**
  * Look up a key and interpolate `{placeholders}`.
@@ -274,6 +316,10 @@ class AtlasService {
     guard;
     stopWatchingSignOut = null;
     catalog;
+    /** The language layer of `catalog` (the `localization` bundle alone; `EN_US` when none). */
+    errorCatalog;
+    /** Sent to the Frontend API as `Accept-Language`: the `localization` bundle's `locale` tag. */
+    requestLocale;
     /**
      * A sign-in attempt handed back by an OAuth redirect that still needs a second
      * factor (no session was issued). Null in the ordinary case; the `<atlas-sign-in>`
@@ -329,10 +375,13 @@ class AtlasService {
         });
         this.doFetch = options.fetchImpl ?? ((...args) => fetch(...args));
         this.catalog = options.localization ? withFallback(options.localization) : EN_US;
+        this.errorCatalog = options.localization ?? EN_US;
+        this.requestLocale = catalogLocale(options.localization);
         this.fapiClient = new FapiClient({
             publishableKey: this.publishableKey,
             baseUrl: this.baseUrl,
             fetchImpl: this.doFetch,
+            locale: this.requestLocale,
         });
         this.guard = new SignOutGuard({
             request: (path, init) => this.call(path, init),
@@ -375,6 +424,22 @@ class AtlasService {
     get frontendApi() {
         return this.baseUrl;
     }
+    /** The `Accept-Language` sent to the Frontend API: the `localization` bundle's `locale` tag, if any. */
+    get locale() {
+        return this.requestLocale;
+    }
+    /**
+     * The text to show for a server error, in the app's language: the catalog's
+     * `error.<reason>` (looked up in the `localization` bundle, or `EN_US` when
+     * none is set), else the server's message, else `error.generic`.
+     */
+    errorText(error) {
+        return localizedErrorMessage(error, this.errorCatalog, this.catalog);
+    }
+    /** The catalog server errors are looked up in (see {@link errorText}). */
+    get errorLocalization() {
+        return this.errorCatalog;
+    }
     /** Tokens as CSS custom properties, for a host element to inherit. */
     appearanceVariables() {
         return cssVariables(resolveTokens(this.options.appearance));
@@ -408,7 +473,11 @@ class AtlasService {
     }
     /** A fresh {@link FapiClient} for driving a sign-in/sign-up flow. */
     createFapiClient() {
-        return new FapiClient({ publishableKey: this.publishableKey, baseUrl: this.baseUrl });
+        return new FapiClient({
+            publishableKey: this.publishableKey,
+            baseUrl: this.baseUrl,
+            locale: this.requestLocale,
+        });
     }
     // --- Imperative API (mirrors the React hooks' actions) ----------------------
     /**
@@ -975,6 +1044,12 @@ class AttemptFlowComponent {
     t(key, vars) {
         return translate(this.atlas.localization, key, vars);
     }
+    /** A server error in the app's language (`error.<reason>`, else the server's message). */
+    errorText(error) {
+        // `errorLocalization` is read defensively: a stand-in service may lack it.
+        const layer = this.atlas.errorLocalization;
+        return localizedErrorMessage(error, layer ?? this.atlas.localization, this.atlas.localization);
+    }
     cls(key, base) {
         return classFor(key, this.atlas.appearance, base);
     }
@@ -1006,7 +1081,15 @@ class AttemptFlowComponent {
         return this.firstFactors ?? step.strategies;
     }
     showEmailCodeOption() {
-        return this.preparedFactor !== 'email_code' && this.offered().includes('email_code');
+        // Before the code is sent: the choice (or the retry of a failed automatic
+        // send). After: "Resend code".
+        return this.offered().includes('email_code');
+    }
+    /** The "we sent a code to …" line on the code step. */
+    codeSentText() {
+        if (this.step().kind !== 'collect_first_factor' || this.preparedFactor !== 'email_code')
+            return null;
+        return this.t('signIn.codeSentTo', { email: this.attempt?.identifier ?? '' });
     }
     showSubmit() {
         const kind = this.step().kind;
@@ -1067,10 +1150,13 @@ class AttemptFlowComponent {
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
       @for (error of formErrors(); track error.code) {
-        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
       }
 
       <form (submit)="onSubmit($event)">
+        @if (codeSentText(); as sentText) {
+          <p class="atlas-text" data-atlas-code-sent="">{{ sentText }}</p>
+        }
         @for (f of fields(); track $index) {
           @if (f.kind === 'input') {
             <label class="atlas-field">
@@ -1083,7 +1169,7 @@ class AttemptFlowComponent {
                 (input)="setValue(f.name, $any($event.target).value)"
               />
               @for (error of fieldErrorsFor(f.name); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
           } @else {
@@ -1106,9 +1192,11 @@ class AttemptFlowComponent {
             [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
             [disabled]="busy"
             type="button"
+            [attr.data-strategy]="preparedFactor === 'email_code' ? null : 'email_code'"
+            [attr.data-atlas-resend]="preparedFactor === 'email_code' ? '' : null"
             (click)="chooseFactor.emit('email_code')"
           >
-            {{ t('signIn.useEmailCode') }}
+            {{ t(preparedFactor === 'email_code' ? 'signIn.resendCode' : 'signIn.useEmailCode') }}
           </button>
         }
       </form>
@@ -1127,10 +1215,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
       @for (error of formErrors(); track error.code) {
-        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
       }
 
       <form (submit)="onSubmit($event)">
+        @if (codeSentText(); as sentText) {
+          <p class="atlas-text" data-atlas-code-sent="">{{ sentText }}</p>
+        }
         @for (f of fields(); track $index) {
           @if (f.kind === 'input') {
             <label class="atlas-field">
@@ -1143,7 +1234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 (input)="setValue(f.name, $any($event.target).value)"
               />
               @for (error of fieldErrorsFor(f.name); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
           } @else {
@@ -1166,9 +1257,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
             [disabled]="busy"
             type="button"
+            [attr.data-strategy]="preparedFactor === 'email_code' ? null : 'email_code'"
+            [attr.data-atlas-resend]="preparedFactor === 'email_code' ? '' : null"
             (click)="chooseFactor.emit('email_code')"
           >
-            {{ t('signIn.useEmailCode') }}
+            {{ t(preparedFactor === 'email_code' ? 'signIn.resendCode' : 'signIn.useEmailCode') }}
           </button>
         }
       </form>
@@ -1316,6 +1409,22 @@ class AtlasFlowController {
         if (next.attempt?.status !== 'needs_first_factor')
             this.preparedFactor.set(null);
         this.syncCaptcha();
+        this.autoSend();
+    }
+    autoSentFor = null;
+    /**
+     * With no password on offer, email the code as soon as the server asks for a
+     * first factor — once per attempt, so a failed send waits for the user's retry
+     * (the "Email me a code" button) instead of looping.
+     */
+    autoSend() {
+        const id = this.state().attempt?.id ?? null;
+        if (!id || this.autoSentFor === id || this.preparedFactor())
+            return;
+        if (planFirstFactor(this.firstFactors()).autoSend !== 'email_code')
+            return;
+        this.autoSentFor = id;
+        void this.prepare('email_code');
     }
     /**
      * Advance the flow with the values the user typed. On completion, exchange the
@@ -1497,6 +1606,12 @@ class SignUpFormComponent {
     t(key, vars) {
         return translate(this.atlas.localization, key, vars);
     }
+    /** A server error in the app's language (`error.<reason>`, else the server's message). */
+    errorText(error) {
+        // `errorLocalization` is read defensively: a stand-in service may lack it.
+        const layer = this.atlas.errorLocalization;
+        return localizedErrorMessage(error, layer ?? this.atlas.localization, this.atlas.localization);
+    }
     cls(key, base) {
         return classFor(key, this.atlas.appearance, base);
     }
@@ -1565,7 +1680,7 @@ class SignUpFormComponent {
         </p>
       } @else {
       @for (error of formErrors(); track error.code) {
-        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
       }
 
       <form (submit)="onSubmit($event)">
@@ -1588,7 +1703,7 @@ class SignUpFormComponent {
                 }
               </span>
               @for (error of fieldErrorsFor(f.key); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </div>
           } @else {
@@ -1636,7 +1751,7 @@ class SignUpFormComponent {
                 />
               }
               @for (error of fieldErrorsFor(f.key); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
           }
@@ -1654,7 +1769,7 @@ class SignUpFormComponent {
             (input)="setValue('email', $any($event.target).value)"
           />
           @for (error of fieldErrorsFor('email'); track error.code) {
-            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
 
@@ -1670,7 +1785,7 @@ class SignUpFormComponent {
             (input)="setValue('password', $any($event.target).value)"
           />
           @for (error of fieldErrorsFor('password'); track error.code) {
-            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
 
@@ -1697,7 +1812,7 @@ class SignUpFormComponent {
               }.
             </span>
             @for (error of fieldErrorsFor('consent'); track error.code) {
-              <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
             }
           </label>
         }
@@ -1737,7 +1852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         </p>
       } @else {
       @for (error of formErrors(); track error.code) {
-        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
       }
 
       <form (submit)="onSubmit($event)">
@@ -1760,7 +1875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }
               </span>
               @for (error of fieldErrorsFor(f.key); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </div>
           } @else {
@@ -1808,7 +1923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 />
               }
               @for (error of fieldErrorsFor(f.key); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
           }
@@ -1826,7 +1941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             (input)="setValue('email', $any($event.target).value)"
           />
           @for (error of fieldErrorsFor('email'); track error.code) {
-            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
 
@@ -1842,7 +1957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             (input)="setValue('password', $any($event.target).value)"
           />
           @for (error of fieldErrorsFor('password'); track error.code) {
-            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
 
@@ -1869,7 +1984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               }.
             </span>
             @for (error of fieldErrorsFor('consent'); track error.code) {
-              <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
             }
           </label>
         }