@atlasauth/angular 0.2.1 → 0.3.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, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
-import { TokenCache, FapiClient, getProviderToken, runFrontChannelLogoutFromResponse, readRedirectResult, stripRedirectParams, readExpiry, msUntilRefresh, nextStep, flowFromPending, initialFlow, advance, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
+import { TokenCache, resolveFrontendApi, FapiClient, getProviderToken, runFrontChannelLogoutFromResponse, readRedirectResult, stripRedirectParams, readExpiry, msUntilRefresh, nextStep, createCaptchaController, flowFromPending, initialFlow, fetchInstanceSettings, signInCaptchaOptions, flowNeedsCaptcha, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
 export { FapiClient, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
 import { evaluate } from '@atlasauth/authz';
 export { evaluate, hasFromClaims } from '@atlasauth/authz';
@@ -173,6 +173,18 @@ const EN_US = {
     'signUp.submit': 'Continue',
     'signUp.haveAccount': 'Already have an account?',
     'signUp.signInLink': 'Sign in',
+    'signUp.emailLabel': 'Email address',
+    'signUp.passwordLabel': 'Password',
+    'signUp.optionalField': '{label} (optional)',
+    'signUp.selectPlaceholder': 'Select…',
+    'signUp.consentAgree': 'I agree to the',
+    'signUp.consentNotice': 'By continuing you agree to the',
+    'signUp.terms': 'Terms of Service',
+    'signUp.privacy': 'Privacy Policy',
+    'signUp.and': 'and',
+    '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.",
     'mfa.title': 'Two-step verification',
     'mfa.subtitle': 'Enter the code from your authenticator app.',
     'mfa.codeLabel': 'Code',
@@ -299,7 +311,11 @@ class AtlasService {
     constructor() {
         const options = this.options;
         this.publishableKey = options.publishableKey;
-        this.baseUrl = options.frontendApi ?? '';
+        // Throws an `AtlasConfigError` on a missing/invalid value rather than quietly
+        // sending every request to a relative path on the app's origin.
+        this.baseUrl = resolveFrontendApi(options.frontendApi, {
+            component: 'provideAtlas() / AtlasModule.forRoot()',
+        });
         this.doFetch = options.fetchImpl ?? ((...args) => fetch(...args));
         this.catalog = options.localization ? withFallback(options.localization) : EN_US;
         this.fapiClient = new FapiClient({
@@ -823,6 +839,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * `[atlasCaptchaSlot]="controller"` — the element a flow's captcha widget draws
+ * into (see `createCaptchaController` in `@atlasauth/js`). Attaches the
+ * controller to the host element while it is rendered and detaches it (removing
+ * the widget) when it goes away.
+ */
+class AtlasCaptchaSlotDirective {
+    host = inject(ElementRef);
+    current = null;
+    initialized = false;
+    set controller(next) {
+        if (next === this.current)
+            return;
+        if (this.initialized)
+            this.current?.attach(null);
+        this.current = next;
+        if (this.initialized)
+            this.current?.attach(this.host.nativeElement);
+    }
+    ngOnInit() {
+        this.initialized = true;
+        this.current?.attach(this.host.nativeElement);
+    }
+    ngOnDestroy() {
+        this.current?.attach(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasCaptchaSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasCaptchaSlotDirective, isStandalone: true, selector: "[atlasCaptchaSlot]", inputs: { controller: ["atlasCaptchaSlot", "controller"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasCaptchaSlotDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atlasCaptchaSlot]',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{
+                type: Input,
+                args: ['atlasCaptchaSlot']
+            }] } });
+
 /**
  * The server-driven flow shell, shared by `<atlas-sign-in>` and
  * `<atlas-sign-up>`. The Angular peer of React's internal `AttemptFlow`.
@@ -839,6 +895,12 @@ class AttemptFlowComponent {
     busy = false;
     errors = [];
     titleKey = 'signIn.title';
+    /**
+     * The sign-in captcha, drawn above the submit button on the identifier step
+     * (an always-on sign-in captcha) and on the challenge step the server demands
+     * with `needs_captcha`. Null when the flow draws none.
+     */
+    captcha = null;
     /** Emits the collected field values when the form is submitted. */
     submitFlow = new EventEmitter();
     values = {};
@@ -864,6 +926,10 @@ class AttemptFlowComponent {
     step() {
         return this.attempt ? nextStep(this.attempt) : { kind: 'collect_identifier' };
     }
+    showCaptcha() {
+        const kind = this.step().kind;
+        return !!this.captcha && (kind === 'collect_identifier' || kind === 'collect_captcha');
+    }
     showSubmit() {
         const kind = this.step().kind;
         return kind !== 'done' && kind !== 'await_oauth';
@@ -888,6 +954,10 @@ class AttemptFlowComponent {
                 return [{ kind: 'input', name: 'code', labelKey: 'signIn.emailCodeLabel', type: 'text' }];
             case 'collect_new_password':
                 return [{ kind: 'input', name: 'password', labelKey: 'reset.newPasswordLabel', type: 'password' }];
+            case 'collect_captcha':
+                // §5 the server withheld the attempt until a captcha clears. Solving the
+                // widget resubmits the identifier on its own; the button retries.
+                return [msg('captcha.prompt')];
             case 'await_oauth':
                 return [msg('signIn.magicLinkSent')];
             case 'done':
@@ -901,7 +971,7 @@ class AttemptFlowComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttemptFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", titleKey: "titleKey" }, outputs: { submitFlow: "submitFlow" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", titleKey: "titleKey", captcha: "captcha" }, outputs: { submitFlow: "submitFlow" }, ngImport: i0, template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
@@ -917,6 +987,7 @@ class AttemptFlowComponent {
               <input
                 [class]="cls('formFieldInput', 'atlas-input')"
                 [type]="f.type"
+                [attr.name]="f.name"
                 [value]="values[f.name] ?? ''"
                 (input)="setValue(f.name, $any($event.target).value)"
               />
@@ -929,6 +1000,10 @@ class AttemptFlowComponent {
           }
         }
 
+        @if (showCaptcha()) {
+          <div class="atlas-captcha" data-atlas-captcha="" [atlasCaptchaSlot]="captcha"></div>
+        }
+
         @if (showSubmit()) {
           <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy" type="submit">
             {{ t('signIn.submit') }}
@@ -936,7 +1011,7 @@ class AttemptFlowComponent {
         }
       </form>
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttemptFlowComponent, decorators: [{
             type: Component,
@@ -944,6 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'atlas-attempt-flow',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AtlasCaptchaSlotDirective],
                     template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
@@ -960,6 +1036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               <input
                 [class]="cls('formFieldInput', 'atlas-input')"
                 [type]="f.type"
+                [attr.name]="f.name"
                 [value]="values[f.name] ?? ''"
                 (input)="setValue(f.name, $any($event.target).value)"
               />
@@ -972,6 +1049,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           }
         }
 
+        @if (showCaptcha()) {
+          <div class="atlas-captcha" data-atlas-captcha="" [atlasCaptchaSlot]="captcha"></div>
+        }
+
         @if (showSubmit()) {
           <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy" type="submit">
             {{ t('signIn.submit') }}
@@ -989,6 +1070,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], titleKey: [{
                 type: Input
+            }], captcha: [{
+                type: Input
             }], submitFlow: [{
                 type: Output
             }] } });
@@ -1005,18 +1088,68 @@ function msg(labelKey) {
  * server via `advance`, and this controller only posts whatever the current step
  * needs and re-renders the returned status. State lives in a signal so templates
  * update whether the app runs zoned or zoneless.
+ *
+ * `<atlas-sign-up>` starts the attempt with {@link create}
+ * (`POST /v1/client/sign_ups`); the emailed-code step then runs through the same
+ * {@link submit}. Both flows draw the instance's captcha (from
+ * {@link loadSettings}) when it is required.
  */
 class AtlasFlowController {
     client;
     reload;
+    t;
     state;
+    /**
+     * The instance's public sign-in / sign-up settings (captcha, sign-up fields,
+     * legal consent) from `GET /v1/appearance`; null until {@link loadSettings}
+     * resolves, or when the server could not be reached.
+     */
+    settings = signal(null);
+    /** The sign-in captcha (identifier step / `needs_captcha` challenge). */
+    captcha = createCaptchaController();
+    /** The sign-up captcha (the create-account step). */
+    signUpCaptcha = createCaptchaController();
+    /** Whether {@link captcha} currently draws a widget (for templates). */
+    captchaDrawn = signal(false);
+    /** Whether {@link signUpCaptcha} currently draws a widget (for templates). */
+    signUpCaptchaDrawn = signal(false);
     pollTimer = null;
-    constructor(client, reload, pending) {
+    identifier = '';
+    constructor(client, reload, pending, 
+    /** Resolves the captcha messages' catalog keys. Defaults to en-US. */
+    t = (key) => translate(EN_US, key)) {
         this.client = client;
         this.reload = reload;
+        this.t = t;
         // Seeded from a redirect that came back mid-flow (e.g. OAuth needing a second
         // factor) so the user resumes at the demanded step instead of starting over.
         this.state = signal(pending ? flowFromPending(pending) : initialFlow);
+        this.syncCaptcha();
+    }
+    /** Fetch the instance's public settings and draw whatever captcha they require. */
+    async loadSettings() {
+        const loaded = await fetchInstanceSettings(this.client);
+        if (loaded) {
+            this.settings.set(loaded);
+            this.syncCaptcha();
+        }
+    }
+    /** Keep both captchas in step with the settings and the flow's current step. */
+    syncCaptcha() {
+        const settings = this.settings();
+        const state = this.state();
+        this.captcha.configure(signInCaptchaOptions(settings?.captchaFlows.signIn, state, () => void this.submit({})));
+        const signUpFlow = settings?.captchaFlows.signUp;
+        this.signUpCaptcha.configure({
+            flow: signUpFlow,
+            active: !state.attempt && flowNeedsCaptcha(signUpFlow),
+        });
+        this.captchaDrawn.set(this.captcha.needed);
+        this.signUpCaptchaDrawn.set(this.signUpCaptcha.needed);
+    }
+    setState(next) {
+        this.state.set(next);
+        this.syncCaptcha();
     }
     /**
      * Advance the flow with the values the user typed. On completion, exchange the
@@ -1026,8 +1159,31 @@ class AtlasFlowController {
      */
     async submit(values) {
         this.state.update((current) => ({ ...current, busy: true, errors: [] }));
-        const next = await advance(this.client, this.state(), values);
-        this.state.set(next);
+        const out = await advanceWithCaptcha(this.client, this.state(), values, {
+            captcha: this.captcha,
+            identifier: this.identifier,
+            t: this.t,
+        });
+        this.identifier = out.identifier;
+        await this.finish(out.state);
+    }
+    /**
+     * Create an account (`POST /v1/client/sign_ups`) from a create-account form's
+     * values — email, password and any configured sign-up fields — carrying the
+     * sign-up captcha's token when the instance requires one. The emailed code is
+     * then posted with {@link submit}.
+     */
+    async create(values, consent = true) {
+        this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        const next = await createSignUp(this.client, values, {
+            consent,
+            captcha: this.signUpCaptcha,
+            t: this.t,
+        });
+        await this.finish(next);
+    }
+    async finish(next) {
+        this.setState(next);
         if (next.attempt?.status === 'complete') {
             if (next.ticket) {
                 await this.client.post('/v1/client/tickets/exchange', {
@@ -1057,7 +1213,7 @@ class AtlasFlowController {
         this.pollTimer = setInterval(() => {
             void (async () => {
                 const { state: next, ticket } = await pollAttempt(this.client, this.state());
-                this.state.set(next);
+                this.setState(next);
                 if (!ticket || !next.attempt)
                     return;
                 // The ticket is exchanged by a normal request, so no session token ever
@@ -1077,15 +1233,19 @@ class AtlasFlowController {
             this.pollTimer = null;
         }
     }
-    /** Release the poll timer — call from the component's `ngOnDestroy`. */
+    /** Release the poll timer and the captcha widgets — call from the component's `ngOnDestroy`. */
     destroy() {
         this.stopPolling();
+        this.captcha.destroy();
+        this.signUpCaptcha.destroy();
     }
 }
 
 /**
  * `<atlas-sign-in>` — the full, multi-step sign-in flow driven entirely by the
- * server-side attempt status. The Angular peer of React's `<SignIn/>`.
+ * server-side attempt status. The Angular peer of React's `<SignIn/>`. Draws the
+ * instance's sign-in captcha when it is required (always-on, or a
+ * `needs_captcha` challenge).
  *
  * ```html
  * <atlas-sign-in *atlasSignedOut afterUrl="/dashboard"></atlas-sign-in>
@@ -1097,10 +1257,14 @@ class SignInComponent {
     afterUrl;
     flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), 
     // Resume mid-flow if an OAuth redirect came back owing a second factor.
-    this.atlas.pendingAttempt);
+    this.atlas.pendingAttempt, (key) => translate(this.atlas.localization, key));
     ngOnInit() {
         // If seeded from a pending attempt that is already pollable, start polling.
         this.flow.syncPolling();
+        // §5 the instance's captcha settings: switching captcha on in the dashboard
+        // draws it here with no code change.
+        if (typeof window !== 'undefined')
+            void this.flow.loadSettings();
     }
     ngOnDestroy() {
         this.flow.destroy();
@@ -1112,9 +1276,10 @@ class SignInComponent {
       [busy]="flow.state().busy"
       [errors]="flow.state().errors"
       titleKey="signIn.title"
+      [captcha]="flow.captchaDrawn() ? flow.captcha : null"
       (submitFlow)="flow.submit($event)"
     ></atlas-attempt-flow>
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey"], outputs: ["submitFlow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha"], outputs: ["submitFlow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -1129,6 +1294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [busy]="flow.state().busy"
       [errors]="flow.state().errors"
       titleKey="signIn.title"
+      [captcha]="flow.captchaDrawn() ? flow.captcha : null"
       (submitFlow)="flow.submit($event)"
     ></atlas-attempt-flow>
   `,
@@ -1138,9 +1304,416 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 /**
- * `<atlas-sign-up>` — the full, server-driven sign-up flow. The Angular peer of
- * React's `<SignUp/>`. It shares the exact flow engine with `<atlas-sign-in>`;
- * only the title differs, because the sequence of steps is decided by the server.
+ * The create-account step of `<atlas-sign-up>`: the instance's configured extra
+ * fields, email + password, the legal-consent row and — when the instance
+ * requires one on sign-up — the captcha widget. Values live on the component so
+ * a refused submit never clears them.
+ */
+class SignUpFormComponent {
+    atlas = inject(AtlasService);
+    settings = null;
+    busy = false;
+    errors = [];
+    captcha = null;
+    /** Emits the typed values and the consent tick when the form is submitted. */
+    submitSignUp = new EventEmitter();
+    values = {};
+    agreed = false;
+    t(key, vars) {
+        return translate(this.atlas.localization, key, vars);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    setValue(name, value) {
+        this.values = { ...this.values, [name]: value };
+    }
+    fields() {
+        return this.settings?.signUpFields ?? [];
+    }
+    label(f) {
+        return f.required ? f.label : this.t('signUp.optionalField', { label: f.label });
+    }
+    inputType(f) {
+        return ['email', 'tel', 'url', 'number', 'date'].includes(f.type) ? f.type : 'text';
+    }
+    /** Same encoding as React, the embed widget and the hosted page: one value,
+     *  or a comma-joined list for multiselect. */
+    picked(key) {
+        const value = this.values[key];
+        return value ? value.split(', ') : [];
+    }
+    toggle(f, option, on) {
+        if (f.type === 'radio') {
+            this.setValue(f.key, option);
+            return;
+        }
+        const current = this.picked(f.key);
+        this.setValue(f.key, (on ? [...current, option] : current.filter((p) => p !== option)).join(', '));
+    }
+    showLegal() {
+        const legal = this.settings?.legal;
+        return !!legal && (!!legal.termsUrl || !!legal.privacyUrl);
+    }
+    consentOk() {
+        return !this.settings?.legal?.required || this.agreed;
+    }
+    formErrors() {
+        return this.errors.filter((error) => !error.param);
+    }
+    fieldErrorsFor(name) {
+        return this.errors.filter((error) => error.param === name);
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        if (!this.consentOk())
+            return;
+        this.submitSignUp.emit({
+            values: { ...this.values },
+            consent: this.settings?.legal?.required ? this.agreed : true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SignUpFormComponent, isStandalone: true, selector: "atlas-sign-up-form", inputs: { settings: "settings", busy: "busy", errors: "errors", captcha: "captcha" }, outputs: { submitSignUp: "submitSignUp" }, ngImport: i0, template: `
+    <div [class]="cls('card', 'atlas-card')">
+      <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
+
+      @for (error of formErrors(); track error.code) {
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+      }
+
+      <form (submit)="onSubmit($event)">
+        @for (f of fields(); track f.key) {
+          @if (f.type === 'radio' || f.type === 'multiselect') {
+            <div [class]="cls('formField', 'atlas-field')">
+              <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ label(f) }}</span>
+              <span class="atlas-choices">
+                @for (o of f.options; track o) {
+                  <label class="atlas-choice">
+                    <input
+                      [type]="f.type === 'radio' ? 'radio' : 'checkbox'"
+                      [attr.name]="f.key"
+                      [value]="o"
+                      [checked]="picked(f.key).includes(o)"
+                      (change)="toggle(f, o, $any($event.target).checked)"
+                    />
+                    {{ o }}
+                  </label>
+                }
+              </span>
+              @for (error of fieldErrorsFor(f.key); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </div>
+          } @else {
+            <label [class]="cls('formField', 'atlas-field')">
+              <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ label(f) }}</span>
+              @if (f.type === 'checkbox') {
+                <input
+                  type="checkbox"
+                  [attr.name]="f.key"
+                  [checked]="values[f.key] === 'true'"
+                  (change)="setValue(f.key, $any($event.target).checked ? 'true' : '')"
+                />
+              } @else if (f.type === 'select') {
+                <select
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [attr.name]="f.key"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  (change)="setValue(f.key, $any($event.target).value)"
+                >
+                  <option value="">{{ f.placeholder ?? t('signUp.selectPlaceholder') }}</option>
+                  @for (o of f.options; track o) {
+                    <option [value]="o">{{ o }}</option>
+                  }
+                </select>
+              } @else if (f.type === 'textarea') {
+                <textarea
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [attr.name]="f.key"
+                  rows="3"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  [attr.placeholder]="f.placeholder"
+                  (input)="setValue(f.key, $any($event.target).value)"
+                ></textarea>
+              } @else {
+                <input
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [type]="inputType(f)"
+                  [attr.name]="f.key"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  [attr.placeholder]="f.placeholder"
+                  (input)="setValue(f.key, $any($event.target).value)"
+                />
+              }
+              @for (error of fieldErrorsFor(f.key); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </label>
+          }
+        }
+
+        <label [class]="cls('formField', 'atlas-field')">
+          <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('signUp.emailLabel') }}</span>
+          <input
+            [class]="cls('formFieldInput', 'atlas-input')"
+            type="email"
+            name="email"
+            autocomplete="email"
+            required
+            [value]="values['email'] ?? ''"
+            (input)="setValue('email', $any($event.target).value)"
+          />
+          @for (error of fieldErrorsFor('email'); track error.code) {
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+          }
+        </label>
+
+        <label [class]="cls('formField', 'atlas-field')">
+          <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('signUp.passwordLabel') }}</span>
+          <input
+            [class]="cls('formFieldInput', 'atlas-input')"
+            type="password"
+            name="password"
+            autocomplete="new-password"
+            required
+            [value]="values['password'] ?? ''"
+            (input)="setValue('password', $any($event.target).value)"
+          />
+          @for (error of fieldErrorsFor('password'); track error.code) {
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+          }
+        </label>
+
+        @if (showLegal()) {
+          <label [class]="cls('formField', 'atlas-consent')">
+            @if (settings?.legal?.required) {
+              <input
+                type="checkbox"
+                name="consent"
+                [checked]="agreed"
+                (change)="agreed = $any($event.target).checked"
+              />
+            }
+            <span class="atlas-text">
+              {{ t(settings?.legal?.required ? 'signUp.consentAgree' : 'signUp.consentNotice') }}
+              @if (settings?.legal?.termsUrl; as terms) {
+                <a class="atlas-link" [href]="terms" target="_blank" rel="noopener noreferrer">{{ t('signUp.terms') }}</a>
+              }
+              @if (settings?.legal?.termsUrl && settings?.legal?.privacyUrl) {
+                {{ t('signUp.and') }}
+              }
+              @if (settings?.legal?.privacyUrl; as privacy) {
+                <a class="atlas-link" [href]="privacy" target="_blank" rel="noopener noreferrer">{{ t('signUp.privacy') }}</a>
+              }.
+            </span>
+            @for (error of fieldErrorsFor('consent'); track error.code) {
+              <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            }
+          </label>
+        }
+
+        @if (captcha) {
+          <div class="atlas-captcha" data-atlas-captcha="" [atlasCaptchaSlot]="captcha"></div>
+        }
+
+        <button
+          [class]="cls('formButtonPrimary', 'atlas-button')"
+          [disabled]="busy || !consentOk()"
+          type="submit"
+        >
+          {{ t('signUp.submit') }}
+        </button>
+      </form>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-sign-up-form',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AtlasCaptchaSlotDirective],
+                    template: `
+    <div [class]="cls('card', 'atlas-card')">
+      <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
+
+      @for (error of formErrors(); track error.code) {
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+      }
+
+      <form (submit)="onSubmit($event)">
+        @for (f of fields(); track f.key) {
+          @if (f.type === 'radio' || f.type === 'multiselect') {
+            <div [class]="cls('formField', 'atlas-field')">
+              <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ label(f) }}</span>
+              <span class="atlas-choices">
+                @for (o of f.options; track o) {
+                  <label class="atlas-choice">
+                    <input
+                      [type]="f.type === 'radio' ? 'radio' : 'checkbox'"
+                      [attr.name]="f.key"
+                      [value]="o"
+                      [checked]="picked(f.key).includes(o)"
+                      (change)="toggle(f, o, $any($event.target).checked)"
+                    />
+                    {{ o }}
+                  </label>
+                }
+              </span>
+              @for (error of fieldErrorsFor(f.key); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </div>
+          } @else {
+            <label [class]="cls('formField', 'atlas-field')">
+              <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ label(f) }}</span>
+              @if (f.type === 'checkbox') {
+                <input
+                  type="checkbox"
+                  [attr.name]="f.key"
+                  [checked]="values[f.key] === 'true'"
+                  (change)="setValue(f.key, $any($event.target).checked ? 'true' : '')"
+                />
+              } @else if (f.type === 'select') {
+                <select
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [attr.name]="f.key"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  (change)="setValue(f.key, $any($event.target).value)"
+                >
+                  <option value="">{{ f.placeholder ?? t('signUp.selectPlaceholder') }}</option>
+                  @for (o of f.options; track o) {
+                    <option [value]="o">{{ o }}</option>
+                  }
+                </select>
+              } @else if (f.type === 'textarea') {
+                <textarea
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [attr.name]="f.key"
+                  rows="3"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  [attr.placeholder]="f.placeholder"
+                  (input)="setValue(f.key, $any($event.target).value)"
+                ></textarea>
+              } @else {
+                <input
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [type]="inputType(f)"
+                  [attr.name]="f.key"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  [attr.placeholder]="f.placeholder"
+                  (input)="setValue(f.key, $any($event.target).value)"
+                />
+              }
+              @for (error of fieldErrorsFor(f.key); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </label>
+          }
+        }
+
+        <label [class]="cls('formField', 'atlas-field')">
+          <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('signUp.emailLabel') }}</span>
+          <input
+            [class]="cls('formFieldInput', 'atlas-input')"
+            type="email"
+            name="email"
+            autocomplete="email"
+            required
+            [value]="values['email'] ?? ''"
+            (input)="setValue('email', $any($event.target).value)"
+          />
+          @for (error of fieldErrorsFor('email'); track error.code) {
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+          }
+        </label>
+
+        <label [class]="cls('formField', 'atlas-field')">
+          <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('signUp.passwordLabel') }}</span>
+          <input
+            [class]="cls('formFieldInput', 'atlas-input')"
+            type="password"
+            name="password"
+            autocomplete="new-password"
+            required
+            [value]="values['password'] ?? ''"
+            (input)="setValue('password', $any($event.target).value)"
+          />
+          @for (error of fieldErrorsFor('password'); track error.code) {
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+          }
+        </label>
+
+        @if (showLegal()) {
+          <label [class]="cls('formField', 'atlas-consent')">
+            @if (settings?.legal?.required) {
+              <input
+                type="checkbox"
+                name="consent"
+                [checked]="agreed"
+                (change)="agreed = $any($event.target).checked"
+              />
+            }
+            <span class="atlas-text">
+              {{ t(settings?.legal?.required ? 'signUp.consentAgree' : 'signUp.consentNotice') }}
+              @if (settings?.legal?.termsUrl; as terms) {
+                <a class="atlas-link" [href]="terms" target="_blank" rel="noopener noreferrer">{{ t('signUp.terms') }}</a>
+              }
+              @if (settings?.legal?.termsUrl && settings?.legal?.privacyUrl) {
+                {{ t('signUp.and') }}
+              }
+              @if (settings?.legal?.privacyUrl; as privacy) {
+                <a class="atlas-link" [href]="privacy" target="_blank" rel="noopener noreferrer">{{ t('signUp.privacy') }}</a>
+              }.
+            </span>
+            @for (error of fieldErrorsFor('consent'); track error.code) {
+              <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            }
+          </label>
+        }
+
+        @if (captcha) {
+          <div class="atlas-captcha" data-atlas-captcha="" [atlasCaptchaSlot]="captcha"></div>
+        }
+
+        <button
+          [class]="cls('formButtonPrimary', 'atlas-button')"
+          [disabled]="busy || !consentOk()"
+          type="submit"
+        >
+          {{ t('signUp.submit') }}
+        </button>
+      </form>
+    </div>
+  `,
+                }]
+        }], propDecorators: { settings: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], captcha: [{
+                type: Input
+            }], submitSignUp: [{
+                type: Output
+            }] } });
+
+/**
+ * `<atlas-sign-up>` — creates an account. The Angular peer of React's
+ * `<SignUp/>`. The first step is the create-account form (the instance's
+ * configured fields, email, password, legal consent and — when required — the
+ * captcha), which POSTs `/v1/client/sign_ups`; from there it shares the flow
+ * engine with `<atlas-sign-in>` (the emailed-code step, then the ticket
+ * exchange), because the sequence of steps is decided by the server.
  *
  * ```html
  * <atlas-sign-up *atlasSignedOut></atlas-sign-up>
@@ -1150,20 +1723,35 @@ class SignUpComponent {
     atlas = inject(AtlasService);
     /** Where to send the user once the flow completes. Reserved for host routing. */
     afterUrl;
-    flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), this.atlas.pendingAttempt);
+    flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), this.atlas.pendingAttempt, (key) => translate(this.atlas.localization, key));
+    ngOnInit() {
+        // §5 the instance's sign-up fields, consent policy and captcha settings.
+        if (typeof window !== 'undefined')
+            void this.flow.loadSettings();
+    }
     ngOnDestroy() {
         this.flow.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SignUpComponent, isStandalone: true, selector: "atlas-sign-up", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
-    <atlas-attempt-flow
-      [attempt]="flow.state().attempt"
-      [busy]="flow.state().busy"
-      [errors]="flow.state().errors"
-      titleKey="signUp.title"
-      (submitFlow)="flow.submit($event)"
-    ></atlas-attempt-flow>
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey"], outputs: ["submitFlow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SignUpComponent, isStandalone: true, selector: "atlas-sign-up", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
+    @if (flow.state().attempt) {
+      <atlas-attempt-flow
+        [attempt]="flow.state().attempt"
+        [busy]="flow.state().busy"
+        [errors]="flow.state().errors"
+        titleKey="signUp.title"
+        (submitFlow)="flow.submit($event)"
+      ></atlas-attempt-flow>
+    } @else {
+      <atlas-sign-up-form
+        [settings]="flow.settings()"
+        [busy]="flow.state().busy"
+        [errors]="flow.state().errors"
+        [captcha]="flow.signUpCaptchaDrawn() ? flow.signUpCaptcha : null"
+        (submitSignUp)="flow.create($event.values, $event.consent)"
+      ></atlas-sign-up-form>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha"], outputs: ["submitFlow"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha"], outputs: ["submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,
@@ -1171,15 +1759,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'atlas-sign-up',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AttemptFlowComponent],
+                    imports: [AttemptFlowComponent, SignUpFormComponent],
                     template: `
-    <atlas-attempt-flow
-      [attempt]="flow.state().attempt"
-      [busy]="flow.state().busy"
-      [errors]="flow.state().errors"
-      titleKey="signUp.title"
-      (submitFlow)="flow.submit($event)"
-    ></atlas-attempt-flow>
+    @if (flow.state().attempt) {
+      <atlas-attempt-flow
+        [attempt]="flow.state().attempt"
+        [busy]="flow.state().busy"
+        [errors]="flow.state().errors"
+        titleKey="signUp.title"
+        (submitFlow)="flow.submit($event)"
+      ></atlas-attempt-flow>
+    } @else {
+      <atlas-sign-up-form
+        [settings]="flow.settings()"
+        [busy]="flow.state().busy"
+        [errors]="flow.state().errors"
+        [captcha]="flow.signUpCaptchaDrawn() ? flow.signUpCaptcha : null"
+        (submitSignUp)="flow.create($event.values, $event.consent)"
+      ></atlas-sign-up-form>
+    }
   `,
                 }]
         }], propDecorators: { afterUrl: [{
@@ -1630,5 +2228,5 @@ function atlasChildGuard(options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { ATLAS_OPTIONS, ATLAS_UI, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, explicitTokens, provideAtlas, renderAppearance, resolveTokens, translate, withFallback };
+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 };
 //# sourceMappingURL=atlasauth-angular.mjs.map