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 29 May 2007 05:08: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 29 May 2007 05:08:06 -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 29 May 2007 05:08:06 -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,37 @@ 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; +} +.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 29 May 2007 05:08:06 -0000 @@ -1,6 +1,136 @@ /* $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 = 300; + + // 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 class = 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(class); + if (result.strength == "high") { + passwordDescription.hide(); + } + else { + passwordDescription.addClass(class); + } + this.passwordClass = class; + + // 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 class = success ? "ok" : "error"; + confirmResult.html(translate["confirm"+ (success ? "Success" : "Failure")]).addClass(class); + this.confirmClass = class; + }, 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; + + // 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 only contains letters. + else if (value.match(/^[a-zA-Z]*$/)) { + strength = "medium"; + msg = translate.onlyLetters; + } + // Check if it contains punctuation or other special characters. + else if (value.match(/^[a-zA-Z0-9]*$/)) { + strength = "medium"; + msg = translate.addPunctuation; + } + else { + strength = "high"; + } + return { strength: strength, message: msg }; +}; + +/** * On the admin/user/settings page, conditionally show all of the * picture-related form elements depending on the current value of the * "Picture support" radio buttons. @@ -10,5 +140,6 @@ if (Drupal.jsEnabled) { $('div.user-admin-picture-radios input[@type=radio]').click(function () { $('div.user-admin-picture-settings')[['hide', 'show'][this.value]](); }); + Drupal.passwordAttach(); }); } Index: modules/user/user.module =================================================================== RCS file: /cvs/drupal/drupal/modules/user/user.module,v retrieving revision 1.787 diff -u -p -r1.787 user.module --- modules/user/user.module 28 May 2007 06:08:47 -0000 1.787 +++ modules/user/user.module 29 May 2007 05:08:07 -0000 @@ -1424,6 +1424,7 @@ function user_register_submit($form, &$f } function user_edit_form($uid, $edit, $register = FALSE) { + _user_password_dynamic_validation(); $admin = user_access('administer users'); // Account information: @@ -3161,3 +3162,34 @@ function _user_mail_notify($op, $account } return $result; } + +/** + * Add javascript and string translations for dynamic password validation (strength and confirmation checking). + * + * This is an internal function that makes it easier to manage the translation + * strings that need to be passed to the javascript code. + */ +function _user_password_dynamic_validation() { + static $complete = FALSE; + global $user; + // Only need to do once per page. + if (!$complete) { + drupal_add_js(drupal_get_path('module', 'user') .'/user.js', 'module'); + + drupal_add_js(array( + 'password' => array( + 'title' => 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 and includes numbers and punctuation.'), + 'onlyLetters' => t('It is recommended to include numbers and punctuation in the password.'), + 'addPunctuation' => t('It is recommended to include punctuation in the password.'), + 'sameAsUsername' => t('It is recommended to choose a password different from the username.'), + 'confirmSuccess' => t('Password confirmed correctly.'), + 'confirmFailure' => t('The password and confirmation do not match.'), + 'username' => (isset($user->name) ? $user->name : ''))), + 'setting'); + $complete = TRUE; + } +}