@everymatrix/general-player-register-form-step1-nd 1.37.4

package/src/GeneralPlayerRegisterFormStep1Nd.svelte

@@ -0,0 +1,578 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { TRANSLATIONS } from './translations';
+
+  export let lang:string = '';
+  // Possible disabled fields: ['email', 'username', 'name', 'password', 'confirmPassword', 'securityQuestion', 'securityAnswer', 'promoCode']
+  export let disabledfields:string = '';
+  export let defaultoptions:string = '';
+  export let simplepasswordvalidation:string = 'false';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let translationurl:string = '';
+  export let savecredentials:string = '';
+  export let custominputtextswitch:string = 'false';
+
+  let invalidEmail:boolean = false;
+  let invalidName:boolean = false;
+  let invalidPassword:boolean = false;
+  let invalidConfirmPassword:boolean = false;
+  let invalidSecurityQuestion:boolean = false;
+  let invalidSecurityAnswer:boolean = false;
+  let invalidPromoCode:boolean = false;
+
+  let emailFocus:boolean = false;
+  let usernameFocus:boolean = false;
+  let passwordFocus:boolean = false;
+  let confirmPasswordFocus:boolean = false;
+  let securityQFocus:boolean = false;
+  let securityAFocus:boolean = false;
+  let promoCodeFocus:boolean = false;
+
+  let disabledFieldsList:Array<string>;
+
+  let userValue:string = '';
+  let userEmail:string = '';
+  let userPassword:string = '';
+  let confirmUserPassword:string = '';
+  let securityQuestion:string = '';
+  let securityAnswer:string = '';
+  let promoCode:string = '';
+
+  let isPasswordVisible:boolean = false;
+  let isConfirmPasswordVisible:boolean = false;
+
+  let passwordVisibilityToggle:HTMLElement;
+  let confirmPasswordVisibilityToggle:HTMLElement;
+
+  let isValid:boolean = false;
+
+  let customStylingContainer:HTMLElement;
+  let displayNone:boolean = false;
+
+  let regexValidators:any = {
+    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}$/,
+    document: /^(?=.*[a-zA-Z0-9])[a-zA-Z0-9\s]+$/
+  }
+  
+  // 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 checkIsValid = ():void => {
+    isValid =  !(invalidEmail || invalidName || invalidPassword || invalidConfirmPassword || invalidSecurityQuestion || invalidSecurityAnswer || invalidPromoCode);
+
+    // not adding invalidPromoCode to this check because the business case states that it is an optional field
+    if (userValue.length <= 0 || userEmail.length <= 0 || userPassword.length <= 0 || confirmUserPassword.length <= 0 || securityQuestion.length <= 0 || securityAnswer.length <= 0) {
+      isValid = false;
+    }
+  }
+
+  const switchToLogin = ():void => {
+    window.postMessage({ type: "ToLogin" }, window.location.href);
+  }
+
+  const verifyTypeOfPassword = ():void => {
+    if (simplepasswordvalidation == 'true') {
+      regexValidators.password = /^(?!.* ).{8,20}$/;
+    }
+  }
+
+  const checkEmailIdentifier = (email:string):boolean => {
+    if (regexValidators.email.test(email) && email.length <= 100) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateEmail = ():void => {
+    invalidEmail = !checkEmailIdentifier(userEmail);
+    checkIsValid();
+  }
+
+  const checkUserIdentifier = (user:string):boolean => {
+    if (regexValidators.user.test(user) && user.length <= 20) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateUserName = ():void => {
+    invalidName = !checkUserIdentifier(userValue);
+    checkIsValid();
+  }
+
+  const showPassword = ():void => {
+    isPasswordVisible = true;
+    togglePasswordVisibility();
+  }
+
+  const showConfirmPassword = ():void => {
+    isConfirmPasswordVisible = true;
+    toggleConfirmPasswordVisibility();
+  }
+
+  const hidePassword = ():void => {
+    isPasswordVisible = false;
+    togglePasswordVisibility();
+  }
+
+  const hideConfirmPassword = ():void => {
+    isConfirmPasswordVisible = false;
+    toggleConfirmPasswordVisibility();
+  }
+
+  const togglePasswordVisibility = ():void => {
+    passwordVisibilityToggle.type = isPasswordVisible ? "text" : "password";
+  }
+
+  const toggleConfirmPasswordVisibility = ():void => {
+    confirmPasswordVisibilityToggle.type = isConfirmPasswordVisible ? "text" : "password";
+  }
+
+  const checkUserPassword = (password:string):boolean => {
+    if (regexValidators.password.test(password)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validatePassword = ():void => {
+    invalidPassword = !checkUserPassword(userPassword);
+
+    if (userPassword !== confirmUserPassword && confirmUserPassword.length > 0) {
+      invalidConfirmPassword = true;
+    } else {
+      invalidConfirmPassword = false;
+    }
+
+    checkIsValid();
+  }
+
+  const checkUserConfirmPassword = ():boolean => {
+    if (userPassword === confirmUserPassword) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateConfirmPassword = ():void => {
+    invalidConfirmPassword = !checkUserConfirmPassword();
+    checkIsValid();
+  }
+
+  // as per the current business case, the promo code field is always valid. Still adding the same overall structure as the other fields for easy maintanence in case this ever changes
+  const checkPromoCode = ():boolean => {
+    return true;
+  }
+
+  const validatePromoCode = ():void => {
+    invalidPromoCode = !checkPromoCode();
+    checkIsValid();
+  }
+
+  const checkSecurityQuestion = ():boolean => {
+    if (securityQuestion)
+    switch(custominputtextswitch) {
+      case 'true':
+        if (regexValidators.document.test(securityQuestion) && securityQuestion.length <= 50) {
+          return true;
+        }
+        break;
+
+      case 'false':
+        if (securityQuestion && securityQuestion.length <= 120) {
+          return true;
+        }
+        break;
+    }
+
+    return false;
+  }
+
+  const validateSecurityQuestion = ():void => {
+    invalidSecurityQuestion = !checkSecurityQuestion();
+    checkIsValid();
+  }
+
+  const checkSecurityAnswer = ():boolean => {
+    if (securityAnswer)
+    switch(custominputtextswitch) {
+      case 'true':
+        if (regexValidators.document.test(securityAnswer) && securityAnswer.length <= 50) {
+          return true;
+        }
+        break;
+      
+      case 'false':
+        if (securityAnswer && securityAnswer.length <= 120) {
+          return true;
+        }
+        break;
+    }
+
+    return false;
+  }
+
+  const validateSecurityAnswer = ():void => {
+    invalidSecurityAnswer = !checkSecurityAnswer();
+    checkIsValid();
+  }
+
+  const goNext = (e):void => {
+    e.preventDefault();
+    let registerStepOneData = {
+      userEmail,
+      userValue,
+      userPassword,
+      confirmUserPassword,
+      securityQuestion,
+      securityAnswer,
+      promoCode
+    };
+
+    window.postMessage({ type: 'RegisterStepOne', registerStepOneData }, window.location.href);
+  }
+
+  const messageHandler = (e:any):void => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'StepOneDataBackup':
+          userEmail = e.data.userData.email;
+          userValue = e.data.userData.username;
+          userPassword = e.data.userData.password;
+          confirmUserPassword = e.data.userData.password;
+          securityQuestion = e.data.userData.securityQuestion;
+          securityAnswer = e.data.userData.securityAnswer;
+          promoCode = e.data.userData.promoCode
+          checkIsValid();
+          break;
+      }
+    }
+  }
+
+  const formatDisabledFields = ():void => {
+    disabledFieldsList = disabledfields.split(',');
+
+    if (disabledFieldsList.indexOf('email') >= 0) {
+      userEmail = 'dummy@dummy.com';
+      invalidEmail = false;
+    }
+
+    if (disabledFieldsList.indexOf('username') >= 0) {
+      userValue = 'dummy username';
+      invalidName = false;
+    }
+
+    if (disabledFieldsList.indexOf('password') >= 0) {
+      userPassword = 'dummy password';
+      invalidPassword = false;
+    }
+
+    if (disabledFieldsList.indexOf('confirmPassword') >= 0) {
+      confirmUserPassword = 'dummy password';
+      invalidConfirmPassword = false;
+    }
+
+    if (disabledFieldsList.indexOf('securityQuestion') >= 0) {
+      securityQuestion = 'dummy question';
+      invalidSecurityQuestion = false;
+    }
+
+    if (disabledFieldsList.indexOf('securityAnswer') >= 0) {
+      securityAnswer = 'dummy answer';
+      invalidSecurityAnswer = false;
+    }
+
+    if (disabledFieldsList.indexOf('promoCode') >= 0) {
+
+      invalidPromoCode = false;
+    }
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  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(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: lang && setActiveLanguage();
+  $: disabledfields && formatDisabledFields();
+  $: simplepasswordvalidation && verifyTypeOfPassword();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
+  $: translationurl && setTranslationUrl();
+</script>
+
+<div bind:this={customStylingContainer}>
+  <div class="RegisterFormHeader">
+    <h2 class="RegisterFormTitle">{$_('registerTitle')}</h2>
+    <p class="RegisterFormSubtitle">{$_('registerSubtitle')} <span class="FormLoginCallToAction" on:click={() => switchToLogin()}>{$_('registerSubtitleLogin')}</span></p>
+  </div>
+  <form class="RegisterFormContent">
+    <div class="EmailContainer {invalidEmail && !emailFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('email') >= 0 ? 'Hidden' : ''}" >
+      <label for="Email">{$_('registerEmail')}:<span class="FormRequired">*</span></label>
+      <input bind:value={userEmail} on:keyup={validateEmail} on:focus={() => emailFocus = true} on:blur={() => emailFocus = false} type="text" id="Email" />
+      {#if invalidEmail}
+        <p class="InvalidInput">{$_('registerEmailError')}</p>
+      {/if}
+    </div>
+    <div class="UserContainer {invalidName && !usernameFocus? 'InvalidField' : ''}{disabledFieldsList?.indexOf('username') >= 0 ? 'Hidden' : ''}">
+      <label for="UserName">{$_('registerUsername')}:<span class="FormRequired">*</span></label>
+      <input bind:value={userValue} on:keyup={validateUserName} on:focus={() => usernameFocus = true} on:blur={() => usernameFocus = false} type="text" id="UserName" autocomplete = {savecredentials ? "username" : "off" }/>
+      {#if invalidName}
+        <p class="InvalidInput">{$_('registerUsernameError')}</p>
+      {/if}
+    </div>
+    <div class="PasswordContainer {invalidPassword && !passwordFocus ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('password') >= 0 ? 'Hidden' : ''}" hidden={disabledFieldsList?.indexOf('password') >= 0}>
+      <label for="Password">{$_('registerPassword')}:<span class="FormRequired">*</span></label>
+      <input bind:value={userPassword} on:keyup={validatePassword} on:focus={() => passwordFocus = true} on:blur={() => passwordFocus = false} name="new-password" type="password" id="new-password" autocomplete = {savecredentials ? "new-password" : "off" } bind:this={passwordVisibilityToggle} aria-describedby="password-constraints" />
+      {#if isPasswordVisible}
+        <svg on:click={() => hidePassword()} class="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(--emw--registration-typography, var(--emw--color-background, #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" 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--registration-typography, var(--emw--color-background, #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">{$_('registerPasswordError')}</p>
+      {/if}
+      {#if invalidPassword && simplepasswordvalidation === 'true'}
+        <p class="InvalidInput">{$_('registerSimplePasswordError')}</p>
+      {/if}
+    </div>
+    <div class="ConfirmPasswordContainer {invalidConfirmPassword && !confirmPasswordFocus? 'InvalidField' : ''}{disabledFieldsList?.indexOf('confirmPassword') >= 0 ? 'Hidden' : ''}">
+      <label for="ConfirmPassword">{$_('registerConfirmPassword')}:<span class="FormRequired">*</span></label>
+      <input bind:value={confirmUserPassword} on:keyup={validateConfirmPassword} on:focus={() => confirmPasswordFocus = true} on:blur={() => confirmPasswordFocus = false} type="password" id="ConfirmPassword" bind:this={confirmPasswordVisibilityToggle} />
+      {#if isConfirmPasswordVisible}
+        <svg on:click={() => hideConfirmPassword()} class="ToggleConfirmPasswordVisibility" 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--registration-typography, var(--emw--color-background, #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={() => showConfirmPassword()} class="ToggleConfirmPasswordVisibility" 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--registration-typography, var(--emw--color-background, #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 invalidConfirmPassword}
+        <p class="InvalidInput">{$_('registerConfirmPasswordError')}</p>
+      {/if}
+    </div>
+
+
+    <div class="PromoCodeContainer {disabledFieldsList?.indexOf('promoCode') >= 0 ? 'Hidden' : ''}">
+      <label for="PromoCode">{$_('registerPromoCode')}:</label>
+      <input bind:value={promoCode} on:keyup={validatePromoCode} on:focus={() => promoCodeFocus = true} on:blur={() => promoCodeFocus = false} type="text" id="PromoCode" />
+      {#if invalidPromoCode}
+        <p class="InvalidInput">{$_('promoCodeError')}</p>
+      {/if}
+    </div>
+
+
+    <div class="SecurityQuestionContainer {invalidSecurityQuestion && !securityQFocus? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityQuestion') >= 0 ? 'Hidden' : ''}">
+      <label for="SecurityQuestion">{custominputtextswitch == 'true' ? $_('registerSecurityQuestion2') : $_('registerSecurityQuestion')}:<span class="FormRequired">*</span></label>
+      <input bind:value={securityQuestion} on:keyup={validateSecurityQuestion} on:focus={() => securityQFocus = true} on:blur={() => securityQFocus = false} type="text" id="SecurityQuestion" />
+      {#if invalidSecurityQuestion}
+        <p class="InvalidInput">{custominputtextswitch == 'true' ? $_('registerSecurityQuestionError2') : $_('registerSecurityQuestionError')}</p>
+      {/if}
+    </div>
+    <div class="SecurityAnswerContainer {invalidSecurityAnswer && !securityAFocus? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityAnswer') >= 0 ? 'Hidden' : ''}">
+      <label for="SecurityAnswer">{custominputtextswitch == 'true' ? $_('registerSecurityAnswer2') : $_('registerSecurityAnswer')}:<span class="FormRequired">*</span></label>
+      <input bind:value={securityAnswer} on:keyup={validateSecurityAnswer} on:focus={() => securityAFocus = true} on:blur={() => securityAFocus = false} type="text" id="SecurityAnswer" />
+      {#if invalidSecurityAnswer}
+        <p class="InvalidInput">{custominputtextswitch == 'true' ? $_('registerSecurityAnswerError2') : $_('registerSecurityAnswerError')}</p>
+      {/if}
+    </div>
+    <button class="RegisterStepNext" disabled={!isValid} on:click={(e) => goNext(e)}>{$_('registerNext')}</button>
+  </form>
+</div>
+
+<style lang="scss">
+
+  input, select {
+      font-family: inherit;
+    }
+
+  .RegisterFormTitle {
+    font-size: var(--emw--font-size-large, 20px);
+    text-transform: uppercase;
+    font-weight: var(--emw--font-weight-light, 300);
+    margin: 0;
+    padding-bottom: 8px;
+  }
+
+  .RegisterFormSubtitle {
+    font-size: var(--emw--font-size-small, 14px);
+    margin: 0;
+    padding-bottom: 20px;
+  }
+
+  .FormLoginCallToAction {
+    color: var(--emw--registration-color-primary, var(--emw--color-primary, #22B04E));
+    font-size: var(--emw--font-size-small, 14px);
+    font-weight: var(--emw--font-weight-normal, 400);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .EmailContainer,
+  .UserContainer,
+  .PasswordContainer,
+  .ConfirmPasswordContainer,
+  .PromoCodeContainer,
+  .SecurityQuestionContainer,
+  .SecurityAnswerContainer {
+    color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
+    display: flex;
+    flex-direction: column;
+    padding-bottom:40px;
+    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));
+      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, #F5090A);
+        background: var(--emw--color-pale, #FBECF4);
+        color: var(--emw--registration-contrast, var(--emw--color-typography-cotrast, #444444));
+      }
+    }
+
+    &.Hidden {
+      display: none;
+    }
+  }
+
+  .PasswordContainer, .ConfirmPasswordContainer {
+    position: relative;
+  }
+
+  .PasswordContainer input,
+  .ConfirmPasswordContainer input {
+    padding: 5px 30px 5px 15px;
+  }
+
+  .FormRequired {
+    color: var(--emw--categories-color-secondary, var(--emw--color-secondary, #E1A749));
+  }
+
+  .TogglePasswordVisibility, .ToggleConfirmPasswordVisibility {
+    height: 13px;
+    position: absolute;
+    right: 8px;
+    bottom: 55px;
+    &.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));
+    }
+  }
+
+  .InvalidInput {
+    color: var(--emw--color-error, var(--emw--color-error, #ed0909));
+    font-size: 10px;
+    position: absolute;
+    padding-top: 5px;
+    top: 55px;
+    line-height: 10px;
+  }
+
+  .ErrorMessage {
+    margin: 0 0 15px 0;
+    font-size: var(--emw--font-size-x-small, 12px);
+    color: var(--emw--color-error, var(--emw--color-error, #ed0909));
+  }
+
+  .RegisterStepNext {
+    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));
+    width: 100%;
+    height: 60px;
+    padding: 0;
+    text-transform: uppercase;
+    font-size: var(--emw--font-size-medium, 16px);
+    cursor: pointer;
+    margin-top: 24px;
+    &[disabled] {
+      background: var(--emw--color-gray-100, #E6E6E6);
+      border: 1px solid var(--emw--color-gray-150, #828282);
+      cursor: not-allowed;
+    }
+  }
+
+  /* MS Edge */
+  input::-ms-reveal,
+  input::-ms-clear {
+    display: none;
+  }
+</style>

package/src/i18n.js

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,4 @@
+import GeneralPlayerRegisterFormStep1 from './GeneralPlayerRegisterFormStep1Nd.svelte';
+
+!customElements.get('general-player-register-form-step1-nd') && customElements.define('general-player-register-form-step1-nd', GeneralPlayerRegisterFormStep1);
+export default GeneralPlayerRegisterFormStep1;