@everymatrix/pam-change-password 1.67.0

package/dist/collection/components/pam-change-password/pam-change-password.css

@@ -0,0 +1,125 @@
+:host {
+  display: block;
+}
+
+.PlayerChangePassword {
+  font-family: inherit;
+  width: 100%;
+  height: 100%;
+  container-type: inline-size;
+  opacity: 1;
+  animation-name: fadeIn;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in;
+  animation-duration: 0.3s;
+  container-type: inline-size;
+}
+.PlayerChangePassword .Wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.PlayerChangePassword .Title {
+  background-color: transparent;
+  font-size: var(--emw--font-size-x-large, 26px);
+  color: var(--emw--color-primary, #22B04E);
+  font-weight: var(--emw--font-weight-semibold, 500);
+}
+.PlayerChangePassword .TitleMobile {
+  font-size: var(--emw--font-size-x-large, 20px);
+  color: var(--emw--color-primary, #22B04E);
+}
+.PlayerChangePassword svg {
+  fill: var(--emw--color-primary, #22B04E);
+}
+.PlayerChangePassword .ButtonReturn {
+  display: none;
+  font-family: inherit;
+  align-items: center;
+  gap: 10px;
+}
+.PlayerChangePassword .Form {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 40px;
+  justify-items: stretch;
+  align-content: flex-start;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+.PlayerChangePassword .Form .FieldsSection {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+.PlayerChangePassword .Form .ButtonsSection {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  position: relative;
+}
+.PlayerChangePassword .Button {
+  font-family: inherit;
+  border-radius: var(--emw--button-border-radius, var(--emw--border-radius-large, 50px));
+  background: var(--emw--button-background-color, var(--emw--color-primary, #22B04E));
+  border: var(--emw--button-border, 1px solid var(--emw--button-border-color, #22B04E));
+  color: var(--emw--button-text-color, var(--emw--color-white, #FFFFFF));
+  font-size: var(--emw--font-size-large, 20px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  height: 50px;
+  width: 100%;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+.PlayerChangePassword .Button:disabled {
+  background: var(--emfe-w-color-gray-100, #E6E6E6);
+  border: var(--emw--button-border, 1px solid var(--emw--button-border-color, #828282));
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.PlayerChangePassword.skeleton .Form .ButtonReturn {
+  width: 150px;
+  height: 30px;
+  margin-top: 15px;
+  display: block;
+}
+.PlayerChangePassword.skeleton .Form .FieldsSection {
+  display: block;
+}
+.PlayerChangePassword.skeleton .Form .FieldsSection .FieldContainer .FieldTitle {
+  width: 100px;
+  margin-top: 30px;
+  margin-bottom: 15px;
+}
+.PlayerChangePassword.skeleton .Form .ButtonsSection .Button {
+  font-family: inherit;
+  border-radius: 50px;
+  background: transparent;
+  border: none;
+  overflow: hidden;
+}
+@container (max-width: 425px) {
+  .PlayerChangePassword .Form .ButtonReturn {
+    display: inline-flex;
+  }
+  .PlayerChangePassword .Form .Title {
+    display: none;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0.01;
+  }
+  1% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,415 @@
+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 "../../../../../ui-skeleton/dist/types/index";
+import "../../../../../general-input/dist/types/index";
+export class PamChangePassword {
+    constructor() {
+        this.currentPasswordValue = '';
+        this.newPasswordValue = '';
+        this.confirmPasswordValue = '';
+        this.isCurrentPasswordValid = false;
+        this.isNewPasswordValid = false;
+        this.isConfirmPasswordValid = false;
+        this.errorMsg = '';
+        this.currentPasswordValidationSchema = { mandatory: true, custom: [] };
+        this.newPasswordValidationSchema = { mandatory: true, custom: [] };
+        this.confirmPasswordValidationSchema = { mandatory: true, custom: [] };
+        this.initValidationSchemas = () => {
+            this.confirmPasswordValidationSchema = {
+                mandatory: true,
+                maxLength: this.policy.maximumPasswordLength,
+                minLength: this.policy.minimumPasswordLength,
+                custom: [
+                    this.policy.customValidationRules.find(validation => validation.rule === 'duplicate-input')
+                ]
+            };
+            this.newPasswordValidationSchema = {
+                mandatory: true,
+                maxLength: this.policy.maximumPasswordLength,
+                minLength: this.policy.minimumPasswordLength,
+                custom: this.policy.customValidationRules
+            };
+            this.currentPasswordValidationSchema = {
+                mandatory: true,
+                maxLength: this.policy.maximumPasswordLength,
+                minLength: this.policy.minimumPasswordLength,
+                custom: this.policy.customValidationRules
+            };
+        };
+        this.setErrorMsg = (key) => {
+            switch (key) {
+                case 'gm.pms.password_policy_failed':
+                    const values = {
+                        forbiddenLastPasswordsCount: this.policy.forbiddenLastPasswordsCount,
+                        minimumPasswordAgeLimitHours: this.policy.minimumPasswordAgeLimitHours,
+                        hours: this.policy.minimumPasswordAgeLimitHours > 1 ? 'hours' : 'hour'
+                    };
+                    this.errorMsg = translate(key, this.language, { values: values });
+                    break;
+                case 'gm.pms.password_not_verified_unauthorized':
+                    this.errorMsg = translate(key, this.language);
+                    break;
+                default:
+                    this.errorMsg = translate('errorMsgGeneric', this.language);
+            }
+        };
+        this.toggleScreen = () => {
+            window.postMessage({ type: 'PlayerAccountMenuActive', isMobile: this.isMobile }, window.location.href);
+        };
+        this.getPolicy = () => {
+            const url = new URL('/api/v1/players/password-management/password', this.endpoint);
+            const headers = new Headers();
+            headers.append('Accept', 'text/plain');
+            headers.append('Content-Type', 'application/json-patch+json');
+            const requestParams = {
+                method: 'GET',
+                headers: headers
+            };
+            fetch(url.href, requestParams)
+                .then((res) => res.status === 200 && res.json())
+                .then((res) => {
+                this.policy = res;
+                this.policy.customValidationRules.forEach((validation) => {
+                    validation.rule = validation.rule.toLowerCase();
+                    if (validation.rule === 'duplicateinput')
+                        validation.rule = 'duplicate-input';
+                });
+                this.initValidationSchemas();
+            })
+                .catch((err) => {
+                console.error(`${translate('errorMsgGeneric', this.language)}:`, err);
+                window.postMessage({ type: 'WidgetNotification', data: { type: 'error', message: translate('errorMsgGeneric', this.language) } }, window.location.href);
+            })
+                .finally(() => {
+                this.isSkeletonLoading = false;
+            });
+        };
+        this.submitNewPassword = (e) => {
+            e.preventDefault();
+            if (this.isBtnSubmitEnabled) {
+                const url = new URL('/api/v1/players/password-management/password', this.endpoint);
+                const headers = new Headers();
+                headers.append('accept', 'text/plain');
+                headers.append('Content-Type', 'application/json-patch+json');
+                const body = JSON.stringify({
+                    token: this.forgotMode === 'true' ? this.token : this.session,
+                    oldPassword: this.currentPasswordValue,
+                    newPassword: this.confirmPasswordValue
+                });
+                const requestParams = {
+                    method: 'PUT',
+                    headers: headers,
+                    body: body
+                };
+                fetch(url.href, requestParams)
+                    .then((res) => res.json())
+                    .then((res) => {
+                    if (res.errorCode === null && res.message === 'pms.password.update.success') {
+                        window.postMessage({ type: 'PasswordChangedSuccessfully' });
+                        window.postMessage({ type: 'WidgetNotification', data: { type: 'success', message: translate('successMsg', this.language) } }, window.location.href);
+                    }
+                    else {
+                        this.setErrorMsg(res.message);
+                        window.postMessage({ type: 'WidgetNotification', data: { type: 'error', message: this.errorMsg } }, window.location.href);
+                    }
+                })
+                    .catch((err) => console.error(err));
+            }
+        };
+        this.language = 'en';
+        this.endpoint = '';
+        this.session = '';
+        this.token = '';
+        this.forgotMode = '';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
+        this.translationUrl = '';
+        this.isBtnSubmitEnabled = false;
+        this.isSkeletonLoading = true;
+        this.isMobile = checkDeviceType() === 'mobile' || checkDeviceType() === 'tablet';
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    sendValidityStateHandler(e) {
+        this.isBtnSubmitEnabled = false;
+        switch (e.detail.name) {
+            case 'password':
+                this.isCurrentPasswordValid = e.detail.valid;
+                break;
+            case 'newPassword':
+                this.isNewPasswordValid = e.detail.valid;
+                break;
+            case 'newPasswordDuplicate':
+                this.isConfirmPasswordValid = e.detail.valid;
+                break;
+        }
+        if ((this.forgotMode === 'true' || this.isCurrentPasswordValid) && this.isNewPasswordValid && this.isConfirmPasswordValid) {
+            this.isBtnSubmitEnabled = true;
+        }
+    }
+    sendInputValueHandler(e) {
+        switch (e.detail.name) {
+            case 'password':
+                this.currentPasswordValue = e.detail.value;
+                break;
+            case 'newPassword':
+                this.newPasswordValue = e.detail.value;
+                break;
+            case 'newPasswordDuplicate':
+                this.confirmPasswordValue = e.detail.value;
+                break;
+        }
+    }
+    componentWillLoad() {
+        this.getPolicy();
+        if (this.translationUrl) {
+            return getTranslations(this.translationUrl);
+        }
+    }
+    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);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        if (this.isSkeletonLoading) {
+            return (h("div", { class: "PlayerChangePassword 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("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("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" }))))));
+        }
+        return (h("div", { class: "PlayerChangePassword", ref: el => this.stylingContainer = el }, h("form", { 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" }, this.forgotMode === 'false'
+            && h("general-input", { type: "password", action: "input", name: "password", language: this.language, "display-name": translate('passwordDisplayText', this.language), placeholder: translate('passwordPlaceholderText', this.language), validation: this.currentPasswordValidationSchema, clientStyling: this.clientStyling, "mb-source": this.mbSource, "hide-password-complexity": true }), h("general-input", { type: "password", action: "input", name: "newPassword", language: this.language, "display-name": translate('newPasswordDisplayText', this.language), placeholder: translate('newPasswordPlaceholderText', this.language), validation: this.newPasswordValidationSchema, clientStyling: this.clientStyling, "mb-source": this.mbSource }), h("general-input", { type: "password", action: "input", name: "newPasswordDuplicate", language: this.language, "display-name": translate('confirmPasswordDisplayText', this.language), placeholder: translate('confirmPasswordPlaceholderText', this.language), validation: this.confirmPasswordValidationSchema, "is-duplicate-input": true, clientStyling: this.clientStyling, "mb-source": this.mbSource })), h("section", { class: "ButtonsSection" }, h("button", { class: "Button", disabled: !this.isBtnSubmitEnabled, onClick: this.submitNewPassword }, translate('btnSubmit', this.language))))));
+    }
+    static get is() { return "pam-change-password"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pam-change-password.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pam-change-password.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "NWA Endpoint"
+                },
+                "attribute": "endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "SessionId"
+                },
+                "attribute": "session",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "token": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Token, nonce value, used in forgot mode"
+                },
+                "attribute": "token",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "forgotMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "forgotMode, can be eighter 'true' or 'false'"
+                },
+                "attribute": "forgot-mode",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client Styling"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client Styling Url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "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": "Translation Url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isBtnSubmitEnabled": {},
+            "isSkeletonLoading": {},
+            "isMobile": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "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/index.js

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