@everymatrix/pam-forgot-password 1.65.0

package/dist/collection/components/pam-forgot-password/pam-forgot-password.js

@@ -0,0 +1,461 @@
+import { h } from "@stencil/core";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import { checkDeviceType } from "../../utils/utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import "../../../../../general-input/dist/types/index";
+import "../../../../../ui-skeleton/dist/types/index";
+export class PamForgotPassword {
+    constructor() {
+        this.isContactValid = false;
+        this.validation = { mandatory: true, custom: [] };
+        /**
+         * Handles the submission of the forgot password request.
+         *
+         * @param e - The event object from the form submission.
+         */
+        this.submitRequest = (e) => {
+            e.preventDefault();
+            // Construct the request URL
+            const url = new URL('/api/v1/players/password-management/password/forgot/request', this.endpoint);
+            // Set up request headers
+            const headers = new Headers();
+            if (this.captchaData.isEnabled && this.captchaData.token) {
+                headers.append('X-Captcha-Response', this.captchaData.token);
+            }
+            headers.append('Content-Type', 'application/json');
+            // Create the request body
+            const requestBody = JSON.stringify({ contact: this.contact });
+            // Define request parameters
+            const requestParams = {
+                method: 'POST',
+                headers: headers,
+                body: requestBody,
+            };
+            // Send the request
+            fetch(url.href, requestParams)
+                .then((response) => response.json())
+                .then((data) => {
+                if (!data.errorCode) {
+                    // Success: Notify the parent window
+                    window.postMessage({ type: 'ForgotPasswordSuccess' });
+                    window.postMessage({ type: 'WidgetNotification', data: { type: 'success', message: translate('successMsg', this.language) } }, window.location.href);
+                }
+                else {
+                    // API responded with an error
+                    this.sendErrorNotification(translate('submitError', this.language));
+                }
+            })
+                .catch(() => {
+                // Network or server error
+                this.sendErrorNotification(translate('submitError', this.language));
+            });
+        };
+        /**
+         * Toggles the player account menu visibility.
+         *
+         * Sends a post message to notify that the player account menu has been activated.
+         */
+        this.toggleScreen = () => {
+            window.postMessage({ type: 'PlayerAccountMenuActive', isMobile: this.isMobile }, window.location.href);
+        };
+        this.endpoint = undefined;
+        this.language = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.mbSource = undefined;
+        this.translationUrl = undefined;
+        this.contactType = '';
+        this.isBtnSubmitEnabled = false;
+        this.skeletonLoading = true;
+        this.hasError = false;
+        this.isMobile = checkDeviceType() === 'mobile' || checkDeviceType() === 'tablet';
+        this.captchaData = {
+            isEnabled: true,
+            token: '',
+            provider: '',
+            siteKey: ''
+        };
+        this.errorMessage = '';
+    }
+    /**
+     * Checks for input validity and set the flags accordingly.
+     */
+    sendValidityStateHandler(e) {
+        if (e.detail.name === 'contact') {
+            this.isContactValid = e.detail.valid;
+            return;
+        }
+    }
+    /**
+     * Handles the 'sendInputValue' event to update component state based on the input field name.
+     *
+     * This function listens for a custom event that carries input values and updates corresponding properties:
+     * - Updates `contactType` if the input name is 'dropdown'.
+     * - Parses and assigns `contact` if the input name is 'contact' (handles phone numbers separately).
+     *
+     * Also determines whether the submit button should be enabled based on the validity of the inputs.
+     *
+     * @param {CustomEvent<InputValueEvent>} e - The custom event containing input details.
+     */
+    sendInputValueHandler(e) {
+        switch (e.detail.name) {
+            case 'dropdown':
+                this.contactType = e.detail.value.toLowerCase();
+                break;
+            case 'contact':
+                this.contact = e.detail.value;
+                break;
+        }
+        this.updateSubmitButtonState();
+    }
+    /**
+     * Updates the state of the submit button based on form validation rules.
+     *
+     * The button is enabled only if:
+     * - The contact (email) input is valid.
+     * - CAPTCHA is either disabled or has a valid token.
+     */
+    updateSubmitButtonState() {
+        this.isBtnSubmitEnabled = this.isContactValid &&
+            !!this.contact &&
+            (!this.captchaData.isEnabled || !!this.captchaData.token);
+    }
+    /**
+     * 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.stylingContainer, 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);
+        }
+    }
+    /**
+     * Send error notification as a post message
+     */
+    sendErrorNotification(errorMessage) {
+        window.postMessage({ type: "HasError", error: errorMessage }, window.location.href);
+        window.postMessage({
+            type: 'WidgetNotification', data: {
+                type: 'error',
+                message: errorMessage
+            }
+        }, window.location.href);
+    }
+    /**
+     * Get the translations and get the configuration.
+     *
+     * Called once just after the component is first connected to the DOM.
+     */
+    async componentWillLoad() {
+        // Get translations
+        if (this.translationUrl) {
+            await getTranslations(this.translationUrl);
+        }
+        // Get widget config
+        this.getConfig().then(() => {
+            this.appendCaptchaScript();
+        }).catch((error) => {
+            console.error(error);
+            this.hasError = true;
+            this.errorMessage = translate('configError', this.language);
+            this.sendErrorNotification(this.errorMessage);
+        }).finally(() => {
+            this.skeletonLoading = false;
+        });
+    }
+    /**
+     * Set the styling for the widget once it's loaded.
+     *
+     * Called once just after the component is fully loaded and the first render() occurs.
+     */
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != 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);
+            }
+        }
+    }
+    /**
+     * Fetches the forgot password configuration from the backend API.
+     *
+     * @returns A Promise that resolves once the configuration is fetched and set.
+     */
+    getConfig() {
+        const url = new URL('/api/v1/players/password-management/password/forgot/config', this.endpoint);
+        return new Promise((resolve, reject) => {
+            fetch(url.href)
+                .then((res) => {
+                if (!res.ok) {
+                    throw new Error(`HTTP error! Status: ${res.status}`);
+                }
+                return res.json();
+            })
+                .then((res) => {
+                const { captcha } = res;
+                if (captcha && typeof captcha.provider === 'string') {
+                    captcha.provider = captcha.provider.toLowerCase();
+                }
+                this.captchaData = Object.assign({}, captcha);
+                resolve();
+            })
+                .catch((error) => {
+                console.error('Error fetching login configuration:', error);
+                reject(error);
+            });
+        });
+    }
+    /**
+     * Dynamically loads the captcha script and renders it when ready.
+     *
+     * @param src - The URL of the CAPTCHA script to load.
+     * @param captcha - The CAPTCHA configuration.
+     */
+    appendCaptchaScript() {
+        const { isEnabled, provider } = this.captchaData;
+        if (!isEnabled) {
+            return;
+        }
+        const script = document.createElement('script');
+        if (provider === 'cloudflare') {
+            script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+        }
+        else if (provider === 'google') {
+            script.src = 'https://www.google.com/recaptcha/api.js';
+        }
+        script.onload = this.handleCaptcha.bind(this);
+        document.head.appendChild(script);
+    }
+    /**
+     * Handles the integration of CAPTCHA based on the login configuration.
+     * Dynamically injects the necessary CAPTCHA script if enabled.
+     */
+    handleCaptcha() {
+        const { isEnabled, provider, siteKey } = this.captchaData;
+        if (!isEnabled) {
+            return;
+        }
+        if (!['cloudflare', 'google'].includes(provider)) {
+            return;
+        }
+        if (provider === 'cloudflare') {
+            window.turnstile.render('#turnstileContainer', {
+                sitekey: siteKey,
+                theme: 'light',
+                callback: this.captchaCallback.bind(this),
+            });
+        }
+        else if (provider === 'google') {
+            window.grecaptcha.ready(() => {
+                window.grecaptcha.render('googleContainer', {
+                    sitekey: siteKey,
+                    callback: this.captchaCallback.bind(this),
+                    theme: 'light'
+                });
+            });
+        }
+    }
+    /**
+     * Common callback function for CAPTCHA response handling.
+     * @param token CAPTCHA response token.
+     */
+    captchaCallback(token) {
+        this.captchaData.token = token;
+        this.captchaData = Object.assign({}, this.captchaData); // Needed to tell Stencil something was changed
+        this.updateSubmitButtonState();
+    }
+    /**
+     * Lifecycle method: Clean up event listeners for styling.
+     * Called every time the component is disconnected from the DOM
+     */
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    /**
+     * The render function.
+     */
+    render() {
+        if (this.skeletonLoading) {
+            return h("div", { class: "PlayerForgotPassword skeleton" }, h("form", { class: "Form" }, h("div", { class: "ButtonReturn" }, h("ui-skeleton", { structure: "text", width: "auto", height: "30px" })), h("section", { class: "FieldsSection" }, h("div", { class: "FieldContainer" }, h("div", { class: "FieldTitle" }, h("ui-skeleton", { structure: "title", width: "auto", height: "10px" })), h("ui-skeleton", { structure: "rectangle", width: "auto", height: "35px" }))), h("section", { class: "ButtonsSection" }, h("div", { class: "Button" }, h("ui-skeleton", { structure: "rectangle", width: "auto", height: "50px" })))));
+        }
+        if (this.hasError) {
+            return h("div", { class: "PlayerForgotPassword", ref: el => this.stylingContainer = el }, h("h4", { class: "Error" }, translate('configError', this.language)));
+        }
+        return h("div", { class: "PlayerForgotPassword", ref: el => this.stylingContainer = el }, h("form", { action: ".", class: "Form" }, h("div", { class: "ButtonReturn", onClick: this.toggleScreen }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15" }, h("g", { transform: "translate(-20 -158)" }, h("g", { transform: "translate(20 158)" }, h("path", { class: "aaa", d: "M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z", transform: "translate(15 15) rotate(180)" })))), h("h2", { class: "TitleMobile" }, translate('title', this.language))), h("h2", { class: "Title" }, translate('title', this.language)), h("section", { class: "FieldsSection" }, h("div", { class: `ContactWrapper${this.isMobile ? 'Mobile' : ''}` }, h("general-input", { class: "Contact", language: this.language, "client-styling": this.clientStyling, "mb-source": this.mbSource, type: "email", name: "contact", displayName: translate('emailDisplayName'), emitValue: true, validation: this.validation, placeholder: translate('emailPlaceholder') })), this.captchaData.isEnabled && this.captchaData.provider === 'cloudflare' &&
+            h("slot", { name: "turnstile" }), this.captchaData.isEnabled && this.captchaData.provider === 'google' &&
+            h("slot", { name: "google" })), h("section", { class: "ButtonsWrapper" }, h("button", { class: "Button", disabled: !this.isBtnSubmitEnabled, onClick: this.submitRequest }, translate('btnSubmit', this.language)))));
+    }
+    ;
+    static get is() { return "pam-forgot-password"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pam-forgot-password.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pam-forgot-password.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "endpoint"
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "language"
+                },
+                "attribute": "language",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "clientStyling"
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "clientStylingUrl"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": false
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "translationUrl"
+                },
+                "attribute": "translation-url",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contactType": {},
+            "isBtnSubmitEnabled": {},
+            "skeletonLoading": {},
+            "hasError": {},
+            "isMobile": {},
+            "captchaData": {},
+            "errorMessage": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "sendValidityState",
+                "method": "sendValidityStateHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "sendInputValue",
+                "method": "sendInputValueHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/pam-forgot-password/pam-forgot-password.stories.js

