Index: install.php =================================================================== RCS file: /cvs/drupal/drupal/install.php,v retrieving revision 1.55 diff -u -p -r1.55 install.php --- install.php 28 May 2007 18:50:49 -0000 1.55 +++ install.php 31 May 2007 03:55:05 -0000 @@ -818,6 +818,8 @@ function install_configure_form() { // This is necessary to add the task to the $_GET args so the install // system will know that it is done and we've taken over. + _user_password_dynamic_validation(); + $form['intro'] = array( '#value' => st('To configure your web site, please provide the following information.'), '#weight' => -10, Index: includes/form.inc =================================================================== RCS file: /cvs/drupal/drupal/includes/form.inc,v retrieving revision 1.200 diff -u -p -r1.200 form.inc --- includes/form.inc 28 May 2007 18:53:29 -0000 1.200 +++ includes/form.inc 31 May 2007 03:55:05 -0000 @@ -1200,11 +1200,13 @@ function expand_password_confirm($elemen '#type' => 'password', '#title' => t('Password'), '#value' => empty($element['#value']) ? NULL : $element['#value']['pass1'], + '#attributes' => array('class' => 'password-field'), ); $element['pass2'] = array( '#type' => 'password', '#title' => t('Confirm password'), '#value' => empty($element['#value']) ? NULL : $element['#value']['pass2'], + '#attributes' => array('class' => 'password-confirm'), ); $element['#element_validate'] = array('password_confirm_validate'); $element['#tree'] = TRUE; Index: modules/system/system.css =================================================================== RCS file: /cvs/drupal/drupal/modules/system/system.css,v retrieving revision 1.28 diff -u -p -r1.28 system.css --- modules/system/system.css 27 May 2007 17:57:48 -0000 1.28 +++ modules/system/system.css 31 May 2007 03:55:05 -0000 @@ -33,7 +33,7 @@ thead th { padding-bottom: .5em } .error { - color: #f00; + color: #e55; } div.error { border: 1px solid #d77; @@ -41,12 +41,29 @@ div.error { div.error, tr.error { background: #fcc; color: #200; + padding: 2px; +} +.warning { + color: #e0b010; +} +div.warning { + border: 1px solid #f0c020; } div.warning, tr.warning { background: #ffd; + color: #220; + padding: 2px; +} +.ok { + color: #008000; +} +div.ok { + border: 1px solid #00aa00; } div.ok, tr.ok { - background: #dfd; + background: #dfd none repeat scroll 0% 50%; + color: #020; + padding: 2px; } .item-list .icon { color: #555; @@ -446,3 +463,40 @@ thead div.sticky-header { html.js .js-hide { display: none; } + +/* +** Password strength indicator +*/ +span.password-strength { + visibility: hidden; +} +span.password-title { + font-weight: bold; +} +input.password-field { + margin-right: 10px; +} +div.password-description { + padding: 0 0 0 2px; + margin: 4px 0 0 0; + font-size: 0.85em; + max-width: 500px; +} +div.password-description ul { + margin-bottom: 0; +} +.password-parent { + margin: 0 0 0 0; +} +/* +** Password confirmation checker +*/ +input.password-confirm { + margin-right: 10px; +} +.confirm-parent { + margin: 5px 0 0 0; +} +span.password-confirm { + visibility: hidden; +} Index: modules/user/user.js =================================================================== RCS file: /cvs/drupal/drupal/modules/user/user.js,v retrieving revision 1.1 diff -u -p -r1.1 user.js --- modules/user/user.js 20 May 2007 16:38:19 -0000 1.1 +++ modules/user/user.js 31 May 2007 03:55:05 -0000 @@ -1,6 +1,148 @@ /* $Id: user.js,v 1.1 2007/05/20 16:38:19 dries Exp $ */ /** + * 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(''+ translate.title +' ').parent().after('
'); + var passwordStrength = $(".password-strength", parent); + var passwordDescription = $(".password-description", $(this).parent().parent()); + var passwordResult = $(".password-result", passwordStrength); + parent.addClass("password-parent"); + + // Add the password confirmation layer. + var outerItem = $(this).parent().parent(); + $("input.password-confirm", outerItem).after('').parent().addClass("confirm-parent"); + var confirmInput = $("input.password-confirm", outerItem); + var confirmResult = $("span.password-confirm", outerItem); + + var passwordMonitor = function() { + if (this.timer) { + clearTimeout(this.timer); + } + + this.timer = setTimeout(function() { + // Evaluate password strength. + + if (!passwordInput.val()) { + // Password is empty so hide the password strength UI. + passwordStrength.css({ visibility: "hidden" }); + passwordDescription.hide(); + } + else { + passwordStrength.css({ visibility: "visible" }); + passwordDescription.show(); + } + + 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) { + confirmResult.removeClass(this.confirmClass); + } + + // Display the correct message and set the class accordingly. + var confirmClass = success ? "ok" : "error"; + confirmResult.html(translate["confirm"+ (success ? "Success" : "Failure")]).addClass(confirmClass); + this.confirmClass = confirmClass; + }, monitorDelay); + }; + // Monitor keyup and blur events. + // Blur must be used because a mouse paste does not trigger keyup. + passwordInput.keyup(passwordMonitor).blur(passwordMonitor); + confirmInput.keyup(passwordMonitor).blur(passwordMonitor); + }); +}; + +/** + * 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 { + strength = "medium"; + msg = []; + if (!hasLetters || !hasCasing) { + msg.push(translate.addLetters); + } + if (!hasNumbers) { + msg.push(translate.addNumbers); + } + if (!hasPunctuation) { + msg.push(translate.addPunctuation); + } + msg = translate.needsMoreVariation +"