@everymatrix/general-player-forgot-password-form 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-player-forgot-password-form",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/general-player-forgot-password-form.js",
   "svelte": "src/index.ts",
   "scripts": {

package/src/GeneralPlayerForgotPasswordForm.svelte

@@ -11,6 +11,7 @@
   export let imagedesktop:string = '';
   export let captchakey:string = '';
   export let lang:string = '';
+  export let simplepasswordvalidation:string = 'false';
 
   let isLoading:boolean = false;
   let forgotPasswordScreen:boolean = true;
@@ -195,7 +196,11 @@
   }
 
   const checkUserPassword = (password:string) => {
-    if(regexValidators.password.test(password)) {
+    if (simplepasswordvalidation == 'true') {
+      regexValidators.password = /^(?!.* ).{8,20}$/;
+    }
+
+    if (regexValidators.password.test(password)) {
       return true;
     } else {
       return false;
@@ -203,9 +208,10 @@
   }
 
   const validatePassword = (invalid, password, elem) => {
-    if (elem.id === "NewPassword") {
+    if (elem.id === "new-password") {
       invalidNewPassword = !checkUserPassword(password);
-      if(userConfirmPassword) {
+
+      if (userConfirmPassword) {
         invalidConfirmPassword = (userNewPassword === userConfirmPassword) ? !checkUserPassword(password) : true;
       }
     } else {
@@ -281,14 +287,18 @@
         <form class="FormContent" part="FormContent">
           <div class="NewPassword" part="NewPassword">
             <label for="NewPassword">{$_('forgotPasswordForm.forgotNewPasswordPassword')}:<span class="FormRequired" part="FormRequired">*</span></label>
-            <input type="password" bind:value={userNewPassword} on:blur={validatePassword(invalidNewPassword, userNewPassword, newPasswordVisibilityToggle)} id="new-password" autocomplete="new-password" bind:this={newPasswordVisibilityToggle} />
+            <input type="password" bind:value={userNewPassword} on:keyup={validatePassword(invalidNewPassword, userNewPassword, newPasswordVisibilityToggle)} id="new-password" autocomplete="new-password" bind:this={newPasswordVisibilityToggle} />
             {#if isNewPasswordVisible}
               <svg on:click={() => togglePassword('userNewPassword')} class="TogglePasswordVisibility {invalidNewPassword ? 'InvalidToggle' : ''}" 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-white, #FFFFFF);}</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={() => togglePassword('userNewPassword')} class="TogglePasswordVisibility {invalidNewPassword ? 'InvalidToggle' : ''}" 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-white, #FFFFFF);}</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 invalidNewPassword}
-              <p class="InvalidInput" part="InvalidInput">{$_('forgotPasswordForm.forgotNewPasswordPasswordError')}</p>
+              {#if simplepasswordvalidation == 'true'}
+                <p class="InvalidInput" part="InvalidInput">{$_('forgotPasswordForm.simplePasswordError')}</p>
+              {:else}
+                <p class="InvalidInput" part="InvalidInput">{$_('forgotPasswordForm.forgotNewPasswordPasswordError')}</p>
+              {/if}
             {/if}
           </div>
           <div class="ConfirmPassword" part="ConfirmPassword">

package/src/translations.js

@@ -17,7 +17,8 @@ export const ForgotPasswordTranslations = {
       forgotNewPasswordButton: 'Change Password',
       forgotChangePasswordTitle: 'Success!',
       forgotChangePasswordDescription: 'Your password has been changed successfully.',
-      forgotChangePasswordLogin: 'Click here to Login'
+      forgotChangePasswordLogin: 'Click here to Login',
+      simplePasswordError: 'Password must be 8-20 characters long.',
     }
   },
   zh: {
@@ -38,7 +39,8 @@ export const ForgotPasswordTranslations = {
       forgotNewPasswordButton: '更改密碼',
       forgotChangePasswordTitle: '成功！',
       forgotChangePasswordDescription: '你已經成功更改密碼。',
-      forgotChangePasswordLogin: '點擊此處登錄'
+      forgotChangePasswordLogin: '點擊此處登錄',
+      simplePasswordError: '密码长度必须为 8-20 个字符。',
     }
   },
   fr: {
@@ -59,7 +61,8 @@ export const ForgotPasswordTranslations = {
       forgotNewPasswordButton: 'Modifier le mot de passe',
       forgotChangePasswordTitle: 'Succès!',
       forgotChangePasswordDescription: 'Votre mot de passe a été modifié avec succès.',
-      forgotChangePasswordLogin: 'Cliquez ici pour vous connecter'
+      forgotChangePasswordLogin: 'Cliquez ici pour vous connecter',
+      simplePasswordError: 'Le mot de passe doit comporter entre 8 et 20 caractères.',
     }
   },
   tr: {
@@ -80,7 +83,8 @@ export const ForgotPasswordTranslations = {
       forgotNewPasswordButton: 'Şifre değiştir',
       forgotChangePasswordTitle: 'Başarı!',
       forgotChangePasswordDescription: 'Şifreniz başarıyla değiştirildi.',
-      forgotChangePasswordLogin: 'Giriş yapmak için tıklayınız'
+      forgotChangePasswordLogin: 'Giriş yapmak için tıklayınız',
+      simplePasswordError: 'Parola trebuie să aibă 8-20 de caractere.',
     }
   },
   ro: {
@@ -101,7 +105,8 @@ export const ForgotPasswordTranslations = {
       forgotNewPasswordButton: 'Schimba parola',
       forgotChangePasswordTitle: 'Succes!',
       forgotChangePasswordDescription: 'Parola a fost schimbata cu succes.',
-      forgotChangePasswordLogin: 'Autentificare'
+      forgotChangePasswordLogin: 'Autentificare',
+      simplePasswordError: 'Parola trebuie să aibă 8-20 de caractere.',
     }
   },
   es: {
@@ -122,7 +127,8 @@ export const ForgotPasswordTranslations = {
       forgotNewPasswordButton: 'Cambiar la contraseña',
       forgotChangePasswordTitle: '¡Éxito!',
       forgotChangePasswordDescription: 'Su contraseña ha sido cambiada con éxito.',
-      forgotChangePasswordLogin: 'Haga clic aquí para ingresar'
+      forgotChangePasswordLogin: 'Haga clic aquí para ingresar',
+      simplePasswordError: 'La contraseña debe tener entre 8 y 20 caracteres.',
     }
   },
   pt: {
@@ -143,7 +149,8 @@ export const ForgotPasswordTranslations = {
       forgotNewPasswordButton: 'Mudar senha',
       forgotChangePasswordTitle: 'Sucesso!',
       forgotChangePasswordDescription: 'Sua senha foi alterada com sucesso.',
-      forgotChangePasswordLogin: 'Clique aqui para entrar'
+      forgotChangePasswordLogin: 'Clique aqui para entrar',
+      simplePasswordError: 'A senha deve ter de 8 a 20 caracteres.',
     }
   },
 };