Commit b4ab2ac2 authored by Dries's avatar Dries

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

parent d0bd7823
......@@ -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.
......
......@@ -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',
......
......@@ -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;
......
......@@ -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;
}
......@@ -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 };
};
......
......@@ -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');
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment