@everymatrix/general-player-register-form-step1 1.1.2 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-register-form-step1",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "main": "dist/general-player-register-form-step1.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a331dfb7a0daca971fec89907140c9353dc5f0b3"
+  "gitHead": "8382d5b109b967bd6756236bd96bb5a13d51e40e"
 }

package/src/GeneralPlayerRegisterFormStep1.svelte

@@ -21,6 +21,13 @@
   let invalidSecurityQuestion:boolean = false;
   let invalidSecurityAnswer: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 disabledFieldsList:Array<string>;
 
   let userValue:string = '';
@@ -309,23 +316,23 @@
     <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' : ''}" >
+    <div class="EmailContainer {invalidEmail && !emailFocus ? '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" />
+      <input bind:value={userEmail} on:keyup={validateEmail} on:focus={() => emailFocus = true} on:blur={() => emailFocus = false} 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' : ''}">
+    <div class="UserContainer {invalidName && !usernameFocus? '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"/>
+      <input bind:value={userValue} on:keyup={validateUserName} on:focus={() => usernameFocus = true} on:blur={() => usernameFocus = false} 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}>
+    <div class="PasswordContainer {invalidPassword && !passwordFocus ? '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" />
+      <input bind:value={userPassword} on:keyup={validatePassword} on:focus={() => passwordFocus = true} on:blur={() => passwordFocus = false} 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}
@@ -338,9 +345,9 @@
         <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSimplePasswordError')}</p>
       {/if}
     </div>
-    <div class="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('confirmPassword') >= 0 ? 'Hidden' : ''}" part="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}">
+    <div class="ConfirmPasswordContainer {invalidConfirmPassword && !confirmPasswordFocus? '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} />
+      <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" 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}
@@ -350,16 +357,16 @@
         <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerConfirmPasswordError')}</p>
       {/if}
     </div>
-    <div class="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}{disabledFieldsList?.indexOf('securityQuestion') >= 0 ? 'Hidden' : ''}" part="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}">
+    <div class="SecurityQuestionContainer {invalidSecurityQuestion && !securityQFocus? '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" />
+      <input bind:value={securityQuestion} on:keyup={validateSecurityQuestion} on:focus={() => securityQFocus = true} on:blur={() => securityQFocus = false} 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' : ''}">
+    <div class="SecurityAnswerContainer {invalidSecurityAnswer && !securityAFocus? '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" />
+      <input bind:value={securityAnswer} on:keyup={validateSecurityAnswer} on:focus={() => securityAFocus = true} on:blur={() => securityAFocus = false} type="text" id="SecurityAnswer" />
       {#if invalidSecurityAnswer}
         <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerSecurityAnswerError')}</p>
       {/if}