@coras-io/embed 0.1.0

package/dist/components/crypto-auth-modal/crypto-auth-modal.component.js

@@ -0,0 +1,570 @@
+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 { html, LitElement, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import styles from "./crypto-auth-modal.styles.js";
+import "../button/button.js";
+import "../dialog/dialog.js";
+import "../icon/icon.js";
+import "../otp/otp.js";
+import "../checkbox/checkbox.js";
+import "../input-field/input-field.js";
+import "../phone-field/phone-field.js";
+import { fireInternalEvent } from "../../core/events.js";
+/**
+ * A modal component for FIDA (crypto) 2-factor authentication.
+ * Handles email OTP login and SMS MFA enrollment.
+ *
+ * This is a pure view component — all business logic is handled by the parent.
+ * Events listed below are internal and do not cross the host shadow boundary.
+ *
+ * @fires email-changed - When user types in the email field
+ * @fires marketing-changed - When user toggles marketing checkbox
+ * @fires send-code - When user clicks Send Code (email OTP)
+ * @fires verify-code - When user completes email OTP entry
+ * @fires resend-email-code - When user clicks Resend Code (email OTP)
+ * @fires initiate-mfa-enrollment - When user clicks Send Code (SMS MFA)
+ * @fires verify-mfa-enrollment - When user completes SMS MFA OTP entry
+ * @fires resend-mfa-code - When user clicks Resend Code (SMS MFA)
+ * @fires show-phone-input - When user clicks "Change phone number"
+ * @fires back-to-email-input - When user clicks back from email OTP step
+ * @fires auth-cancelled - When user closes the modal
+ */
+let CorasCryptoAuthModal = class CorasCryptoAuthModal extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the modal is open */
+        this.open = false;
+        /** Email address for FIDA login */
+        this.email = "";
+        /** Email validation error */
+        this.emailError = "";
+        /** Whether marketing checkbox is checked */
+        this.marketing = false;
+        /** Whether an email OTP code has been sent */
+        this.codeSent = false;
+        /** Whether user is logged in (has a coinbase session) */
+        this.isLoggedIn = false;
+        /** Whether MFA is already enrolled */
+        this.isMfaEnrolled = false;
+        /** Whether MFA enrollment SMS code has been sent */
+        this.mfaEnrollmentCodeSent = false;
+        /** Email OTP error */
+        this.otpError = "";
+        /** MFA OTP error */
+        this.mfaError = "";
+        /** MFA enrollment error (general) */
+        this.mfaEnrollmentError = "";
+        /** Whether to show resend button for email OTP */
+        this.showResend = false;
+        /** Rate limit error message */
+        this.rateLimitError = "";
+        /** SMS rate limit error message */
+        this.smsRateLimitError = "";
+        /** Phone number from contact form (for MFA enrollment) */
+        this.formPhone = "";
+        /** Masked phone for display in SMS prompt */
+        this.maskedPhone = "";
+        /** Phone number validation error */
+        this.phoneNumberError = "";
+        /** Assets URL for icons */
+        this.assetsURL = "";
+        /** Whether a button action is loading */
+        this.loading = false;
+        /** Whether to show phone input instead of using form phone */
+        this.showPhoneInput = false;
+        /** Countries list for phone code selector */
+        this.countries = [];
+        /** Selected phone code */
+        this.selectedPhoneCode = null;
+        /** Local phone number for MFA enrollment */
+        this.localPhoneNumber = "";
+        this._emailOtpCode = "";
+        this._mfaOtpCode = "";
+        this._emailResendCountdown = 0;
+        this._emailResendTimerId = null;
+        this._mfaResendCountdown = 0;
+        this._mfaResendTimerId = null;
+    }
+    static { this.styles = styles; }
+    /**
+     * Compute the current step based on external state properties.
+     */
+    get currentStep() {
+        if (this.isLoggedIn && this.mfaEnrollmentCodeSent) {
+            return "mfa-sms-otp";
+        }
+        if (this.isLoggedIn && !this.isMfaEnrolled) {
+            return "mfa-sms-prompt";
+        }
+        if (this.codeSent) {
+            return "email-otp";
+        }
+        return "email-input";
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._clearEmailResendTimer();
+        this._clearMfaResendTimer();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("codeSent") && this.codeSent) {
+            this._emailOtpCode = "";
+            // Deferred: Lit prohibits synchronous re-entrant property updates inside updated()
+            setTimeout(() => this._startEmailResendTimer(), 0);
+        }
+        if (changedProperties.has("mfaEnrollmentCodeSent") &&
+            this.mfaEnrollmentCodeSent) {
+            this._mfaOtpCode = "";
+            setTimeout(() => this._startMfaResendTimer(), 0);
+        }
+    }
+    _startEmailResendTimer() {
+        this._clearEmailResendTimer();
+        this._emailResendCountdown = 60;
+        this._emailResendTimerId = setInterval(() => {
+            this._emailResendCountdown--;
+            if (this._emailResendCountdown <= 0) {
+                this._clearEmailResendTimer();
+            }
+        }, 1000);
+    }
+    _clearEmailResendTimer() {
+        if (this._emailResendTimerId !== null) {
+            clearInterval(this._emailResendTimerId);
+            this._emailResendTimerId = null;
+        }
+        this._emailResendCountdown = 0;
+    }
+    _startMfaResendTimer() {
+        this._clearMfaResendTimer();
+        this._mfaResendCountdown = 60;
+        this._mfaResendTimerId = setInterval(() => {
+            this._mfaResendCountdown--;
+            if (this._mfaResendCountdown <= 0) {
+                this._clearMfaResendTimer();
+            }
+        }, 1000);
+    }
+    _clearMfaResendTimer() {
+        if (this._mfaResendTimerId !== null) {
+            clearInterval(this._mfaResendTimerId);
+            this._mfaResendTimerId = null;
+        }
+        this._mfaResendCountdown = 0;
+    }
+    handleDialogClosed() {
+        this._emailOtpCode = "";
+        this._mfaOtpCode = "";
+        this._clearEmailResendTimer();
+        this._clearMfaResendTimer();
+        fireInternalEvent(this, "auth-cancelled", {});
+    }
+    handleDialogBack() {
+        if (this.currentStep === "email-otp") {
+            this.handleBackToEmailInput();
+        }
+        else if (this.currentStep === "mfa-sms-otp") {
+            this.handleBackToSmsPrompt();
+        }
+    }
+    handleBackToEmailInput() {
+        this._emailOtpCode = "";
+        this._clearEmailResendTimer();
+        fireInternalEvent(this, "back-to-email-input", {});
+    }
+    handleEmailChange(e) {
+        e.stopPropagation();
+        fireInternalEvent(this, "email-changed", { value: e.detail.value });
+    }
+    handleMarketingChange(e) {
+        e.stopPropagation();
+        fireInternalEvent(this, "marketing-changed", { value: e.detail.value });
+    }
+    handleSendCode() {
+        fireInternalEvent(this, "send-code", {});
+    }
+    handleEmailOtpComplete(e) {
+        this._emailOtpCode = (e.detail && (e.detail.code || e.detail.value)) ?? "";
+        fireInternalEvent(this, "verify-code", { code: this._emailOtpCode });
+    }
+    handleManualVerifyEmailOtp() {
+        const otpElement = this.renderRoot.querySelector("#email-otp");
+        const code = otpElement?.value || this._emailOtpCode;
+        if (!code)
+            return;
+        this._emailOtpCode = code;
+        fireInternalEvent(this, "verify-code", { code });
+    }
+    handleResendEmailCode() {
+        this._emailOtpCode = "";
+        const otpElement = this.renderRoot.querySelector("#email-otp");
+        if (otpElement)
+            otpElement.value = "";
+        this._startEmailResendTimer();
+        fireInternalEvent(this, "resend-email-code", {});
+    }
+    handleInitiateMfaEnrollment() {
+        fireInternalEvent(this, "initiate-mfa-enrollment", {});
+    }
+    handleMfaOtpComplete(e) {
+        this._mfaOtpCode = (e.detail && (e.detail.code || e.detail.value)) ?? "";
+        fireInternalEvent(this, "verify-mfa-enrollment", {
+            code: this._mfaOtpCode,
+        });
+    }
+    handleResendMfaCode() {
+        this._mfaOtpCode = "";
+        const otpElement = this.renderRoot.querySelector("#mfa-otp");
+        if (otpElement)
+            otpElement.value = "";
+        this._startMfaResendTimer();
+        fireInternalEvent(this, "resend-mfa-code", {});
+    }
+    handleManualVerifyMfaOtp() {
+        const otpElement = this.renderRoot.querySelector("#mfa-otp");
+        const code = otpElement?.value || this._mfaOtpCode;
+        if (!code)
+            return;
+        this._mfaOtpCode = code;
+        fireInternalEvent(this, "verify-mfa-enrollment", { code });
+    }
+    handleShowPhoneInput() {
+        fireInternalEvent(this, "show-phone-input", {});
+    }
+    handlePhoneChange(e) {
+        e.stopPropagation();
+        fireInternalEvent(this, "phone-changed", { value: e.detail.value });
+    }
+    handlePhoneCodeSelected(e) {
+        e.stopPropagation();
+        fireInternalEvent(this, "phone-code-selected", e.detail);
+    }
+    handleBackToSmsPrompt() {
+        this._mfaOtpCode = "";
+        this._clearMfaResendTimer();
+        fireInternalEvent(this, "back-to-sms-prompt", {});
+    }
+    renderEmailInputContent() {
+        return html `
+      <p class="step-instruction">${msg("Please enter your email address")}</p>
+      <coras-field
+        type="email"
+        autocomplete="email"
+        name="crypto_email"
+        placeholder="your@email.com"
+        value="${this.email}"
+        ?error=${!!this.emailError || !!this.rateLimitError}
+        help-text=${this.emailError ||
+            this.rateLimitError ||
+            msg("We will send a code to this address")}
+        @value-changed=${this.handleEmailChange}
+      ></coras-field>
+      <div class="checkbox-container">
+        <coras-checkbox
+          ?checked=${this.marketing}
+          label="${msg("I agree to receive emails from FIDA.")}"
+          @value-changed=${this.handleMarketingChange}
+        ></coras-checkbox>
+      </div>
+    `;
+    }
+    renderEmailInputFooter() {
+        return html `
+      <coras-button
+        type="button"
+        @click=${this.handleSendCode}
+        ?disabled=${!this.marketing || !this.email || !!this.rateLimitError}
+        ?loading=${this.loading}
+      >
+        ${msg("Submit")}
+      </coras-button>
+    `;
+    }
+    renderEmailOtpContent() {
+        return html `
+      <p class="step-instruction">
+        ${msg(html `Please check <strong>${this.email}</strong> for your 6 digit code`)}
+      </p>
+      <div class="otp-container">
+        <coras-otp
+          id="email-otp"
+          .value=${this._emailOtpCode}
+          ?error=${!!this.otpError}
+          error-text=${this.otpError}
+          @otp-completed=${this.handleEmailOtpComplete}
+        ></coras-otp>
+      </div>
+      ${this.rateLimitError
+            ? html `<p class="rate-limit-error">${this.rateLimitError}</p>`
+            : nothing}
+    `;
+    }
+    renderEmailOtpFooter() {
+        const resendDisabled = this._emailResendCountdown > 0 || this.loading;
+        const resendLabel = this._emailResendCountdown > 0
+            ? msg(html `Resend (${this._emailResendCountdown}s)`)
+            : msg("Resend Code");
+        return html `
+      <div class="email-otp-footer">
+        <button
+          class="resend-link"
+          @click=${this.handleResendEmailCode}
+          ?disabled=${resendDisabled}
+        >
+          ${resendLabel}
+        </button>
+        <coras-button
+          type="button"
+          @click=${this.handleManualVerifyEmailOtp}
+          ?loading=${this.loading}
+        >
+          ${msg("Submit")}
+        </coras-button>
+      </div>
+    `;
+    }
+    renderPhoneField() {
+        return html `
+      <coras-phone-field
+        .countries=${this.countries}
+        .selectedPhoneCode=${this.selectedPhoneCode}
+        value=${this.localPhoneNumber}
+        name="mfa_phone"
+        label=${msg("Phone Number")}
+        placeholder="555 555 5555"
+        ?error=${!!this.phoneNumberError || !!this.smsRateLimitError}
+        error-text=${this.phoneNumberError || this.smsRateLimitError || ""}
+        help-text=${msg("Enter your phone number")}
+        @value-changed=${this.handlePhoneChange}
+        @phone-code-selected=${this.handlePhoneCodeSelected}
+      ></coras-phone-field>
+    `;
+    }
+    renderMfaSmsPromptContent() {
+        const hasFormPhone = !!this.formPhone && !this.showPhoneInput;
+        return html `
+      <p class="step-instruction">
+        ${hasFormPhone
+            ? msg(html `We'll send a one-time code to your phone number ending in
+                <strong>${this.maskedPhone}</strong> to verify it.`)
+            : msg("Add your phone number to protect your FIDA payments. We'll send a one-time code to verify it.")}
+      </p>
+      ${hasFormPhone ? nothing : this.renderPhoneField()}
+      ${this.mfaEnrollmentError
+            ? html `<p class="error-text">${this.mfaEnrollmentError}</p>`
+            : nothing}
+    `;
+    }
+    renderMfaSmsPromptFooter() {
+        const hasFormPhone = !!this.formPhone && !this.showPhoneInput;
+        return html `
+      <div class="mfa-prompt-footer">
+        ${hasFormPhone
+            ? html `
+              <button
+                type="button"
+                class="change-phone-link"
+                @click=${this.handleShowPhoneInput}
+              >
+                ${msg("Change phone number")}
+              </button>
+            `
+            : html `<span></span>`}
+        <coras-button
+          type="button"
+          @click=${this.handleInitiateMfaEnrollment}
+          ?disabled=${!hasFormPhone &&
+            (!this.localPhoneNumber || !this.selectedPhoneCode?.phoneCode)}
+          ?loading=${this.loading}
+        >
+          ${msg("Send code")}
+        </coras-button>
+      </div>
+    `;
+    }
+    renderMfaSmsOtpContent() {
+        return html `
+      <p class="step-instruction">
+        ${msg(html `Please check <strong>${this.maskedPhone}</strong> for your 6
+            digit code`)}
+      </p>
+      <div class="otp-container">
+        <coras-otp
+          id="mfa-otp"
+          .value=${this._mfaOtpCode}
+          ?error=${!!this.mfaError}
+          error-text=${this.mfaError}
+          @otp-completed=${this.handleMfaOtpComplete}
+        ></coras-otp>
+      </div>
+      <p class="otp-help-text">${msg("Your code will expire in 5 minutes")}</p>
+    `;
+    }
+    renderMfaSmsOtpFooter() {
+        const resendDisabled = this._mfaResendCountdown > 0 || this.loading;
+        const resendLabel = this._mfaResendCountdown > 0
+            ? msg(html `Resend (${this._mfaResendCountdown}s)`)
+            : msg("Resend Code");
+        return html `
+      <div class="mfa-otp-footer">
+        <button
+          class="resend-link"
+          @click=${this.handleResendMfaCode}
+          ?disabled=${resendDisabled}
+        >
+          ${resendLabel}
+        </button>
+        <coras-button
+          type="button"
+          @click=${this.handleManualVerifyMfaOtp}
+          ?loading=${this.loading}
+        >
+          ${msg("Submit")}
+        </coras-button>
+      </div>
+    `;
+    }
+    renderContent() {
+        switch (this.currentStep) {
+            case "email-otp":
+                return this.renderEmailOtpContent();
+            case "mfa-sms-prompt":
+                return this.renderMfaSmsPromptContent();
+            case "mfa-sms-otp":
+                return this.renderMfaSmsOtpContent();
+            default:
+                return this.renderEmailInputContent();
+        }
+    }
+    renderFooter() {
+        switch (this.currentStep) {
+            case "email-input":
+                return this.renderEmailInputFooter();
+            case "email-otp":
+                return this.renderEmailOtpFooter();
+            case "mfa-sms-prompt":
+                return this.renderMfaSmsPromptFooter();
+            case "mfa-sms-otp":
+                return this.renderMfaSmsOtpFooter();
+            default:
+                return nothing;
+        }
+    }
+    get dialogTitle() {
+        const step = this.currentStep;
+        if (step === "mfa-sms-prompt" || step === "mfa-sms-otp") {
+            return msg("Secure your account");
+        }
+        return msg("Sign in");
+    }
+    render() {
+        const showBackButton = this.currentStep === "email-otp" || this.currentStep === "mfa-sms-otp";
+        return html `
+      <coras-dialog
+        ?open=${this.open}
+        label=${this.dialogTitle}
+        .preventClose=${this.loading}
+        .showCloseButton=${!this.loading}
+        .showBackButton=${showBackButton}
+        @dialog-closed=${this.handleDialogClosed}
+        @dialog-back=${this.handleDialogBack}
+      >
+        <h2 slot="header" class="modal-title">${this.dialogTitle}</h2>
+        <div class="modal-body">${this.renderContent()}</div>
+        <div slot="footer" class="modal-footer">${this.renderFooter()}</div>
+      </coras-dialog>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasCryptoAuthModal.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], CorasCryptoAuthModal.prototype, "email", void 0);
+__decorate([
+    property({ type: String, attribute: "email-error" })
+], CorasCryptoAuthModal.prototype, "emailError", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasCryptoAuthModal.prototype, "marketing", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "code-sent" })
+], CorasCryptoAuthModal.prototype, "codeSent", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "is-logged-in" })
+], CorasCryptoAuthModal.prototype, "isLoggedIn", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "is-mfa-enrolled" })
+], CorasCryptoAuthModal.prototype, "isMfaEnrolled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "mfa-enrollment-code-sent" })
+], CorasCryptoAuthModal.prototype, "mfaEnrollmentCodeSent", void 0);
+__decorate([
+    property({ type: String, attribute: "otp-error" })
+], CorasCryptoAuthModal.prototype, "otpError", void 0);
+__decorate([
+    property({ type: String, attribute: "mfa-error" })
+], CorasCryptoAuthModal.prototype, "mfaError", void 0);
+__decorate([
+    property({ type: String, attribute: "mfa-enrollment-error" })
+], CorasCryptoAuthModal.prototype, "mfaEnrollmentError", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-resend" })
+], CorasCryptoAuthModal.prototype, "showResend", void 0);
+__decorate([
+    property({ type: String, attribute: "rate-limit-error" })
+], CorasCryptoAuthModal.prototype, "rateLimitError", void 0);
+__decorate([
+    property({ type: String, attribute: "sms-rate-limit-error" })
+], CorasCryptoAuthModal.prototype, "smsRateLimitError", void 0);
+__decorate([
+    property({ type: String, attribute: "form-phone" })
+], CorasCryptoAuthModal.prototype, "formPhone", void 0);
+__decorate([
+    property({ type: String, attribute: "masked-phone" })
+], CorasCryptoAuthModal.prototype, "maskedPhone", void 0);
+__decorate([
+    property({ type: String, attribute: "phone-number-error" })
+], CorasCryptoAuthModal.prototype, "phoneNumberError", void 0);
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasCryptoAuthModal.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasCryptoAuthModal.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-phone-input" })
+], CorasCryptoAuthModal.prototype, "showPhoneInput", void 0);
+__decorate([
+    property({ type: Array })
+], CorasCryptoAuthModal.prototype, "countries", void 0);
+__decorate([
+    property({ type: Object, attribute: "selected-phone-code" })
+], CorasCryptoAuthModal.prototype, "selectedPhoneCode", void 0);
+__decorate([
+    property({ type: String, attribute: "local-phone-number" })
+], CorasCryptoAuthModal.prototype, "localPhoneNumber", void 0);
+__decorate([
+    state()
+], CorasCryptoAuthModal.prototype, "_emailOtpCode", void 0);
+__decorate([
+    state()
+], CorasCryptoAuthModal.prototype, "_mfaOtpCode", void 0);
+__decorate([
+    state()
+], CorasCryptoAuthModal.prototype, "_emailResendCountdown", void 0);
+__decorate([
+    state()
+], CorasCryptoAuthModal.prototype, "_mfaResendCountdown", void 0);
+CorasCryptoAuthModal = __decorate([
+    localized()
+], CorasCryptoAuthModal);
+export { CorasCryptoAuthModal };

package/dist/components/crypto-auth-modal/crypto-auth-modal.d.ts

@@ -0,0 +1,8 @@
+import { CorasCryptoAuthModal } from "./crypto-auth-modal.component.js";
+export * from "./crypto-auth-modal.component.js";
+export default CorasCryptoAuthModal;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-crypto-auth-modal": CorasCryptoAuthModal;
+    }
+}

package/dist/components/crypto-auth-modal/crypto-auth-modal.js

@@ -0,0 +1,6 @@
+import { CorasCryptoAuthModal } from "./crypto-auth-modal.component.js";
+export * from "./crypto-auth-modal.component.js";
+export default CorasCryptoAuthModal;
+if (!customElements.get("coras-crypto-auth-modal")) {
+    customElements.define("coras-crypto-auth-modal", CorasCryptoAuthModal);
+}

package/dist/components/crypto-auth-modal/crypto-auth-modal.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;