modules/user/user.js

// $Id: user.js,v 1.18 2009/09/21 08:52:41 dries Exp $
(function ($) {

/**
 * Attach handlers to evaluate the strength of any password fields and to check
 * that its confirmation is correct.
 */
Drupal.behaviors.password = {
  attach: function (context, settings) {
    var translate = settings.password;
    $('input.password-field', context).once('password', function () {
      var passwordInput = $(this);
      var innerWrapper = $(this).parent();
      var outerWrapper = $(this).parent().parent();

      // Add the password strength layers.
      var passwordStrength = $('span.password-strength', innerWrapper);
      var passwordResult = $('span.password-result', passwordStrength);
      innerWrapper.addClass('password-parent');

      // Add the description box.
      var passwordMeter = '<div id="password-strength"><div id="password-strength-text"></div><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).prepend(passwordMeter);
      var passwordDescription = $('div.password-suggestions', outerWrapper).hide();

      // Add the password confirmation layer.
      $('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);

      // Check the password strength.
      var passwordCheck = function () {

        // Evaluate the password strength.
        var result = Drupal.evaluatePasswordStrength(passwordInput.val(), settings.password);

        // Update the suggestions for how to improve the password.
        if (passwordDescription.html() != result.message) {
          passwordDescription.html(result.message);
        }

        // Only show the description box if there is a weakness in the password.
        if (result.strength == 100) {
          passwordDescription.hide();
        }
        else {
          passwordDescription.show();
        }

        // Adjust the length of the strength indicator.
        $('#indicator').css('width', result.strength + '%');

        // Update the strength indication text.
        $("#password-strength-text").html(result.indicatorText);

        passwordCheckMatch();
      };

      // Check that password and confirmation inputs match.
      var passwordCheckMatch = function () {

        if (confirmInput.val()) {
          var success = passwordInput.val() === confirmInput.val();

          // Show the confirm result.
          confirmResult.css({ visibility: 'visible' });

          // Remove the previous styling if any exists.
          if (this.confirmClass) {
            confirmChild.removeClass(this.confirmClass);
          }

          // 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;
        }
        else {
          confirmResult.css({ visibility: 'hidden' });
        }
      };

      // Monitor keyup and blur events.
      // Blur must be used because a mouse paste does not trigger keyup.
      passwordInput.keyup(passwordCheck).focus(passwordCheck).blur(passwordCheck);
      confirmInput.keyup(passwordCheckMatch).blur(passwordCheckMatch);
    });
  }
};

/**
 * Evaluate the strength of a user's password.
 *
 * Returns the estimated strength and the relevant output message.
 */
Drupal.evaluatePasswordStrength = function (password, translate) {
  var weaknesses = 0, strength = 100, msg = [];

  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;
  }

  // Count weaknesses.
  if (!hasLowercase) {
    msg.push(translate.addLowerCase);
    weaknesses++;
  }
  if (!hasUppercase) {
    msg.push(translate.addUpperCase);
    weaknesses++;
  }
  if (!hasNumbers) {
    msg.push(translate.addNumbers);
    weaknesses++;
  }
  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;
  }

  // Based on the strength, work out what text should be shown by the password strength meter.
  if (strength < 60) {
    indicatorText = translate.weak;
  } else if (strength < 70) {
    indicatorText = translate.fair;
  } else if (strength < 80) {
    indicatorText = translate.good;
  } else if (strength < 100) {
    indicatorText = translate.strong;
  }

  // Assemble the final message.
  msg = translate.hasWeaknesses + '<ul><li>' + msg.join('</li><li>') + '</li></ul>';
  return { strength: strength, message: msg, indicatorText: indicatorText }

};

})(jQuery);
1	// $Id: user.js,v 1.18 2009/09/21 08:52:41 dries Exp $
2	(function ($) {
3
4	/**
5	* Attach handlers to evaluate the strength of any password fields and to check
6	* that its confirmation is correct.
7	*/
8	Drupal.behaviors.password = {
9	attach: function (context, settings) {
10	var translate = settings.password;
11	$('input.password-field', context).once('password', function () {
12	var passwordInput = $(this);
13	var innerWrapper = $(this).parent();
14	var outerWrapper = $(this).parent().parent();
15
16	// Add the password strength layers.
17	var passwordStrength = $('span.password-strength', innerWrapper);
18	var passwordResult = $('span.password-result', passwordStrength);
19	innerWrapper.addClass('password-parent');
20
21	// Add the description box.
22	var passwordMeter = '<div id="password-strength"><div id="password-strength-text"></div><div class="password-strength-title">' + translate.strengthTitle + '</div><div id="password-indicator"><div id="indicator"></div></div></div>';
23
24	$('div.description', outerWrapper).prepend('<div class="password-suggestions"></div>');
25	$(innerWrapper).prepend(passwordMeter);
26	var passwordDescription = $('div.password-suggestions', outerWrapper).hide();
27
28	// Add the password confirmation layer.
29	$('input.password-confirm', outerWrapper).after('<div class="password-confirm">' + translate['confirmTitle'] + ' <span></span></div>').parent().addClass('confirm-parent');
30	var confirmInput = $('input.password-confirm', outerWrapper);
31	var confirmResult = $('div.password-confirm', outerWrapper);
32	var confirmChild = $('span', confirmResult);
33
34	// Check the password strength.
35	var passwordCheck = function () {
36
37	// Evaluate the password strength.
38	var result = Drupal.evaluatePasswordStrength(passwordInput.val(), settings.password);
39
40	// Update the suggestions for how to improve the password.
41	if (passwordDescription.html() != result.message) {
42	passwordDescription.html(result.message);
43	}
44
45	// Only show the description box if there is a weakness in the password.
46	if (result.strength == 100) {
47	passwordDescription.hide();
48	}
49	else {
50	passwordDescription.show();
51	}
52
53	// Adjust the length of the strength indicator.
54	$('#indicator').css('width', result.strength + '%');
55
56	// Update the strength indication text.
57	$("#password-strength-text").html(result.indicatorText);
58
59	passwordCheckMatch();
60	};
61
62	// Check that password and confirmation inputs match.
63	var passwordCheckMatch = function () {
64
65	if (confirmInput.val()) {
66	var success = passwordInput.val() === confirmInput.val();
67
68	// Show the confirm result.
69	confirmResult.css({ visibility: 'visible' });
70
71	// Remove the previous styling if any exists.
72	if (this.confirmClass) {
73	confirmChild.removeClass(this.confirmClass);
74	}
75
76	// Fill in the success message and set the class accordingly.
77	var confirmClass = success ? 'ok' : 'error';
78	confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')]).addClass(confirmClass);
79	this.confirmClass = confirmClass;
80	}
81	else {
82	confirmResult.css({ visibility: 'hidden' });
83	}
84	};
85
86	// Monitor keyup and blur events.
87	// Blur must be used because a mouse paste does not trigger keyup.
88	passwordInput.keyup(passwordCheck).focus(passwordCheck).blur(passwordCheck);
89	confirmInput.keyup(passwordCheckMatch).blur(passwordCheckMatch);
90	});
91	}
92	};
93
94	/**
95	* Evaluate the strength of a user's password.
96	*
97	* Returns the estimated strength and the relevant output message.
98	*/
99	Drupal.evaluatePasswordStrength = function (password, translate) {
100	var weaknesses = 0, strength = 100, msg = [];
101
102	var hasLowercase = password.match(/[a-z]+/);
103	var hasUppercase = password.match(/[A-Z]+/);
104	var hasNumbers = password.match(/[0-9]+/);
105	var hasPunctuation = password.match(/[^a-zA-Z0-9]+/);
106
107	// If there is a username edit box on the page, compare password to that, otherwise
108	// use value from the database.
109	var usernameBox = $('input.username');
110	var username = (usernameBox.length > 0) ? usernameBox.val() : translate.username;
111
112	// Lose 10 points for every character less than 6.
113	if (password.length < 6) {
114	msg.push(translate.tooShort);
115	strength -= (6 - password.length) * 10;
116	}
117
118	// Count weaknesses.
119	if (!hasLowercase) {
120	msg.push(translate.addLowerCase);
121	weaknesses++;
122	}
123	if (!hasUppercase) {
124	msg.push(translate.addUpperCase);
125	weaknesses++;
126	}
127	if (!hasNumbers) {
128	msg.push(translate.addNumbers);
129	weaknesses++;
130	}
131	if (!hasPunctuation) {
132	msg.push(translate.addPunctuation);
133	weaknesses++;
134	}
135
136	// Apply penalty for each weakness (balanced against length penalty).
137	switch (weaknesses) {
138	case 1:
139	strength -= 12.5;
140	break;
141
142	case 2:
143	strength -= 25;
144	break;
145
146	case 3:
147	strength -= 40;
148	break;
149
150	case 4:
151	strength -= 40;
152	break;
153	}
154
155	// Check if password is the same as the username.
156	if (password !== '' && password.toLowerCase() === username.toLowerCase()) {
157	msg.push(translate.sameAsUsername);
158	// Passwords the same as username are always very weak.
159	strength = 5;
160	}
161
162	// Based on the strength, work out what text should be shown by the password strength meter.
163	if (strength < 60) {
164	indicatorText = translate.weak;
165	} else if (strength < 70) {
166	indicatorText = translate.fair;
167	} else if (strength < 80) {
168	indicatorText = translate.good;
169	} else if (strength < 100) {
170	indicatorText = translate.strong;
171	}
172
173	// Assemble the final message.
174	msg = translate.hasWeaknesses + '<ul><li>' + msg.join('</li><li>') + '</li></ul>';
175	return { strength: strength, message: msg, indicatorText: indicatorText }
176
177	};
178
179	})(jQuery);