Issue #2247049 by sqndr, herom, LewisNyman: Redesign password strength...

Issue #2247049 by sqndr, herom, LewisNyman: Redesign password strength indicator so it's less fragile.

core/modules/user/css/user.module.css

@@ -20,50 +20,27 @@
 /**
  * Password strength indicator.
  */
-.password-strength {
-  width: 13em;
-  float: right;  /* LTR */
-}
-[dir="rtl"] .password-strength {
-  float: left;
-}
-.password-strength-title {
+.password-strength__title,
+.password-strength__text {
   display: inline;
 }
-.password-strength-text {
-  float: right; /* LTR */
-  font-weight: bold;
-}
-[dir="rtl"] .password-strength-text {
-  float: left;
-}
-.password-indicator {
+.password-strength__meter {
   background-color: #c4c4c4;
-  height: 0.3em;
-  width: 100%;
+  height: 0.5em;
 }
-.password-indicator div {
+.password-strength__indicator {
   height: 100%;
   width: 0%;
   background-color: #47c965;
 }
 input.password-confirm,
-input.password-field {
-  width: 13.7em;
-  margin-bottom: 0.4em;
-  float: left; /* LTR */
+input.password-field,
+.password-strength {
+  width: 40%;
 }
 div.password-confirm {
-  float: right;  /* LTR */
   visibility: hidden;
-  width: 13em;
-}
-[dir="rtl"] input.password-confirm,
-[dir="rtl"] input.password-field {
-  float: right;
-}
-[dir="rtl"] div.password-confirm {
-  float: left;
+  width: 40%;
 }
 div.form-item div.password-suggestions {
   padding: 0.2em 0.5em;
@@ -86,34 +63,3 @@ div.password-suggestions ul {
   clear: right;
 }
 
-/**
- * Password strength indicator on narrow viewport.
- */
-@media screen and (max-width: 600px) {
-  .password-strength,
-  div.password-confirm {
-    float: none;
-    width: auto;
-    max-width: 100%;
-  }
-  .password-indicator {
-    margin-bottom: 0.4em;
-  }
-  input.password-confirm,
-  input.password-field {
-    margin-bottom: 0;
-    width: 100%;
-    max-width: none;
-  }
-  div.form-item div.password-suggestions {
-    width: auto;
-    max-width: 100%;
-  }
-  .confirm-parent,
-  .password-parent {
-    clear: none;
-    width: 100%;
-    max-width: none;
-    overflow: hidden;
-  }
-}

core/modules/user/user.js

@@ -25,7 +25,7 @@
 
         // If the password strength indicator is enabled, add its markup.
         if (settings.password.showStrengthIndicator) {
-          var passwordMeter = '<div class="password-strength"><div class="password-strength-text" aria-live="assertive"></div><div class="password-strength-title">' + translate.strengthTitle + '</div><div class="password-indicator"><div class="indicator"></div></div></div>';
+          var passwordMeter = '<div class="password-strength"><div class="password-strength__meter"><div class="password-strength__indicator"></div></div><div class="password-strength__title">' + translate.strengthTitle + ' </div><div class="password-strength__text" aria-live="assertive"></div></div>';
           confirmInput.parent().after('<div class="password-suggestions description"></div>');
           innerWrapper.append(passwordMeter);
           var passwordDescription = outerWrapper.find('div.password-suggestions').hide();
@@ -56,12 +56,12 @@
             passwordDescription.toggle(result.strength !== 100);
 
             // Adjust the length of the strength indicator.
-            innerWrapper.find('.indicator')
+            innerWrapper.find('.password-strength__indicator')
               .css('width', result.strength + '%')
               .css('background-color', result.indicatorColor);
 
             // Update the strength indication text.
-            innerWrapper.find('.password-strength-text').html(result.indicatorText);
+            innerWrapper.find('.password-strength__text').html(result.indicatorText);
           }
 
           // Check the value in the confirm input and show results.

core/themes/bartik/css/style.css

@@ -307,7 +307,7 @@ ul.menu li {
 }
 [dir="rtl"] .region-content ul,
 [dir="rtl"] .region-content ol {
-  padding: 2.5em 0 0.25em 0;
+  padding: 0 15px 0.25em 0;
 }
 .item-list ul li {
   margin: 0;
@@ -1303,39 +1303,10 @@ div.messages {
   float: none;
 }
 
-/* -------------- Password Meter  ------------- */
+/* -------------- Password Field  ------------- */
 
-[dir="rtl"] #password-strength {
-  left: auto;
-  margin-top: 2em;
-  right: 16em;
-}
-[dir="rtl"] .form-item-pass-pass2 label {
-  clear: right;
-}
-.confirm-parent,
-.password-parent {
-  width: 34em;
-}
-.password-parent,
-div.form-item div.password-suggestions {
-  position: relative;
-}
-.password-strength-text,
-.password-strength-title,
-div.password-confirm {
-  font-size: 0.82em;
-}
-.password-strength-text {
-  margin-top: 0.2em;
-}
-[dir="rtl"] #password-strength-text {
-  margin-top: 0;
-  float: left;
-}
-div.password-confirm {
-  margin-top: 2.2em;
-  width: 20.73em;
+.password-field {
+  margin: 0;
 }
 
 /* ---------------- Buttons    ---------------- */

core/themes/seven/css/style.css

@@ -876,10 +876,13 @@ select.form-select {
 }
 
 .form-item .password-suggestions {
-  float: left;
+  float: left; /* LTR */
   clear: left;
   width: 100%;
 }
+[dir="rtl"] .form-item .password-suggestions {
+  float: right;
+}
 .form-item-pass .description {
   clear: both;
 }
@@ -945,6 +948,9 @@ select.form-select {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
+  .password-strength {
+    width: 100%;
+  }
   div.form-item div.password-suggestions {
     float: none;
   }