@everymatrix/general-player-register-form-step1 0.0.367 → 0.0.369

package/src/GeneralPlayerRegisterFormStep1.svelte

@@ -1,467 +1,467 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { RegisterFormStep1Translations } from './translations';
-
-  export let lang:string = '';
-  // Possible disabled fields: ['email', 'username', 'name', 'password', 'confirmPassword', 'securityQuestion', 'securityAnswer']
-  export let disabledfields:string = '';
-  export let simplepasswordvalidation: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 disabledFieldsList:Array<string>;
-
-  let userValue:string = '';
-  let userEmail:string = '';
-  let userPassword:string = '';
-  let confirmUserPassword:string = '';
-  let securityQuestion:string = '';
-  let securityAnswer:string = '';
-
-  let isPasswordVisible:boolean = false;
-  let isConfirmPasswordVisible:boolean = false;
-
-  let passwordVisibilityToggle:HTMLElement;
-  let confirmPasswordVisibilityToggle:HTMLElement;
-
-  let isValid: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}$/
-  }
-
-  // setupI18n({ withLocale: 'en', translations: {}});
-
-  Object.keys(RegisterFormStep1Translations).forEach((item:any) => {
-    addNewMessages(item, RegisterFormStep1Translations[item]);
-  });
-
-  const checkIsValid = ():void => {
-    isValid =  !(invalidEmail || invalidName || invalidPassword || invalidConfirmPassword || invalidSecurityQuestion || invalidSecurityAnswer);
-
-    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();
-  }
-
-  const checkSecurityQuestion = ():boolean => {
-    if (securityQuestion && securityQuestion.length <= 120) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateSecurityQuestion = ():void => {
-    invalidSecurityQuestion = !checkSecurityQuestion();
-    checkIsValid();
-  }
-
-  const checkSecurityAnswer = ():boolean => {
-    if (securityAnswer && securityAnswer.length <= 120) {
-      return true;
-    }
-
-    return false;
-  }
-
-  const validateSecurityAnswer = ():void => {
-    invalidSecurityAnswer = !checkSecurityAnswer();
-    checkIsValid();
-  }
-
-  const goNext = (e):void => {
-    e.preventDefault();
-    let registerStepOneData = {
-      userEmail,
-      userValue,
-      userPassword,
-      confirmUserPassword,
-      securityQuestion,
-      securityAnswer
-    };
-
-    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;
-          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;
-    }
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: lang && setActiveLanguage();
-  $: disabledfields && formatDisabledFields();
-  $: simplepasswordvalidation && verifyTypeOfPassword();
-</script>
-
-<div class="RegisterFormHeader" part="RegisterFormHeader">
-  <h2 class="RegisterFormTitle" part="RegisterFormTitle">{$_('registerFormStep1.registerTitle')}</h2>
-  <p class="RegisterFormSubtitle" part="RegisterFormSubtitle">{$_('registerFormStep1.registerSubtitle')} <span class="FormLoginCallToAction" on:click={() => switchToLogin()}>{$_('registerFormStep1.registerSubtitleLogin')}</span></p>
-</div>
-<form class="RegisterFormContent" part="RegisterFormContent">
-  <div class="EmailContainer {invalidEmail ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('email') >= 0 ? 'Hidden' : ''}" part="EmailContainer {invalidEmail ? 'InvalidField' : ''}" >
-    <label for="Email">{$_('registerFormStep1.registerEmail')}:<span class="FormRequired" part="FormRequired">*</span></label>
-    <input bind:value={userEmail} on:blur={validateEmail} type="text" id="Email" />
-    {#if invalidEmail}
-      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerEmailError')}</p>
-    {/if}
-  </div>
-  <div class="UserContainer {invalidName ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('username') >= 0 ? 'Hidden' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
-    <label for="UserName">{$_('registerFormStep1.registerUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
-    <input bind:value={userValue} on:blur={validateUserName} type="text" id="UserName" autocomplete="username"/>
-    {#if invalidName}
-      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerUsernameError')}</p>
-    {/if}
-  </div>
-  <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('password') >= 0 ? 'Hidden' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" hidden={disabledFieldsList?.indexOf('password') >= 0}>
-    <label for="Password">{$_('registerFormStep1.registerPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
-    <input bind:value={userPassword} on:blur={validatePassword} name="new-password" type="password" id="new-password" autocomplete="new-password" bind:this={passwordVisibilityToggle} aria-describedby="password-constraints" />
-    {#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">{$_('registerFormStep1.registerPasswordError')}</p>
-    {/if}
-    {#if invalidPassword && simplepasswordvalidation === 'true'}
-      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSimplePasswordError')}</p>
-    {/if}
-  </div>
-  <div class="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('confirmPassword') >= 0 ? 'Hidden' : ''}" part="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}">
-    <label for="ConfirmPassword">{$_('registerFormStep1.registerConfirmPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
-    <input bind:value={confirmUserPassword} on:blur={validateConfirmPassword} type="password" id="ConfirmPassword" bind:this={confirmPasswordVisibilityToggle} />
-    {#if isConfirmPasswordVisible}
-      <svg on:click={() => hideConfirmPassword()} class="ToggleConfirmPasswordVisibility" part="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(--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={() => showConfirmPassword()} class="ToggleConfirmPasswordVisibility" part="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(--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 invalidConfirmPassword}
-      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerConfirmPasswordError')}</p>
-    {/if}
-  </div>
-  <div class="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityQuestion') >= 0 ? 'Hidden' : ''}" part="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}">
-    <label for="SecurityQuestion">{$_('registerFormStep1.registerSecurityQuestion')}:<span class="FormRequired" part="FormRequired">*</span></label>
-    <input bind:value={securityQuestion} on:blur={validateSecurityQuestion} type="text" id="SecurityQuestion" />
-    {#if invalidSecurityQuestion}
-      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSecurityQuestionError')}</p>
-    {/if}
-  </div>
-  <div class="SecurityAnswerContainer {invalidSecurityAnswer ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityAnswer') >= 0 ? 'Hidden' : ''}" part="SecurityAnswerContainer {invalidSecurityAnswer ? 'InvalidField' : ''}">
-    <label for="SecurityAnswer">{$_('registerFormStep1.registerSecurityAnswer')}:<span class="FormRequired" part="FormRequired">*</span></label>
-    <input bind:value={securityAnswer} on:keyup={validateSecurityAnswer} type="text" id="SecurityAnswer" />
-    {#if invalidSecurityAnswer}
-      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSecurityAnswerError')}</p>
-    {/if}
-  </div>
-  <button class="RegisterStepNext" part="RegisterStepNext" disabled={!isValid} on:click={(e) => goNext(e)}>{$_('registerFormStep1.registerNext')}</button>
-</form>
-
-
-<style lang="scss">
-
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .RegisterFormTitle {
-    font-size: 20px;
-    text-transform: uppercase;
-    font-weight: 300;
-    margin: 0;
-    padding-bottom: 8px;
-  }
-
-  .RegisterFormSubtitle {
-    font-size: 14px;
-    margin: 0;
-    padding-bottom: 20px;
-  }
-
-  .FormLoginCallToAction {
-    color: var(--emfe-w-color-primary, #D0046C);
-    font-size: 14px;
-    font-weight: 400;
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  .EmailContainer,
-  .UserContainer,
-  .PasswordContainer,
-  .ConfirmPasswordContainer,
-  .SecurityQuestionContainer,
-  .SecurityAnswerContainer {
-    color: var(--emfe-w-color-gray-300, #58586B);
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 30px;
-    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);
-      }
-    }
-
-    &.Hidden {
-      display: none;
-    }
-  }
-
-  .PasswordContainer, .ConfirmPasswordContainer {
-    position: relative;
-  }
-
-  .PasswordContainer input,
-  .ConfirmPasswordContainer input {
-    padding: 5px 30px 5px 15px;
-  }
-
-  .FormRequired {
-    color: var(--emfe-w-color-secondary, #FD2839);
-  }
-
-  .TogglePasswordVisibility, .ToggleConfirmPasswordVisibility {
-    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);
-    }
-  }
-
-  .InvalidInput {
-    color: var(--emfe-w-color-error, #FD2839);
-    font-size: 10px;
-    position: absolute;
-    bottom: -3px;
-    line-height: 10px;
-  }
-
-  .ErrorMessage {
-    margin: 0 0 15px 0;
-    font-size: 12px;
-    color: var(--emfe-w-color-error, #FD2839);
-  }
-
-  .UserContainer {
-    .InvalidInput {
-      bottom: -3px;
-    }
-  }
-
-  .RegisterStepNext {
-    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;
-    margin-top: 24px;
-    &[disabled] {
-      background: var(--emfe-w-color-gray-100, #E6E6E6);
-      border: 1px solid var(--emfe-w-color-gray-150, #828282);
-      cursor: not-allowed;
-    }
-  }
-
-  /* MS Edge */
-  input::-ms-reveal,
-  input::-ms-clear {
-    display: none;
-  }
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { RegisterFormStep1Translations } from './translations';
+
+  export let lang:string = '';
+  // Possible disabled fields: ['email', 'username', 'name', 'password', 'confirmPassword', 'securityQuestion', 'securityAnswer']
+  export let disabledfields:string = '';
+  export let simplepasswordvalidation: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 disabledFieldsList:Array<string>;
+
+  let userValue:string = '';
+  let userEmail:string = '';
+  let userPassword:string = '';
+  let confirmUserPassword:string = '';
+  let securityQuestion:string = '';
+  let securityAnswer:string = '';
+
+  let isPasswordVisible:boolean = false;
+  let isConfirmPasswordVisible:boolean = false;
+
+  let passwordVisibilityToggle:HTMLElement;
+  let confirmPasswordVisibilityToggle:HTMLElement;
+
+  let isValid: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}$/
+  }
+
+  // setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(RegisterFormStep1Translations).forEach((item:any) => {
+    addNewMessages(item, RegisterFormStep1Translations[item]);
+  });
+
+  const checkIsValid = ():void => {
+    isValid =  !(invalidEmail || invalidName || invalidPassword || invalidConfirmPassword || invalidSecurityQuestion || invalidSecurityAnswer);
+
+    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();
+  }
+
+  const checkSecurityQuestion = ():boolean => {
+    if (securityQuestion && securityQuestion.length <= 120) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateSecurityQuestion = ():void => {
+    invalidSecurityQuestion = !checkSecurityQuestion();
+    checkIsValid();
+  }
+
+  const checkSecurityAnswer = ():boolean => {
+    if (securityAnswer && securityAnswer.length <= 120) {
+      return true;
+    }
+
+    return false;
+  }
+
+  const validateSecurityAnswer = ():void => {
+    invalidSecurityAnswer = !checkSecurityAnswer();
+    checkIsValid();
+  }
+
+  const goNext = (e):void => {
+    e.preventDefault();
+    let registerStepOneData = {
+      userEmail,
+      userValue,
+      userPassword,
+      confirmUserPassword,
+      securityQuestion,
+      securityAnswer
+    };
+
+    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;
+          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;
+    }
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: lang && setActiveLanguage();
+  $: disabledfields && formatDisabledFields();
+  $: simplepasswordvalidation && verifyTypeOfPassword();
+</script>
+
+<div class="RegisterFormHeader" part="RegisterFormHeader">
+  <h2 class="RegisterFormTitle" part="RegisterFormTitle">{$_('registerFormStep1.registerTitle')}</h2>
+  <p class="RegisterFormSubtitle" part="RegisterFormSubtitle">{$_('registerFormStep1.registerSubtitle')} <span class="FormLoginCallToAction" on:click={() => switchToLogin()}>{$_('registerFormStep1.registerSubtitleLogin')}</span></p>
+</div>
+<form class="RegisterFormContent" part="RegisterFormContent">
+  <div class="EmailContainer {invalidEmail ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('email') >= 0 ? 'Hidden' : ''}" part="EmailContainer {invalidEmail ? 'InvalidField' : ''}" >
+    <label for="Email">{$_('registerFormStep1.registerEmail')}:<span class="FormRequired" part="FormRequired">*</span></label>
+    <input bind:value={userEmail} on:blur={validateEmail} type="text" id="Email" />
+    {#if invalidEmail}
+      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerEmailError')}</p>
+    {/if}
+  </div>
+  <div class="UserContainer {invalidName ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('username') >= 0 ? 'Hidden' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
+    <label for="UserName">{$_('registerFormStep1.registerUsername')}:<span class="FormRequired" part="FormRequired">*</span></label>
+    <input bind:value={userValue} on:blur={validateUserName} type="text" id="UserName" autocomplete="username"/>
+    {#if invalidName}
+      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerUsernameError')}</p>
+    {/if}
+  </div>
+  <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('password') >= 0 ? 'Hidden' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" hidden={disabledFieldsList?.indexOf('password') >= 0}>
+    <label for="Password">{$_('registerFormStep1.registerPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
+    <input bind:value={userPassword} on:blur={validatePassword} name="new-password" type="password" id="new-password" autocomplete="new-password" bind:this={passwordVisibilityToggle} aria-describedby="password-constraints" />
+    {#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">{$_('registerFormStep1.registerPasswordError')}</p>
+    {/if}
+    {#if invalidPassword && simplepasswordvalidation === 'true'}
+      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSimplePasswordError')}</p>
+    {/if}
+  </div>
+  <div class="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('confirmPassword') >= 0 ? 'Hidden' : ''}" part="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}">
+    <label for="ConfirmPassword">{$_('registerFormStep1.registerConfirmPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
+    <input bind:value={confirmUserPassword} on:blur={validateConfirmPassword} type="password" id="ConfirmPassword" bind:this={confirmPasswordVisibilityToggle} />
+    {#if isConfirmPasswordVisible}
+      <svg on:click={() => hideConfirmPassword()} class="ToggleConfirmPasswordVisibility" part="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(--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={() => showConfirmPassword()} class="ToggleConfirmPasswordVisibility" part="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(--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 invalidConfirmPassword}
+      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerConfirmPasswordError')}</p>
+    {/if}
+  </div>
+  <div class="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityQuestion') >= 0 ? 'Hidden' : ''}" part="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}">
+    <label for="SecurityQuestion">{$_('registerFormStep1.registerSecurityQuestion')}:<span class="FormRequired" part="FormRequired">*</span></label>
+    <input bind:value={securityQuestion} on:blur={validateSecurityQuestion} type="text" id="SecurityQuestion" />
+    {#if invalidSecurityQuestion}
+      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSecurityQuestionError')}</p>
+    {/if}
+  </div>
+  <div class="SecurityAnswerContainer {invalidSecurityAnswer ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityAnswer') >= 0 ? 'Hidden' : ''}" part="SecurityAnswerContainer {invalidSecurityAnswer ? 'InvalidField' : ''}">
+    <label for="SecurityAnswer">{$_('registerFormStep1.registerSecurityAnswer')}:<span class="FormRequired" part="FormRequired">*</span></label>
+    <input bind:value={securityAnswer} on:keyup={validateSecurityAnswer} type="text" id="SecurityAnswer" />
+    {#if invalidSecurityAnswer}
+      <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSecurityAnswerError')}</p>
+    {/if}
+  </div>
+  <button class="RegisterStepNext" part="RegisterStepNext" disabled={!isValid} on:click={(e) => goNext(e)}>{$_('registerFormStep1.registerNext')}</button>
+</form>
+
+
+<style lang="scss">
+
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .RegisterFormTitle {
+    font-size: 20px;
+    text-transform: uppercase;
+    font-weight: 300;
+    margin: 0;
+    padding-bottom: 8px;
+  }
+
+  .RegisterFormSubtitle {
+    font-size: 14px;
+    margin: 0;
+    padding-bottom: 20px;
+  }
+
+  .FormLoginCallToAction {
+    color: var(--emfe-w-color-primary, #D0046C);
+    font-size: 14px;
+    font-weight: 400;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .EmailContainer,
+  .UserContainer,
+  .PasswordContainer,
+  .ConfirmPasswordContainer,
+  .SecurityQuestionContainer,
+  .SecurityAnswerContainer {
+    color: var(--emfe-w-color-gray-300, #58586B);
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 30px;
+    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);
+      }
+    }
+
+    &.Hidden {
+      display: none;
+    }
+  }
+
+  .PasswordContainer, .ConfirmPasswordContainer {
+    position: relative;
+  }
+
+  .PasswordContainer input,
+  .ConfirmPasswordContainer input {
+    padding: 5px 30px 5px 15px;
+  }
+
+  .FormRequired {
+    color: var(--emfe-w-color-secondary, #FD2839);
+  }
+
+  .TogglePasswordVisibility, .ToggleConfirmPasswordVisibility {
+    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);
+    }
+  }
+
+  .InvalidInput {
+    color: var(--emfe-w-color-error, #FD2839);
+    font-size: 10px;
+    position: absolute;
+    bottom: -3px;
+    line-height: 10px;
+  }
+
+  .ErrorMessage {
+    margin: 0 0 15px 0;
+    font-size: 12px;
+    color: var(--emfe-w-color-error, #FD2839);
+  }
+
+  .UserContainer {
+    .InvalidInput {
+      bottom: -3px;
+    }
+  }
+
+  .RegisterStepNext {
+    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;
+    margin-top: 24px;
+    &[disabled] {
+      background: var(--emfe-w-color-gray-100, #E6E6E6);
+      border: 1px solid var(--emfe-w-color-gray-150, #828282);
+      cursor: not-allowed;
+    }
+  }
+
+  /* MS Edge */
+  input::-ms-reveal,
+  input::-ms-clear {
+    display: none;
+  }
+</style>