Fix password medium validation

Author: tleon

admin-dev/themes/new-theme/js/components/change-password-handler.ts

@@ -62,7 +62,7 @@ export default class ChangePasswordHandler {
     const self = this;
 
     $input.each((index, element) => {
-      $(element).on('keyup', function checkPasswordStrength() {
+      $(element).on('keyup input', function checkPasswordStrength() {
         const passwordValue = <string>$(this).val();
         let $feedbackContainer = $(this).parent().find(self.feedbackSelector);
 

admin-dev/themes/new-theme/js/components/form/change-password-control.ts

@@ -1,4 +1,4 @@
-/**
+  /**
  * For the full copyright and license information, please view the
  * docs/licenses/LICENSE.txt file that was distributed with this source code.
  */
@@ -147,21 +147,21 @@ export default class ChangePasswordControl {
       },
     );
 
-    // Prevent submitting the form if new password is not valid
-    $(document).on(
-      'submit',
-      $(this.oldPasswordInputSelector).closest('form'),
-      (event) => {
+    // Prevent submitting the form if new password is not valid (length, confirmation, and strength score)
+    const $form = this.$inputsBlock.closest('form');
+
+    if ($form.length) {
+      $form.on('submit', (event: JQuery.TriggeredEvent) => {
         // If password input is disabled - we don't need to validate it.
         if ($(this.oldPasswordInputSelector).is(':disabled')) {
           return;
         }
 
-        if (!this.passwordValidator.isPasswordValid()) {
+        if (!this.passwordValidator.isPasswordValid() || !this.passwordHandler.isPasswordValid()) {
           event.preventDefault();
         }
-      },
-    );
+      });
+    }
   }
 
   /**

admin-dev/themes/new-theme/js/pages/customer/CustomerForm.ts

@@ -17,6 +17,8 @@ export default class CustomerForm {
     );
     passwordHandler.watchPasswordStrength($(customerFormMap.passwordInput));
 
+    this.preventSubmitWhenPasswordWeak(passwordHandler);
+
     // Watch customer group checkbox change and if it was unchecked,
     // update default group below if it's no longer in the list.
     $(customerFormMap.customerGroupCheckboxes).on('change', (event) => {
@@ -33,6 +35,31 @@ export default class CustomerForm {
     });
   }
 
+  /**
+   * Prevent form submit when password field has value but does not meet strength requirement.
+   *
+   * @param passwordHandler
+   * @private
+   */
+  private preventSubmitWhenPasswordWeak(passwordHandler: ChangePasswordHandler): void {
+    const $form = $(customerFormMap.passwordInput).closest('form');
+
+    if ($form.length) {
+      $form.on('submit', (event: JQuery.TriggeredEvent) => {
+        const $passwordInput = $(customerFormMap.passwordInput);
+        const hasInvalidPassword =
+          $passwordInput.length
+          && $passwordInput.val()
+          && !$passwordInput.prop('disabled')
+          && !passwordHandler.isPasswordValid();
+
+        if (hasInvalidPassword) {
+          event.preventDefault();
+        }
+      });
+    }
+  }
+
   private checkOrUpdateDefaultGroup(wasChecked: boolean): void {
     // Get currently selected group ID
     const currentDefaultGroup = Number(<string> $(customerFormMap.defaultGroupSelectedOption).val());

admin-dev/themes/new-theme/js/pages/employee/EmployeeForm.ts

@@ -51,10 +51,37 @@ export default class EmployeeForm {
     );
     passwordHandler.watchPasswordStrength($(employeeFormMap.passwordInput));
 
+    this.preventSubmitWhenPasswordWeak(passwordHandler);
+
     this.initEvents();
     this.toggleShopTree();
   }
 
+  /**
+   * Prevent form submit when initial password field has value but does not meet strength requirement.
+   *
+   * @param passwordHandler
+   * @private
+   */
+  private preventSubmitWhenPasswordWeak(passwordHandler: ChangePasswordHandler): void {
+    const $form = $(employeeFormMap.passwordInput).closest('form');
+
+    if ($form.length) {
+      $form.on('submit', (event: JQuery.TriggeredEvent) => {
+        const $passwordInput = $(employeeFormMap.passwordInput);
+        const hasInvalidPassword =
+          $passwordInput.length
+          && $passwordInput.val()
+          && !$passwordInput.prop('disabled')
+          && !passwordHandler.isPasswordValid();
+
+        if (hasInvalidPassword) {
+          event.preventDefault();
+        }
+      });
+    }
+  }
+
   /**
    * Initialize page's events.
    *

classes/Validate.php

@@ -531,9 +531,15 @@ public static function isAcceptablePasswordScore(string $password): bool
     {
         $zxcvbn = new Zxcvbn();
         $result = $zxcvbn->passwordStrength($password);
-        $minScore = Configuration::hasKey(PasswordPolicyConfiguration::CONFIGURATION_MINIMUM_SCORE) ?
-                  Configuration::get(PasswordPolicyConfiguration::CONFIGURATION_MINIMUM_SCORE) :
-                  PasswordPolicyConfiguration::PASSWORD_SAFELY_UNGUESSABLE;
+
+        // During install, Configuration is not available; require strong password (score 3) without relying on DB
+        if (defined('PS_INSTALLATION_IN_PROGRESS')) {
+            $minScore = PasswordPolicyConfiguration::PASSWORD_SAFELY_UNGUESSABLE;
+        } else {
+            $minScore = Configuration::hasKey(PasswordPolicyConfiguration::CONFIGURATION_MINIMUM_SCORE) ?
+                      Configuration::get(PasswordPolicyConfiguration::CONFIGURATION_MINIMUM_SCORE) :
+                      PasswordPolicyConfiguration::PASSWORD_SAFELY_UNGUESSABLE;
+        }
 
         return isset($result['score']) && $result['score'] >= $minScore;
     }

install-dev/theme/js/configure.js

@@ -31,6 +31,34 @@ $(function() {
   });
 
   watchPasswordStrength($('#infosPassword'));
+
+  // Prevent form submit when password does not meet minimum strength (score) or length
+  $('#mainForm').on('submit', function(e) {
+    const $passwordInput = $('#infosPassword');
+    if ($passwordInput.length === 0) {
+      return;
+    }
+    const passwordValue = $passwordInput.val();
+    if (!passwordValue) {
+      return;
+    }
+    const minScore = $passwordInput.data('minscore');
+    const minLength = $passwordInput.data('minlength');
+    const maxLength = $passwordInput.data('maxlength');
+    const result = zxcvbn(passwordValue);
+    const scoreValid = result.score >= minScore;
+    const lengthValid = passwordValue.length >= minLength && passwordValue.length <= maxLength;
+    if (!scoreValid || !lengthValid) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      const errorMessage = $passwordInput.closest('.field-password').data('passwordMustBeStrong')
+        || 'The password must be strong (see requirements above).';
+      $passwordInput.closest('.field-password').find('.js-password-client-error').show().text(errorMessage);
+      $passwordInput.closest('.field-password').find('.password-strength-feedback').removeClass('d-none');
+      $('#btNext').show();
+      return false;
+    }
+  });
 });
 
 function checkTimeZone(elt)
@@ -79,7 +107,7 @@ function in_array(needle, haystack) {
  */
 function watchPasswordStrength(element) {
   element.on('keyup', function checkPasswordStrength() {
-    $('.field-password .errorTxt').hide();
+    $('.field-password .js-password-client-error').hide();
     const passwordValue = $(this).val();
     const popoverElement = $('.field-password .popover');
     let $feedbackContainer = $(this).parent().find('.password-strength-feedback');

install-dev/theme/views/configure.php

@@ -98,7 +98,7 @@
 	<?php echo $this->displayError('admin_email'); ?>
   </div>
 
-  <div class="field field-password clearfix">
+  <div class="field field-password clearfix" data-password-must-be-strong="<?php echo htmlspecialchars($this->translator->trans('The password is incorrect (must be Strong)', [], 'Install')); ?>">
 	<label for="infosPassword" class="aligned">
 		<?php echo $this->translator->trans('Shop password', [], 'Install'); ?><sup class="required">*</sup>
 	</label>
@@ -117,6 +117,7 @@
 	<?php } else { ?>
 	  <p class="userInfos aligned"><?php echo $this->translator->trans('Must be at least 8 characters', [], 'Install'); ?></p>
 	<?php } ?>
+	<span class="result aligned errorTxt js-password-client-error" style="display:none;"></span>
   </div>
 
   <div class="field clearfix">

tests/UI/.env.ci

@@ -5,9 +5,9 @@ URL_BO="https://localhost:8002/admin-dev/"
 URL_API="https://localhost:8002/admin-api/"
 URL_INSTALL="https://localhost:8002/install-dev/"
 
-# BO account
+# BO account (password must meet install strength: zxcvbn score >= 3, see Validate::isAcceptablePasswordScore)
 LOGIN="demo@prestashop.com"
-PASSWD="Correct Horse Battery Staple"
+PASSWD="Pr3st@Sh0p-T3st-P@ssw0rd!"
 FIRSTNAME="Marc"
 LASTNAME="Beier"