Issue #3061265 by lauriii, quiron, Niyas, bnjmnm, huzooka, catch: Use specific class for password confirm message

core/modules/user/user.es6.js

@@ -34,18 +34,14 @@
         $passwordInputParentWrapper
           .find('input.js-password-confirm')
           .parent()
-          .append(
+          .append(Drupal.theme('passwordConfirmMessage', translate))
-            `<div aria-live="polite" aria-atomic="true" class="password-confirm js-password-confirm">${
-              translate.confirmTitle
-            } <span></span></div>`,
-          )
           .addClass('confirm-parent');
 
         const $confirmInput = $passwordInputParentWrapper.find(
           'input.js-password-confirm',
         );
         const $confirmResult = $passwordInputParentWrapper.find(
-          'div.js-password-confirm',
+          'div.js-password-confirm-message',
         );
         const $confirmChild = $confirmResult.find('span');
 

core/modules/user/user.js

@@ -19,10 +19,10 @@
 
         $passwordInputParent.addClass('password-parent');
 
-        $passwordInputParentWrapper.find('input.js-password-confirm').parent().append('<div aria-live="polite" aria-atomic="true" class="password-confirm js-password-confirm">' + translate.confirmTitle + ' <span></span></div>').addClass('confirm-parent');
+        $passwordInputParentWrapper.find('input.js-password-confirm').parent().append(Drupal.theme('passwordConfirmMessage', translate)).addClass('confirm-parent');
 
         var $confirmInput = $passwordInputParentWrapper.find('input.js-password-confirm');
-        var $confirmResult = $passwordInputParentWrapper.find('div.js-password-confirm');
+        var $confirmResult = $passwordInputParentWrapper.find('div.js-password-confirm-message');
         var $confirmChild = $confirmResult.find('span');
 
         if (settings.password.showStrengthIndicator) {

core/modules/user/user.libraries.yml

@@ -2,6 +2,7 @@ drupal.user:
   version: VERSION
   js:
     user.js: {}
+    user.theme.js: {}
   css:
     component:
       css/user.module.css: {}

core/modules/user/user.theme.es6.js

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Theme elements for user password forms.
+ */
+
+(Drupal => {
+  /**
+   * Constucts a password confirm message element
+   *
+   * @return {string}
+   *   A string representing a DOM fragment.
+   */
+  Drupal.theme.passwordConfirmMessage = translate =>
+    `<div aria-live="polite" aria-atomic="true" class="password-confirm-message js-password-confirm-message">${
+      translate.confirmTitle
+    } <span></span></div>`;
+})(Drupal);

core/modules/user/user.theme.js

@@ -0,0 +1,12 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (Drupal) {
+  Drupal.theme.passwordConfirmMessage = function (translate) {
+    return "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-confirm-message js-password-confirm-message\">" + translate.confirmTitle + " <span></span></div>";
+  };
+})(Drupal);

core/themes/stable/js/user.theme.es6.js

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Stable theme overrides for user password forms.
+ */
+
+(Drupal => {
+  /**
+   * Constucts a password confirm message element
+   *
+   * @return {string}
+   *   A string representing a DOM fragment.
+   */
+  Drupal.theme.passwordConfirmMessage = translate =>
+    `<div aria-live="polite" aria-atomic="true" class="password-confirm js-password-confirm js-password-confirm-message">${
+      translate.confirmTitle
+    } <span></span></div>`;
+})(Drupal);

core/themes/stable/js/user.theme.js

@@ -0,0 +1,12 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (Drupal) {
+  Drupal.theme.passwordConfirmMessage = function (translate) {
+    return "<div aria-live=\"polite\" aria-atomic=\"true\" class=\"password-confirm js-password-confirm js-password-confirm-message\">" + translate.confirmTitle + " <span></span></div>";
+  };
+})(Drupal);

core/themes/stable/stable.info.yml

@@ -308,3 +308,7 @@ libraries-override:
       theme:
         css/views_ui.admin.theme.css: css/views_ui/views_ui.admin.theme.css
         css/views_ui.contextual.css: css/views_ui/views_ui.contextual.css
+
+libraries-extend:
+  user/drupal.user:
+    - stable/drupal.user

core/themes/stable/stable.libraries.yml

@@ -0,0 +1,4 @@
+drupal.user:
+  version: VERSION
+  js:
+    js/user.theme.js: {}