@globalpayments-private/gpds-pattern-web 0.0.0-stage → 0.1.0-pr.7.gdcb74cd

package/dist/collection/components/uds-pattern-login-card/uds-pattern-login-card.js

@@ -0,0 +1,508 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h, Host } from "@stencil/core";
+import { DEFAULT_LOGIN_LABELS } from "../../utils/labels";
+import { InjectSlimmer } from "../../slimmer";
+import { LoginWorkflowSlimmer } from "./slimmers/login-workflow.slimmer";
+import { ResendThrottleSlimmer } from "./slimmers/resend-throttle.slimmer";
+import { IdentityMemorySlimmer } from "./slimmers/identity-memory.slimmer";
+import { LoginCardRenderer } from "./slimmers/renderers/login-card-renderer";
+import { LoginStepViewModel } from "./view-model/login-step.view-model";
+/**
+ * The GP login workflow, as a single pattern.
+ *
+ * Unlike a design-system component, this pattern **owns the workflow**: step
+ * sequencing, in-flight state, failure copy, resend throttling, lockout
+ * messaging, back-navigation, focus movement and identifier persistence all
+ * live inside the card. A consuming product does not implement any of it.
+ *
+ * Two aggregate seams are all a consumer wires:
+ *
+ * - **`auth`** — a `UdsAuthProvider` adapter saying *what the identity platform
+ *   needs next*. The pattern decides what that looks like.
+ * - **`controlStrategy`** — an optional `UdsLoginControlStrategy` that intercepts
+ *   every checkpoint in the workflow, for the cases where the course of the flow
+ *   itself needs to change.
+ *
+ * ```ts
+ * card.auth = createAuthProvider({
+ *   signIn:    ({ identifier, password }) => oktaSdk.authn(identifier, password),
+ *   verifyOtp: ({ code })                 => oktaSdk.verifyFactor(code),
+ * });
+ * ```
+ *
+ * Which optional methods the adapter implements is also the configuration:
+ * implement `signUp` and the sign-up route appears; omit `requestPasswordReset`
+ * and no recovery link is rendered.
+ *
+ * This class deliberately holds only props, events, state and the render shell.
+ * Behaviour lives in slimmers (`./slimmers`), markup in renderer slimmers
+ * (`./slimmers/renderers`) and derivation in `./view-model` — see
+ * `src/slimmer/README.md`.
+ *
+ * @slot brand - Optional branding (logo, product name) rendered above the heading.
+ * @slot footer - Replaces the default help footer.
+ */
+export class UdsPatternLoginCard {
+    constructor() {
+        // --- Slimmers -----------------------------------------------------------
+        // Each owns one responsibility and binds back to the state below.
+        this.workflow = new LoginWorkflowSlimmer();
+        this.resend = new ResendThrottleSlimmer();
+        this.memory = new IdentityMemorySlimmer();
+        this.renderer = new LoginCardRenderer();
+        // --- Props --------------------------------------------------------------
+        /**
+         * Everything that cannot be expressed as an attribute: the `auth` adapter,
+         * the `control` strategy and any `labels` overrides.
+         *
+         * The split is mechanical rather than a matter of taste — see
+         * `UdsLoginConfig`. Scalars below are attributes because they can be;
+         * objects and functions are gathered here because they cannot be.
+         *
+         * Also accepts a JSON string, so the `labels` member alone can be set from
+         * plain HTML markup.
+         */
+        this.config = {};
+        /** The step the workflow starts on. */
+        this.initialStep = 'identifier';
+        /** Pre-populates the identifier field, overriding any remembered value. */
+        this.identifier = '';
+        /** Default number of digit inputs, when the provider does not specify one. */
+        this.otpLength = 6;
+        /**
+         * Where the "Remember my email" value is persisted. Set to an empty string to
+         * disable persistence entirely.
+         */
+        this.rememberStorageKey = 'uds-pattern-login.identifier';
+        /** Renders the "Need help signing in?" footer. */
+        this.showHelpFooter = true;
+        // --- State --------------------------------------------------------------
+        // Written by the slimmers through `@MapToComponentField({ writable: true })`.
+        this.step = 'identifier';
+        this.busy = false;
+        this.methods = [];
+        this.nowTick = Date.now();
+        this.values = {};
+        /**
+         * The intents a renderer may raise. Held as one stable object — not rebuilt
+         * per render — so that binding to it from a slimmer is a fixed reference and
+         * the data half of the contract stays free of behaviour.
+         */
+        this.handlers = {
+            onSubmit: (event) => {
+                event.preventDefault();
+                void this.workflow.submit();
+            },
+            onNavigate: (step) => (event) => {
+                event.preventDefault();
+                this.workflow.navigateTo(step);
+            },
+            onAction: (action) => (event) => {
+                event.preventDefault();
+                this.udsLoginAction.emit({ action, step: this.step });
+            },
+            onResend: (event) => {
+                event.preventDefault();
+                void this.workflow.resendCode();
+            },
+            onValueChange: (name, value) => {
+                this.values = { ...this.values, [name]: value };
+            },
+        };
+    }
+    // --- Lifecycle ----------------------------------------------------------
+    // Bodies are intentionally empty: slimmers hook onto these by name via
+    // `@MapToComponentMethod`, and the hooks run after the method itself.
+    componentWillLoad() {
+        /* LoginWorkflowSlimmer.start */
+    }
+    disconnectedCallback() {
+        /* ResendThrottleSlimmer.stop */
+    }
+    componentDidRender() {
+        if (this.lastRenderedStep !== undefined && this.lastRenderedStep !== this.step) {
+            this.focusFirstControl();
+        }
+        this.lastRenderedStep = this.step;
+    }
+    /**
+     * Returns the workflow to its first step and clears all collected input.
+     * Useful after a sign-out, or to recover from a terminal step.
+     */
+    async reset() {
+        /* LoginWorkflowSlimmer.restart */
+    }
+    // --- Derived ------------------------------------------------------------
+    /** The resolved configuration, accepting a JSON string for HTML consumers. */
+    get resolvedConfig() {
+        return parseJsonProp(this.config, {});
+    }
+    /** The authentication seam. Read by the workflow slimmer. */
+    get auth() {
+        return this.resolvedConfig.auth;
+    }
+    /** The control seam. Read by the workflow slimmer at each checkpoint. */
+    get controlStrategy() {
+        return this.resolvedConfig.control;
+    }
+    /** Merged copy. Read by the slimmers as well, for error text. */
+    get copy() {
+        const overrides = this.resolvedConfig.labels ?? {};
+        return {
+            ...DEFAULT_LOGIN_LABELS,
+            ...overrides,
+            errors: { ...DEFAULT_LOGIN_LABELS.errors, ...(overrides.errors ?? {}) },
+        };
+    }
+    /**
+     * Everything the renderers need to draw the current step, and nothing else.
+     *
+     * Derivation happens in one place — `LoginStepViewModel.from` — rather than
+     * being assembled inline in `render()`, so it can be tested without a DOM and
+     * reviewed without reading JSX.
+     */
+    get viewModel() {
+        return LoginStepViewModel.from({
+            step: this.step,
+            copy: this.copy,
+            errorText: this.errorText,
+            busy: this.busy,
+            can: this.workflow.capabilities,
+            methods: this.methods,
+            values: this.values,
+            otpLength: this.workflow.codeLength,
+            resendSeconds: this.resend.secondsRemaining,
+            otpMethodLabel: this.otpMethodLabel,
+            destination: this.destination,
+            unlockMinutes: this.unlockMinutes,
+        });
+    }
+    focusFirstControl() {
+        // `shadow: true`, so a shadow root is always attached by the time a render
+        // has completed. The ambient type is nullable; the value is not.
+        const root = this.hostEl.shadowRoot;
+        // Vega fields are custom elements, so the focusable control is inside their
+        // own shadow root. Delegating to the element's own `focus()` lets Vega
+        // decide which of its internals should receive focus.
+        //
+        // Every step renders a heading, so the fallback always resolves — the
+        // first arm is the one that matters, moving focus into the form.
+        const target = root.querySelector('.form .field:not([disabled])') ??
+            root.querySelector('.card__heading');
+        target.focus();
+    }
+    // --- Rendering ----------------------------------------------------------
+    render() {
+        return (h(Host, { key: 'e8d37d2f818b9b2260fb2ccd3d784393a28385c4' }, h("section", { key: '1c0ce6ee5c73d24b06212d8a4b2f293c89e6cb70', class: "card", "aria-busy": String(this.busy) }, h("slot", { key: 'c87b3ceba0d974e15958aec53c19e76dc3996096', name: "brand" }), this.renderer.render(), this.showHelpFooter && (h("div", { key: '003268c5b8abf8755d55ba54e433fc8114171113', class: "card__footer" }, h("slot", { key: '376accf53b60a5cb489abde889ff74bf7fab3fe6', name: "footer" }, h("p", { key: 'a6834071896f9a3d988c089807fc6a77ee928ffc' }, this.copy.helpPrompt, ' ', h("vega-button-link", { key: '4645b67e1ccf70b0b386a516025659540a9308a9', class: "link", label: this.copy.help, eventful: true, onVegaClick: (event) => this.handlers.onAction('login-help')(event) }))))))));
+    }
+    static get is() { return "uds-pattern-login-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["uds-pattern-login-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["uds-pattern-login-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdsLoginConfig | string",
+                    "resolved": "UdsLoginConfig | string",
+                    "references": {
+                        "UdsLoginConfig": {
+                            "location": "import",
+                            "path": "../../providers/login-config",
+                            "id": "src/providers/login-config.ts::UdsLoginConfig",
+                            "referenceLocation": "UdsLoginConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Everything that cannot be expressed as an attribute: the `auth` adapter,\nthe `control` strategy and any `labels` overrides.\n\nThe split is mechanical rather than a matter of taste \u2014 see\n`UdsLoginConfig`. Scalars below are attributes because they can be;\nobjects and functions are gathered here because they cannot be.\n\nAlso accepts a JSON string, so the `labels` member alone can be set from\nplain HTML markup."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "config",
+                "defaultValue": "{}"
+            },
+            "initialStep": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdsLoginStep",
+                    "resolved": "\"check-email\" | \"forgot-password\" | \"forgot-username\" | \"identifier\" | \"locked\" | \"mfa-method\" | \"otp\" | \"password\" | \"reset-password\" | \"sign-up\" | \"success\"",
+                    "references": {
+                        "UdsLoginStep": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::UdsLoginStep",
+                            "referenceLocation": "UdsLoginStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The step the workflow starts on."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-step",
+                "defaultValue": "'identifier'"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-populates the identifier field, overriding any remembered value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "identifier",
+                "defaultValue": "''"
+            },
+            "otpLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default number of digit inputs, when the provider does not specify one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "otp-length",
+                "defaultValue": "6"
+            },
+            "rememberStorageKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the \"Remember my email\" value is persisted. Set to an empty string to\ndisable persistence entirely."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remember-storage-key",
+                "defaultValue": "'uds-pattern-login.identifier'"
+            },
+            "showHelpFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the \"Need help signing in?\" footer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-help-footer",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "step": {},
+            "busy": {},
+            "errorText": {},
+            "methods": {},
+            "otpMethodLabel": {},
+            "destination": {},
+            "unlockMinutes": {},
+            "resendAt": {},
+            "nowTick": {},
+            "values": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "udsLoginSuccess",
+                "name": "udsLoginSuccess",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted once the provider reports successful authentication."
+                },
+                "complexType": {
+                    "original": "{ session?: UdsSession }",
+                    "resolved": "{ session?: unknown; }",
+                    "references": {
+                        "UdsSession": {
+                            "location": "import",
+                            "path": "../../providers/auth-provider",
+                            "id": "src/providers/auth-provider.ts::UdsSession",
+                            "referenceLocation": "UdsSession"
+                        }
+                    }
+                }
+            }, {
+                "method": "udsLoginStepChange",
+                "name": "udsLoginStepChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the workflow moves to a different step."
+                },
+                "complexType": {
+                    "original": "UdsLoginStepChangeDetail",
+                    "resolved": "UdsLoginStepChangeDetail",
+                    "references": {
+                        "UdsLoginStepChangeDetail": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::UdsLoginStepChangeDetail",
+                            "referenceLocation": "UdsLoginStepChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "udsLoginError",
+                "name": "udsLoginError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the provider reports a failure, after the card has displayed it."
+                },
+                "complexType": {
+                    "original": "UdsLoginErrorDetail",
+                    "resolved": "UdsLoginErrorDetail",
+                    "references": {
+                        "UdsLoginErrorDetail": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::UdsLoginErrorDetail",
+                            "referenceLocation": "UdsLoginErrorDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "udsLoginAction",
+                "name": "udsLoginAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted for the two intents the pattern cannot resolve \u2014 the help links.\nIn-workflow navigation is handled internally and is not reported here."
+                },
+                "complexType": {
+                    "original": "UdsLoginActionDetail",
+                    "resolved": "UdsLoginActionDetail",
+                    "references": {
+                        "UdsLoginActionDetail": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::UdsLoginActionDetail",
+                            "referenceLocation": "UdsLoginActionDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Returns the workflow to its first step and clears all collected input.\nUseful after a sign-out, or to recover from a terminal step.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+__decorate([
+    InjectSlimmer()
+], UdsPatternLoginCard.prototype, "workflow", void 0);
+__decorate([
+    InjectSlimmer()
+], UdsPatternLoginCard.prototype, "resend", void 0);
+__decorate([
+    InjectSlimmer()
+], UdsPatternLoginCard.prototype, "memory", void 0);
+__decorate([
+    InjectSlimmer()
+], UdsPatternLoginCard.prototype, "renderer", void 0);
+/** Accepts either a parsed value or a JSON string (for plain-HTML consumers). */
+function parseJsonProp(value, fallback) {
+    if (typeof value !== 'string') {
+        return value ?? fallback;
+    }
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return fallback;
+    }
+}

package/dist/collection/components/uds-pattern-login-card/validation/login-validation-rules.js

@@ -0,0 +1,86 @@
+/**
+ * The pattern's own `vega-form` validation rules.
+ *
+ * ## Why rules rather than a pre-submit check
+ *
+ * `vega-form` already gates submission: its submit handler awaits `valid()` and
+ * only emits `vegaFormSubmit` when every field passes. Anything the pattern
+ * checks *outside* that gate is a second, competing validation pass — it fires
+ * at a different moment, reports through a different surface (a card-level
+ * banner rather than the field at fault), and has to be kept in step by hand.
+ *
+ * Expressing the same checks as rules puts them inside the one flow. The field
+ * that is wrong is the field that says so, the error clears as the user fixes
+ * it, and the submit gate needs no pattern-specific code at all.
+ *
+ * ## Why these two, and nothing else
+ *
+ * Everything Vega already derives from a prop — `required`, `type="email"`,
+ * `minLength` — is left to Vega, including its wording. Restating "this field
+ * is required" here would fork copy that the design system maintains for every
+ * Global Payments product. Only checks Vega cannot express from a prop alone
+ * live here: one that needs a sibling field's value, and one that needs the
+ * configured code length.
+ *
+ * ## Why they read through callbacks
+ *
+ * A rule is handed to `vega-input` as a prop and re-read when its identity
+ * changes, so rebuilding the array on each render would churn Vega's watchers
+ * every time any unrelated state moved. These are built once and resolve their
+ * inputs — the value to compare against, the message to show — when they are
+ * evaluated, so a single stable instance always sees current state.
+ */
+/** Evaluated only once the field has a value; emptiness is `required`'s job. */
+class NonEmptyStringRule {
+    canEvaluate(input, status) {
+        if (typeof input !== 'string' || input.length === 0) {
+            return false;
+        }
+        return status ? !status.disabled && status.visible : true;
+    }
+    /**
+     * Mirrors Vega's built-in rules: say nothing until the user has engaged with
+     * the field, so a freshly rendered step is not pre-littered with errors.
+     */
+    shouldShowError(status) {
+        return status ? !status.disabled && status.visible && (status.touched || status.modified) : true;
+    }
+}
+/**
+ * Requires a field to equal another field's current value.
+ *
+ * Used for the "confirm new password" pairing, which no single-field rule can
+ * express: the answer depends on a sibling that may change after this field was
+ * last touched.
+ */
+export class MatchesFieldRule extends NonEmptyStringRule {
+    constructor(expected, message) {
+        super();
+        this.expected = expected;
+        this.message = message;
+    }
+    evaluate(input) {
+        const isValid = input === this.expected();
+        return { isValid, message: isValid ? '' : this.message() };
+    }
+}
+/**
+ * Requires every character of a passcode to be present.
+ *
+ * `required` alone is not enough here. It only asks whether the value is
+ * non-empty, so a half-typed code — three boxes of six — satisfies it and
+ * reaches the provider, which then has to answer a question the pattern could
+ * have answered without a round trip.
+ */
+export class CompleteCodeRule extends NonEmptyStringRule {
+    constructor(length, message) {
+        super();
+        this.length = length;
+        this.message = message;
+    }
+    evaluate(input) {
+        const expected = this.length();
+        const isValid = input.length >= expected;
+        return { isValid, message: isValid ? '' : this.message(expected) };
+    }
+}

package/dist/collection/components/uds-pattern-login-card/view-model/login-card-handlers.js

@@ -0,0 +1 @@
+export {};