@unidy.io/sdk 1.1.8 → 1.1.9

package/dist/collection/auth/components/magic-code-field/magic-code-field.js

@@ -0,0 +1,113 @@
+import { h } from "@stencil/core";
+import { authState } from "../../store/auth-store";
+import { Auth } from "../../auth";
+export class MagicCodeField {
+    componentClassName = "";
+    codeDigits = ["", "", "", ""];
+    inputRefs = [];
+    handleInput = (event, index) => {
+        const target = event.target;
+        const value = target.value.replace(/[^0-9]/g, "");
+        const sanitizedDigit = value.slice(-1);
+        target.value = sanitizedDigit;
+        const newDigits = [...this.codeDigits];
+        newDigits[index] = sanitizedDigit;
+        this.codeDigits = newDigits;
+        const fullCode = newDigits.join("");
+        if (value && index < 3) {
+            const nextInput = this.inputRefs[index + 1];
+            if (nextInput) {
+                nextInput.focus();
+            }
+        }
+        if (fullCode.length === 4) {
+            this.authenticateWithCode(fullCode);
+        }
+    };
+    handleKeyDown = (event, index) => {
+        if (event.key === "Backspace" && !this.codeDigits[index] && index > 0) {
+            const prevInput = this.inputRefs[index - 1];
+            if (prevInput) {
+                prevInput.focus();
+            }
+        }
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const pastedData = event.clipboardData?.getData("text") || "";
+        const digits = pastedData
+            .replace(/[^0-9]/g, "")
+            .slice(0, 4)
+            .split("");
+        while (digits.length < 4) {
+            digits.push("");
+        }
+        this.codeDigits = digits;
+        const firstEmptyIndex = digits.findIndex((digit) => !digit);
+        const targetIndex = firstEmptyIndex !== -1 ? firstEmptyIndex : 3;
+        if (this.inputRefs[targetIndex]) {
+            this.inputRefs[targetIndex].focus();
+        }
+        const fullCode = digits.join("");
+        if (fullCode.length === 4) {
+            this.authenticateWithCode(fullCode);
+        }
+    };
+    authenticateWithCode = async (code) => {
+        const authInstance = await Auth.getInstance();
+        await authInstance.helpers.authenticateWithMagicCode(code);
+    };
+    render() {
+        if (authState.step !== "magic-code") {
+            return null;
+        }
+        return (h("div", { class: `u:flex u:gap-0.5 u:w-full u:justify-center ${this.componentClassName}` }, this.codeDigits.map((digit, index) => (h("input", {
+            // biome-ignore lint/suspicious/noArrayIndexKey: digits are fixed position inputs
+            key: index, ref: (el) => {
+                if (el)
+                    this.inputRefs[index] = el;
+            }, id: `digit-input-${index + 1}`, type: "text", inputmode: "numeric", maxlength: "1", value: digit, disabled: authState.loading, onInput: (event) => this.handleInput(event, index), onKeyDown: (event) => this.handleKeyDown(event, index), onPaste: index === 0 ? this.handlePaste : undefined, "aria-label": `Digit ${index + 1} of ${this.codeDigits.length}`, class: "u:w-[50px] u:h-[50px] u:text-center u:text-lg u:border-2 u:border-solid u:border-slate-200 u:rounded-lg u:outline-none u:transition-colors u:duration-200", part: "digit-input"
+        })))));
+    }
+    static get is() { return "u-magic-code-field"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["magic-code-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["magic-code-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class-name",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "codeDigits": {}
+        };
+    }
+}
+//# sourceMappingURL=magic-code-field.js.map

