@atlasauth/angular 0.2.1 → 0.3.0

package/dist/lib/atlas.config.d.ts

@@ -9,8 +9,13 @@ export interface AtlasOptions {
     /** The instance's publishable key (`pk_…`). Required. */
     publishableKey: string;
     /**
-     * The instance's FAPI origin. Empty string (the default) means same-origin —
-     * requests go to `/v1/...` on the app's own host.
+     * The instance's Frontend API: an absolute URL such as
+     * `"https://auth.example.com"`, or `"same-origin"` / a path such as `"/atlas"`
+     * behind a reverse proxy on the app's own origin (requests then go to
+     * `/v1/...` on the app's host). Required at runtime — `AtlasService` throws an
+     * `AtlasConfigError` (`FRONTEND_API_REQUIRED` / `FRONTEND_API_INVALID`) when
+     * it is missing or malformed. Optional in the type only so existing call sites
+     * keep compiling.
      */
     frontendApi?: string;
     /** Design tokens + per-element class overrides. See {@link Appearance}. */

package/dist/lib/components/attempt-flow.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@angular/core';
-import { type AttemptView, type FieldError } from '@atlasauth/js';
+import { type AttemptView, type CaptchaController, type FieldError } from '@atlasauth/js';
 import { type ElementKey } from '../appearance';
 import * as i0 from "@angular/core";
 /**
@@ -30,6 +30,12 @@ export declare class AttemptFlowComponent {
     busy: boolean;
     errors: FieldError[];
     titleKey: string;
+    /**
+     * 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: CaptchaController | null;
     /** Emits the collected field values when the form is submitted. */
     submitFlow: EventEmitter<Record<string, string>>;
     protected values: Record<string, string>;
@@ -40,9 +46,10 @@ export declare class AttemptFlowComponent {
     protected formErrors(): FieldError[];
     protected fieldErrorsFor(name: string): FieldError[];
     private step;
+    protected showCaptcha(): boolean;
     protected showSubmit(): boolean;
     protected fields(): StepField[];
     static ɵfac: i0.ɵɵFactoryDeclaration<AttemptFlowComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AttemptFlowComponent, "atlas-attempt-flow", never, { "attempt": { "alias": "attempt"; "required": false; }; "busy": { "alias": "busy"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "titleKey": { "alias": "titleKey"; "required": false; }; }, { "submitFlow": "submitFlow"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AttemptFlowComponent, "atlas-attempt-flow", never, { "attempt": { "alias": "attempt"; "required": false; }; "busy": { "alias": "busy"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "titleKey": { "alias": "titleKey"; "required": false; }; "captcha": { "alias": "captcha"; "required": false; }; }, { "submitFlow": "submitFlow"; }, never, never, true, never>;
 }
 export {};

package/dist/lib/components/flow-controller.d.ts

@@ -1,5 +1,5 @@
 import { WritableSignal } from '@angular/core';
-import { FapiClient, type FlowState } from '@atlasauth/js';
+import { FapiClient, type CaptchaController, type FlowState, type InstanceSettings } from '@atlasauth/js';
 /**
  * The server-driven sign-in / sign-up engine, shared by `<atlas-sign-in>` and
  * `<atlas-sign-up>` — the Angular counterpart of React's `useFlow` hook.
@@ -8,16 +8,45 @@ import { FapiClient, type FlowState } from '@atlasauth/js';
  * 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.
  */
 export declare class AtlasFlowController {
     private readonly client;
     private readonly reload;
+    /** Resolves the captcha messages' catalog keys. Defaults to en-US. */
+    private readonly t;
     readonly state: WritableSignal<FlowState>;
+    /**
+     * 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.
+     */
+    readonly settings: WritableSignal<InstanceSettings>;
+    /** The sign-in captcha (identifier step / `needs_captcha` challenge). */
+    readonly captcha: CaptchaController;
+    /** The sign-up captcha (the create-account step). */
+    readonly signUpCaptcha: CaptchaController;
+    /** Whether {@link captcha} currently draws a widget (for templates). */
+    readonly captchaDrawn: WritableSignal<boolean>;
+    /** Whether {@link signUpCaptcha} currently draws a widget (for templates). */
+    readonly signUpCaptchaDrawn: WritableSignal<boolean>;
     private pollTimer;
+    private identifier;
     constructor(client: FapiClient, reload: () => Promise<void>, pending: {
         id: string;
         status: string;
-    } | null);
+    } | null, 
+    /** Resolves the captcha messages' catalog keys. Defaults to en-US. */
+    t?: (key: string) => string);
+    /** Fetch the instance's public settings and draw whatever captcha they require. */
+    loadSettings(): Promise<void>;
+    /** Keep both captchas in step with the settings and the flow's current step. */
+    private syncCaptcha;
+    private setState;
     /**
      * Advance the flow with the values the user typed. On completion, exchange the
      * one-time ticket for cookies over a same-origin request (FAPI is cross-origin
@@ -25,10 +54,18 @@ export declare class AtlasFlowController {
      * the app sees a signed-in user.
      */
     submit(values: Record<string, string>): Promise<void>;
+    /**
+     * 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}.
+     */
+    create(values: Record<string, string>, consent?: boolean): Promise<void>;
+    private finish;
     /** Start/stop the §5.3 magic-link poll to match the current state. */
     syncPolling(): void;
     private startPolling;
     private stopPolling;
-    /** 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(): void;
 }

package/dist/lib/components/sign-in.component.d.ts

@@ -3,7 +3,9 @@ import { AtlasFlowController } from './flow-controller';
 import * as i0 from "@angular/core";
 /**
  * `<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>

package/dist/lib/components/sign-up-form.component.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter } from '@angular/core';
+import type { CaptchaController, FieldError, InstanceSettings, PublicSignUpField } from '@atlasauth/js';
+import { type ElementKey } from '../appearance';
+import * as i0 from "@angular/core";
+/** What the create-account form emits: the values typed plus the consent tick. */
+export interface SignUpFormSubmit {
+    values: Record<string, string>;
+    consent: boolean;
+}
+/**
+ * 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.
+ */
+export declare class SignUpFormComponent {
+    private readonly atlas;
+    settings: InstanceSettings | null;
+    busy: boolean;
+    errors: FieldError[];
+    captcha: CaptchaController | null;
+    /** Emits the typed values and the consent tick when the form is submitted. */
+    submitSignUp: EventEmitter<SignUpFormSubmit>;
+    protected values: Record<string, string>;
+    protected agreed: boolean;
+    protected t(key: string, vars?: Record<string, string>): string;
+    protected cls(key: ElementKey, base: string): string;
+    protected setValue(name: string, value: string): void;
+    protected fields(): PublicSignUpField[];
+    protected label(f: PublicSignUpField): string;
+    protected inputType(f: PublicSignUpField): string;
+    /** Same encoding as React, the embed widget and the hosted page: one value,
+     *  or a comma-joined list for multiselect. */
+    protected picked(key: string): string[];
+    protected toggle(f: PublicSignUpField, option: string, on: boolean): void;
+    protected showLegal(): boolean;
+    protected consentOk(): boolean;
+    protected formErrors(): FieldError[];
+    protected fieldErrorsFor(name: string): FieldError[];
+    protected onSubmit(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SignUpFormComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SignUpFormComponent, "atlas-sign-up-form", never, { "settings": { "alias": "settings"; "required": false; }; "busy": { "alias": "busy"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "captcha": { "alias": "captcha"; "required": false; }; }, { "submitSignUp": "submitSignUp"; }, never, never, true, never>;
+}

package/dist/lib/components/sign-up.component.d.ts

@@ -1,20 +1,24 @@
-import { OnDestroy } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { AtlasFlowController } from './flow-controller';
 import * as i0 from "@angular/core";
 /**
- * `<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.
+ * `<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>
  * ```
  */
-export declare class SignUpComponent implements OnDestroy {
+export declare class SignUpComponent implements OnInit, OnDestroy {
     private readonly atlas;
     /** Where to send the user once the flow completes. Reserved for host routing. */
     afterUrl?: string;
     protected readonly flow: AtlasFlowController;
+    ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SignUpComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SignUpComponent, "atlas-sign-up", never, { "afterUrl": { "alias": "afterUrl"; "required": false; }; }, {}, never, never, true, never>;

package/dist/lib/directives/captcha-slot.directive.d.ts

@@ -0,0 +1,19 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import type { CaptchaController } from '@atlasauth/js';
+import * as i0 from "@angular/core";
+/**
+ * `[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.
+ */
+export declare class AtlasCaptchaSlotDirective implements OnInit, OnDestroy {
+    private readonly host;
+    private current;
+    private initialized;
+    set controller(next: CaptchaController | null);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AtlasCaptchaSlotDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AtlasCaptchaSlotDirective, "[atlasCaptchaSlot]", never, { "controller": { "alias": "atlasCaptchaSlot"; "required": false; }; }, {}, never, never, true, never>;
+}

package/dist/public-api.d.ts

@@ -18,6 +18,8 @@ export { OrganizationSwitcherComponent } from './lib/components/organization-swi
 export { UserProfileComponent } from './lib/components/user-profile.component';
 export { OrganizationProfileComponent } from './lib/components/organization-profile.component';
 export { AttemptFlowComponent } from './lib/components/attempt-flow.component';
+export { SignUpFormComponent, type SignUpFormSubmit, } from './lib/components/sign-up-form.component';
+export { AtlasCaptchaSlotDirective } from './lib/directives/captcha-slot.directive';
 export { AtlasFlowController } from './lib/components/flow-controller';
 export { ATLAS_UI } from './lib/atlas.ui';
 export { atlasGuard, atlasChildGuard, type AtlasGuardOptions, } from './lib/guards/atlas.guard';
@@ -26,3 +28,4 @@ export * from './lib/i18n';
 export * from './lib/protect';
 export * from './lib/types';
 export * from './lib/fapi';
+export type { InstanceSettings, PublicSignUpField, CaptchaController, CaptchaFlowKey, CaptchaWidgetMode, FlowCaptcha, } from '@atlasauth/js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/angular",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Official Angular SDK for Atlas — the Angular peer of @atlasauth/react.",
   "license": "MIT",
   "module": "./dist/fesm2022/atlas-angular.mjs",
@@ -20,8 +20,8 @@
   "dependencies": {
     "tslib": "^2.6.3",
     "@atlasauth/design": "0.1.0",
-    "@atlasauth/js": "0.5.0",
-    "@atlasauth/authz": "0.1.1"
+    "@atlasauth/authz": "0.1.1",
+    "@atlasauth/js": "0.6.0"
   },
   "peerDependencies": {
     "@angular/core": ">=17",
@@ -50,7 +50,8 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "repository": {
     "type": "git",