settings: Improve password change modal UI.

- When password fields are cleared, update password strength bar. - On data dismiss, clear password fields. - Exclude forgot-password div from focus. - On enter key, modal should be submitted not dismissed. - Change password btn text from "Change password" to "*****"
vfazio · Feb 2, 2018 · 21cbdfd · 21cbdfd
1 parent 39604eb
commit 21cbdfd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/static/js/settings_account.js b/static/js/settings_account.js
@@ -81,6 +81,7 @@ exports.set_up = function () {
         // Clear the password boxes so that passwords don't linger in the DOM
         // for an XSS attacker to find.
         $('#old_password, #new_password').val('');
+        common.password_quality('', $('#pw_strength .bar'), $('#new_password'));
     }
 
     clear_password_change();
@@ -105,6 +106,10 @@ exports.set_up = function () {
         }
     });
 
+    $('#change_password_modal').find('[data-dismiss=modal]').on('click', function () {
+        clear_password_change();
+    });
+
     $('#change_password_button').on('click', function (e) {
         e.preventDefault();
         e.stopPropagation();

diff --git a/static/templates/settings/account-settings.handlebars b/static/templates/settings/account-settings.handlebars
@@ -45,7 +45,8 @@
                     <a id="change_password" {{#if page_params.realm_email_auth_enabled}}href="#change_password"{{/if}}>
                         {{#if page_params.realm_email_auth_enabled}}
                         <div class="input-group inline-block" id="pw_change_link">
-                            <button type="button" class="change_password_button button rounded inline-block input-size" data-dismiss="modal">{{t "Change password" }}</button>
+                            <button type="button" class="change_password_button small button rounded inline-block" data-dismiss="modal">{{t "********" }}<i class="fa fa-pencil"></i>
+                            </button>
                         </div>
                         {{/if}}
                     </a>
@@ -77,7 +78,7 @@
                     </div>
                     <div class="alert change_password_info"></div>
                     <div class="modal-footer">
-                        <button class="button white rounded" data-dismiss="modal">{{t "Cancel" }}</button>
+                        <button class="button white rounded" type="button" data-dismiss="modal">{{t "Cancel" }}</button>
                         <button id='change_password_button' class="button rounded sea-green" data-dismiss="modal">{{t "Change" }}</button>
                     </div>
                 </div>