180 lines
		
	
	
		
			5.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
			
		
		
	
	
			180 lines
		
	
	
		
			5.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
// $Id$
 | 
						|
(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);
 |