modules/password_strength/password_strength.js

// $Id: password_strength.js,v 1.7 2007/11/08 22:52:03 jrbeeman Exp $

/**
 * Attach handlers to evaluate the strength of any password fields and to check
 * that its confirmation is correct.
 */
Drupal.passwordAttach = function() {
  var translate = Drupal.settings.password;
  $("input.password-field:not(.password-processed)").each(function() {
    var passwordInput = $(this).addClass('password-processed');
    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 = [], out = "", 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 setting characters.
  else if (value.length < translate.minLength) {
    strength = "low";
    msg.push(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.push(translate.sameAsUsername);
  }
  // Check if it contains letters, numbers, punctuation, and upper/lower case.
  else if (hasLetters && hasNumbers && hasPunctuation && hasCasing) {
    strength = "high";
  }
  
  if (strength != "high") {
    // Password is not secure enough so construct the medium-strength message.
    // Extremely bad passwords still count as low.
    var count = (hasLetters ? 1 : 0) + (hasNumbers ? 1 : 0) + (hasPunctuation ? 1 : 0) + (hasCasing ? 1 : 0);
    strength = count > 2 ? "medium" : "low";

    if (!hasLetters || !hasCasing) {
      msg.push(translate.addLetters);
    }
    if (!hasNumbers) {
      msg.push(translate.addNumbers);
    }
    if (!hasPunctuation) {
      msg.push(translate.addPunctuation);
    }
    out = (count >= translate.requiredStrength) ? translate.recommendVariation : translate.needsMoreVariation;
    out += "<ul><li>"+ msg.join("</li><li>") +"</li></ul>";
  }

  return { strength: strength, message: out };
};


if (Drupal.jsEnabled) {
  $(document).ready(Drupal.passwordAttach);
}
1	// $Id: password_strength.js,v 1.7 2007/11/08 22:52:03 jrbeeman Exp $
2
3	/**
4	* Attach handlers to evaluate the strength of any password fields and to check
5	* that its confirmation is correct.
6	*/
7	Drupal.passwordAttach = function() {
8	var translate = Drupal.settings.password;
9	$("input.password-field:not(.password-processed)").each(function() {
10	var passwordInput = $(this).addClass('password-processed');
11	var parent = $(this).parent();
12	// Wait this number of milliseconds before checking password.
13	var monitorDelay = 700;
14
15	// Add the password strength layers.
16	$(this).after('<span class="password-strength"><span class="password-title">'+ translate.strengthTitle +'</span> <span class="password-result"></span></span>').parent();
17	var passwordStrength = $("span.password-strength", parent);
18	var passwordResult = $("span.password-result", passwordStrength);
19	parent.addClass("password-parent");
20
21	// Add the password confirmation layer.
22	var outerItem = $(this).parent().parent();
23	$("input.password-confirm", outerItem).after('<span class="password-confirm">'+ translate["confirmTitle"] +' <span></span></span>').parent().addClass("confirm-parent");
24	var confirmInput = $("input.password-confirm", outerItem);
25	var confirmResult = $("span.password-confirm", outerItem);
26	var confirmChild = $("span", confirmResult);
27
28	// Add the description box at the end.
29	$(confirmInput).parent().after('<div class="password-description"></div>');
30	var passwordDescription = $("div.password-description", $(this).parent().parent()).hide();
31
32	// Check the password fields.
33	var passwordCheck = function () {
34	// Remove timers for a delayed check if they exist.
35	if (this.timer) {
36	clearTimeout(this.timer);
37	}
38
39	// Verify that there is a password to check.
40	if (!passwordInput.val()) {
41	passwordStrength.css({ visibility: "hidden" });
42	passwordDescription.hide();
43	return;
44	}
45
46	// Evaluate password strength.
47
48	var result = Drupal.evaluatePasswordStrength(passwordInput.val());
49	passwordResult.html(result.strength == "" ? "" : translate[result.strength +"Strength"]);
50
51	// Map the password strength to the relevant drupal CSS class.
52	var classMap = { low: "error", medium: "warning", high: "ok" };
53	var newClass = classMap[result.strength] \|\| "";
54
55	// Remove the previous styling if any exists; add the new class.
56	if (this.passwordClass) {
57	passwordResult.removeClass(this.passwordClass);
58	passwordDescription.removeClass(this.passwordClass);
59	}
60	passwordDescription.html(result.message);
61	passwordResult.addClass(newClass);
62	if (result.strength == "high") {
63	passwordDescription.hide();
64	}
65	else {
66	passwordDescription.addClass(newClass);
67	}
68	this.passwordClass = newClass;
69
70	// Check that password and confirmation match.
71
72	// Hide the result layer if confirmation is empty, otherwise show the layer.
73	confirmResult.css({ visibility: (confirmInput.val() == "" ? "hidden" : "visible") });
74
75	var success = passwordInput.val() == confirmInput.val();
76
77	// Remove the previous styling if any exists.
78	if (this.confirmClass) {
79	confirmChild.removeClass(this.confirmClass);
80	}
81
82	// Fill in the correct message and set the class accordingly.
83	var confirmClass = success ? "ok" : "error";
84	confirmChild.html(translate["confirm"+ (success ? "Success" : "Failure")]).addClass(confirmClass);
85	this.confirmClass = confirmClass;
86
87	// Show the indicator and tips.
88	passwordStrength.css({ visibility: "visible" });
89	passwordDescription.show();
90	};
91
92	// Do a delayed check on the password fields.
93	var passwordDelayedCheck = function() {
94	// Postpone the check since the user is most likely still typing.
95	if (this.timer) {
96	clearTimeout(this.timer);
97	}
98
99	// When the user clears the field, hide the tips immediately.
100	if (!passwordInput.val()) {
101	passwordStrength.css({ visibility: "hidden" });
102	passwordDescription.hide();
103	return;
104	}
105
106	// Schedule the actual check.
107	this.timer = setTimeout(passwordCheck, monitorDelay);
108	};
109	// Monitor keyup and blur events.
110	// Blur must be used because a mouse paste does not trigger keyup.
111	passwordInput.keyup(passwordDelayedCheck).blur(passwordCheck);
112	confirmInput.keyup(passwordDelayedCheck).blur(passwordCheck);
113	});
114	};
115
116
117
118	/**
119	* Evaluate the strength of a user's password.
120	*
121	* Returns the estimated strength and the relevant output message.
122	*/
123	Drupal.evaluatePasswordStrength = function(value) {
124	var strength = "", msg = [], out = "", translate = Drupal.settings.password;
125
126	var hasLetters = value.match(/[a-zA-Z]+/);
127	var hasNumbers = value.match(/[0-9]+/);
128	var hasPunctuation = value.match(/[^a-zA-Z0-9]+/);
129	var hasCasing = value.match(/[a-z]+.[A-Z]+\|[A-Z]+.[a-z]+/);
130
131	// Check if the password is blank.
132	if (!value.length) {
133	strength = "";
134	msg = "";
135	}
136	// Check if length is less than setting characters.
137	else if (value.length < translate.minLength) {
138	strength = "low";
139	msg.push(translate.tooShort);
140	}
141	// Check if password is the same as the username (convert both to lowercase).
142	else if (value.toLowerCase() == translate.username.toLowerCase()) {
143	strength = "low";
144	msg.push(translate.sameAsUsername);
145	}
146	// Check if it contains letters, numbers, punctuation, and upper/lower case.
147	else if (hasLetters && hasNumbers && hasPunctuation && hasCasing) {
148	strength = "high";
149	}
150
151	if (strength != "high") {
152	// Password is not secure enough so construct the medium-strength message.
153	// Extremely bad passwords still count as low.
154	var count = (hasLetters ? 1 : 0) + (hasNumbers ? 1 : 0) + (hasPunctuation ? 1 : 0) + (hasCasing ? 1 : 0);
155	strength = count > 2 ? "medium" : "low";
156
157	if (!hasLetters \|\| !hasCasing) {
158	msg.push(translate.addLetters);
159	}
160	if (!hasNumbers) {
161	msg.push(translate.addNumbers);
162	}
163	if (!hasPunctuation) {
164	msg.push(translate.addPunctuation);
165	}
166	out = (count >= translate.requiredStrength) ? translate.recommendVariation : translate.needsMoreVariation;
167	out += "<ul><li>"+ msg.join("</li><li>") +"</li></ul>";
168	}
169
170	return { strength: strength, message: out };
171	};
172
173
174
175	if (Drupal.jsEnabled) {
176	$(document).ready(Drupal.passwordAttach);
177	}