diff --git a/core/core.libraries.yml b/core/core.libraries.yml index 32d4110..1a00206 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -234,6 +234,15 @@ drupal.progress: - core/jquery - core/drupalSettings +drupal.revealpass: + version: VERSION + js: + misc/revealpass.js: {} + dependencies: + - core/drupal + - core/jquery + - core/jquery.once + drupal.states: version: VERSION js: diff --git a/core/lib/Drupal/Core/Render/Element/PasswordReveal.php b/core/lib/Drupal/Core/Render/Element/PasswordReveal.php new file mode 100644 index 0000000..b61b8e3 --- /dev/null +++ b/core/lib/Drupal/Core/Render/Element/PasswordReveal.php @@ -0,0 +1,54 @@ + 'password_confirm', + * '#title' => t('Password'), + * '#size' => 25, + * ); + * @endcode + * + * @see \Drupal\Core\Render\Element\Password + * + * @FormElement("password_reveal") + */ +class PasswordReveal extends Password { + + /** + * {@inheritdoc} + */ + public function getInfo() { + $info = parent::getInfo(); + $info['#process'][] = [get_class($this), 'processPasswordConfirm']; + + return $info; + } + + /** + * Expand a password_confirm field into two text boxes. + */ + public static function processPasswordConfirm(&$element, FormStateInterface $form_state, &$complete_form) { + $element['#attributes']['class'][] = 'password-field'; + $element['#attributes']['class'][] = 'js-password-field'; + $element['#attached']['library'][] = 'core/drupal.revealpass'; + $element['#attributes']['data-drupal-revealpass'] = TRUE; + + return $element; + } + +} diff --git a/core/misc/revealpass.js b/core/misc/revealpass.js new file mode 100644 index 0000000..f9227e3 --- /dev/null +++ b/core/misc/revealpass.js @@ -0,0 +1,51 @@ +/** + * @file + * Creates a reveal password link on password inputs. + */ + +(function ($, Drupal) { + + 'use strict'; + + var showPass = Drupal.t('Show password'); + var hidePass = Drupal.t('Hide password'); + + /** + * Reveal click handle that either shows or hides the password. + * + * @param {jQuery.Event} event + * The jQuery event. + */ + function revealClickHandle(event) { + var $pass = $(event.data.password); + var $button = $(event.target); + + if ($pass.attr('type') === 'password') { + $pass.attr('type', 'text'); + $button.text(hidePass); + } + else { + $pass.attr('type', 'password'); + $button.text(showPass); + } + } + + /** + * Initialize reveal links. + * + * @type {Drupal~behavior} + */ + Drupal.behaviors.revealPass = { + attach: function (context) { + $(context).find('input[type=password][data-drupal-revealpass]') + .once('revealpass') + .each(function (index, element) { + var $trigger = $(''); + + $trigger.on('click', {password: element}, revealClickHandle); + $trigger.insertAfter(element); + }); + } + }; + +})(jQuery, Drupal); diff --git a/core/modules/user/src/AccountForm.php b/core/modules/user/src/AccountForm.php index 8b0149e..7cc34bb 100644 --- a/core/modules/user/src/AccountForm.php +++ b/core/modules/user/src/AccountForm.php @@ -118,11 +118,21 @@ public function form(array $form, FormStateInterface $form_state) { // Display password field only for existing users or when user is allowed to // assign a password during registration. if (!$register) { - $form['account']['pass'] = array( - '#type' => 'password_confirm', - '#size' => 25, - '#description' => $this->t('To change the current user password, enter the new password in both fields.'), - ); + if ($config->get('password_type_reveal')) { + $form['account']['pass'] = array( + '#title' => $this->t('Password'), + '#type' => 'password_reveal', + '#size' => 25, + '#description' => $this->t('To change the current user password, enter the new password.'), + ); + } + else { + $form['account']['pass'] = array( + '#type' => 'password_confirm', + '#size' => 25, + '#description' => $this->t('To change the current user password, enter the new password in both fields.'), + ); + } // To skip the current password field, the user must have logged in via a // one-time link and have the token in the URL. Store this in $form_state @@ -159,12 +169,23 @@ public function form(array $form, FormStateInterface $form_state) { } } elseif (!$config->get('verify_mail') || $admin) { - $form['account']['pass'] = array( - '#type' => 'password_confirm', - '#size' => 25, - '#description' => $this->t('Provide a password for the new account in both fields.'), - '#required' => TRUE, - ); + if ($config->get('password_type_reveal')) { + $form['account']['pass'] = array( + '#title' => $this->t('Password'), + '#type' => 'password_reveal', + '#size' => 25, + '#description' => $this->t('Provide a password for the new account.'), + '#required' => TRUE, + ); + } + else { + $form['account']['pass'] = array( + '#type' => 'password_confirm', + '#size' => 25, + '#description' => $this->t('Provide a password for the new account in both fields.'), + '#required' => TRUE, + ); + } } // When not building the user registration form, prevent web browsers from diff --git a/core/modules/user/src/AccountSettingsForm.php b/core/modules/user/src/AccountSettingsForm.php index e714884..7455cb4 100644 --- a/core/modules/user/src/AccountSettingsForm.php +++ b/core/modules/user/src/AccountSettingsForm.php @@ -170,6 +170,11 @@ public function buildForm(array $form, FormStateInterface $form_state) { '#title' => $this->t('Enable password strength indicator'), '#default_value' => $config->get('password_strength'), ); + $form['registration_cancellation']['user_password_type_reveal'] = array( + '#type' => 'checkbox', + '#title' => $this->t('Use password reveal, not password confirm, on account edit pages'), + '#default_value' => $config->get('password_type_reveal'), + ); $form['registration_cancellation']['user_cancel_method'] = array( '#type' => 'radios', '#title' => $this->t('When cancelling a user account'), @@ -434,6 +439,7 @@ public function submitForm(array &$form, FormStateInterface $form_state) { ->set('anonymous', $form_state->getValue('anonymous')) ->set('register', $form_state->getValue('user_register')) ->set('password_strength', $form_state->getValue('user_password_strength')) + ->set('password_type_reveal', $form_state->getValue('user_password_type_reveal')) ->set('verify_mail', $form_state->getValue('user_email_verification')) ->set('cancel_method', $form_state->getValue('user_cancel_method')) ->set('notify.status_activated', $form_state->getValue('user_mail_status_activated_notify')) diff --git a/core/modules/user/user.js b/core/modules/user/user.js index f4602c6..26c825d 100644 --- a/core/modules/user/user.js +++ b/core/modules/user/user.js @@ -31,15 +31,20 @@ // Add identifying class to password element parent. $passwordInputParent.addClass('password-parent'); + var passwordSelector = 'js-password-field'; + // If there is a password confirm field use that. + if ($(context).find('input.js-password-confirm').length) { + passwordSelector = 'js-password-confirm'; + } // Add the password confirmation layer. $passwordInputParentWrapper - .find('input.js-password-confirm') + .find('input.' + passwordSelector) .parent() - .append('
' + translate.confirmTitle + '
') + .append('
' + translate.confirmTitle + '
') .addClass('confirm-parent'); - var $confirmInput = $passwordInputParentWrapper.find('input.js-password-confirm'); - var $confirmResult = $passwordInputParentWrapper.find('div.js-password-confirm'); + var $confirmInput = $passwordInputParentWrapper.find('input.' + passwordSelector); + var $confirmResult = $passwordInputParentWrapper.find('div.' + passwordSelector); var $confirmChild = $confirmResult.find('span'); // If the password strength indicator is enabled, add its markup. diff --git a/core/modules/user/user.module b/core/modules/user/user.module index 3d76074..44f475e 100644 --- a/core/modules/user/user.module +++ b/core/modules/user/user.module @@ -1228,6 +1228,9 @@ function user_element_info_alter(array &$types) { if (isset($types['password_confirm'])) { $types['password_confirm']['#process'][] = 'user_form_process_password_confirm'; } + if (isset($types['password_reveal'])) { + $types['password_reveal']['#process'][] = 'user_form_process_password_reveal'; + } } /** @@ -1271,6 +1274,44 @@ function user_form_process_password_confirm($element) { } /** + * Form element process handler for client-side password validation. + * + * This #process handler is automatically invoked for 'password_reveal' form + * elements to add the JavaScript and string translations for dynamic password + * validation. + */ +function user_form_process_password_reveal($element) { + $password_settings = array( + 'confirmTitle' => '', + 'showStrengthIndicator' => FALSE, + ); + + if (\Drupal::config('user.settings')->get('password_strength')) { + $password_settings['showStrengthIndicator'] = TRUE; + $password_settings += array( + 'strengthTitle' => t('Password strength:'), + 'hasWeaknesses' => t('To make your password stronger:'), + 'tooShort' => t('Make it at least 12 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'), + 'weak' => t('Weak'), + 'fair' => t('Fair'), + 'good' => t('Good'), + 'strong' => t('Strong'), + 'username' => \Drupal::currentUser()->getUsername(), + ); + } + + $element['#attached']['library'][] = 'user/drupal.user'; + $element['#attached']['drupalSettings']['password'] = $password_settings; + + return $element; +} + +/** * Implements hook_modules_uninstalled(). */ function user_modules_uninstalled($modules) { diff --git a/core/themes/classy/css/components/user.css b/core/themes/classy/css/components/user.css index d62ff25..5905e85 100644 --- a/core/themes/classy/css/components/user.css +++ b/core/themes/classy/css/components/user.css @@ -54,6 +54,11 @@ [dir="rtl"] .password-parent { clear: right; } +@media all and (min-width: 600px) { + .password-parent .toggle-password { + margin: 0 0.75em; + } +} /* Styling for the status indicator of the passwords match test. */ .password-confirm .ok {