package/dist/collection/auth/components/magic-code-field/magic-code-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"magic-code-field.js","sourceRoot":"","sources":["../../../../src/auth/components/magic-code-field/magic-code-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from \"@stencil/core\";\nimport { authState } from \"../../store/auth-store\";\nimport { Auth } from \"../../auth\";\n\n@Component({\n  tag: \"u-magic-code-field\",\n  styleUrl: \"magic-code-field.css\",\n  shadow: false,\n})\nexport class MagicCodeField {\n  @Prop({ attribute: \"class-name\" }) componentClassName = \"\";\n\n  @State() codeDigits: string[] = [\"\", \"\", \"\", \"\"];\n\n  private inputRefs: HTMLInputElement[] = [];\n\n  private handleInput = (event: Event, index: number) => {\n    const target = event.target as HTMLInputElement;\n    const value = target.value.replace(/[^0-9]/g, \"\");\n    const sanitizedDigit = value.slice(-1);\n    target.value = sanitizedDigit;\n\n    const newDigits = [...this.codeDigits];\n    newDigits[index] = sanitizedDigit;\n    this.codeDigits = newDigits;\n\n    const fullCode = newDigits.join(\"\");\n\n    if (value && index < 3) {\n      const nextInput = this.inputRefs[index + 1];\n      if (nextInput) {\n        nextInput.focus();\n      }\n    }\n\n    if (fullCode.length === 4) {\n      this.authenticateWithCode(fullCode);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent, index: number) => {\n    if (event.key === \"Backspace\" && !this.codeDigits[index] && index > 0) {\n      const prevInput = this.inputRefs[index - 1];\n      if (prevInput) {\n        prevInput.focus();\n      }\n    }\n  };\n\n  private handlePaste = (event: ClipboardEvent) => {\n    event.preventDefault();\n    const pastedData = event.clipboardData?.getData(\"text\") || \"\";\n    const digits = pastedData\n      .replace(/[^0-9]/g, \"\")\n      .slice(0, 4)\n      .split(\"\");\n\n    while (digits.length < 4) {\n      digits.push(\"\");\n    }\n\n    this.codeDigits = digits;\n\n    const firstEmptyIndex = digits.findIndex((digit) => !digit);\n    const targetIndex = firstEmptyIndex !== -1 ? firstEmptyIndex : 3;\n    if (this.inputRefs[targetIndex]) {\n      this.inputRefs[targetIndex].focus();\n    }\n\n    const fullCode = digits.join(\"\");\n    if (fullCode.length === 4) {\n      this.authenticateWithCode(fullCode);\n    }\n  };\n\n  private authenticateWithCode = async (code: string) => {\n    const authInstance = await Auth.getInstance();\n\n    await authInstance.helpers.authenticateWithMagicCode(code);\n  };\n  render() {\n    if (authState.step !== \"magic-code\") {\n      return null;\n    }\n\n    return (\n      <div class={`u:flex u:gap-0.5 u:w-full u:justify-center ${this.componentClassName}`}>\n        {this.codeDigits.map((digit, index) => (\n          <input\n            // biome-ignore lint/suspicious/noArrayIndexKey: digits are fixed position inputs\n            key={index}\n            ref={(el) => {\n              if (el) this.inputRefs[index] = el;\n            }}\n            id={`digit-input-${index + 1}`}\n            type=\"text\"\n            inputmode=\"numeric\"\n            maxlength=\"1\"\n            value={digit}\n            disabled={authState.loading}\n            onInput={(event) => this.handleInput(event, index)}\n            onKeyDown={(event) => this.handleKeyDown(event, index)}\n            onPaste={index === 0 ? this.handlePaste : undefined}\n            aria-label={`Digit ${index + 1} of ${this.codeDigits.length}`}\n            class=\"u:w-[50px] u:h-[50px] u:text-center u:text-lg u:border-2 u:border-solid u:border-slate-200 u:rounded-lg u:outline-none u:transition-colors u:duration-200\"\n            part=\"digit-input\"\n          />\n        ))}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/auth/components/missing-field/missing-field.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+import { authState, missingFieldNames } from "../../store/auth-store";
+export class MissingField {
+    el;
+    render() {
+        if (authState.step !== "missing-fields")
+            return null;
+        const fieldNames = missingFieldNames();
+        return (h("div", { class: "missing-fields" }, h("form", null, fieldNames.map((fieldName) => (h("u-field", { key: fieldName, field: fieldName, renderDefaultLabel: true }))))));
+    }
+    static get is() { return "u-missing-field"; }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=missing-field.js.map

package/dist/collection/auth/components/missing-field/missing-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"missing-field.js","sourceRoot":"","sources":["../../../../src/auth/components/missing-field/missing-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAMtE,MAAM,OAAO,YAAY;IACZ,EAAE,CAAe;IAE5B,MAAM;QACJ,IAAI,SAAS,CAAC,IAAI,KAAK,gBAAgB;YAAE,OAAO,IAAI,CAAC;QAErD,MAAM,UAAU,GAAG,iBAAiB,EAAE,CAAC;QAEvC,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;YACzB,gBACG,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAC7B,eAAS,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,GAAI,CACxE,CAAC,CACG,CACH,CACP,CAAC;IACJ,CAAC;;;CACF","sourcesContent":["import { Component, h, Element } from \"@stencil/core\";\nimport { authState, missingFieldNames } from \"../../store/auth-store\";\n\n@Component({\n  tag: \"u-missing-field\",\n  shadow: false,\n})\nexport class MissingField {\n  @Element() el!: HTMLElement;\n\n  render() {\n    if (authState.step !== \"missing-fields\") return null;\n\n    const fieldNames = missingFieldNames();\n\n    return (\n      <div class=\"missing-fields\">\n        <form>\n          {fieldNames.map((fieldName) => (\n            <u-field key={fieldName} field={fieldName} renderDefaultLabel={true} />\n          ))}\n        </form>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/auth/components/missing-fields-submit-button/missing-fields-submit-button.js

@@ -0,0 +1,39 @@
+import { h } from "@stencil/core";
+import { getUnidyClient } from "../../../api";
+import { state as profileState } from "../../../profile/store/profile-store";
+import { authState, authStore } from "../../store/auth-store";
+import { validateRequiredFieldsUnchanged, buildPayload } from "../../../profile/profile-helpers";
+import { hasSlotContent } from "../../../shared/component-utils";
+import { t } from "../../../i18n";
+export class MissingFieldsSubmitButton {
+    el;
+    async onSubmit() {
+        profileState.loading = true;
+        const { configuration, ...stateWithoutConfig } = profileState;
+        if (!validateRequiredFieldsUnchanged(stateWithoutConfig.data)) {
+            profileState.loading = false;
+            return;
+        }
+        const updatedProfileData = buildPayload(stateWithoutConfig.data);
+        const sid = authState.sid;
+        const [error, response] = await getUnidyClient().auth.updateMissingFields(sid, updatedProfileData);
+        if (error) {
+            profileState.loading = false;
+            return;
+        }
+        const { jwt } = response;
+        profileState.loading = false;
+        authStore.setToken(jwt);
+        // Emit authEvent to allow modal-based logins to close after successful submission
+        this.el.dispatchEvent(new CustomEvent("authEvent", { detail: { jwt }, bubbles: true, composed: true }));
+    }
+    render() {
+        if (authState.step !== "missing-fields")
+            return null;
+        return (h("div", null, h("button", { type: "button", onClick: () => this.onSubmit(), part: "button", disabled: (profileState.errors && Object.keys(profileState.errors).length > 0) || profileState.phoneValid === false, "aria-live": "polite" }, profileState.loading ? h("u-spinner", null) : hasSlotContent(this.el) ? h("slot", null) : t("buttons.submit"))));
+    }
+    static get is() { return "u-missing-fields-submit-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=missing-fields-submit-button.js.map

package/dist/collection/auth/components/missing-fields-submit-button/missing-fields-submit-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"missing-fields-submit-button.js","sourceRoot":"","sources":["../../../../src/auth/components/missing-fields-submit-button/missing-fields-submit-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,+BAA+B,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEjG,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMlC,MAAM,OAAO,yBAAyB;IACzB,EAAE,CAAe;IAEpB,KAAK,CAAC,QAAQ;QACpB,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAE5B,MAAM,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAE,GAAG,YAAY,CAAC;QAE9D,IAAI,CAAC,+BAA+B,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9D,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,MAAM,kBAAkB,GAAG,YAAY,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACjE,MAAM,GAAG,GAAG,SAAS,CAAC,GAAa,CAAC;QAEpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,MAAM,cAAc,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;QAEnG,IAAI,KAAK,EAAE,CAAC;YACV,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,EAAE,GAAG,QAAyB,CAAC;QAC1C,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAExB,kFAAkF;QAClF,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC1G,CAAC;IAED,MAAM;QACJ,IAAI,SAAS,CAAC,IAAI,KAAK,gBAAgB;YAAE,OAAO,IAAI,CAAC;QAErD,OAAO,CACL;YACE,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC9B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,YAAY,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,YAAY,CAAC,UAAU,KAAK,KAAK,eACzG,QAAQ,IAEjB,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAa,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CACzF,CACL,CACP,CAAC;IACJ,CAAC;;;;CACF","sourcesContent":["import { Component, Element, h } from \"@stencil/core\";\nimport { getUnidyClient } from \"../../../api\";\nimport { state as profileState } from \"../../../profile/store/profile-store\";\nimport { authState, authStore } from \"../../store/auth-store\";\nimport { validateRequiredFieldsUnchanged, buildPayload } from \"../../../profile/profile-helpers\";\nimport type { TokenResponse } from \"../../api/auth\";\nimport { hasSlotContent } from \"../../../shared/component-utils\";\nimport { t } from \"../../../i18n\";\n\n@Component({\n  tag: \"u-missing-fields-submit-button\",\n  shadow: true,\n})\nexport class MissingFieldsSubmitButton {\n  @Element() el!: HTMLElement;\n\n  private async onSubmit() {\n    profileState.loading = true;\n\n    const { configuration, ...stateWithoutConfig } = profileState;\n\n    if (!validateRequiredFieldsUnchanged(stateWithoutConfig.data)) {\n      profileState.loading = false;\n      return;\n    }\n\n    const updatedProfileData = buildPayload(stateWithoutConfig.data);\n    const sid = authState.sid as string;\n\n    const [error, response] = await getUnidyClient().auth.updateMissingFields(sid, updatedProfileData);\n\n    if (error) {\n      profileState.loading = false;\n      return;\n    }\n\n    const { jwt } = response as TokenResponse;\n    profileState.loading = false;\n    authStore.setToken(jwt);\n\n    // Emit authEvent to allow modal-based logins to close after successful submission\n    this.el.dispatchEvent(new CustomEvent(\"authEvent\", { detail: { jwt }, bubbles: true, composed: true }));\n  }\n\n  render() {\n    if (authState.step !== \"missing-fields\") return null;\n\n    return (\n      <div>\n        <button\n          type=\"button\"\n          onClick={() => this.onSubmit()}\n          part=\"button\"\n          disabled={(profileState.errors && Object.keys(profileState.errors).length > 0) || profileState.phoneValid === false}\n          aria-live=\"polite\"\n        >\n          {profileState.loading ? <u-spinner /> : hasSlotContent(this.el) ? <slot /> : t(\"buttons.submit\")}\n        </button>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/auth/components/passkey/passkey.js

@@ -0,0 +1,103 @@
+import { h, Host } from "@stencil/core";
+import { t } from "../../../i18n";
+import { authState } from "../../store/auth-store";
+import { Auth } from "../../auth";
+export class Passkey {
+    disabled = false;
+    componentClassName = "";
+    ariaDescribedBy = "";
+    isSupported = false;
+    componentWillLoad() {
+        // Check if WebAuthn is supported
+        this.isSupported = typeof window !== "undefined" && !!window.PublicKeyCredential;
+    }
+    handleClick = async () => {
+        if (this.disabled || authState.loading || !this.isSupported)
+            return;
+        const authInstance = await Auth.getInstance();
+        await authInstance.helpers.authenticateWithPasskey();
+    };
+    render() {
+        if (!authState.availableLoginOptions?.passkey) {
+            return null;
+        }
+        if (!this.isSupported) {
+            return null;
+        }
+        const isDisabled = this.disabled || authState.loading;
+        const text = t("auth.passkey.button_text", { defaultValue: "Sign in with Passkey" });
+        const loadingText = t("auth.passkey.loading_text", { defaultValue: "Authenticating..." });
+        return (h(Host, null, h("button", { type: "button", disabled: isDisabled, onClick: this.handleClick, class: this.componentClassName, "aria-live": "polite", "aria-describedby": this.ariaDescribedBy || undefined }, authState.loading ? loadingText : text)));
+    }
+    static get is() { return "u-passkey"; }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "componentClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class-name",
+                "defaultValue": "\"\""
+            },
+            "ariaDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-described-by",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isSupported": {}
+        };
+    }
+}
+//# sourceMappingURL=passkey.js.map

package/dist/collection/auth/components/passkey/passkey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"passkey.js","sourceRoot":"","sources":["../../../../src/auth/components/passkey/passkey.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAMlC,MAAM,OAAO,OAAO;IACV,QAAQ,GAAG,KAAK,CAAC;IACU,kBAAkB,GAAG,EAAE,CAAC;IACnD,eAAe,GAAI,EAAE,CAAC;IAErB,WAAW,GAAG,KAAK,CAAC;IAE7B,iBAAiB;QACf,iCAAiC;QACjC,IAAI,CAAC,WAAW,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC;IACnF,CAAC;IAEO,WAAW,GAAG,KAAK,IAAI,EAAE;QAC/B,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAEpE,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QAE9C,MAAM,YAAY,CAAC,OAAO,CAAC,uBAAuB,EAAE,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE,OAAO,EAAE,CAAC;YAC9C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,OAAO,CAAC;QACtD,MAAM,IAAI,GAAG,CAAC,CAAC,0BAA0B,EAAE,EAAE,YAAY,EAAE,sBAAsB,EAAE,CAAC,CAAC;QACrF,MAAM,WAAW,GAAG,CAAC,CAAC,2BAA2B,EAAE,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC,CAAC;QAE1F,OAAO,CACL,EAAC,IAAI;YACH,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE,IAAI,CAAC,kBAAkB,eACpB,QAAQ,sBACA,IAAI,CAAC,eAAe,IAAI,SAAS,IAElD,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAChC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Host } from \"@stencil/core\";\nimport { t } from \"../../../i18n\";\nimport { authState } from \"../../store/auth-store\";\nimport { Auth } from \"../../auth\";\n\n@Component({\n  tag: \"u-passkey\",\n  shadow: false,\n})\nexport class Passkey {\n  @Prop() disabled = false;\n  @Prop({ attribute: \"class-name\" }) componentClassName = \"\";\n  @Prop() ariaDescribedBy? = \"\";\n\n  @State() isSupported = false;\n\n  componentWillLoad() {\n    // Check if WebAuthn is supported\n    this.isSupported = typeof window !== \"undefined\" && !!window.PublicKeyCredential;\n  }\n\n  private handleClick = async () => {\n    if (this.disabled || authState.loading || !this.isSupported) return;\n\n    const authInstance = await Auth.getInstance();\n\n    await authInstance.helpers.authenticateWithPasskey();\n  };\n\n  render() {\n    if (!authState.availableLoginOptions?.passkey) {\n      return null;\n    }\n\n    if (!this.isSupported) {\n      return null;\n    }\n\n    const isDisabled = this.disabled || authState.loading;\n    const text = t(\"auth.passkey.button_text\", { defaultValue: \"Sign in with Passkey\" });\n    const loadingText = t(\"auth.passkey.loading_text\", { defaultValue: \"Authenticating...\" });\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          disabled={isDisabled}\n          onClick={this.handleClick}\n          class={this.componentClassName}\n          aria-live=\"polite\"\n          aria-describedby={this.ariaDescribedBy || undefined}\n        >\n          {authState.loading ? loadingText : text}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/auth/components/password-field/password-field.js

@@ -0,0 +1,168 @@
+import { h } from "@stencil/core";
+import { t } from "../../../i18n";
+import { authState, authStore } from "../../store/auth-store";
+import { getParentSigninStep } from "../helpers";
+export class PasswordField {
+    el;
+    for = "login";
+    componentClassName = "";
+    ariaLabel = "";
+    getAriaLabel() {
+        if (this.ariaLabel)
+            return this.ariaLabel;
+        switch (this.for) {
+            case "login":
+                return "Password";
+            case "new-password":
+                return "New Password";
+            case "password-confirmation":
+                return "Password Confirmation";
+        }
+    }
+    getValue() {
+        switch (this.for) {
+            case "login":
+                return authState.password;
+            case "new-password":
+                return authState.resetPassword.newPassword;
+            case "password-confirmation":
+                return authState.resetPassword.passwordConfirmation;
+        }
+    }
+    getAutocomplete() {
+        switch (this.for) {
+            case "login":
+                return "current-password";
+            case "new-password":
+            case "password-confirmation":
+                return "new-password";
+        }
+    }
+    getInputName() {
+        switch (this.for) {
+            case "login":
+                return "password";
+            case "new-password":
+                return "new-password";
+            case "password-confirmation":
+                return "confirm-password";
+        }
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        switch (this.for) {
+            case "login":
+                authStore.setPassword(target.value);
+                break;
+            case "new-password":
+                authStore.setNewPassword(target.value);
+                authStore.clearFieldError("resetPassword");
+                authStore.clearFieldError("password");
+                break;
+            case "password-confirmation":
+                authStore.setConfirmPassword(target.value);
+                authStore.clearFieldError("resetPassword");
+                authStore.clearFieldError("password");
+                break;
+        }
+    };
+    handleSubmit = async (event) => {
+        event.preventDefault();
+        (await getParentSigninStep(this.el))?.submit();
+    };
+    shouldRender() {
+        switch (this.for) {
+            case "login":
+                if (authState.step === "single-login")
+                    return true;
+                if (authState.step === "verification" && authState.availableLoginOptions?.password) {
+                    return true;
+                }
+                return false;
+            case "new-password":
+            case "password-confirmation":
+                return authState.step === "reset-password";
+        }
+    }
+    render() {
+        if (!this.shouldRender()) {
+            return null;
+        }
+        const key = this.for === "password-confirmation" ? "auth.password.confirmation.placeholder" : "auth.password.placeholder";
+        const placeholder = t(key, { defaultValue: "Enter your password" });
+        return (h("form", { onSubmit: this.handleSubmit }, h("input", { name: this.getInputName(), type: "password", value: this.getValue(), autocomplete: this.getAutocomplete(), placeholder: placeholder, disabled: authState.loading, class: this.componentClassName, onInput: this.handleInput, "aria-label": this.getAriaLabel() })));
+    }
+    static get is() { return "u-password-field"; }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PasswordFieldFor",
+                    "resolved": "\"login\" | \"new-password\" | \"password-confirmation\"",
+                    "references": {
+                        "PasswordFieldFor": {
+                            "location": "local",
+                            "path": "/Users/fran/work/unidy-sdk/packages/sdk/src/auth/components/password-field/password-field.tsx",
+                            "id": "src/auth/components/password-field/password-field.tsx::PasswordFieldFor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for",
+                "defaultValue": "\"login\""
+            },
+            "componentClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class-name",
+                "defaultValue": "\"\""
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=password-field.js.map

package/dist/collection/auth/components/password-field/password-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.js","sourceRoot":"","sources":["../../../../src/auth/components/password-field/password-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\nimport { t } from \"../../../i18n\";\nimport { authState, authStore } from \"../../store/auth-store\";\nimport { getParentSigninStep } from \"../helpers\";\n\nexport type PasswordFieldFor = \"login\" | \"new-password\" | \"password-confirmation\";\n\n@Component({\n  tag: \"u-password-field\",\n  shadow: false,\n})\nexport class PasswordField {\n  @Element() el!: HTMLElement;\n\n  @Prop() for: PasswordFieldFor = \"login\";\n  @Prop({ attribute: \"class-name\" }) componentClassName = \"\";\n  @Prop() ariaLabel = \"\";\n\n  private getAriaLabel(): string {\n    if (this.ariaLabel) return this.ariaLabel;\n\n    switch (this.for) {\n      case \"login\":\n        return \"Password\";\n      case \"new-password\":\n        return \"New Password\";\n      case \"password-confirmation\":\n        return \"Password Confirmation\";\n    }\n  }\n\n  private getValue(): string {\n    switch (this.for) {\n      case \"login\":\n        return authState.password;\n      case \"new-password\":\n        return authState.resetPassword.newPassword;\n      case \"password-confirmation\":\n        return authState.resetPassword.passwordConfirmation;\n    }\n  }\n\n  private getAutocomplete(): string {\n    switch (this.for) {\n      case \"login\":\n        return \"current-password\";\n      case \"new-password\":\n      case \"password-confirmation\":\n        return \"new-password\";\n    }\n  }\n\n  private getInputName(): string {\n    switch (this.for) {\n      case \"login\":\n        return \"password\";\n      case \"new-password\":\n        return \"new-password\";\n      case \"password-confirmation\":\n        return \"confirm-password\";\n    }\n  }\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n\n    switch (this.for) {\n      case \"login\":\n        authStore.setPassword(target.value);\n        break;\n      case \"new-password\":\n        authStore.setNewPassword(target.value);\n        authStore.clearFieldError(\"resetPassword\");\n        authStore.clearFieldError(\"password\");\n        break;\n      case \"password-confirmation\":\n        authStore.setConfirmPassword(target.value);\n        authStore.clearFieldError(\"resetPassword\");\n        authStore.clearFieldError(\"password\");\n        break;\n    }\n  };\n\n  private handleSubmit = async (event: Event) => {\n    event.preventDefault();\n\n    (await getParentSigninStep(this.el))?.submit();\n  };\n\n  private shouldRender(): boolean {\n    switch (this.for) {\n      case \"login\":\n        if (authState.step === \"single-login\") return true;\n        if (authState.step === \"verification\" && authState.availableLoginOptions?.password) {\n          return true;\n        }\n        return false;\n      case \"new-password\":\n      case \"password-confirmation\":\n        return authState.step === \"reset-password\";\n    }\n  }\n\n  render() {\n    if (!this.shouldRender()) {\n      return null;\n    }\n\n    const key = this.for === \"password-confirmation\" ? \"auth.password.confirmation.placeholder\" : \"auth.password.placeholder\";\n    const placeholder = t(key, { defaultValue: \"Enter your password\" });\n\n    return (\n      <form onSubmit={this.handleSubmit}>\n        <input\n          name={this.getInputName()}\n          type=\"password\"\n          value={this.getValue()}\n          autocomplete={this.getAutocomplete()}\n          placeholder={placeholder}\n          disabled={authState.loading}\n          class={this.componentClassName}\n          onInput={this.handleInput}\n          aria-label={this.getAriaLabel()}\n        />\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/auth/components/registration/registration-button.js

@@ -0,0 +1,104 @@
+import { Host, h } from "@stencil/core";
+import { authState, authStore } from "../../store/auth-store";
+import { unidyState } from "../../../shared/store/unidy-store";
+import { t } from "../../../i18n";
+export class RegistrationButton {
+    el;
+    for;
+    componentClassName = "";
+    redirectUri = window.location.href;
+    getButtonText() {
+        return t("buttons.registration", { defaultValue: "Register New Account" });
+    }
+    shouldRender() {
+        if (authState.errors.email === "account_not_found") {
+            authStore.setStep("registration");
+            return this.for === "email";
+        }
+        return false;
+    }
+    getAuthUrl() {
+        const baseUrl = unidyState.baseUrl;
+        const redirectUri = this.redirectUri ? encodeURIComponent(this.redirectUri) : baseUrl;
+        const encodedEmail = encodeURIComponent(authState.email);
+        return `${baseUrl}/logins?email=${encodedEmail}&sdk_redirect_uri=${redirectUri}`;
+    }
+    handleClick = async (event) => {
+        event.preventDefault();
+        if (authState.errors.email === "account_not_found" && authState.step === "registration") {
+            window.location.href = this.getAuthUrl();
+        }
+    };
+    render() {
+        if (!this.shouldRender()) {
+            return null;
+        }
+        return (h(Host, null, h("slot", { name: "registration-content" }), h("button", { type: "submit", class: this.componentClassName, onClick: this.handleClick, "aria-live": "polite" }, this.getButtonText())));
+    }
+    static get is() { return "u-registration-button"; }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"email\"",
+                    "resolved": "\"email\"",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for"
+            },
+            "componentClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class-name",
+                "defaultValue": "\"\""
+            },
+            "redirectUri": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "redirect-uri",
+                "defaultValue": "window.location.href"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=registration-button.js.map

package/dist/collection/auth/components/registration/registration-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registration-button.js","sourceRoot":"","sources":["../../../../src/auth/components/registration/registration-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMlC,MAAM,OAAO,kBAAkB;IAClB,EAAE,CAAe;IAEpB,GAAG,CAAW;IACa,kBAAkB,GAAG,EAAE,CAAC;IACnD,WAAW,GAAW,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;IAE3C,aAAa;QACnB,OAAO,CAAC,CAAC,sBAAsB,EAAE,EAAE,YAAY,EAAE,sBAAsB,EAAE,CAAC,CAAC;IAC7E,CAAC;IAEO,YAAY;QAClB,IAAI,SAAS,CAAC,MAAM,CAAC,KAAK,KAAK,mBAAmB,EAAE,CAAC;YACnD,SAAS,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAClC,OAAO,IAAI,CAAC,GAAG,KAAK,OAAO,CAAC;QAC9B,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,UAAU;QAChB,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QACtF,MAAM,YAAY,GAAG,kBAAkB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAEzD,OAAO,GAAG,OAAO,iBAAiB,YAAY,qBAAqB,WAAW,EAAE,CAAC;IACnF,CAAC;IAEO,WAAW,GAAG,KAAK,EAAE,KAAY,EAAE,EAAE;QAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,SAAS,CAAC,MAAM,CAAC,KAAK,KAAK,mBAAmB,IAAI,SAAS,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;YACxF,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC3C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,YAAM,IAAI,EAAC,sBAAsB,GAAG;YACpC,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,eAAY,QAAQ,IAChG,IAAI,CAAC,aAAa,EAAE,CACd,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from \"@stencil/core\";\nimport { authState, authStore } from \"../../store/auth-store\";\nimport { unidyState } from \"../../../shared/store/unidy-store\";\nimport { t } from \"../../../i18n\";\n\n@Component({\n  tag: \"u-registration-button\",\n  shadow: false,\n})\nexport class RegistrationButton {\n  @Element() el!: HTMLElement;\n\n  @Prop() for!: \"email\";\n  @Prop({ attribute: \"class-name\" }) componentClassName = \"\";\n  @Prop() redirectUri: string = window.location.href;\n\n  private getButtonText() {\n    return t(\"buttons.registration\", { defaultValue: \"Register New Account\" });\n  }\n\n  private shouldRender(): boolean {\n    if (authState.errors.email === \"account_not_found\") {\n      authStore.setStep(\"registration\");\n      return this.for === \"email\";\n    }\n\n    return false;\n  }\n\n  private getAuthUrl(): string {\n    const baseUrl = unidyState.baseUrl;\n    const redirectUri = this.redirectUri ? encodeURIComponent(this.redirectUri) : baseUrl;\n    const encodedEmail = encodeURIComponent(authState.email);\n\n    return `${baseUrl}/logins?email=${encodedEmail}&sdk_redirect_uri=${redirectUri}`;\n  }\n\n  private handleClick = async (event: Event) => {\n    event.preventDefault();\n\n    if (authState.errors.email === \"account_not_found\" && authState.step === \"registration\") {\n      window.location.href = this.getAuthUrl();\n    }\n  };\n\n  render() {\n    if (!this.shouldRender()) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <slot name=\"registration-content\" />\n        <button type=\"submit\" class={this.componentClassName} onClick={this.handleClick} aria-live=\"polite\">\n          {this.getButtonText()}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}