@everymatrix/player-step-up-auth 0.1.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const playerStepUpAuth = require('./player-step-up-auth-2fac8df5.js');
+require('./index-bf4d774c.js');
+
+
+
+exports.PlayerStepUpAuth = playerStepUpAuth.PlayerStepUpAuth;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bf4d774c.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["player-step-up-auth.cjs",[[1,"player-step-up-auth",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"endpoint":[513],"userSession":[513,"user-session"],"translationUrl":[513,"translation-url"],"showPopup":[32],"otp":[32],"isLoading":[32],"config":[32],"timeLeft":[32],"expirationTime":[32],"serverTime":[32],"hasErrors":[32],"hasConfigErrors":[32],"errorMessage":[32],"token":[32],"showResendOtp":[32]},[[8,"stepUpAuthRequired","handleStepUpAuthEvent"]],{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/player-step-up-auth-2fac8df5.js

@@ -0,0 +1,617 @@
+'use strict';
+
+const index = require('./index-bf4d774c.js');
+
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        popupMessage: 'Please enter the security code received on your email address to perform the update.',
+        minutes: 'minutes',
+        errorHeader: 'Error',
+        configError: 'Unable to load OTP data. Please try again later.',
+        otpHeading: 'Enter OTP',
+        resendOtp: 'Resent OTP',
+        submit: 'Submit',
+        close: 'Close',
+        invalidOtp: 'The code you\'ve sent is not valid. Please try again.',
+        accountBlocked: 'Too many attempts for OTP. Your account has been blocked for one hour.',
+        submissionError: 'Something went wrong. Please try again.'
+    },
+    ro: {
+        popupMessage: 'Introduceți codul de securitate primit pe adresa dvs. de e-mail pentru a efectua actualizarea.',
+        minutes: 'minute',
+        errorHeader: 'Eroare',
+        configError: 'Nu s-a putut încărca datele OTP. Vă rugăm să încercați din nou mai târziu.',
+        otpHeading: 'Introduceți OTP',
+        resendOtp: 'Retrimitere OTP',
+        submit: 'Trimite',
+        close: 'Închide',
+        invalidOtp: 'Codul introdus nu este valid. Vă rugăm să încercați din nou.',
+        accountBlocked: 'Prea multe încercări de OTP. Contul dvs. a fost blocat timp de o oră.',
+        submissionError: 'Ceva a mers prost. Vă rugăm să încercați din nou.'
+    },
+    fr: {
+        popupMessage: 'Veuillez entrer le code de sécurité reçu sur votre adresse e-mail pour effectuer la mise à jour.',
+        minutes: 'minutes',
+        errorHeader: 'Erreur',
+        configError: 'Impossible de charger les données OTP. Veuillez réessayer plus tard.',
+        otpHeading: 'Entrez OTP',
+        resendOtp: 'Renvoyer OTP',
+        submit: 'Soumettre',
+        close: 'Fermer',
+        invalidOtp: 'Le code que vous avez saisi n’est pas valide. Veuillez réessayer.',
+        accountBlocked: 'Trop de tentatives OTP. Votre compte a été bloqué pendant une heure.',
+        submissionError: 'Quelque chose s\'est mal passé. Veuillez réessayer.'
+    },
+    hu: {
+        popupMessage: 'Kérjük, adja meg az e-mail címére küldött biztonsági kódot a frissítés végrehajtásához.',
+        minutes: 'perc',
+        errorHeader: 'Hiba',
+        configError: 'Nem sikerült betölteni az OTP adatokat. Kérjük, próbálja újra később.',
+        otpHeading: 'OTP megadása',
+        resendOtp: 'Újraküldés',
+        submit: 'Beküldés',
+        close: 'Bezárás',
+        invalidOtp: 'A megadott kód érvénytelen. Kérjük, próbálja újra.',
+        accountBlocked: 'Túl sok OTP próbálkozás. A fiókja egy órára zárolva lett.',
+        submissionError: 'Valami hiba történt. Kérjük, próbálja újra.'
+    },
+    tr: {
+        popupMessage: 'Güncellemeyi gerçekleştirmek için e-posta adresinize gelen güvenlik kodunu girin.',
+        minutes: 'dakika',
+        errorHeader: 'Hata',
+        configError: 'OTP verisi yüklenemedi. Lütfen daha sonra tekrar deneyin.',
+        otpHeading: 'OTP Girin',
+        resendOtp: 'OTP\'yi Yeniden Gönder',
+        submit: 'Gönder',
+        close: 'Kapat',
+        invalidOtp: 'Gönderdiğiniz kod geçersiz. Lütfen tekrar deneyin.',
+        accountBlocked: 'Çok fazla OTP denemesi yapıldı. Hesabınız bir saat boyunca kilitlendi.',
+        submissionError: 'Bir şeyler yanlış gitti. Lütfen tekrar deneyin.'
+    },
+    el: {
+        popupMessage: 'Παρακαλώ εισάγετε τον κωδικό ασφαλείας που λάβατε στο email σας για να ολοκληρώσετε την ενημέρωση.',
+        minutes: 'λεπτά',
+        errorHeader: 'Σφάλμα',
+        configError: 'Δεν ήταν δυνατή η φόρτωση των δεδομένων OTP. Παρακαλούμε προσπαθήστε ξανά αργότερα.',
+        otpHeading: 'Εισαγωγή OTP',
+        resendOtp: 'Αποστολή ξανά OTP',
+        submit: 'Υποβολή',
+        close: 'Κλείσιμο',
+        invalidOtp: 'Ο κωδικός που εισαγάγατε δεν είναι έγκυρος. Παρακαλώ προσπαθήστε ξανά.',
+        accountBlocked: 'Πάρα πολλές προσπάθειες OTP. Ο λογαριασμός σας έχει αποκλειστεί για μία ώρα.',
+        submissionError: 'Κάτι πήγε στραβά. Παρακαλώ προσπαθήστε ξανά.'
+    },
+    es: {
+        popupMessage: 'Por favor, introduzca el código de seguridad recibido en su correo electrónico para realizar la actualización.',
+        minutes: 'minutos',
+        errorHeader: 'Error',
+        configError: 'No se pudo cargar los datos del OTP. Por favor, inténtelo de nuevo más tarde.',
+        otpHeading: 'Introducir OTP',
+        resendOtp: 'Reenviar OTP',
+        submit: 'Enviar',
+        close: 'Cerrar',
+        invalidOtp: 'El código que ingresaste no es válido. Por favor, inténtalo de nuevo.',
+        accountBlocked: 'Demasiados intentos de OTP. Su cuenta ha sido bloqueada por una hora.',
+        submissionError: 'Algo salió mal. Por favor, inténtelo de nuevo.'
+    },
+    pt: {
+        popupMessage: 'Por favor, insira o código de segurança recebido no seu e-mail para realizar a atualização.',
+        minutes: 'minutos',
+        errorHeader: 'Erro',
+        configError: 'Não foi possível carregar os dados do OTP. Tente novamente mais tarde.',
+        otpHeading: 'Insira o OTP',
+        resendOtp: 'Reenviar OTP',
+        submit: 'Enviar',
+        close: 'Fechar',
+        invalidOtp: 'O código inserido não é válido. Por favor, tente novamente.',
+        accountBlocked: 'Muitas tentativas de OTP. Sua conta foi bloqueada por uma hora.',
+        submissionError: 'Algo deu errado. Por favor, tente novamente.'
+    },
+    hr: {
+        popupMessage: 'Unesite sigurnosni kod primljen na vašu e-mail adresu kako biste izvršili ažuriranje.',
+        minutes: 'minute',
+        errorHeader: 'Greška',
+        configError: 'Nije moguće učitati OTP podatke. Pokušajte ponovno kasnije.',
+        otpHeading: 'Unesite OTP',
+        resendOtp: 'Ponovno pošalji OTP',
+        submit: 'Pošalji',
+        close: 'Zatvori',
+        invalidOtp: 'Uneseni kod nije valjan. Molimo pokušajte ponovo.',
+        accountBlocked: 'Previše pokušaja unosa OTP-a. Vaš račun je blokiran na jedan sat.',
+        submissionError: 'Nešto je pošlo po zlu. Molimo pokušajte ponovo.'
+    },
+    de: {
+        popupMessage: 'Bitte geben Sie den Sicherheitscode ein, den Sie an Ihre E-Mail-Adresse erhalten haben, um das Update durchzuführen.',
+        minutes: 'Minuten',
+        errorHeader: 'Fehler',
+        configError: 'OTP-Daten konnten nicht geladen werden. Bitte versuchen Sie es später erneut.',
+        otpHeading: 'OTP eingeben',
+        resendOtp: 'OTP erneut senden',
+        submit: 'Absenden',
+        close: 'Schließen',
+        invalidOtp: 'Der eingegebene Code ist ungültig. Bitte versuchen Sie es erneut.',
+        accountBlocked: 'Zu viele OTP-Versuche. Ihr Konto wurde für eine Stunde gesperrt.',
+        submissionError: 'Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut.'
+    },
+    'es-mx': {
+        popupMessage: 'Por favor, ingrese el código de seguridad recibido en su correo electrónico para realizar la actualización.',
+        minutes: 'minutos',
+        errorHeader: 'Error',
+        configError: 'No se pudieron cargar los datos del OTP. Inténtelo de nuevo más tarde.',
+        otpHeading: 'Ingrese OTP',
+        resendOtp: 'Reenviar OTP',
+        submit: 'Enviar',
+        close: 'Cerrar',
+        invalidOtp: 'El código que ingresó no es válido. Inténtelo de nuevo.',
+        accountBlocked: 'Demasiados intentos de OTP. Su cuenta ha sido bloqueada por una hora.',
+        submissionError: 'Algo salió mal. Por favor, inténtelo de nuevo.'
+    },
+    'pt-br': {
+        popupMessage: 'Por favor, digite o código de segurança recebido no seu e-mail para realizar a atualização.',
+        minutes: 'minutos',
+        errorHeader: 'Erro',
+        configError: 'Não foi possível carregar os dados do OTP. Tente novamente mais tarde.',
+        otpHeading: 'Digite o OTP',
+        resendOtp: 'Reenviar OTP',
+        submit: 'Enviar',
+        close: 'Fechar',
+        invalidOtp: 'O código informado não é válido. Tente novamente.',
+        accountBlocked: 'Muitas tentativas de OTP. Sua conta foi bloqueada por uma hora.',
+        submissionError: 'Algo deu errado. Por favor, tente novamente.'
+    },
+};
+const getTranslations = (url) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                for (let key in data[item]) {
+                    TRANSLATIONS[item][key] = data[item][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const playerStepUpAuthCss = ".OtpPopupOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--emw--color-overlay, rgba(0, 0, 0, 0.5));display:flex;align-items:center;justify-content:center}.OtpButton{font-family:var(--emw--button-typography);border:var(--emw--button-border, none);border-radius:var(--emw--button-border-radius, 3px);border-color:var(--emw--button-border-color);background-color:var(--emw--button-background-color, var(--emw--color-primary, #007bff));color:var(--emw--button-typography, var(--emw--color-white, #fff));padding:10px 20px;cursor:pointer;font-size:16px}.OtpButton.error{background:var(--emw--color-error, #dd3434)}.OtpPopupContent{position:relative;background:var(--emw--color-white, #fff);padding:20px;border-radius:5px;text-align:center;min-width:25%;min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:20px}.OtpPopupContent .OtpError{display:flex;flex-direction:column;gap:20px;align-items:center}.OtpPopupContent .OtpError .OtpErrorHeader{display:flex;justify-content:center;gap:5px}.OtpPopupContent .OtpError h2{margin:0}.OtpPopupContent .OtpError svg{width:25px;fill:var(--emw--color-error, #dd3434)}.OtpFieldWrapper{display:flex;flex-direction:column;gap:10px}.OtpFieldWrapper h2{margin:0}.OtpField{display:flex;justify-content:center}.OtpField input{width:24px;font-size:32px;padding:10px;text-align:center;border-radius:5px;margin:2px;border:2px solid var(--emw--otp-border-color, #55525c);font-weight:bold;outline:none;transition:all 0.1s}.OtpField input.space{margin-right:1rem !important}.OtpField input:focus{border:2px solid var(--emw--color-primary, #007bff);box-shadow:0 0 2px 2px var(--emw--color-primary, #007bff)}.OtpActionButtons{display:flex;justify-content:space-between}.OtpErrorMessage{color:var(--emw--color-error, #dd3434);font-weight:bold}.OtpLoaderContainer{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.OtpLoader{width:48px;height:48px;border:5px solid var(--emw--color-secondary, #b3d8ff);border-bottom-color:var(--emw--color-primary, #007bff);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
+const PlayerStepUpAuthStyle0 = playerStepUpAuthCss;
+
+const PlayerStepUpAuth = class {
+    /**
+     * Watch for changes in the translation URL and fetch new translations
+     */
+    handleNewTranslations() {
+        getTranslations(this.translationUrl);
+    }
+    /**
+     * Watch for changes in the client styling and apply the new styling
+     *
+     * @param newValue - new client styling
+     * @param oldValue - previous client styling
+     */
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.el, this.clientStyling);
+        }
+    }
+    /**
+     * Watch for changes in the client styling URL and fetch the new CSS
+     *
+     * @param newValue - new client styling URL
+     * @param oldValue - previous client styling URL
+     */
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    async handleStepUpAuthEvent(event) {
+        var _a;
+        if ((_a = event.detail) === null || _a === void 0 ? void 0 : _a['x-step-up-required']) {
+            this.hasConfigErrors = false;
+            this.hasErrors = false;
+            this.errorMessage = '';
+            this.showPopup = true;
+            this.token = event.detail['x-step-up-token'];
+            await this.getConfig();
+        }
+    }
+    /**
+     * Class constructor
+     */
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.otpInputs = [];
+        this.countdownTimer = null;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.userSession = undefined;
+        this.translationUrl = '';
+        this.showPopup = false;
+        this.otp = undefined;
+        this.isLoading = true;
+        this.config = null;
+        this.timeLeft = 0;
+        this.expirationTime = '';
+        this.serverTime = '';
+        this.hasErrors = false;
+        this.hasConfigErrors = false;
+        this.errorMessage = '';
+        this.token = '';
+        this.showResendOtp = false;
+        this.closePopup = this.closePopup.bind(this);
+        this.handleResendOtp = this.handleResendOtp.bind(this);
+        this.submitOtp = this.submitOtp.bind(this);
+        this.setOtpContainerRef = this.setOtpContainerRef.bind(this);
+    }
+    /**
+     * Fetches OTP configuration from the endpoint.
+     * Updates the OTP state, expiration time, and starts the countdown timer.
+     */
+    async getConfig() {
+        if (!this.endpoint)
+            return;
+        try {
+            const url = new URL(`/api/v1/mfa/challenge/${this.token}/config`, this.endpoint);
+            this.isLoading = true;
+            const response = await fetch(url.href);
+            if (!response.ok)
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            this.config = await response.json();
+            this.otp = new Array(this.config.inputLength).fill('');
+            this.isLoading = false;
+            this.showResendOtp = false;
+            this.expirationTime = this.config.expirationTime;
+            this.serverTime = this.config.serverTime;
+            this.calculateTimeLeft();
+            this.startCountdown();
+        }
+        catch (error) {
+            this.isLoading = false;
+            this.hasConfigErrors = true;
+            this.errorMessage = translate('configError', this.language);
+            console.error('Error loading 2FA config:', error);
+        }
+    }
+    /**
+     * Starts the countdown timer for OTP expiration.
+     * - Clears any existing timer to prevent duplicate intervals.
+     * - Decreases `timeLeft` every second.
+     * - Stops the countdown when time reaches 0.
+     * - Shows the "Resend OTP" option when time runs out.
+     */
+    calculateTimeLeft() {
+        const expirationDate = new Date(this.expirationTime);
+        const serverTime = new Date(this.serverTime);
+        if (!this.currentTime) {
+            this.currentTime = new Date();
+        }
+        // Calculate the offset (difference between server time and local time)
+        const offset = serverTime.getTime() - this.currentTime.getTime();
+        // Adjust current time using the offset
+        const adjustedCurrentDate = new Date(this.currentTime.getTime() + offset);
+        // Calculate time left in seconds
+        this.timeLeft = Math.floor((expirationDate.getTime() - adjustedCurrentDate.getTime()) / 1000);
+    }
+    /**
+     * Starts a countdown timer for OTP expiration.
+     * Decreases `timeLeft` every second and closes the popup when time runs out.
+     */
+    startCountdown() {
+        if (this.countdownTimer) {
+            clearInterval(this.countdownTimer); // Clear any existing timer
+        }
+        this.countdownTimer = setInterval(() => {
+            if (this.timeLeft > 0) {
+                this.timeLeft -= 1; // Update state correctly
+            }
+            else {
+                clearInterval(this.countdownTimer);
+                this.countdownTimer = null;
+                this.showResendOtp = true;
+            }
+        }, 1000);
+    }
+    /**
+     * Formats time from seconds to MM:SS format.
+     *
+     * @param seconds - The time in seconds.
+     * @returns A formatted string representing minutes and seconds.
+     */
+    formatTime(seconds) {
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+    }
+    /**
+     * Sets a reference to the OTP input container.
+     *
+     * @param el - The OTP input container element.
+     */
+    setOtpContainerRef(el) {
+        if (el)
+            this.otpContainer = el;
+    }
+    /**
+     * Sets a reference to the OTP inputs.
+     *
+     * @param el - The OTP input container element.
+     */
+    setOtpInputRef(el, index) {
+        if (el) {
+            this.otpInputs[index] = el;
+        }
+    }
+    /**
+     * Handles pasting an OTP directly into the input fields.
+     * Extracts characters from the clipboard and populates the OTP fields.
+     *
+     * @param e - The clipboard event containing pasted data.
+     */
+    handleOnPasteOtp(e) {
+        var _a;
+        e.preventDefault();
+        const data = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text').trim();
+        if (!data)
+            return;
+        const value = data.slice(0, this.config.inputLength).split(""); // Limit to OTP length
+        this.otp = [...value, ...new Array(this.config.inputLength - value.length).fill('')];
+        const inputs = Array.from(this.otpContainer.children);
+        if (inputs) {
+            value.forEach((char, index) => {
+                inputs[index].value = char;
+            });
+            // Move focus to the last input or trigger submit
+            const lastInput = inputs[value.length - 1];
+            lastInput === null || lastInput === void 0 ? void 0 : lastInput.focus();
+            if (value.length === this.config.inputLength) {
+                this.submitOtp();
+            }
+        }
+    }
+    /**
+     * Handles OTP input changes.
+     * Allows only alphanumeric characters and moves focus to the next input field.
+     *
+     * @param e - The input event.
+     * @param index - The index of the input field being updated.
+     */
+    handleOtpInput(e, index) {
+        const input = e.target;
+        let value = input.value.replace(/[^0-9a-zA-Z]/gi, '').toUpperCase();
+        input.value = value.charAt(0);
+        if (!value)
+            return;
+        this.otp[index] = value[0];
+        // Move focus using stored refs
+        const nextInput = this.otpInputs[index + 1];
+        nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
+    }
+    /**
+     * Handles key press events for OTP inputs.
+     * Supports backspace for deleting characters and moving focus to the previous input field.
+     *
+     * @param e - The keyboard event.
+     * @param index - The index of the input field.
+     */
+    handleKeyDown(e, index) {
+        if (e.key === "Backspace") {
+            this.otp[index] = '';
+            this.otpInputs[index].value = ''; // Clear input field
+            const prevInput = this.otpInputs[index - 1];
+            prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
+        }
+    }
+    /**
+     * Handles resending the OTP when time expires.
+     */
+    handleResendOtp() {
+        // Emit an event to notify the system that OTP should be resent
+        const event = new CustomEvent('otpResendRequested', {
+            detail: { message: 'User requested OTP resend' }
+        });
+        window.dispatchEvent(event);
+    }
+    /**
+     * Submits the entered OTP for validation.
+     * Sends a request to the endpoint with the OTP and handles the response.
+     */
+    async submitOtp() {
+        if (this.otp.join('').length !== this.config.inputLength) {
+            this.hasErrors = true;
+            this.errorMessage = translate('invalidOtp', this.language);
+            return;
+        }
+        this.isLoading = true; // Set loading state
+        this.hasErrors = false;
+        this.errorMessage = '';
+        const otpValue = this.otp.join('');
+        const url = new URL(`/api/v1/mfa/challenge/${this.token}/validate`, this.endpoint);
+        url.searchParams.append('input', otpValue);
+        try {
+            const response = await fetch(url.href, { method: 'POST' });
+            if (response.status === 200) {
+                this.handleSuccess();
+                return;
+            }
+            const result = await response.json();
+            throw new Error(result.message);
+        }
+        catch (error) {
+            if (error.message === 'gm.multifactorauthentication.challenge') {
+                if (this.config.numberOfValidateAttempts === (this.config.maxValidationAttempts - 1)) {
+                    //Set timeout for 1h
+                    const serverTime = new Date(this.serverTime);
+                    serverTime.setHours(serverTime.getHours() + 1);
+                    const timeoutExpiryDate = serverTime.toISOString().slice(0, 16).replace('T', ' ');
+                    window.postMessage({
+                        type: 'SetPlayerAccountTimeout',
+                        timeoutSelected: 'CoolOffUntilSelectedDate',
+                        timeoutExpiryDate
+                    }, window.location.href);
+                    //Trigger notification
+                    window.postMessage({
+                        type: 'WidgetNotification',
+                        data: {
+                            type: 'error',
+                            message: translate('accountBlocked', this.language)
+                        }
+                    }, window.location.href);
+                    this.closePopup();
+                    return;
+                }
+                this.hasErrors = true;
+                this.errorMessage = translate('invalidOtp', this.language);
+                this.getConfig();
+                return;
+            }
+            console.error('OTP submission failed:', error);
+            this.hasErrors = true;
+            this.errorMessage = translate('submissionError', this.language);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    /**
+     * Handles successful OTP validation.
+     * Closes the popup upon successful authentication.
+     */
+    handleSuccess() {
+        window.dispatchEvent(new CustomEvent('otpSuccess', {
+            detail: { message: 'User successfully authenticated' }
+        }));
+        this.closePopup();
+    }
+    /**
+     * Closes the OTP popup.
+     * Resets the authentication UI state.
+     */
+    closePopup() {
+        this.showPopup = false;
+        window.dispatchEvent(new CustomEvent('popupClosed', {
+            detail: { message: 'User closed the popup' }
+        }));
+    }
+    /**
+     * Lifecycle method: Clean up event listeners when the component is removed
+     */
+    disconnectedCallback() {
+        var _a;
+        if (this.countdownTimer) {
+            clearInterval(this.countdownTimer);
+        }
+        (_a = this.stylingSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    /**
+    * Lifecycle method: Fetch translations on component load
+    */
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+    }
+    /**
+     * Lifecycle method: Set up event listeners after the component is rendered
+     */
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBuss != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
+    }
+    /**
+     * Renders the OTP authentication component.
+     * Displays the OTP popup, input fields, timer, and action buttons.
+     */
+    render() {
+        return (index.h("div", { key: '2761de23ad41b4ead177d63931e7756584defd11' }, this.showPopup && (index.h("div", { key: '1d01dd47770c5190a5c5c3e0c6e2c4af9e71ae15', class: "OtpPopupOverlay" }, index.h("div", { key: '626dbc731ca03790bf9cae42e56919851928a36f', class: "OtpPopupContent" }, this.isLoading ? (index.h("div", { class: "OtpLoaderContainer" }, index.h("span", { class: "OtpLoader" }))) : (this.hasConfigErrors ? (index.h("div", { class: "OtpError" }, index.h("div", { class: "OtpErrorHeader" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })), index.h("h2", null, translate('errorHeader', this.language))), index.h("p", null, this.errorMessage), index.h("button", { class: "OtpButton error", onClick: this.closePopup }, translate('close', this.language)))) : (index.h(index.Fragment, null, index.h("div", { class: "otp-description" }, index.h("p", null, translate('popupMessage', this.language)), this.hasErrors && index.h("p", { class: "OtpErrorMessage" }, this.errorMessage)), index.h("div", { class: "OtpFieldWrapper" }, index.h("h2", null, translate('otpHeading', this.language)), index.h("div", { class: "OtpField", ref: this.setOtpContainerRef }, this.otp.map((char, index$1) => {
+            const isHalfway = this.config.inputLength % 2 === 0 && index$1 === (this.config.inputLength / 2) - 1;
+            return (index.h("input", { key: index$1, ref: el => this.setOtpInputRef(el, index$1), id: `otp-input-${index$1}`, type: "text", class: `otp-box ${isHalfway ? 'space' : ''}`, maxLength: 1, value: char, onInput: (event) => this.handleOtpInput(event, index$1), onKeyDown: (event) => this.handleKeyDown(event, index$1), onPaste: (event) => this.handleOnPasteOtp(event), disabled: this.timeLeft <= 0 }));
+        })), index.h("div", { class: "otp-timer" }, this.formatTime(this.timeLeft), " ", translate('minutes', this.language))), index.h("div", { class: "OtpActionButtons" }, this.showResendOtp ? (index.h("button", { class: "OtpButton", onClick: this.handleResendOtp }, translate('resendOtp', this.language))) : (index.h("button", { class: "OtpButton", onClick: this.submitOtp, disabled: this.otp.join('').length !== this.config.inputLength }, translate('submit', this.language))), index.h("button", { class: "OtpButton", onClick: this.closePopup }, translate('close', this.language)))))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "translationUrl": ["handleNewTranslations"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"]
+    }; }
+};
+PlayerStepUpAuth.style = PlayerStepUpAuthStyle0;
+
+exports.PlayerStepUpAuth = PlayerStepUpAuth;

package/dist/cjs/player-step-up-auth.cjs.entry.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const playerStepUpAuth = require('./player-step-up-auth-2fac8df5.js');
+require('./index-bf4d774c.js');
+
+
+
+exports.player_step_up_auth = playerStepUpAuth.PlayerStepUpAuth;