- Patch #143026 by ChrisKennedy and Steven: dynamically check password strength and confirmation.

2 files changed, 204 insertions, 0 deletions

diff --git a/modules/user/user.js b/modules/user/user.js
index caffaf270..cbd46c992 100644
--- a/modules/user/user.js
+++ b/modules/user/user.js
@@ -1,6 +1,174 @@
 /* $Id$ */
 
 /**
+ * Attach handlers to evaluate the strength of any password fields and to check
+ * that its confirmation is correct.
+ */
+Drupal.passwordAttach = function(context) {
+  var context = context || $(document);
+  var translate = Drupal.settings.password;
+  $("input.password-field", context).each(function() {
+    var passwordInput = $(this);
+    var parent = $(this).parent();
+    // Wait this number of milliseconds before checking password.
+    var monitorDelay = 700;
+
+    // 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 passwordResult = $("span.password-result", passwordStrength);
+    parent.addClass("password-parent");
+
+    // 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);
+    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.
+    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.
+
+      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);
+      }
+      passwordDescription.html(result.message);
+      passwordResult.addClass(newClass);
+      if (result.strength == "high") {
+        passwordDescription.hide();
+      }
+      else {
+        passwordDescription.addClass(newClass);
+      }
+      this.passwordClass = newClass;
+
+      // Check that password and confirmation match.
+
+      // Hide the result layer if confirmation is empty, otherwise show the layer.
+      confirmResult.css({ visibility: (confirmInput.val() == "" ? "hidden" : "visible") });
+
+      var success = passwordInput.val() == confirmInput.val();
+
+      // Remove the previous styling if any exists.
+      if (this.confirmClass) {
+        confirmChild.removeClass(this.confirmClass);
+      }
+
+      // 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 indicator and tips.
+      passwordStrength.css({ visibility: "visible" });
+      passwordDescription.show();
+    };
+
+    // 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);
+      }
+
+      // When the user clears the field, hide the tips immediately.
+      if (!passwordInput.val()) {
+        passwordStrength.css({ visibility: "hidden" });
+        passwordDescription.hide();
+        return;
+      }
+
+      // 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);
+  });
+};
+
+/**
+ * Evaluate the strength of a user's password.
+ *
+ * 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 = "";
+  }
+  // Check if length is less than 6 characters.
+  else if (value.length < 6) {
+    strength = "low";
+    msg = translate.tooShort;
+  }
+  // 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;
+  }
+  // Check if it contains letters, numbers, punctuation, and upper/lower case.
+  else if (hasLetters && hasNumbers && hasPunctuation && hasCasing) {
+    strength = "high";
+  }
+  // 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>";
+  }
+
+  return { strength: strength, message: msg };
+};
+
+/**
  * On the admin/user/settings page, conditionally show all of the
  * picture-related form elements depending on the current value of the
  * "Picture support" radio buttons.
@@ -10,5 +178,6 @@ if (Drupal.jsEnabled) {
     $('div.user-admin-picture-radios input[@type=radio]').click(function () {
       $('div.user-admin-picture-settings')[['hide', 'show'][this.value]]();
     });
+    Drupal.passwordAttach();
   });
 }
diff --git a/modules/user/user.module b/modules/user/user.module
index 741af7e0e..1ba1c772c 100644
--- a/modules/user/user.module
+++ b/modules/user/user.module
@@ -1414,6 +1414,7 @@ function user_register_submit($form, &$form_state) {
 }
 
 function user_edit_form(&$form_state, $uid, $edit, $register = FALSE) {
+  _user_password_dynamic_validation();
   $admin = user_access('administer users');
 
   // Account information:
@@ -3151,3 +3152,37 @@ function _user_mail_notify($op, $account, $password = NULL) {
   }
   return $result;
 }
+
+/**
+ * Add javascript and string translations for dynamic password validation (strength and confirmation checking).
+ *
+ * This is an internal function that makes it easier to manage the translation
+ * strings that need to be passed to the javascript code.
+ */
+function _user_password_dynamic_validation() {
+  static $complete = FALSE;
+  global $user;
+  // Only need to do once per page.
+  if (!$complete) {
+    drupal_add_js(drupal_get_path('module', 'user') .'/user.js', 'module');
+
+    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'),
+        'confirmTitle' => t('Passwords match:'),
+        'username' => (isset($user->name) ? $user->name : ''))),
+      'setting');
+    $complete = TRUE;
+  }
+}