- Patch #199870 by alpritt et al: beter password strength checker. Really cool.

CHANGELOG.txt

@@ -28,6 +28,7 @@ Drupal 7.0, xxxx-xx-xx (development version)
     * Image toolkits are now provided by modules (rather than requiring a manual
       file copy to the includes directory).
     * Added an edit tab to taxonomy term pages.
+    * Redesigned password strength validator.
 - News aggregator:
     * Added OPML import functionality for RSS feeds.
     * Optionally, RSS feeds may be configured to not automatically generate feed blocks.

install.php

@@ -1052,6 +1052,7 @@ function install_configure_form(&$form_state, $url) {
     '#description' => st('Spaces are allowed; punctuation is not allowed except for periods, hyphens, and underscores.'),
     '#required' => TRUE,
     '#weight' => -10,
+    '#attributes' => array('class' => 'username'),
   );
 
   $form['admin_account']['account']['mail'] = array('#type' => 'textfield',

modules/system/system-rtl.css

@@ -95,6 +95,12 @@ input.password-confirm {
   margin-left: 10px;
   margin-right: 0;
 }
+.password-strength-title {
+  float: right;
+}
+.password-parent {
+  float: right;
+}
 
 .draggable a.tabledrag-handle {
   float: right;

modules/system/system.css

@@ -516,36 +516,46 @@ html.js .js-hide {
 /*
 ** Password strength indicator
 */
-span.password-strength {
-  visibility: hidden;
+.password-strength-title {
+  float: left; /* LTR */
 }
-input.password-field {
-  margin-right: 10px; /* LTR */
+#password-indicator {
+  border: 1px solid #B4B4B4;
+  float: right;
+  height: 0.9em;
+  margin: 0.3em 0.80em 0 0.3em;
+  width: 5em;
 }
-div.password-description {
-  padding: 0 2px;
-  margin: 4px 0 0 0;
-  font-size: 0.85em;
-  max-width: 500px;
+#password-indicator div {
+  height: 100%;
+  width: 0%;
+  background-color: #47C965;
+}
+input.password-confirm, input.password-field {
+  width: 16em;
+  margin-bottom: 0.4em;
+}
+div.password-suggestions {
+  padding: 0.2em 0.5em;
+  margin: 0.7em 0;
+  width: 38.5em;
+  border: 1px solid #B4B4B4;
 }
-div.password-description ul {
+div.password-suggestions ul {
   margin-bottom: 0;
 }
 .password-parent {
-  margin: 0 0 0 0;
+  margin: 0;
+  float: left; /* LTR */
+  width: 17.3em;
 }
+
 /*
 ** Password confirmation checker
 */
-input.password-confirm {
-  margin-right: 10px; /* LTR */
-}
 .confirm-parent {
-  margin: 5px 0 0 0;
+  margin: 0;
 }
-span.password-confirm {
+div.password-confirm {
   visibility: hidden;
 }
-span.password-confirm span {
-  font-weight: normal;
-}

modules/user/user.js

@@ -5,111 +5,83 @@
  * that its confirmation is correct.
  */
 Drupal.behaviors.password = function(context) {
+
   var translate = Drupal.settings.password;
   $("input.password-field:not(.password-processed)", context).each(function() {
     var passwordInput = $(this).addClass('password-processed');
-    var parent = $(this).parent();
-    // Wait this number of milliseconds before checking password.
-    var monitorDelay = 700;
+    var innerWrapper = $(this).parent();
+    var outerWrapper = $(this).parent().parent();
 
     // Add the password strength layers.
-    $(this).after('<span class="password-strength"><span class="password-title">'+ translate.strengthTitle +'</span> <span class="password-result"></span></span>').parent();
-    var passwordStrength = $("span.password-strength", parent);
+    var passwordStrength = $("span.password-strength", innerWrapper);
     var passwordResult = $("span.password-result", passwordStrength);
-    parent.addClass("password-parent");
+    innerWrapper.addClass("password-parent");
+
+    // Add the description box at the end.
+    var passwordMeter = '<div id="password-strength"><div class="password-strength-title">' + translate.strengthTitle + '</div><div id="password-indicator"><div id="indicator"></div></div></div>';
+    $("div.description", outerWrapper).prepend('<div class="password-suggestions"></div>');
+    $(innerWrapper).append(passwordMeter);
+    var passwordDescription = $("div.password-suggestions", outerWrapper).hide();
 
     // Add the password confirmation layer.
-    var outerItem  = $(this).parent().parent();
-    $("input.password-confirm", outerItem).after('<span class="password-confirm">'+ translate["confirmTitle"] +' <span></span></span>').parent().addClass("confirm-parent");
-    var confirmInput = $("input.password-confirm", outerItem);
-    var confirmResult = $("span.password-confirm", outerItem);
+    $("input.password-confirm", outerWrapper).after('<div class="password-confirm">' + translate["confirmTitle"] + ' <span></span></div>').parent().addClass("confirm-parent");
+    var confirmInput = $("input.password-confirm", outerWrapper);
+    var confirmResult = $("div.password-confirm", outerWrapper);
     var confirmChild = $("span", confirmResult);
 
-    // Add the description box at the end.
-    $(confirmInput).parent().after('<div class="password-description"></div>');
-    var passwordDescription = $("div.password-description", $(this).parent().parent()).hide();
-
-    // Check the password fields.
+    // Check the password strength.
     var passwordCheck = function () {
-      // Remove timers for a delayed check if they exist.
-      if (this.timer) {
-        clearTimeout(this.timer);
-      }
-
-      // Verify that there is a password to check.
-      if (!passwordInput.val()) {
-        passwordStrength.css({ visibility: "hidden" });
-        passwordDescription.hide();
-        return;
-      }
-
-      // Evaluate password strength.
 
+      // Evaluate the password strength.
       var result = Drupal.evaluatePasswordStrength(passwordInput.val());
-      passwordResult.html(result.strength == "" ? "" : translate[result.strength +"Strength"]);
 
-      // Map the password strength to the relevant drupal CSS class.
-      var classMap = { low: "error", medium: "warning", high: "ok" };
-      var newClass = classMap[result.strength] || "";
-
-      // Remove the previous styling if any exists; add the new class.
-      if (this.passwordClass) {
-        passwordResult.removeClass(this.passwordClass);
-        passwordDescription.removeClass(this.passwordClass);
+      // Update the suggestions for how to improve the password.
+      if (passwordDescription.html() != result.message) {
+        passwordDescription.html(result.message);
       }
-      passwordDescription.html(result.message);
-      passwordResult.addClass(newClass);
-      if (result.strength == "high") {
+
+      // Only show the description box if there is a weakness in the password.
+      if (result.strength == 100) {
         passwordDescription.hide();
       }
       else {
-        passwordDescription.addClass(newClass);
+        passwordDescription.show();
       }
-      this.passwordClass = newClass;
 
-      // Check that password and confirmation match.
+      // Adjust the length of the strength indicator.
+      $("#indicator").css('width', result.strength + '%');
 
-      // Hide the result layer if confirmation is empty, otherwise show the layer.
-      confirmResult.css({ visibility: (confirmInput.val() == "" ? "hidden" : "visible") });
+      passwordCheckMatch();
+    };
 
-      var success = passwordInput.val() == confirmInput.val();
+    // Check that password and confirmation inputs match.
+    var passwordCheckMatch = function () {
 
-      // Remove the previous styling if any exists.
-      if (this.confirmClass) {
-        confirmChild.removeClass(this.confirmClass);
-      }
+      if (confirmInput.val()) {
+        var success = passwordInput.val() === confirmInput.val();
 
-      // Fill in the correct message and set the class accordingly.
-      var confirmClass = success ? "ok" : "error";
-      confirmChild.html(translate["confirm"+ (success ? "Success" : "Failure")]).addClass(confirmClass);
-      this.confirmClass = confirmClass;
+        // Show the confirm result.
+        confirmResult.css({ visibility: "visible" });
 
-      // Show the indicator and tips.
-      passwordStrength.css({ visibility: "visible" });
-      passwordDescription.show();
-    };
+        // Remove the previous styling if any exists.
+        if (this.confirmClass) {
+          confirmChild.removeClass(this.confirmClass);
+        }
 
-    // Do a delayed check on the password fields.
-    var passwordDelayedCheck = function() {
-      // Postpone the check since the user is most likely still typing.
-      if (this.timer) {
-        clearTimeout(this.timer);
+        // Fill in the success message and set the class accordingly.
+        var confirmClass = success ? "ok" : 'error';
+        confirmChild.html(translate["confirm" + (success ? "Success" : "Failure")]).addClass(confirmClass);
+        this.confirmClass = confirmClass;
       }
-
-      // When the user clears the field, hide the tips immediately.
-      if (!passwordInput.val()) {
-        passwordStrength.css({ visibility: "hidden" });
-        passwordDescription.hide();
-        return;
+      else {
+        confirmResult.css({ visibility: "hidden" });
       }
+    }
 
-      // Schedule the actual check.
-      this.timer = setTimeout(passwordCheck, monitorDelay);
-    };
     // Monitor keyup and blur events.
     // Blur must be used because a mouse paste does not trigger keyup.
-    passwordInput.keyup(passwordDelayedCheck).blur(passwordCheck);
-    confirmInput.keyup(passwordDelayedCheck).blur(passwordCheck);
+    passwordInput.keyup(passwordCheck).focus(passwordCheck).blur(passwordCheck);
+    confirmInput.keyup(passwordCheckMatch).blur(passwordCheckMatch);
   });
 };
 
@@ -118,52 +90,71 @@ Drupal.behaviors.password = function(context) {
  *
  * Returns the estimated strength and the relevant output message.
  */
-Drupal.evaluatePasswordStrength = function(value) {
-  var strength = "", msg = "", translate = Drupal.settings.password;
-
-  var hasLetters = value.match(/[a-zA-Z]+/);
-  var hasNumbers = value.match(/[0-9]+/);
-  var hasPunctuation = value.match(/[^a-zA-Z0-9]+/);
-  var hasCasing = value.match(/[a-z]+.*[A-Z]+|[A-Z]+.*[a-z]+/);
-
-  // Check if the password is blank.
-  if (!value.length) {
-    strength = "";
-    msg = "";
+Drupal.evaluatePasswordStrength = function (password) {
+  var weaknesses = 0, strength = 100, msg = [], translate = Drupal.settings.password;
+
+  var hasLowercase = password.match(/[a-z]+/);
+  var hasUppercase = password.match(/[A-Z]+/);
+  var hasNumbers = password.match(/[0-9]+/);
+  var hasPunctuation = password.match(/[^a-zA-Z0-9]+/);
+
+  // If there is a username edit box on the page, compare password to that, otherwise
+  // use value from the database.
+  var usernameBox = $("input.username");
+  var username = (usernameBox.length > 0) ? usernameBox.val() : translate.username;
+
+  // Lose 10 points for every character less than 6.
+  if (password.length < 6) {
+    msg.push(translate.tooShort);
+    strength -= (6 - password.length) * 10;
   }
-  // Check if length is less than 6 characters.
-  else if (value.length < 6) {
-    strength = "low";
-    msg = translate.tooShort;
+
+  // Count weaknesses.
+  if (!hasLowercase) {
+    msg.push(translate.addLowerCase);
+    weaknesses++;
   }
-  // Check if password is the same as the username (convert both to lowercase).
-  else if (value.toLowerCase() == translate.username.toLowerCase()) {
-    strength  = "low";
-    msg = translate.sameAsUsername;
+  if (!hasUppercase) {
+    msg.push(translate.addUpperCase);
+    weaknesses++;
   }
-  // Check if it contains letters, numbers, punctuation, and upper/lower case.
-  else if (hasLetters && hasNumbers && hasPunctuation && hasCasing) {
-    strength = "high";
+  if (!hasNumbers) {
+    msg.push(translate.addNumbers);
+    weaknesses++;
   }
-  // Password is not secure enough so construct the medium-strength message.
-  else {
-    // Extremely bad passwords still count as low.
-    var count = (hasLetters ? 1 : 0) + (hasNumbers ? 1 : 0) + (hasPunctuation ? 1 : 0) + (hasCasing ? 1 : 0);
-    strength = count > 1 ? "medium" : "low";
-
-    msg = [];
-    if (!hasLetters || !hasCasing) {
-      msg.push(translate.addLetters);
-    }
-    if (!hasNumbers) {
-      msg.push(translate.addNumbers);
-    }
-    if (!hasPunctuation) {
-      msg.push(translate.addPunctuation);
-    }
-    msg = translate.needsMoreVariation +"<ul><li>"+ msg.join("</li><li>") +"</li></ul>";
+  if (!hasPunctuation) {
+    msg.push(translate.addPunctuation);
+    weaknesses++;
+  }
+
+  // Apply penalty for each weakness (balanced against length penalty).
+  switch (weaknesses) {
+    case 1:
+      strength -= 12.5;
+      break;
+
+    case 2:
+      strength -= 25;
+      break;
+
+    case 3:
+      strength -= 40;
+      break;
+
+    case 4:
+      strength -= 40;
+      break;
+  }
+
+  // Check if password is the same as the username.
+  if ((password !== '') && (password.toLowerCase() === username.toLowerCase())){
+    msg.push(translate.sameAsUsername);
+    // Passwords the same as username are always very weak.
+    strength = 5;
   }
 
+  // Assemble the final message.
+  msg = translate.hasWeaknesses + "<ul><li>" + msg.join("</li><li>") + "</li></ul>";
   return { strength: strength, message: msg };
 };
 

modules/user/user.module

@@ -1451,6 +1451,7 @@ function user_edit_form(&$form_state, $uid, $edit, $register = FALSE) {
       '#maxlength' => USERNAME_MAX_LENGTH,
       '#description' => t('Spaces are allowed; punctuation is not allowed except for periods, hyphens, apostrophes, and underscores.'),
       '#required' => TRUE,
+      '#attributes' => array('class' => 'username'),
     );
   }
   $form['account']['mail'] = array('#type' => 'textfield',
@@ -2164,17 +2165,15 @@ function _user_password_dynamic_validation() {
     drupal_add_js(array(
       'password' => array(
         'strengthTitle' => t('Password strength:'),
-        'lowStrength' => t('Low'),
-        'mediumStrength' => t('Medium'),
-        'highStrength' => t('High'),
-        'tooShort' => t('It is recommended to choose a password that contains at least six characters. It should include numbers, punctuation, and both upper and lowercase letters.'),
-        'needsMoreVariation' => t('The password does not include enough variation to be secure. Try:'),
-        'addLetters' => t('Adding both upper and lowercase letters.'),
-        'addNumbers' => t('Adding numbers.'),
-        'addPunctuation' => t('Adding punctuation.'),
-        'sameAsUsername' => t('It is recommended to choose a password different from the username.'),
-        'confirmSuccess' => t('Yes'),
-        'confirmFailure' => t('No'),
+        'hasWeaknesses' => t('To make your password stronger:'),
+        'tooShort' => t('Make it at least 6 characters'),
+        'addLowerCase' => t('Add lowercase letters'),
+        'addUpperCase' => t('Add uppercase letters'),
+        'addNumbers' => t('Add numbers'),
+        'addPunctuation' => t('Add punctuation'),
+        'sameAsUsername' => t('Make it different from your username'),
+        'confirmSuccess' => t('yes'),
+        'confirmFailure' => t('no'),
         'confirmTitle' => t('Passwords match:'),
         'username' => (isset($user->name) ? $user->name : ''))),
       'setting');