@everymatrix/player-change-password-nd 1.37.4

package/src/PlayerChangePasswordNd.svelte

@@ -0,0 +1,679 @@
+<svelte:options tag={null} />
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { TRANSLATIONS } from './translations';
+
+  export let lang:string = 'en';
+  export let simplepasswordvalidation:string = 'false';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let translationurl:string = '';
+
+  let customStylingContainer:HTMLElement;
+  let isLoading:boolean = false;
+  let userAgent:String = window.navigator.userAgent;
+  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
+  let activateSubmit:boolean = false;
+  const mediaQuery = window.matchMedia('(min-width: 768px)');
+
+  const regexValidators = {
+    password: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,20}$/
+  }
+  let invalidCurrentPassword:boolean = false;
+  let invalidNewPassword:boolean = false;
+  let invalidConfirmPassword:boolean = false;
+  let currentPasswordVisibilityToggle:HTMLElement;
+  let newPasswordVisibilityToggle:HTMLElement;
+  let confirmPasswordVisibilityToggle:HTMLElement;
+
+  let isCurrentPasswordVisible:boolean = false;
+  let isNewPasswordVisible:boolean = false;
+  let isConfirmPasswordVisible:boolean = false;
+  let oldPasswordSameAsNew:boolean = false;
+
+  let userCurrentPassword:string = '';
+  let userNewPassword:string = '';
+  let userConfirmPassword:string = '';
+  let passwordChanged:boolean = false;
+
+  let errorPasswordChanged:string = '';
+  let showErrorPasswordChanged:boolean = false;
+
+  const setTranslationUrl = ():void => {
+    let url:string = translationurl;
+
+    fetch(url).then((res:any) => res.json())
+    .then((res) => {
+      Object.keys(res).forEach((item:any):void => {
+        addNewMessages(item, res[item]);
+      });
+    }).catch((err:any) => {
+      console.log(err);
+    });
+  }
+
+  Object.keys(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
+  const togglePassword = (field) => {
+    switch(field) {
+      case 'userCurrentPassword':
+        isCurrentPasswordVisible = !isCurrentPasswordVisible;
+        currentPasswordVisibilityToggle.type = isCurrentPasswordVisible ? "text" : "password";
+        break;
+      case 'userNewPassword':
+        isNewPasswordVisible = !isNewPasswordVisible;
+        newPasswordVisibilityToggle.type = isNewPasswordVisible ? "text" : "password";
+        break;
+      case 'userConfirmPassword':
+        isConfirmPasswordVisible = !isConfirmPasswordVisible;
+        confirmPasswordVisibilityToggle.type = isConfirmPasswordVisible ? "text" : "password";
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  const verifyTypeOfPassword = ():void => {
+    if (simplepasswordvalidation == 'true') {
+      regexValidators.password = /^(?!.* ).{8,20}$/;
+    }
+  }
+
+  const validatePassword = (invalid, password, elem) => {
+    if(elem.id === "CurrentPassword") {
+      invalidCurrentPassword = !checkUserPassword(password);
+    } else if (elem.id === "NewPassword") {
+      invalidNewPassword = !checkUserPassword(password);
+      if(userCurrentPassword) {
+        oldPasswordSameAsNew = (userCurrentPassword === userNewPassword) ? true : false;
+      }
+      if(userConfirmPassword) {
+        invalidConfirmPassword = (userNewPassword === userConfirmPassword) ? !checkUserPassword(password) : true;
+      }
+    } else {
+        invalidConfirmPassword = (userNewPassword === userConfirmPassword) ? !checkUserPassword(password) : true;
+    }
+    checkSubmitState();
+  }
+
+  const checkUserPassword = (password:string) => {
+    if(regexValidators.password.test(password)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  const checkSubmitState = () => {
+    if(!invalidCurrentPassword && !invalidNewPassword && !invalidConfirmPassword && !oldPasswordSameAsNew && userCurrentPassword && userNewPassword && userConfirmPassword) {
+      activateSubmit = true;
+    } else {
+      activateSubmit = false;
+    }
+  }
+
+  const submitNewPassword = (e):void => {
+    e.preventDefault();
+    if(activateSubmit) {
+      window.postMessage({ type: 'ChangePassword', userCurrentPassword, userNewPassword }, window.location.href);
+    }
+  }
+
+  const toggleScreen = () => {
+    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
+  }
+
+
+  const backToHomePage = () => {
+    window.postMessage({ type: 'GoToHomepage' }, window.location.href);
+  }
+
+
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'PasswordChangedSuccessfully':
+          passwordChanged = true;
+          break;
+
+        case 'ShowPasswordChangedError':
+          showErrorPasswordChanged = e.data.showErrorPasswordChanged;
+          errorPasswordChanged = e.data.errorPasswordChanged;
+          break;
+      }
+    }
+  }
+
+  const setClientStyling = ():void => {
+    let sheet:HTMLElement = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: simplepasswordvalidation && verifyTypeOfPassword();
+  $: lang && initialLoad();
+  $: passwordChanged;
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: translationurl && setTranslationUrl();
+</script>
+
+<div bind:this={customStylingContainer}>
+  {#if isLoading}
+    <div class="ModalLoader"></div>
+  {:else}
+    <form class="PlayerChangePasswordWrapper { isMobile ? 'PlayerChangePasswordWrapperMobile' : '' } {mediaQuery.matches && isMobile ? 'PlayerChangePasswordWrapperTablet' : ''}">
+      {#if !passwordChanged}
+
+        {#if isMobile}
+          <div class="MenuReturnButton" on:click={() => toggleScreen()}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emw--color-primary, #22B04E);;}</style></defs><g transform="translate(-20 -158)">
+              <g transform="translate(20 158)">
+                <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)"/>
+              </g></g>
+            </svg>
+            <h2 class="ChangePasswordTitleMobile">{$_('titleChangePassword')}</h2>
+          </div>
+        {/if}
+        <h2 class="ChangePasswordTitle {isMobile ? 'ChangePasswordTitleNone' : ''}">{$_('titleChangePassword')}</h2>
+
+        <section class="PlayerChangePasswordContent">
+          <div class="PlayerChangePasswordBox { invalidCurrentPassword ? 'InvalidField' : '' }">
+            <label for="CurrentPassword">{$_('currentPassword')}</label>
+            <input bind:value={userCurrentPassword} on:blur={validatePassword(invalidCurrentPassword, userCurrentPassword, currentPasswordVisibilityToggle)} id="CurrentPassword" type="password" bind:this={currentPasswordVisibilityToggle} />
+            {#if isCurrentPasswordVisible}
+              <svg on:click={() => togglePassword('userCurrentPassword')} class="TogglePasswordVisibility {invalidCurrentPassword ? 'InvalidToggle' : ''} { isMobile ? 'TogglePasswordVisibilityMobile' : '' }" xmlns="http://www.w3.org/2000/svg" width="18.844" height="12.887" viewBox="0 0 18.844 12.887"><defs><style>.a{fill:var(--emw--color-white, #FFFFFF);}</style></defs><g transform="translate(-110.856 -23.242)"><circle class="a" cx="0.05" cy="0.05" r="0.05" transform="translate(121.017 31.148)"/><g transform="translate(117.499 27.37)"><path class="a" d="M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z" transform="translate(-142.164 -39.123)"/><path class="a" d="M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z" transform="translate(-136.413 -42.068)"/></g><g transform="translate(110.856 24.899)"><path class="a" d="M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z" transform="translate(-110.856 -33.157)"/><path class="a" d="M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z" transform="translate(-130.743 -29.617)"/></g><rect class="a" width="0.972" height="15.861" rx="0.486" transform="translate(114.827 23.858) rotate(-39.315)"/></g></svg>
+            {:else}
+              <svg on:click={() => togglePassword('userCurrentPassword')} class="TogglePasswordVisibility {invalidCurrentPassword ? 'InvalidToggle' : ''} { isMobile ? 'TogglePasswordVisibilityMobile' : '' }" xmlns="http://www.w3.org/2000/svg" width="18.843" height="10.5" viewBox="0 0 18.843 10.5"><defs><style>.a{fill:var(--emw--color-white, #FFFFFF);}</style></defs><g transform="translate(-14.185 -27.832)"><path class="a" d="M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z" transform="translate(0)"/><circle class="a" cx="2.779" cy="2.779" r="2.779" transform="translate(20.827 30.303)"/></g></svg>
+            {/if}
+            {#if invalidCurrentPassword}
+              {#if simplepasswordvalidation == 'true'}
+                <p class="InvalidInput">{$_('simplePasswordError')}</p>
+              {:else}
+                <p class="InvalidInput">{$_('invalidCurrentPassword')}</p>
+              {/if}
+            {/if}
+          </div>
+          <div class="PlayerChangePasswordBox { invalidNewPassword ? 'InvalidField' : '' }">
+            <label for="NewPassword">{$_('newPassword')}</label>
+            <input bind:value={userNewPassword} on:blur={validatePassword(invalidNewPassword, userNewPassword, newPasswordVisibilityToggle)} id="NewPassword" autocomplete="new-password" type="password" bind:this={newPasswordVisibilityToggle} />
+            {#if isNewPasswordVisible}
+              <svg on:click={() => togglePassword('userNewPassword')} class="TogglePasswordVisibility {invalidNewPassword ? 'InvalidToggle' : ''} { isMobile ? 'TogglePasswordVisibilityMobile' : '' }" xmlns="http://www.w3.org/2000/svg" width="18.844" height="12.887" viewBox="0 0 18.844 12.887"><defs><style>.a{fill:var(--emw--color-white, #FFFFFF);}</style></defs><g transform="translate(-110.856 -23.242)"><circle class="a" cx="0.05" cy="0.05" r="0.05" transform="translate(121.017 31.148)"/><g transform="translate(117.499 27.37)"><path class="a" d="M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z" transform="translate(-142.164 -39.123)"/><path class="a" d="M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z" transform="translate(-136.413 -42.068)"/></g><g transform="translate(110.856 24.899)"><path class="a" d="M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z" transform="translate(-110.856 -33.157)"/><path class="a" d="M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z" transform="translate(-130.743 -29.617)"/></g><rect class="a" width="0.972" height="15.861" rx="0.486" transform="translate(114.827 23.858) rotate(-39.315)"/></g></svg>
+            {:else}
+              <svg on:click={() => togglePassword('userNewPassword')} class="TogglePasswordVisibility {invalidNewPassword ? 'InvalidToggle' : ''} { isMobile ? 'TogglePasswordVisibilityMobile' : '' }" xmlns="http://www.w3.org/2000/svg" width="18.843" height="10.5" viewBox="0 0 18.843 10.5"><defs><style>.a{fill:var(--emw--color-white, #FFFFFF);}</style></defs><g transform="translate(-14.185 -27.832)"><path class="a" d="M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z" transform="translate(0)"/><circle class="a" cx="2.779" cy="2.779" r="2.779" transform="translate(20.827 30.303)"/></g></svg>
+            {/if}
+            {#if oldPasswordSameAsNew}
+              <p class="InvalidInputNew">{$_('invalidNewPassword')}</p>
+            {:else if invalidNewPassword}
+              {#if simplepasswordvalidation == 'true'}
+                <p class="InvalidInput">{$_('simplePasswordError')}</p>
+              {:else}
+                <p class="InvalidInput">{$_('invalidNewPasswordSecondary')}</p>
+              {/if}
+            {/if}
+          </div>
+          <div class="PlayerChangePasswordBox { invalidConfirmPassword ? 'InvalidField' : '' }">
+            <label for="ConfirmPassword">{$_('confirmPassword')}</label>
+            <input bind:value={userConfirmPassword} on:blur={validatePassword(invalidConfirmPassword, userConfirmPassword, confirmPasswordVisibilityToggle)} id="ConfirmPassword" type="password" bind:this={confirmPasswordVisibilityToggle} />
+            {#if isConfirmPasswordVisible}
+              <svg on:click={() => togglePassword('userConfirmPassword')} class="TogglePasswordVisibility {invalidConfirmPassword ? 'InvalidToggle' : ''} { isMobile ? 'TogglePasswordVisibilityMobile' : '' }" xmlns="http://www.w3.org/2000/svg" width="18.844" height="12.887" viewBox="0 0 18.844 12.887"><defs><style>.a{fill:var(--emw--color-white, #FFFFFF);}</style></defs><g transform="translate(-110.856 -23.242)"><circle class="a" cx="0.05" cy="0.05" r="0.05" transform="translate(121.017 31.148)"/><g transform="translate(117.499 27.37)"><path class="a" d="M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z" transform="translate(-142.164 -39.123)"/><path class="a" d="M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z" transform="translate(-136.413 -42.068)"/></g><g transform="translate(110.856 24.899)"><path class="a" d="M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z" transform="translate(-110.856 -33.157)"/><path class="a" d="M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z" transform="translate(-130.743 -29.617)"/></g><rect class="a" width="0.972" height="15.861" rx="0.486" transform="translate(114.827 23.858) rotate(-39.315)"/></g></svg>
+            {:else}
+              <svg on:click={() => togglePassword('userConfirmPassword')} class="TogglePasswordVisibility {invalidConfirmPassword ? 'InvalidToggle' : ''} { isMobile ? 'TogglePasswordVisibilityMobile' : '' }" xmlns="http://www.w3.org/2000/svg" width="18.843" height="10.5" viewBox="0 0 18.843 10.5"><defs><style>.a{fill:var(--emw--color-white, #FFFFFF);}</style></defs><g transform="translate(-14.185 -27.832)"><path class="a" d="M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z" transform="translate(0)"/><circle class="a" cx="2.779" cy="2.779" r="2.779" transform="translate(20.827 30.303)"/></g></svg>
+            {/if}
+            {#if invalidConfirmPassword}
+              <p class="InvalidInput">{$_('confirmPasswordInvalid')}</p>
+            {/if}
+          </div>
+        </section>
+        {#if showErrorPasswordChanged}
+          <div>
+            <p class="PasswordChangedError">{errorPasswordChanged}</p>
+          </div>
+        {/if}
+        <section class="PlayerChangePasswordButtonsArea">
+          <button class="PlayerChangePasswordSaveButton {activateSubmit ? '' : 'ButtonInactive'}"
+          disabled={!activateSubmit}
+          on:click={(e) => submitNewPassword(e)}>{$_('submitChangePassword')}</button>
+        </section>
+      {:else}
+        {#if isMobile}
+          <div class="MenuReturnButton" on:click={() => toggleScreen()}>
+            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+              viewBox="0 0 240.823 240.823" style="enable-background:new 0 0 240.823 240.823;" xml:space="preserve" width="18px" fill="var(--emw--color-gray-300, #58586B)">
+              <g>
+                <path id="Chevron_Right" d="M57.633,129.007L165.93,237.268c4.752,4.74,12.451,4.74,17.215,0c4.752-4.74,4.752-12.439,0-17.179
+                  l-99.707-99.671l99.695-99.671c4.752-4.74,4.752-12.439,0-17.191c-4.752-4.74-12.463-4.74-17.215,0L57.621,111.816
+                  C52.942,116.507,52.942,124.327,57.633,129.007z"/>
+              </g>
+            </svg>
+            <span>{$_('returnToMenu')}</span>
+          </div>
+        {/if}
+        <div class="PlayerChangePasswordHeader">
+          <h3>{$_('changePasswordText')}</h3>
+        </div>
+        <div class="ChangedPasswordSuccessfully">
+          <div class="SuccessWrapper">
+            <div class="IconContainer">
+              <div class="Checkmark"></div>
+            </div>
+            <div class="TextContainer">
+              <h3>{$_('passwordReset')}</h3>
+              <p>{$_('passwordResetConfirmation')}</p>
+            </div>
+          </div>
+          <div class="PlayerChangePasswordBackButton" on:click={() => backToHomePage()}>{$_('backButtonText')}</div>
+        </div>
+      {/if}
+    </form>
+  {/if}
+</div>
+
+<style lang="scss">
+
+
+.PlayerChangePasswordWrapper {
+    color: var(--emw--pam-contrast, var(--emw--color-contrast, #07072A)); 
+    padding: 50px;
+    max-width: 400px;
+    background-color: var(--emw--pam-typography, var(--emw--color-typography, #F1F1F1));
+    border-radius: 5%;
+  }
+
+  .ChangePasswordTitle {
+    font-size: var(--emw--font-size-x-large, 26px);
+    color: var(--emw--color-primary, #22B04E);
+    font-weight: var(--emw--font-weight-semibold, 500);
+  }
+
+  .ChangePasswordTitleMobile {
+    font-size: var(--emw--font-size-large, 20px);
+    color: var(--emw--color-primary, #22B04E);
+  }
+
+  .ChangePasswordTitleNone {
+    display: none;
+  }
+
+  .PlayerChangePasswordContent {
+    display: grid;
+    grid-column-gap: 50px;
+    grid-row-gap: 30px;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    padding-bottom: 30px;
+  }
+  .PlayerChangePasswordButtonsArea {
+    display: grid;
+    grid-column-gap: 10px;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+  }
+  .PlayerChangePasswordSaveButton, .PlayerChangePasswordCancelButton {
+    cursor: pointer;
+    border-radius: 5px;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    font-family: var(--emw--button-typography);
+    color: var(--emw--pam-typography, var(---emw--button-text-color, #FFFFFF));
+    text-transform: uppercase;
+    text-align: center;
+    transition-duration: 0.3s;
+    box-sizing: border-box;
+    padding: 10px;
+    &.ButtonInactive {
+      opacity: 0.3;
+    }
+  }
+  .PlayerChangePasswordCancelButton {
+    background: transparent;
+    font-family: var(--emw--button-typography);
+    border: 1px solid var(--emw--color-gray-300, #58586B);
+    &.PlayerButtonDisabled {
+      background: transparent;
+      border: 1px solid var(--emw--color-gray-300, #58586B);
+      cursor: not-allowed;
+    }
+  }
+  .PlayerChangePasswordSaveButton {
+    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));
+    border: 2px solid var(--emw--button-border-color, #0E5924);
+    border-radius: var(--emw--button-border-radius, 50px);
+    padding: 30px 0;
+    font-size: var(--emw--font-size-large, 20px);
+    font-family: var(--emw--button-typography);
+    color: var(--emw--button-text-color, #FFFFFF);
+    &.PlayerButtonDisabled {
+      background: transparent;
+      border: 1px solid var(--emw--color-gray-300, #58586B);
+      cursor: not-allowed;
+    }
+  }
+  .PlayerChangePasswordBox {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    label {
+      font-size: var(--emw--font-size-medium, 16px);
+      font-weight: var(--emw--font-weight-semibold, 500);
+      margin-bottom: 10px;
+    }
+    input {
+      font-family: inherit;
+      font-size: var(--emw--font-size-medium, 16px);
+      font-weight: var(--emw--font-weight-light, 300);
+      color: var(--emw--color-contrast, #07072A);
+      padding: 10px;
+      line-height: 16px;
+      border: 2px solid var(--emw--color-gray-100, #D6D6D6);
+      background: var(--emw-pam-typography, var(--emw--color-typography, #FFFFFF));
+      border-radius: 10px;
+      outline: none;
+      transition-duration: 0.3s;
+      &:focus, :focus-within, :focus-visible, :visited {
+        box-shadow: 0 0 0 1pt var(--emw--color-primary, #22B04E);
+      }
+    }
+    .FieldDisabled {
+      color: var(--emw--color-gray-300, #58586B);
+    }
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* MS Edge */
+    input::-ms-reveal,
+    input::-ms-clear {
+      display: none;
+    }
+
+    /* Firefox */
+    input[type=number] {
+      -moz-appearance: textfield;
+    }
+
+    &.InvalidField {
+      input {
+        border: 1px solid var(--emw--color-error, #FD2839);
+        background: var(--emw--color-pale, #FBECF4);
+        color: var(--emw--color-gray-300, #58586B);
+      }
+    }
+    &:last-child {
+      &.InvalidField {
+        .InvalidInput {
+          bottom: -16px;
+        }
+        .InvalidInputNew {
+          bottom: -24px;
+        }
+      }
+    }
+  }
+  .TogglePasswordVisibility {
+    height: 20px;
+    position: absolute;
+    right: 10px;
+    top: 38px;
+    cursor: pointer;
+    color: var(--emw--color-gray-300, #58586B);
+    &.InvalidToggle {
+      path, circle, rect {
+        fill: var(--emw--color-error, #FD2839);
+      }
+    }
+    path, circle, rect {
+      fill: var(--emw--color-gray-300, #58586B);
+    }
+  }
+
+  .TogglePasswordVisibilityMobile {
+    top: 35px;
+
+  }
+  .InvalidInput, .InvalidInputNew {
+    color: var(--emw--color-error, #FD2839);
+    font-size: var(--emw--font-size-2x-small, 10px);
+    padding-top: 5px;
+    margin: 0;
+    line-height: 12px;
+  }
+  .InvalidInputNew {
+    bottom: -24px;
+  }
+  .PasswordChangedError {
+    color: var(--emw--color-error, #FD2839);
+    font-size: var(--emw--font-size-medium, 16px);
+    line-height: 18px;
+    margin-top: 0;
+  }
+  .ChangedPasswordSuccessfully {
+    color: var(--emw--button-text-color, #FFFFFF);
+    position: relative;
+    .SuccessWrapper {
+      display: inline-flex;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+    .IconContainer {
+      width: 45px;
+      height: 45px;
+      border:1px solid var(--emw--color-valid, #48952a);
+      border-radius: var(--emw--button-border-radius, 50px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .Checkmark {
+      width: 12px;
+      height: 22px;
+      border: 1px solid var(--emw--color-valid, #48952a);
+      border-width: 0 2px 2px 0;
+      -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+      position: relative;
+      top: -3px;
+    }
+    h3{
+      font-size: var(--emw--font-size-large, 20px);
+      font-weight: var(--emw--font-weight-normal, 400);
+      margin: 10px 0;
+      color: var(--emw--color-valid, #48952a);
+    }
+    p {
+      margin: 0;
+      font-size: var(--emw--font-size-small, 14px);
+      font-weight: var(--emw--font-weight-light, 300);
+      color: var(--emw--pam-typography, var(--emw--color-contrast, #07072A));
+    }
+    .TextContainer {
+      display: flex;
+      flex-direction: column;
+      padding: 10px 20px;
+    }
+    .PlayerChangePasswordBackButton {
+      cursor: pointer;
+      border-radius: 5px;
+      width: 100%;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      color: var(--emw--button-text-color, #FFFFFF);
+      text-transform: uppercase;
+      text-align: center;
+      transition-duration: 0.3s;
+      box-sizing: border-box;
+      padding: 10px;
+      border: 1px solid var(--emw--color-primary, #22B04E);
+      background: var(--emw--color-primary, #22B04E);
+      max-width: 185px;
+      &:hover {
+        color: var(--emw--color-primary, #22B04E);
+        background: var(--emw--button-text-color, #FFFFFF);
+      }
+    }
+  }
+  .PlayerChangePasswordWrapperMobile {
+    height: 100%;
+    max-width: unset;
+    padding: 20px 20px 40px 20px;
+    display: flex;
+    flex-flow: column;
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+    }
+    .PlayerChangePasswordHeader {
+      h3 {
+        color: var( --emw-pam-color-primary, var(--emw--color-primary, #22B04E));
+        font-size: var(--emw--font-size-small, 14px);
+        font-weight: var(--emw--font-weight-normal, 400);
+      }
+    }
+    .PlayerChangePasswordBox {
+      label {
+        font-family: inherit;
+        color: var(--emw--color-gray-300, #58586B);
+        font-size: var(--emw--font-size-small, 14px);
+        font-weight: var(--emw--font-weight-normal, 400);
+      }
+      input {
+        font-family: inherit;
+        color: var(--emw--color-gray-300, #58586B);
+        font-size: var(--emw--font-size-x-small, 12px);
+        font-weight: var(--emw--font-weight-light, 300);
+      }
+    }
+    .PlayerChangePasswordButtonsArea {
+      grid-column-gap: 10px;
+    }
+    .PlayerChangePasswordSaveButton, .PlayerChangePasswordCancelButton {
+      font-family: inherit;
+      font-size: var(--emw--font-size-x-small, 12px);
+      height: 44px;
+      color: var(--emw--color-gray-300, #58586B);
+    }
+    .PlayerChangePasswordSaveButton {
+      font-family: inherit;
+      color: var(--emw--button-text-color, #FFFFFF);
+      &.ButtonInactive {
+        opacity: 0.3;
+      }
+    }
+    .ChangedPasswordSuccessfully {
+      color: var(--emw--color-gray-300, #58586B);
+    }
+  }
+  .MenuReturnButton{
+    font-family: inherit;
+    color: var(--emw--color-gray-300, #58586B);
+    display: inline-flex;
+    align-items: center;
+    column-gap: 10px;
+    margin-bottom: 10px;
+  }
+  .PlayerChangePasswordWrapperTablet {
+    padding: 40px 25% 100% 25%;
+    .PlayerChangePasswordContent {
+      grid-row-gap: 20px;
+    }
+    .MenuReturnButton {
+      font-family: inherit;
+      margin-bottom: 30px;
+      span {
+        font-size: var(--emw--font-size-large, 20px);
+      }
+    }
+
+    .PlayerChangePasswordBox {
+      label {
+        font-size: var(--emw--font-size-large, 20px);
+        font-family: inherit;
+      }
+      input {
+        font-family: inherit;
+        height: 30px;
+        font-size: var(--emw--font-size-large, 20px);
+        line-height: 30px;
+      }
+      .TogglePasswordVisibility {
+        width: 30px;
+        top: 46px;
+        &.InvalidToggle {
+          path, circle, rect {
+            fill: var(--emw--color-error, #FD2839);
+          }
+        }
+        path, circle, rect {
+          fill: var(--emw--color-gray-300, #58586B);
+        }
+      }
+      .InvalidInput {
+        font-size: var(--emw--font-size-medium, 16px);
+        bottom: -50px;
+      }
+      &:last-child {
+        .InvalidInput {
+          font-size: var(--emw--font-size-medium, 16px);
+          bottom: -50px;
+        }
+      }
+    }
+    .PlayerChangePasswordButtonsArea {
+      grid-column-gap: 40px;
+      .PlayerChangePasswordSaveButton, .PlayerChangePasswordCancelButton {
+        font-size: 18px;
+        font-family: inherit;
+        height: 56px;
+      }
+      .PlayerChangePasswordSaveButton {
+        color: var(--emw--button-text-color, #FFFFFF);
+        font-family: inherit;
+        &.ButtonInactive {
+          color: var(--emw--color-gray-300, #58586B);
+        }
+      }
+    }
+  }
+  
+  </style>