@everymatrix/general-player-register-form-step1 0.0.293 → 0.0.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-register-form-step1",
-  "version": "0.0.293",
+  "version": "0.0.296",
   "main": "dist/general-player-register-form-step1.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5b7aee827d2cbc67a99e15775c630c6f9ddfbf43"
+  "gitHead": "628a0e30f5160748837a6a7acb4cf44623d87c3d"
 }

package/src/GeneralPlayerRegisterFormStep1.svelte

@@ -6,13 +6,17 @@
   import { RegisterFormStep1Translations } from './translations';
 
   export let lang:string = '';
+  // Possible disabled fields: ['email', 'username', 'name', 'password', 'confirmPassword', 'securityQuestion', 'securityAnswer']
+  export let disabledfields:string = '';
 
-  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 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 = '';
@@ -21,13 +25,13 @@
   let securityQuestion:string = '';
   let securityAnswer:string = '';
 
-  let isPasswordVisible:Boolean = false;
-  let isConfirmPasswordVisible:Boolean = false;
+  let isPasswordVisible:boolean = false;
+  let isConfirmPasswordVisible:boolean = false;
 
   let passwordVisibilityToggle:HTMLElement;
   let confirmPasswordVisibilityToggle:HTMLElement;
 
-  let isValid:Boolean = false;
+  let isValid:boolean = false;
 
   // setupI18n({ withLocale: 'en', translations: {}});
 
@@ -35,24 +39,25 @@
     addNewMessages(item, RegisterFormStep1Translations[item]);
   });
 
