@everymatrix/general-player-login-form 0.0.367 → 0.0.368

package/src/GeneralPlayerLoginForm.svelte

@@ -1,529 +1,529 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile } from 'rvhelper';
-
-  import '@everymatrix/general-player-sms-verification-form';
-
-  // Native bridge
-  import { isNative, call as callNative, registerEventListener as registerNativeEventListener } from 'js-native-bridge';
-
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { LoginForm } from './translations';
-
-  export let endpoint:string = '';
-  export let imagedesktop:string = '';
-  export let captchakey:string = '';
-  export let lang:string = '';
-  export let smsverification = 'false';
-  export let simplepasswordvalidation:string = 'false';
-
-  let playerId;
-  let smsTokenId;
-  let startSmsValidation = false;
-  let smsTemplate: string = 'Please use this code {0} to activate your accout';
-  let smsSendApiFailed = false;
-  let number;
-  let mobileView:boolean = false;
-  let userAgent:string = window.navigator.userAgent;
-  let userValue:string = '';
-  let userPassword:string = '';
-  // @TODO Typescript type model for loginFormData
-  let loginFormData:any = {
-    username: '',
-    password: ''
-  }
-  let invalidName:boolean = false;
-  let invalidPassword:boolean = false;
-
-  let errorMessage:string = '';
-
-  let isLoading:boolean = false;
-  let passwordVisibilityToggle:HTMLElement;
-  let isPasswordVisible:boolean = false;
-  let isFormDataInvalid:boolean = true;
-
-  // Native bridge
-  let isOnNative:boolean = false;
-  let waitingForCredentials:boolean = false;
-
-  let nativeCredentials:any = {};
-
-  let regexValidators = {
-    user: /^(?!(?:.*\d){9})(?=(?:.*[a-zA-Z]){4})^[a-zA-Z\d]*$/,
-    email: /^[^<>()*{}=/|?`~[\]\\,;:\%#^\s@\"$&!@]+@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z0-9]+\.)+[a-zA-Z]{2,}))$/i,
-    password: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,20}$/
-  }
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  Object.keys(LoginForm).forEach((item:any) => {
-    addNewMessages(item, LoginForm[item]);
-  });
-
-  const doRecaptcha = ():Promise<string> => {
-    return new Promise((resolve, reject) => {
-      // @ts-ignore
-      grecaptcha.ready(() => {
-        // @ts-ignore
-        grecaptcha.execute(captchakey, { action: "submit" })
-          .then((token:string) => {
-            resolve(token);
-          });
-      });
-    });
-  }
-
-  const verifyTypeOfPassword = ():void => {
-    if (simplepasswordvalidation == 'true') {
-      regexValidators.password = /^(?!.* ).{8,20}$/;
-    }
-  }
-
-  const showPassword = ():void => {
-    isPasswordVisible = true;
-    togglePasswordVisibility();
-  }
-
-  const hidePassword = ():void => {
-    isPasswordVisible = false;
-    togglePasswordVisibility();
-  }
-
-  const togglePasswordVisibility = ():void => {
-    // @ts-ignore
-    passwordVisibilityToggle.type = isPasswordVisible ? "text" : "password";
-  }
-
-  const switchToRegister = ():void => {
-    window.postMessage({ type: "ToRegister" }, window.location.href);
-  }
-
-  const switchToForgotPassword = ():void => {
-    window.postMessage({ type: "NavForgotPassword" }, window.location.href);
-  }
-
-  const submitLoginForm = (e):void => {
-    e.preventDefault();
-    doRecaptcha()
-      .then((token:string) => {
-        if (checkUserIdentifier(userValue) && checkUserPassword(userPassword)) {
-          loginFormData = {
-            username: userValue,
-            password: userPassword,
-            token: token
-          };
-          isLoading = true;
-
-          window.postMessage({ type: "SubmitLoginForm", loginData: loginFormData }, window.location.href);
-        }
-      });
-  }
-
-  const checkUserIdentifier = (user:string):boolean => {
-    if ((regexValidators.user.test(user) || regexValidators.email.test(user)) && user.length <= 100) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  const checkUserPassword = (password:string):boolean => {
-    if (regexValidators.password.test(password)) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  const validateUserName = ():void => {
-    invalidName = !checkUserIdentifier(userValue);
-    isFormDataInvalid = (!invalidName && !invalidPassword && userPassword) ? false : true;
-  }
-
-  const validatePassword = ():void => {
-    invalidPassword = !checkUserPassword(userPassword);
-    isFormDataInvalid = (!invalidName && !invalidPassword && userValue) ? false : true;
-  }
-
-  const messageHandler = (e:MessageEvent):void => {
-    if (e.data) {
-      switch (e.data.type) {
-        case 'ModalLoader':
-          isLoading = false;
-          break;
-
-        case 'UserSessionID':
-          isLoading = false;
-          break;
-
-        case 'HasError':
-          errorMessage = e.data.error;
-          isLoading = false;
-          break;
-
-        case 'SmsVerification':
-          playerId = e.data.userid;
-          number = e.data.number;
-          startSmsValidation = e.data.startSmsValidation;
-          sendSmsToken(number, playerId);
-          break;
-        case 'SmsHasBeenValidated':
-          submitLoginForm();
-          break;
-      }
-    }
-  }
-
-  const sendSmsToken = async (number, playerId) => {
-    try {
-      const res = await fetch(`${endpoint}/player/sms/token`,{
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          accept: 'application/json',
-        },
-        body: JSON.stringify(
-          {
-            userId: playerId,
-            messageTemplate: smsTemplate,
-            destination: number,
-          }
-        ),
-      });
-
-      const data = await res.json();
-
-      if(res.ok) {
-        smsTokenId = data.id;
-        let smsMaxValidations = data.maxValidationAttempts;
-        smsSendApiFailed = false;
-      } else {
-        smsSendApiFailed = true;
-        throw new Error("Failed to fetch");
-      }
-    } catch(err) {
-      smsSendApiFailed = true;
-      console.error(err);
-    }
-  }
-
-  const initialLoad = ():void => {
-    setLocale(lang);
-  }
-
-  onMount(async () => {
-    window.addEventListener("message", messageHandler, false);
-    window.postMessage({ type: "LoginRegisterModalActive" }, window.location.href);
-
-    isOnNative = !!isNative(userAgent);
-    waitingForCredentials = isOnNative;
-
-    if (isOnNative) {
-      registerNativeEventListener(
-        'GET_CREDENTIALS',
-        (credentials:any):void => {
-          if (waitingForCredentials) {
-            if (credentials) {
-              const { username, password } = credentials;
-
-              userValue = username;
-              userPassword = password;
-
-              submitLoginForm();
-            } else {
-              waitingForCredentials = false;
-            }
-          }
-        }
-      );
-
-      const methodFound = callNative('GET_CREDENTIALS');
-
-      if (!methodFound) {
-        waitingForCredentials = false;
-      }
-    }
-
-    mobileView = isMobile(userAgent);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: endpoint && lang && initialLoad();
-  $: simplepasswordvalidation && verifyTypeOfPassword();
-</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}" />
-
-{#if isLoading}
-  <div class="ModalLoaderWrapper" part="ModalLoaderWrapper">
-    <div class="ModalLoader" part="ModalLoader"></div>
-  </div>
-{:else}
-  <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}" part="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
-    <div class="FormLeftSide" part="FormLeftSide">
-      {#if startSmsValidation}
-        <general-player-sms-verification-form
-          {endpoint}
-          {number}
-          playerid={playerId}
-          tokenid={smsTokenId}>
-        </general-player-sms-verification-form>
-      {:else}
-        <div class="FormHeader" part="FormHeader">
-          <h4 class="FormHeaderTitle" part="FormHeaderTitle">{$_('loginForm.loginTitle')}</h4>
-          <p class="FormHeaderSubtitle" part="FormHeaderSubtitle">{$_('loginForm.loginSubtitle')} <span class="FormRegisterCallToAction" on:click={() => switchToRegister()}>{$_('loginForm.loginSubtitleRegister')}</span></p>
-        </div>
-        {#if waitingForCredentials}
-          <p>Waiting for credentials</p>
-        {:else}
-          <div class="FormContent" part="FormContent">
-            <form id="signin" >
-              <div class="UserContainer {invalidName ? 'InvalidField' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
-                <label for="username">{$_('loginForm.loginUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
-                <input bind:value={userValue} on:keyup={validateUserName} type="text" id="email" name="email" autocomplete="username email" required/>
-                {#if invalidName}
-                  <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginUsernameError')}</p>
-                {/if}
-              </div>
-              <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
-                <label for="current-password">{$_('loginForm.loginPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
-                <input bind:value={userPassword} on:keyup={validatePassword} type="password" name="current-password" id="current-password" bind:this={passwordVisibilityToggle} autocomplete="current-password" aria-describedby="password-constraints" required/>
-                {#if isPasswordVisible}
-                  <svg on:click={() => hidePassword()} class="TogglePasswordVisibility" part="TogglePasswordVisibility" 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(--emfe-w-color-contrast, #07072A);}</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={() => showPassword()} class="TogglePasswordVisibility" part="TogglePasswordVisibility" 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(--emfe-w-color-contrast, #07072A);}</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 invalidPassword && simplepasswordvalidation !== 'true'}
-                  <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginPasswordError')}</p>
-                {/if}
-                {#if invalidPassword && simplepasswordvalidation === 'true'}
-                  <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginSimplePasswordError')}</p>
-                {/if}
-              </div>
-              {#if errorMessage}
-                <p class="ErrorMessage" part="ErrorMessage">{errorMessage}</p>
-              {/if}
-            <button class="SignInButton" part="SignInButton" on:click={(e) => submitLoginForm(e)} disabled={isFormDataInvalid} id="signin-button">{$_('loginForm.loginButton')}</button>
-            <button class="ForgotPasswordButton" part="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>{$_('loginForm.loginForgotPassword')}</button>
-          </form>
-          </div>
-        {/if}
-      {/if}
-    </div>
-    {#if !mobileView}
-      <div class="FormRightSide" part="FormRightSide" style="background-image: url('{imagedesktop}')"></div>
-    {/if}
-  </div>
-{/if}
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .grecaptcha-badge { opacity:0;}
-  .FormContainer {
-    display: inline-flex;
-    width: 100%;
-  }
-  .FormLeftSide, .FormRightSide {
-    flex: 1 1 100%;
-    padding: 50px;
-  }
-  .FormLeftSide {
-    background: var(--emfe-w-color-gray-50, #F9F8F8);
-  }
-  .FormRightSide {
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-  .FormHeaderTitle {
-    color: var(--emfe-w-color-black, #000000);
-    font-size: 20px;
-    font-weight: 300;
-    padding: 0;
-    text-transform: uppercase;
-    margin: 0;
-  }
-  .PasswordContainer {
-    position: relative;
-  }
-  .FormRequired {
-    color: var(--emfe-w-color-secondary, #FD2839);
-  }
-  .FormHeaderSubtitle {
-    color: var(--emfe-w-color-gray-300, #58586B);
-    font-size: 14px;
-    font-weight: 300;
-    margin: 5px 0 0 0;
-  }
-  .FormRegisterCallToAction {
-    color: var(--emfe-w-color-primary, #D0046C);
-    font-size: 14px;
-    font-weight: 400;
-    text-decoration: none;
-    cursor: pointer;
-  }
-  .FormContent {
-    padding-top: 20px;
-  }
-  .UserContainer, .PasswordContainer, .CaptchaContainer {
-    color: var(--emfe-w-color-gray-300, #58586B);
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 20px;
-    position: relative;
-    label {
-      font-size: 14px;
-      font-weight: 300;
-      padding-bottom: 5px;
-    }
-    input {
-      width: 100%;
-      height: 44px;
-      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
-      border-radius: 5px;
-      box-sizing:border-box;
-      padding: 5px 15px;
-      font-size: 16px;
-      line-height: 18px;
-    }
-    &.InvalidField {
-      input {
-        border: 1px solid var(--emfe-w-color-primary, #D0046C);
-        background: var(--emfe-w-color-primary-50, #FBECF4);
-        color: var(--emfe-w-color-primary, #D0046C);
-      }
-    }
-  }
-
-  .PasswordContainer input {
-    padding: 5px 30px 5px 15px;
-  }
-
-  .TogglePasswordVisibility {
-    height: 13px;
-    position: absolute;
-    right: 8px;
-    bottom: 45px;
-    &.InvalidToggle {
-      path, circle, rect {
-        fill: var(--emfe-w-color-primary, #D0046C);
-      }
-    }
-    path, circle, rect {
-      fill: var(--emfe-w-color-gray-300, #58586B);
-    }
-  }
-  .SignInButton {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    background: var(--emfe-w-color-primary, #D0046C);
-    border: 1px solid var(--emfe-w-color-primary, #D0046C);
-    border-radius: 5px;
-    width: 100%;
-    height: 60px;
-    padding: 0;
-    text-transform: uppercase;
-    font-size: 18px;
-    cursor: pointer;
-    &[disabled] {
-      background: var(--emfe-w-color-gray-100, #E6E6E6);
-      border: 1px solid var(--emfe-w-color-gray-150, #828282);
-      cursor: not-allowed;
-    }
-  }
-  .ForgotPasswordButton {
-    border: 0;
-    background: transparent;
-    font-size: 14px;
-    font-weight: 300;
-    color: var(--emfe-w-color-primary, #D0046C);
-    margin-top: 15px;
-    cursor: pointer;
-  }
-  .PasswordContainer, .UserContainer {
-    padding-bottom: 30px;
-  }
-
-  .InvalidInput {
-    color: var(--emfe-w-color-error, #FD2839);
-    font-size: 10px;
-    position: absolute;
-    top: 55px;
-    padding-top: 5px;
-    line-height: 10px;
-  }
-  .ErrorMessage {
-    margin: 0 0 15px 0;
-    font-size: 12px;
-    color: var(--emfe-w-color-error, #FD2839);
-  }
-  .FormMobileContainer {
-    height:100%;
-    .FormLeftSide {
-      padding: 40px 20px;
-    }
-    .SignInButton,
-    .UserContainer input,
-    .PasswordContainer input,
-    .CaptchaContainer {
-      max-width: unset;
-    }
-    // .SuccessMessageContainer {
-    //   margin: 0;
-    //   height: 100%;
-    // }
-  }
-
-  .ModalLoaderWrapper {
-    display: flex;
-    height: 100%;
-    align-items: center;
-  }
-
-  .ModalLoader {
-    display: block;
-    width: 80px;
-    height: 80px;
-    margin: 0 auto
-  }
-  .ModalLoader:after {
-    content: " ";
-    display: block;
-    width: 64px;
-    height: 64px;
-    margin: 8px;
-    border-radius: 50%;
-    border: 6px solid var(--emfe-w-color-primary, #D0046C);
-    border-color: var(--emfe-w-color-primary, #D0046C) transparent var(--emfe-w-color-primary, #D0046C) transparent;
-    animation: Loader 1.2s linear infinite;
-  }
-
-  /* MS Edge */
-  input::-ms-reveal,
-  input::-ms-clear {
-    display: none;
-  }
-
-@keyframes Loader {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { isMobile } from 'rvhelper';
+
+  import '@everymatrix/general-player-sms-verification-form';
+
+  // Native bridge
+  import { isNative, call as callNative, registerEventListener as registerNativeEventListener } from 'js-native-bridge';
+
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { LoginForm } from './translations';
+
+  export let endpoint:string = '';
+  export let imagedesktop:string = '';
+  export let captchakey:string = '';
+  export let lang:string = '';
+  export let smsverification = 'false';
+  export let simplepasswordvalidation:string = 'false';
+
+  let playerId;
+  let smsTokenId;
+  let startSmsValidation = false;
+  let smsTemplate: string = 'Please use this code {0} to activate your accout';
+  let smsSendApiFailed = false;
+  let number;
+  let mobileView:boolean = false;
+  let userAgent:string = window.navigator.userAgent;
+  let userValue:string = '';
+  let userPassword:string = '';
+  // @TODO Typescript type model for loginFormData
+  let loginFormData:any = {
+    username: '',
+    password: ''
+  }
+  let invalidName:boolean = false;
+  let invalidPassword:boolean = false;
+
+  let errorMessage:string = '';
+
+  let isLoading:boolean = false;
+  let passwordVisibilityToggle:HTMLElement;
+  let isPasswordVisible:boolean = false;
+  let isFormDataInvalid:boolean = true;
+
+  // Native bridge
+  let isOnNative:boolean = false;
+  let waitingForCredentials:boolean = false;
+
+  let nativeCredentials:any = {};
+
+  let regexValidators = {
+    user: /^(?!(?:.*\d){9})(?=(?:.*[a-zA-Z]){4})^[a-zA-Z\d]*$/,
+    email: /^[^<>()*{}=/|?`~[\]\\,;:\%#^\s@\"$&!@]+@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z0-9]+\.)+[a-zA-Z]{2,}))$/i,
+    password: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,20}$/
+  }
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(LoginForm).forEach((item:any) => {
+    addNewMessages(item, LoginForm[item]);
+  });
+
+  const doRecaptcha = ():Promise<string> => {
+    return new Promise((resolve, reject) => {
+      // @ts-ignore
+      grecaptcha.ready(() => {
+        // @ts-ignore
+        grecaptcha.execute(captchakey, { action: "submit" })
+          .then((token:string) => {
+            resolve(token);
+          });
+      });
+    });
+  }
+
+  const verifyTypeOfPassword = ():void => {
+    if (simplepasswordvalidation == 'true') {
+      regexValidators.password = /^(?!.* ).{8,20}$/;
+    }
+  }
+
+  const showPassword = ():void => {
+    isPasswordVisible = true;
+    togglePasswordVisibility();
+  }
+
+  const hidePassword = ():void => {
+    isPasswordVisible = false;
+    togglePasswordVisibility();
+  }
+
+  const togglePasswordVisibility = ():void => {
+    // @ts-ignore
+    passwordVisibilityToggle.type = isPasswordVisible ? "text" : "password";
+  }
+
+  const switchToRegister = ():void => {
+    window.postMessage({ type: "ToRegister" }, window.location.href);
+  }
+
+  const switchToForgotPassword = ():void => {
+    window.postMessage({ type: "NavForgotPassword" }, window.location.href);
+  }
+
+  const submitLoginForm = (e):void => {
+    e.preventDefault();
+    doRecaptcha()
+      .then((token:string) => {
+        if (checkUserIdentifier(userValue) && checkUserPassword(userPassword)) {
+          loginFormData = {
+            username: userValue,
+            password: userPassword,
+            token: token
+          };
+          isLoading = true;
+
+          window.postMessage({ type: "SubmitLoginForm", loginData: loginFormData }, window.location.href);
+        }
+      });
+  }
+
+  const checkUserIdentifier = (user:string):boolean => {
+    if ((regexValidators.user.test(user) || regexValidators.email.test(user)) && user.length <= 100) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  const checkUserPassword = (password:string):boolean => {
+    if (regexValidators.password.test(password)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  const validateUserName = ():void => {
+    invalidName = !checkUserIdentifier(userValue);
+    isFormDataInvalid = (!invalidName && !invalidPassword && userPassword) ? false : true;
+  }
+
+  const validatePassword = ():void => {
+    invalidPassword = !checkUserPassword(userPassword);
+    isFormDataInvalid = (!invalidName && !invalidPassword && userValue) ? false : true;
+  }
+
+  const messageHandler = (e:MessageEvent):void => {
+    if (e.data) {
+      switch (e.data.type) {
+        case 'ModalLoader':
+          isLoading = false;
+          break;
+
+        case 'UserSessionID':
+          isLoading = false;
+          break;
+
+        case 'HasError':
+          errorMessage = e.data.error;
+          isLoading = false;
+          break;
+
+        case 'SmsVerification':
+          playerId = e.data.userid;
+          number = e.data.number;
+          startSmsValidation = e.data.startSmsValidation;
+          sendSmsToken(number, playerId);
+          break;
+        case 'SmsHasBeenValidated':
+          submitLoginForm();
+          break;
+      }
+    }
+  }
+
+  const sendSmsToken = async (number, playerId) => {
+    try {
+      const res = await fetch(`${endpoint}/player/sms/token`,{
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          accept: 'application/json',
+        },
+        body: JSON.stringify(
+          {
+            userId: playerId,
+            messageTemplate: smsTemplate,
+            destination: number,
+          }
+        ),
+      });
+
+      const data = await res.json();
+
+      if(res.ok) {
+        smsTokenId = data.id;
+        let smsMaxValidations = data.maxValidationAttempts;
+        smsSendApiFailed = false;
+      } else {
+        smsSendApiFailed = true;
+        throw new Error("Failed to fetch");
+      }
+    } catch(err) {
+      smsSendApiFailed = true;
+      console.error(err);
+    }
+  }
+
+  const initialLoad = ():void => {
+    setLocale(lang);
+  }
+
+  onMount(async () => {
+    window.addEventListener("message", messageHandler, false);
+    window.postMessage({ type: "LoginRegisterModalActive" }, window.location.href);
+
+    isOnNative = !!isNative(userAgent);
+    waitingForCredentials = isOnNative;
+
+    if (isOnNative) {
+      registerNativeEventListener(
+        'GET_CREDENTIALS',
+        (credentials:any):void => {
+          if (waitingForCredentials) {
+            if (credentials) {
+              const { username, password } = credentials;
+
+              userValue = username;
+              userPassword = password;
+
+              submitLoginForm();
+            } else {
+              waitingForCredentials = false;
+            }
+          }
+        }
+      );
+
+      const methodFound = callNative('GET_CREDENTIALS');
+
+      if (!methodFound) {
+        waitingForCredentials = false;
+      }
+    }
+
+    mobileView = isMobile(userAgent);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: endpoint && lang && initialLoad();
+  $: simplepasswordvalidation && verifyTypeOfPassword();
+</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}" />
+
+{#if isLoading}
+  <div class="ModalLoaderWrapper" part="ModalLoaderWrapper">
+    <div class="ModalLoader" part="ModalLoader"></div>
+  </div>
+{:else}
+  <div class="FormContainer {mobileView ? 'FormMobileContainer' : ''}" part="FormContainer {mobileView ? 'FormMobileContainer' : ''}">
+    <div class="FormLeftSide" part="FormLeftSide">
+      {#if startSmsValidation}
+        <general-player-sms-verification-form
+          {endpoint}
+          {number}
+          playerid={playerId}
+          tokenid={smsTokenId}>
+        </general-player-sms-verification-form>
+      {:else}
+        <div class="FormHeader" part="FormHeader">
+          <h4 class="FormHeaderTitle" part="FormHeaderTitle">{$_('loginForm.loginTitle')}</h4>
+          <p class="FormHeaderSubtitle" part="FormHeaderSubtitle">{$_('loginForm.loginSubtitle')} <span class="FormRegisterCallToAction" on:click={() => switchToRegister()}>{$_('loginForm.loginSubtitleRegister')}</span></p>
+        </div>
+        {#if waitingForCredentials}
+          <p>Waiting for credentials</p>
+        {:else}
+          <div class="FormContent" part="FormContent">
+            <form id="signin" >
+              <div class="UserContainer {invalidName ? 'InvalidField' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
+                <label for="username">{$_('loginForm.loginUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
+                <input bind:value={userValue} on:keyup={validateUserName} type="text" id="email" name="email" autocomplete="username email" required/>
+                {#if invalidName}
+                  <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginUsernameError')}</p>
+                {/if}
+              </div>
+              <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
+                <label for="current-password">{$_('loginForm.loginPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
+                <input bind:value={userPassword} on:keyup={validatePassword} type="password" name="current-password" id="current-password" bind:this={passwordVisibilityToggle} autocomplete="current-password" aria-describedby="password-constraints" required/>
+                {#if isPasswordVisible}
+                  <svg on:click={() => hidePassword()} class="TogglePasswordVisibility" part="TogglePasswordVisibility" 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(--emfe-w-color-contrast, #07072A);}</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={() => showPassword()} class="TogglePasswordVisibility" part="TogglePasswordVisibility" 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(--emfe-w-color-contrast, #07072A);}</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 invalidPassword && simplepasswordvalidation !== 'true'}
+                  <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginPasswordError')}</p>
+                {/if}
+                {#if invalidPassword && simplepasswordvalidation === 'true'}
+                  <p class="InvalidInput" part="InvalidInput">{$_('loginForm.loginSimplePasswordError')}</p>
+                {/if}
+              </div>
+              {#if errorMessage}
+                <p class="ErrorMessage" part="ErrorMessage">{errorMessage}</p>
+              {/if}
+            <button class="SignInButton" part="SignInButton" on:click={(e) => submitLoginForm(e)} disabled={isFormDataInvalid} id="signin-button">{$_('loginForm.loginButton')}</button>
+            <button class="ForgotPasswordButton" part="ForgotPasswordButton" on:click={() => switchToForgotPassword()}>{$_('loginForm.loginForgotPassword')}</button>
+          </form>
+          </div>
+        {/if}
+      {/if}
+    </div>
+    {#if !mobileView}
+      <div class="FormRightSide" part="FormRightSide" style="background-image: url('{imagedesktop}')"></div>
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .grecaptcha-badge { opacity:0;}
+  .FormContainer {
+    display: inline-flex;
+    width: 100%;
+  }
+  .FormLeftSide, .FormRightSide {
+    flex: 1 1 100%;
+    padding: 50px;
+  }
+  .FormLeftSide {
+    background: var(--emfe-w-color-gray-50, #F9F8F8);
+  }
+  .FormRightSide {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  .FormHeaderTitle {
+    color: var(--emfe-w-color-black, #000000);
+    font-size: 20px;
+    font-weight: 300;
+    padding: 0;
+    text-transform: uppercase;
+    margin: 0;
+  }
+  .PasswordContainer {
+    position: relative;
+  }
+  .FormRequired {
+    color: var(--emfe-w-color-secondary, #FD2839);
+  }
+  .FormHeaderSubtitle {
+    color: var(--emfe-w-color-gray-300, #58586B);
+    font-size: 14px;
+    font-weight: 300;
+    margin: 5px 0 0 0;
+  }
+  .FormRegisterCallToAction {
+    color: var(--emfe-w-color-primary, #D0046C);
+    font-size: 14px;
+    font-weight: 400;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .FormContent {
+    padding-top: 20px;
+  }
+  .UserContainer, .PasswordContainer, .CaptchaContainer {
+    color: var(--emfe-w-color-gray-300, #58586B);
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 20px;
+    position: relative;
+    label {
+      font-size: 14px;
+      font-weight: 300;
+      padding-bottom: 5px;
+    }
+    input {
+      width: 100%;
+      height: 44px;
+      border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
+      border-radius: 5px;
+      box-sizing:border-box;
+      padding: 5px 15px;
+      font-size: 16px;
+      line-height: 18px;
+    }
+    &.InvalidField {
+      input {
+        border: 1px solid var(--emfe-w-color-primary, #D0046C);
+        background: var(--emfe-w-color-primary-50, #FBECF4);
+        color: var(--emfe-w-color-primary, #D0046C);
+      }
+    }
+  }
+
+  .PasswordContainer input {
+    padding: 5px 30px 5px 15px;
+  }
+
+  .TogglePasswordVisibility {
+    height: 13px;
+    position: absolute;
+    right: 8px;
+    bottom: 45px;
+    &.InvalidToggle {
+      path, circle, rect {
+        fill: var(--emfe-w-color-primary, #D0046C);
+      }
+    }
+    path, circle, rect {
+      fill: var(--emfe-w-color-gray-300, #58586B);
+    }
+  }
+  .SignInButton {
+    color: var(--emfe-w-color-white, #FFFFFF);
+    background: var(--emfe-w-color-primary, #D0046C);
+    border: 1px solid var(--emfe-w-color-primary, #D0046C);
+    border-radius: 5px;
+    width: 100%;
+    height: 60px;
+    padding: 0;
+    text-transform: uppercase;
+    font-size: 18px;
+    cursor: pointer;
+    &[disabled] {
+      background: var(--emfe-w-color-gray-100, #E6E6E6);
+      border: 1px solid var(--emfe-w-color-gray-150, #828282);
+      cursor: not-allowed;
+    }
+  }
+  .ForgotPasswordButton {
+    border: 0;
+    background: transparent;
+    font-size: 14px;
+    font-weight: 300;
+    color: var(--emfe-w-color-primary, #D0046C);
+    margin-top: 15px;
+    cursor: pointer;
+  }
+  .PasswordContainer, .UserContainer {
+    padding-bottom: 30px;
+  }
+
+  .InvalidInput {
+    color: var(--emfe-w-color-error, #FD2839);
+    font-size: 10px;
+    position: absolute;
+    top: 55px;
+    padding-top: 5px;
+    line-height: 10px;
+  }
+  .ErrorMessage {
+    margin: 0 0 15px 0;
+    font-size: 12px;
+    color: var(--emfe-w-color-error, #FD2839);
+  }
+  .FormMobileContainer {
+    height:100%;
+    .FormLeftSide {
+      padding: 40px 20px;
+    }
+    .SignInButton,
+    .UserContainer input,
+    .PasswordContainer input,
+    .CaptchaContainer {
+      max-width: unset;
+    }
+    // .SuccessMessageContainer {
+    //   margin: 0;
+    //   height: 100%;
+    // }
+  }
+
+  .ModalLoaderWrapper {
+    display: flex;
+    height: 100%;
+    align-items: center;
+  }
+
+  .ModalLoader {
+    display: block;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto
+  }
+  .ModalLoader:after {
+    content: " ";
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid var(--emfe-w-color-primary, #D0046C);
+    border-color: var(--emfe-w-color-primary, #D0046C) transparent var(--emfe-w-color-primary, #D0046C) transparent;
+    animation: Loader 1.2s linear infinite;
+  }
+
+  /* MS Edge */
+  input::-ms-reveal,
+  input::-ms-clear {
+    display: none;
+  }
+
+@keyframes Loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>