@everymatrix/player-step-up-auth 0.1.0

package/dist/collection/components/player-step-up-auth/player-step-up-auth.js

@@ -0,0 +1,543 @@
+import { h, Fragment } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { translate, getTranslations } from "../../utils/utils";
+export class PlayerStepUpAuth {
+    /**
+     * 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() {
+        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`, this.stylingSubscription);
+            }
+            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 (h("div", { key: '2761de23ad41b4ead177d63931e7756584defd11' }, this.showPopup && (h("div", { key: '1d01dd47770c5190a5c5c3e0c6e2c4af9e71ae15', class: "OtpPopupOverlay" }, h("div", { key: '626dbc731ca03790bf9cae42e56919851928a36f', class: "OtpPopupContent" }, this.isLoading ? (h("div", { class: "OtpLoaderContainer" }, h("span", { class: "OtpLoader" }))) : (this.hasConfigErrors ? (h("div", { class: "OtpError" }, h("div", { class: "OtpErrorHeader" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, 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" })), h("h2", null, translate('errorHeader', this.language))), h("p", null, this.errorMessage), h("button", { class: "OtpButton error", onClick: this.closePopup }, translate('close', this.language)))) : (h(Fragment, null, h("div", { class: "otp-description" }, h("p", null, translate('popupMessage', this.language)), this.hasErrors && h("p", { class: "OtpErrorMessage" }, this.errorMessage)), h("div", { class: "OtpFieldWrapper" }, h("h2", null, translate('otpHeading', this.language)), h("div", { class: "OtpField", ref: this.setOtpContainerRef }, this.otp.map((char, index) => {
+            const isHalfway = this.config.inputLength % 2 === 0 && index === (this.config.inputLength / 2) - 1;
+            return (h("input", { key: index, ref: el => this.setOtpInputRef(el, index), id: `otp-input-${index}`, type: "text", class: `otp-box ${isHalfway ? 'space' : ''}`, maxLength: 1, value: char, onInput: (event) => this.handleOtpInput(event, index), onKeyDown: (event) => this.handleKeyDown(event, index), onPaste: (event) => this.handleOnPasteOtp(event), disabled: this.timeLeft <= 0 }));
+        })), h("div", { class: "otp-timer" }, this.formatTime(this.timeLeft), " ", translate('minutes', this.language))), h("div", { class: "OtpActionButtons" }, this.showResendOtp ? (h("button", { class: "OtpButton", onClick: this.handleResendOtp }, translate('resendOtp', this.language))) : (h("button", { class: "OtpButton", onClick: this.submitOtp, disabled: this.otp.join('').length !== this.config.inputLength }, translate('submit', this.language))), h("button", { class: "OtpButton", onClick: this.closePopup }, translate('close', this.language)))))))))));
+    }
+    static get is() { return "player-step-up-auth"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-step-up-auth.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-step-up-auth.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message bus source identifier, used for styling and communication."
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Inline CSS styles applied to the component."
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to an external CSS file for styling the component."
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language setting for translations (default: 'en')."
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base API endpoint used for fetching OTP configuration and validation."
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "userSession": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User session token, potentially used for authentication or tracking."
+                },
+                "attribute": "user-session",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for fetching translation files to support multiple languages."
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showPopup": {},
+            "otp": {},
+            "isLoading": {},
+            "config": {},
+            "timeLeft": {},
+            "expirationTime": {},
+            "serverTime": {},
+            "hasErrors": {},
+            "hasConfigErrors": {},
+            "errorMessage": {},
+            "token": {},
+            "showResendOtp": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "stepUpAuthRequired",
+                "method": "handleStepUpAuthEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/player-step-up-auth';