@@ -0,0 +1,42 @@
+import { html } from "lit";
+import "@everymatrix/pam-forgot-password";
+const meta = {
+    title: 'Player/Components/pam-forgot-password',
+    component: 'pam-forgot-password',
+    args: {
+        endpoint: "",
+        language: "",
+        clientStyling: "",
+        clientStylingUrl: "",
+        mbSource: "",
+        translationUrl: "",
+    },
+    argTypes: {
+        endpoint: { control: 'text', description: '' },
+        language: { control: 'text', description: '' },
+        clientStyling: { control: 'text', description: '' },
+        clientStylingUrl: { control: 'text', description: '' },
+        mbSource: { control: 'text', description: '' },
+        translationUrl: { control: 'text', description: '' },
+    },
+};
+export default meta;
+const Template = (args) => {
+    return html `<pam-forgot-password
+    endpoint="${args.endpoint}"
+    language="${args.language}"
+    clientStyling="${args.clientStyling}"
+    clientStylingUrl="${args.clientStylingUrl}"
+    mbSource="${args.mbSource}"
+    translationUrl="${args.translationUrl}"
+  ></pam-forgot-password>`;
+};
+export const Default = Template.bind({});
+Default.args = {
+    endpoint: "",
+    language: "",
+    clientStyling: "",
+    clientStylingUrl: "",
+    mbSource: "",
+    translationUrl: "",
+};

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/pam-forgot-password';