@everymatrix/general-player-forgot-password-form-nd 1.44.0 → 1.45.0

package/src/GeneralPlayerForgotPasswordFormNd.svelte

@@ -1,650 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { isMobile } from 'rvhelper';
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { TRANSLATIONS } from './translations';
-
-  export let endpoint:string = '';
-  export let forgotpasswordkey:string = '';
-  export let captchakey:string = '';
-  export let lang:string = 'en';
-  export let simplepasswordvalidation:string = 'false';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-  export let savecredentials:string = '';
-  export let hastosetpass:string = 'false';
-
-  let isLoading:boolean = false;
-  let forgotPasswordScreen:boolean = true;
-  let forgotPasswordError:boolean = false;
-  let forgotPasswordEmailSuccess:boolean = false;
-  let resetPasswordEmail:string = '';
-  let newPasswordScreen:boolean = false;
-  let passwordChangeSuccess:boolean = false;
-  let mobileView:boolean = false;
-  let invalidEmail:boolean = false;
-  let emailIsValid:boolean = false;
-  let userAgent:string = window.navigator.userAgent;
-  let userValue:string = '';
-  let errorMessage:string = '';
-  let activateSubmit:boolean = false;
-  
-  let invalidCurrentPassword:boolean = false;
-  let invalidNewPassword:boolean = false;
-  let invalidConfirmPassword:boolean = false;
-  let newPasswordVisibilityToggle:HTMLElement;
-  let confirmPasswordVisibilityToggle:HTMLElement;
-  
-  let isNewPasswordVisible:boolean = false;
-  let isConfirmPasswordVisible:boolean = false;
-  let oldPasswordSameAsNew:boolean = false;
-  
-  let userNewPassword:string = '';
-  let userConfirmPassword:string = '';
-  
-  let customStylingContainer:HTMLElement;
-  let displayNone:boolean = false;
-  let setPasswordError:boolean = false;
-
-  let titleText:string;
-  let subtitleText:string;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  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 regexValidators = {
-    email: /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
-    password: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,20}$/
-  };
-
-  const checkIsValidEmail = () => {
-    if (!invalidEmail) {
-      emailIsValid = true;
-    } else {
-      emailIsValid = false;
-    }
-  }
-
-  const checkEmailIdentifier = (email:string) => {
-    if (regexValidators.email.test(email) && email.length <= 100) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateEmail = () => {
-    invalidEmail = !checkEmailIdentifier(resetPasswordEmail);
-    checkIsValidEmail();
-  }
-
-  const togglePassword = (field) => {
-    switch(field) {
-      case 'userNewPassword':
-        isNewPasswordVisible = !isNewPasswordVisible;
-        newPasswordVisibilityToggle.type = isNewPasswordVisible ? "text" : "password";
-        break;
-      case 'userConfirmPassword':
-        isConfirmPasswordVisible = !isConfirmPasswordVisible;
-        confirmPasswordVisibilityToggle.type = isConfirmPasswordVisible ? "text" : "password";
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  const switchContent = (name:string) => {
-    switch (name) {
-      case 'ToEmailSuccess':
-        forgotPasswordError = false;
-        forgotPasswordScreen = false;
-        forgotPasswordEmailSuccess = true;
-        break;
-
-      case 'ToReset':
-        forgotPasswordScreen = false;
-        newPasswordScreen = true;
-        break;
-
-      case 'ToSuccess':
-        newPasswordScreen = false;
-        passwordChangeSuccess = true;
-        break;
-      default:
-        // do nothing
-        break;
-    }
-  }
-
-  const goToLogin = () => {
-    window.postMessage({ type: "ToLogin" }, window.location.href);
-  }
-
-  const doRecaptcha = () => {
-    return new Promise((resolve, reject) => {
-      grecaptcha.ready(() => {
-        grecaptcha.execute(captchakey, { action: "submit" }).then((token) => {
-          resolve(token);
-        });
-      });
-    });
-  }
-
-  const sendEmail = (e):void => {
-    e.preventDefault();
-    doRecaptcha().then((token) => {
-      let url:any = new URL(`${endpoint}/v1/player/resetpassword`);
-
-      let dataEmailOptions = {
-        method: "POST",
-        headers: {
-          'Content-Type': "application/json",
-          'Accept': 'application/json',
-          'g-recaptcha-response': token,
-        },
-      };
-
-      url.searchParams.append('email', resetPasswordEmail);
-
-      fetch(url, dataEmailOptions)
-        .then((res:any) => {
-          if (res.status == 200) {
-            switchContent('ToEmailSuccess');
-          } else {
-            forgotPasswordError = true;
-          }
-        });
-    });
-  }
-
-  const sendPassword = (e):void => {
-    e.preventDefault();
-    let url:any = new URL(`${endpoint}/v1/player/ResetPasswordByHashKey`);
-
-    let dataPassword = {
-      hashKey: forgotpasswordkey,
-      plainTextPassword: userNewPassword,
-    };
-
-    let dataPasswordOptions = {
-      method: "POST",
-      headers: {
-        'Content-Type': "application/json",
-        'Accept': 'application/json',
-      },
-      body: JSON.stringify(dataPassword)
-    };
-
-    fetch(url, dataPasswordOptions)
-      .then((res:any) => {
-        if (res.status == 200) {
-          setPasswordError = false;
-          switchContent('ToSuccess');
-        } else {
-          setPasswordError = true;
-        }
-        return res.json();
-      }).then((err:any) => {
-        errorMessage = err.error;
-      });
-  }
-
-  const verifyForgotPasswordScreen = () => {
-    if (forgotpasswordkey && forgotpasswordkey.length > 0) {
-      switchContent('ToReset');
-    }
-  }
-
-  const checkSubmitState = () => {
-    if(!invalidNewPassword && !invalidConfirmPassword && userNewPassword && userConfirmPassword) {
-      activateSubmit = true;
-    } else {
-      activateSubmit = false;
-    }
-  }
-
-  const checkUserPassword = (password:string) => {
-    if (simplepasswordvalidation == 'true') {
-      regexValidators.password = /^(?!.* ).{8,20}$/;
-    }
-
-    if (regexValidators.password.test(password)) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  const validatePassword = (invalid, password, elem) => {
-    if (elem.id === "new-password") {
-      invalidNewPassword = !checkUserPassword(password);
-
-      if (userConfirmPassword) {
-        invalidConfirmPassword = (userNewPassword === userConfirmPassword) ? !checkUserPassword(password) : true;
-      }
-    } else {
-      invalidConfirmPassword = (userNewPassword === userConfirmPassword) ? !checkUserPassword(password) : true;
-    }
-    checkSubmitState();
-  }
-
-  const initialLoad = () => {
-    setLocale(lang);
-  }
-
-  const setTexts = ():void => {
-    titleText = hastosetpass === 'true' ? $_('hasToSetPassTitle') : $_('forgotPasswordTitle');
-    subtitleText = hastosetpass === 'true' ? $_('resetPasswordSubtitle') : '';
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    displayNone = true;
-
-    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);
-        setTimeout(() => { displayNone = false; }, 500);
-      });
-  }
-
-  onMount(async () => {
-    if(isMobile(userAgent)) {
-      mobileView = true;
-    }
-  });
-
-  $: forgotpasswordkey && verifyForgotPasswordScreen();
-  $: lang && initialLoad();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-  $: translationurl && setTranslationUrl();
-  $: hastosetpass && lang && setTexts();
-</script>
-
-<svelte:head>
-  {#if captchakey}
-    <script src="//www.google.com/recaptcha/api.js?render={captchakey}" async defer></script>
-  {/if}
-</svelte:head>
-
-<div class="g-recaptcha" data-sitekey="{captchakey}" />
-<div class="GeneralPlayerForgotPasswordForm" bind:this={customStylingContainer}>
-  {#if isLoading}
-    <div class="ModalLoader"></div>
-  {:else}
-    <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
-      {#if forgotPasswordScreen}
-        <div class="FormForgotPassword">
-          <div class="FormHeader">
-            <button class="backButtonForgotPassword" on:click={() => goToLogin()}>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));}</style></defs><path class="a" d="M12,0,9.818,2.182l8.26,8.26H0v3.117H18.078l-8.26,8.26L12,24,24,12Z" transform="translate(24 24) rotate(180)"/></svg>
-              {$_('goToLogin')}
-            </button>
-            <h4 class="FormHeaderTitle" part="FormHeaderTitle">
-              {titleText}
-            </h4>
-            {#if subtitleText}
-              <p class="FormHeaderSubtitle" part="FormHeaderSubtitle">
-                {subtitleText}
-              </p>
-            {/if}
-          </div>
-          <form class="FormContent" part="FormContent">
-            <div class="ResetPasswordByEmail {invalidEmail ? 'InvalidField' : ''}" part="ResetPasswordByEmail {invalidEmail ? 'InvalidField' : ''}">
-              <label for="ResetPasswordByEmail">{$_('forgotPasswordEmail')}:<span class="FormRequired" part="FormRequired">*</span></label>
-              <input type="text" bind:value={resetPasswordEmail} on:keyup={validateEmail} id="ResetPasswordByEmail" />
-              {#if invalidEmail}
-                <p class="ForgotPasswordError" part="ForgotPasswordError">{$_('forgotPasswordEmailInputError')}</p>
-              {/if}
-              {#if forgotPasswordError}
-                <p class="ForgotPasswordError" part="ForgotPasswordError">{$_('forgotPasswordEmailError')}</p>
-              {/if}
-            </div>
-            <button class="resetPasswordButton" part="resetPasswordButton" disabled={!emailIsValid} on:click={(e) => sendEmail(e)}>{$_('forgotPasswordReset')}</button>
-          </form>
-        </div>
-      {:else if forgotPasswordEmailSuccess}
-        <div class="FormForgotPassword" part="FormForgotPassword">
-          <div class="FormContent" part="FormContent">
-            <div class="NewPasswordSuccess" part="NewPasswordSuccess">
-              <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><defs><style>.a{fill:#16ce16;}.b,.d{fill:none;}.b{stroke:#16ce16;stroke-width:2px;}.c{stroke:none;}</style></defs><g transform="translate(7106 -8970)"><g transform="translate(-7360.574 8503.438)"><path class="a" d="M16.1,28,0,11.9,3.267,8.633,16.1,21.233,37.333,0,40.6,3.267Z" transform="translate(264.272 482.563)"/></g><g class="b" transform="translate(-7106 8970)"><circle class="c" cx="30" cy="30" r="30"/><circle class="d" cx="30" cy="30" r="29"/></g></g></svg>
-              <h4>{$_('forgotPasswordSuccess')}</h4>
-              <p>{$_('forgotPasswordSuccessDescription')}</p>
-            </div>
-          </div>
-        </div>
-      {:else if newPasswordScreen}
-        <div class="FormForgotPassword test" part="FormForgotPassword test">
-          <div class="FormHeader" part="FormHeader">
-            <h4 class="FormHeaderTitle" part="FormHeaderTitle">
-              {titleText}
-            </h4>
-            
-            {#if subtitleText}
-              <p class="FormHeaderSubtitle" part="FormHeaderSubtitle">
-                {subtitleText}
-              </p>
-            {/if}
-          </div>
-          <form class="FormContent" part="FormContent">
-            <div class="NewPassword" part="NewPassword">
-              <label for="NewPassword">{$_('forgotNewPasswordPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
-              <input type="password" bind:value={userNewPassword} on:keyup={validatePassword(invalidNewPassword, userNewPassword, newPasswordVisibilityToggle)} id="new-password" autocomplete={savecredentials ? "new-password" : "off" } bind:this={newPasswordVisibilityToggle} />
-              {#if isNewPasswordVisible}
-                <svg on:click={() => togglePassword('userNewPassword')} class="TogglePasswordVisibility {invalidNewPassword ? 'InvalidToggle' : ''}" 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' : ''}" 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 invalidNewPassword}
-                {#if simplepasswordvalidation == 'true'}
-                  <p class="InvalidInput" part="InvalidInput">{$_('simplePasswordError')}</p>
-                {:else}
-                  <p class="InvalidInput" part="InvalidInput">{$_('forgotNewPasswordPasswordError')}</p>
-                {/if}
-              {/if}
-            </div>
-            <div class="ConfirmPassword" part="ConfirmPassword">
-              <label for="RetypePassword">{$_('forgotNewPasswordConfirmPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
-              <input type="password" bind:value={userConfirmPassword} on:keyup={validatePassword(invalidConfirmPassword, userConfirmPassword, confirmPasswordVisibilityToggle)} id="RetypePassword" bind:this={confirmPasswordVisibilityToggle} />
-              {#if isConfirmPasswordVisible}
-                <svg on:click={() => togglePassword('userConfirmPassword')} class="TogglePasswordVisibility {invalidConfirmPassword ? 'InvalidToggle' : ''}" 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' : ''}" 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" part="InvalidInput">{$_('forgotNewPasswordConfirmPasswordError')}</p>
-              {/if}
-            </div>
-            {#if setPasswordError}
-            <p class="ErrorMessage" part="ErrorMessage">{errorMessage}</p>
-            {/if}
-            <button class="resetPasswordButton" part="resetPasswordButton" disabled="{!activateSubmit}" on:click={(e) => sendPassword(e)}>{$_('forgotNewPasswordButton')}</button>
-          </form>
-        </div>
-      {:else if passwordChangeSuccess}
-        <div class="FormForgotPassword" part="FormForgotPassword">
-          <div class="FormContent" part="FormContent">
-            <div class="NewPasswordSuccess" part="NewPasswordSuccess">
-              <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><defs><style>.a{fill:var(--emw--color-valid, var(--emw--color-valid, #48952a));}.b,.d{fill:none;}.b{stroke:var(--emw--color-valid, var(--emw--color-green, #48952a));stroke-width:2px;}.c{stroke:none;}</style></defs><g transform="translate(7106 -8970)"><g transform="translate(-7360.574 8503.438)"><path class="a" d="M16.1,28,0,11.9,3.267,8.633,16.1,21.233,37.333,0,40.6,3.267Z" transform="translate(264.272 482.563)"/></g><g class="b" transform="translate(-7106 8970)"><circle class="c" cx="30" cy="30" r="30"/><circle class="d" cx="30" cy="30" r="29"/></g></g></svg>
-              <h4>{$_('forgotChangePasswordTitle')}</h4>
-              <p>{$_('forgotChangePasswordDescription')}</p>
-            </div>
-            <button class="resetPasswordButton" part="resetPasswordButton" on:click={() => goToLogin()}>{$_('forgotChangePasswordLogin')}</button>
-          </div>
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-
-<style lang="scss">
-
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  input, select {
-      font-family: inherit;
-    }
-
-  .GeneralPlayerForgotPasswordForm {
-    height: auto;
-  }
-
-  .backButtonForgotPassword {
-    display: inline-flex;
-    color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-    height: 24px;
-    line-height: 24px;
-    border-radius: var(--emw--border-radius-medium, 15px);
-    border: none;
-    background: transparent;
-    padding: 0;
-    text-transform: uppercase;
-    font-size: var(--emw--font-size-medium, 16px);
-    cursor: pointer;
-    margin-bottom: 30px;
-  }
-
-  .backButtonForgotPassword svg {
-    width: 24px;
-    height: 24px;
-    margin-right: 20px;
-    fill: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-  }
-
-  .FormContainer {
-    width: 100%;
-  }
-  .FormForgotPassword {
-    background: var(--emw--registration-color-bg, var(--emw--color-gray-50, #F9F8F8));
-  }
-  .FormHeaderTitle {
-    color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-    font-size: var(--emw--font-size-large, 20px);
-    font-weight: var(--emw--font-weight-light, 300);
-    padding: 0;
-    text-transform: uppercase;
-    margin: 0;
-  }
-
-  .FormHeaderSubtitle{
-    color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-    font-weight: var(--emw--font-weight-light, 300);
-    padding-top: 14px;
-  }
-
-  .FormRequired {
-    color: var(--emw--color-error, #ed0909);
-  }
-
-  .ForgotPasswordError {
-    color: var(--emw--color-error, #ed0909);
-    font-size: 10px;
-    line-height: 10px;
-    margin-top: 10px;
-  }
-
-  .FormContent {
-    padding-top: 20px;
-  }
-
-  .NewPasswordSuccess {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: space-around;
-    align-items: center;
-  }
-
-  .NewPasswordSuccess h4 {
-    margin-top: 10px;
-    color: var(--emw--color-valid, var(--emw--color-valid, #48952a));
-    font-size: 28px;
-    font-weight: 500;
-    padding: 0;
-    text-transform: uppercase;
-  }
-
-  .NewPasswordSuccess p {
-    text-align: center;
-    font-size: var(--emw--font-size-medium, 16px);
-    color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-    text-transform: initial;
-    padding: 15px 0;
-    margin-bottom: 110px;
-  }
-
-  .TogglePasswordVisibility {
-    height: 19px;
-    position: absolute;
-    right: 8px;
-    top: 34px;
-    cursor: pointer;
-    &.InvalidToggle {
-      path, circle, rect {
-        fill: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-      }
-    }
-    path, circle, rect {
-      fill: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-    }
-  }
-
-  .ResetPasswordByEmail, .NewPassword, .ConfirmPassword {
-    color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 20px;
-    position: relative;
-    label {
-      font-size: var(--emw--font-size-small, 14px);
-      font-weight: var(--emw--font-weight-light, 300);
-      padding-bottom: 5px;
-    }
-
-    input {
-      width: 100%;
-      height: 44px;
-      border-radius: var(--emw--border-radius-medium, 15px);
-      border: 1px solid var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-      padding: 5px;
-      font-size: var(--emw--font-size-small, 14px);
-      box-sizing:border-box;
-      padding: 5px 15px;
-      font-size: var(--emw--font-size-medium, 16px);
-      line-height: 18px;
-
-      &:focus {
-        border: 2px solid var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
-        outline: none;
-      }
-    }
-    &.InvalidField {
-      input {
-        border: 1px solid var(--emw--color-error, #ed0909);
-        background: var(--emw--color-pale, #FBECF4);
-        color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
-      }
-    }
-  }
-
-
-
-  .resetPasswordButton {
-    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);
-    color: var(--emw--button-typography, var(--emw--button-text-color, #FFFFFF));
-    font-family: var(--emw--button-typography);
-    width: 100%;
-    height: 60px;
-    padding: 0;
-    text-transform: uppercase;
-    font-size: var(--emw--font-size-medium, 16px);
-    cursor: pointer;
-    &[disabled] {
-      background: var(--emw--color-gray-100, #E6E6E6);
-      border: 1px solid var(--emw--color-gray-150, #828282);
-      cursor: not-allowed;
-    }
-  }
-
-  .ResetPasswordByEmail, .NewPassword, .ConfirmPassword {
-    padding-bottom: 30px;
-  }
-  .ResetPasswordByEmail {
-    .InvalidInput {
-      bottom: -3px;
-    }
-  }
-
-  .InvalidInput {
-    color: var(--emw--color-error, #ed0909);
-    font-size: 10px;
-    position: absolute;
-    bottom: 10px;
-    line-height: 10px;
-  }
-
-  .ErrorMessage {
-    margin: 0 0 15px 0;
-    font-size: var(--emw--font-size-x-small, 12px);
-    color: var(--emw--color-error, #ed0909);
-  }
-
-  .FormForgotPassword {
-    padding: 50px;
-  }
-
-  .FormMobileContainer {
-    height: 100%;
-    background-color: var(--emw--color-gray-50, #F9F8F8);
-
-    .resetPasswordButton,
-    .ResetPasswordByEmail input {
-      max-width: unset;
-      border-radius: var(--emw--border-radius-medium, 15px);
-    }
-  }
-
-  .FormMobileContainer {
-    height: 100%;
-
-    .FormForgotPassword {
-      padding: 40px 20px;
-    }
-
-    .resetPasswordButton,
-    .UserContainer input {
-      max-width: unset;
-    }
-  }
-
-  /* MS Edge */
-  input::-ms-reveal,
-  input::-ms-clear {
-    display: none;
-  }
-</style>

package/src/i18n.js

@@ -1,27 +0,0 @@
-import {
-  dictionary,
-  locale,
-  addMessages,
-  _
-} from 'svelte-i18n';
-
-function setupI18n({ withLocale: _locale, translations }) {
-  locale.subscribe((data) => {
-    if (data == null) {
-      dictionary.set(translations);
-      locale.set(_locale);
-    }
-  }); // maybe we will need this to make sure that the i18n is set up only once
-  /*dictionary.set(translations);
-  locale.set(_locale);*/
-}
-
-function addNewMessages(lang, dict) {
-  addMessages(lang, dict);
-}
-
-function setLocale(_locale) {
-  locale.set(_locale);
-}
-
-export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -1,4 +0,0 @@
-import GeneralPlayerForgotPasswordForm from './GeneralPlayerForgotPasswordFormNd.svelte';
-
-!customElements.get('general-player-forgot-password-form-nd') && customElements.define('general-player-forgot-password-form-nd', GeneralPlayerForgotPasswordForm);
-export default GeneralPlayerForgotPasswordForm;