-  const checkIsValid = () => {
+  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 = () => {
+  const switchToLogin = ():void => {
     window.postMessage({ type: "ToLogin" }, window.location.href);
   }
 
-  const regexValidators = {
+  const 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}$/
   }
 
-  const checkEmailIdentifier = (email:string) => {
+  const checkEmailIdentifier = (email:string):boolean => {
     if (regexValidators.email.test(email) && email.length <= 100) {
       return true;
     }
@@ -60,71 +65,73 @@
     return false;
   }
 
-  const validateEmail = () => {
+  const validateEmail = ():void => {
     invalidEmail = !checkEmailIdentifier(userEmail);
     checkIsValid();
   }
 
-  const checkUserIdentifier = (user:string) => {
-    if(regexValidators.user.test(user) && user.length <= 20) {
+  const checkUserIdentifier = (user:string):boolean => {
+    if (regexValidators.user.test(user) && user.length <= 20) {
       return true;
     }
 
     return false;
   }
 
-  const validateUserName = () => {
+  const validateUserName = ():void => {
     invalidName = !checkUserIdentifier(userValue);
     checkIsValid();
   }
 
-  const showPassword = () => {
+  const showPassword = ():void => {
     isPasswordVisible = true;
     togglePasswordVisibility();
   }
 
-  const showConfirmPassword = () => {
+  const showConfirmPassword = ():void => {
     isConfirmPasswordVisible = true;
     toggleConfirmPasswordVisibility();
   }
 
-  const hidePassword = () => {
+  const hidePassword = ():void => {
     isPasswordVisible = false;
     togglePasswordVisibility();
   }
 
-  const hideConfirmPassword = () => {
+  const hideConfirmPassword = ():void => {
     isConfirmPasswordVisible = false;
     toggleConfirmPasswordVisibility();
   }
 
-  const togglePasswordVisibility = () => {
+  const togglePasswordVisibility = ():void => {
     passwordVisibilityToggle.type = isPasswordVisible ? "text" : "password";
   }
 
-  const toggleConfirmPasswordVisibility = () => {
+  const toggleConfirmPasswordVisibility = ():void => {
     confirmPasswordVisibilityToggle.type = isConfirmPasswordVisible ? "text" : "password";
   }
 
-  const checkUserPassword = (password:string) => {
-    if(regexValidators.password.test(password)) {
+  const checkUserPassword = (password:string):boolean => {
+    if (regexValidators.password.test(password)) {
       return true;
     }
 
     return false;
   }
 
-  const validatePassword = () => {
+  const validatePassword = ():void => {
     invalidPassword = !checkUserPassword(userPassword);
+
     if (userPassword !== confirmUserPassword && confirmUserPassword.length > 0) {
       invalidConfirmPassword = true;
     } else {
       invalidConfirmPassword = false;
     }
+
     checkIsValid();
   }
 
-  const checkUserConfirmPassword = () => {
+  const checkUserConfirmPassword = ():boolean => {
     if (userPassword === confirmUserPassword) {
       return true;
     }
@@ -132,12 +139,12 @@
     return false;
   }
 
-  const validateConfirmPassword = () => {
-    invalidConfirmPassword = !checkUserConfirmPassword(confirmUserPassword);
+  const validateConfirmPassword = ():void => {
+    invalidConfirmPassword = !checkUserConfirmPassword();
     checkIsValid();
   }
 
-  const checkSecurityQuestion = () => {
+  const checkSecurityQuestion = ():boolean => {
     if (securityQuestion && securityQuestion.length <= 120) {
       return true;
     }
@@ -145,12 +152,12 @@
     return false;
   }
 
-  const validateSecurityQuestion = () => {
+  const validateSecurityQuestion = ():void => {
     invalidSecurityQuestion = !checkSecurityQuestion();
     checkIsValid();
   }
 
-  const checkSecurityAnswer = () => {
+  const checkSecurityAnswer = ():boolean => {
     if (securityAnswer && securityAnswer.length <= 120) {
       return true;
     }
@@ -158,12 +165,12 @@
     return false;
   }
 
-  const validateSecurityAnswer = () => {
+  const validateSecurityAnswer = ():void => {
     invalidSecurityAnswer = !checkSecurityAnswer();
     checkIsValid();
   }
 
-  const goNext = () => {
+  const goNext = ():void => {
     let registerStepOneData = {
       userEmail,
       userValue,
@@ -171,11 +178,12 @@
       confirmUserPassword,
       securityQuestion,
       securityAnswer
-    }
+    };
+
     window.postMessage({ type: 'RegisterStepOne', registerStepOneData }, window.location.href);
   }
 
-  const messageHandler = (e:any) => {
+  const messageHandler = (e:any):void => {
     if (e.data) {
       switch(e.data.type) {
         case 'StepOneDataBackup':
@@ -187,15 +195,45 @@
           securityAnswer = e.data.userData.securityAnswer;
           checkIsValid();
           break;
-
-        default:
-          // do nothing
-          break;
       }
     }
   }
 
-  const setActiveLanguage = () => {
+  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);
   }
 
@@ -208,6 +246,7 @@
   });
 
   $: lang && setActiveLanguage();
+  $: disabledfields && formatDisabledFields();
 </script>
 
 <div class="RegisterFormHeader" part="RegisterFormHeader">
@@ -215,21 +254,21 @@
   <p class="RegisterFormSubtitle" part="RegisterFormSubtitle">{$_('registerFormStep1.registerSubtitle')} <span class="FormLoginCallToAction" on:click={() => switchToLogin()}>{$_('registerFormStep1.registerSubtitleLogin')}</span></p>
 </div>
 <div class="RegisterFormContent" part="RegisterFormContent">
-  <div class="EmailContainer {invalidEmail ? 'InvalidField' : ''}" part="EmailContainer {invalidEmail ? 'InvalidField' : ''}">
+  <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' : ''}" part="UserContainer {invalidName ? 'InvalidField' : ''}">
+  <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" />
     {#if invalidName}
       <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerUsernameError')}</p>
     {/if}
   </div>
-  <div class="PasswordContainer {invalidPassword ? 'InvalidField' : ''}" part="PasswordContainer {invalidPassword ? 'InvalidField' : ''}">
+  <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} type="password" id="Password" bind:this={passwordVisibilityToggle} />
     {#if isPasswordVisible}
@@ -241,7 +280,7 @@
       <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerPasswordError')}</p>
     {/if}
   </div>
-  <div class="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}" part="ConfirmPasswordContainer {invalidConfirmPassword ? 'InvalidField' : ''}">
+  <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}
@@ -253,14 +292,14 @@
       <p class="InvalidInput" part="InvalidInput">{$_('registerFormStep1.registerConfirmPasswordError')}</p>
     {/if}
   </div>
-  <div class="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}" part="SecurityQuestionContainer {invalidSecurityQuestion ? 'InvalidField' : ''}">
+  <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' : ''}" part="SecurityAnswerContainer {invalidSecurityAnswer ? 'InvalidField' : ''}">
+  <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}
@@ -334,6 +373,10 @@
         color: var(--emfe-w-color-primary, #D0046C);
       }
     }
+
+    &.Hidden {
+      display: none;
+    }
   }
 
   .PasswordContainer, .ConfirmPasswordContainer {