settings: Add parent div to all input password elements in same row.

We had to specify margin-bottom as 10px separately for
`modal_password_input`, `password_visibility_toggle` and
`settings-forgot-password` classes. We've added a div that encapsulates
all these 3 elements which are meant to be in the same row and gives it
a common margin-bottom.
This is a refactor commit.

web/styles/settings.css

@@ -1166,59 +1166,58 @@ input[type="checkbox"] {
             flex: 0 0 100%;
         }
 
-        .modal_password_input {
+        .password-input-row {
-            /* The usual width of input is 206px, but we reduce
-               it by 30px to make way for the padding. */
-            width: 176px;
-            padding-right: 30px;
-        }
-
-        .password_visibility_toggle {
-            /* We're going to use flexbox, not
-               positioning, to get the clear button
-               over top of the input. This -2em
-               margin accomplishes that, in tandem
-               with the 2em width of this element,
-               which is shared with the ending
-               anchor element in left sidebar header
-               rows. We're using em instead of pixels
-               so the whitespace between the input box
-               and the icon doesn't decrease when the
-               icon's font-size increases when switching
-               from 14px info density to 16px info density
-               mode. */
-            width: 2em;
-            margin-left: -2em;
-
-            /* Make the button itself a flex container,
-               so we can perfectly center the X icon. */
             display: flex;
-            justify-content: center;
-            align-items: center;
-
-            opacity: 0.6;
-
-            /* Make the bottom margin same as `.modal_password_input`
-               for proper centering, if the margin changes there,
-               it should also change here and vice versa. */
             margin-bottom: 10px;
 
-            &:hover {
+            .modal_password_input {
-                opacity: 1;
+                /* The usual width of input is 206px, but we reduce
+                   it by 30px to make way for the padding. */
+                width: 176px;
+                padding-right: 30px;
+                /* Override the original 10px value so that we can
+                   set the margin-bottom in the parent div instead. */
+                margin-bottom: 0;
             }
-        }
 
-        .settings-forgot-password {
+            .password_visibility_toggle {
-            /* Make the link itself a flex container,
+                /* We're going to use flexbox, not
-               so we can perfectly center the text
+                   positioning, to get the clear button
-               in relation to the input box. */
+                   over top of the input. This -2em
-            display: flex;
+                   margin accomplishes that, in tandem
-            align-items: center;
+                   with the 2em width of this element,
-            margin-left: 10px;
+                   which is shared with the ending
-            /* Make the bottom margin same as `.modal_password_input`
+                   anchor element in left sidebar header
-               for proper centering, if the margin changes there,
+                   rows. We're using em instead of pixels
-               it should also change here and vice versa. */
+                   so the whitespace between the input box
-            margin-bottom: 10px;
+                   and the icon doesn't decrease when the
+                   icon's font-size increases when switching
+                   from 14px info density to 16px info density
+                   mode. */
+                width: 2em;
+                margin-left: -2em;
+
+                /* Make the button itself a flex container,
+                   so we can perfectly center the X icon. */
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                opacity: 0.6;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+
+            .settings-forgot-password {
+                /* Make the link itself a flex container,
+                   so we can perfectly center the text
+                   in relation to the input box. */
+                display: flex;
+                align-items: center;
+                margin-left: 10px;
+            }
         }
     }
 }

web/templates/dialog_change_password.hbs

@@ -1,15 +1,19 @@
 <form id="change_password_container">
     <div class="settings-password-div">
         <label for="old_password" class="modal-field-label">{{t "Old password" }}</label>
-        <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block modal_password_input" value="" />
+        <div class="password-input-row">
-        <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
+            <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block modal_password_input" value="" />
-        <a href="/accounts/password/reset/" class="settings-forgot-password sea-green" target="_blank" rel="noopener noreferrer">{{t "Forgot it?" }}</a>
+            <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
+            <a href="/accounts/password/reset/" class="settings-forgot-password sea-green" target="_blank" rel="noopener noreferrer">{{t "Forgot it?" }}</a>
+        </div>
     </div>
     <div class="settings-password-div">
         <label for="new_password" class="modal-field-label">{{t "New password" }}</label>
-        <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block modal_password_input" value=""
+        <div class="password-input-row">
-          data-min-length="{{password_min_length}}" data-min-guesses="{{password_min_guesses}}" />
+            <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block modal_password_input" value=""
-        <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
+              data-min-length="{{password_min_length}}" data-min-guesses="{{password_min_guesses}}" />
+            <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
+        </div>
         <div class="progress inline-block" id="pw_strength">
             <div class="bar bar-danger hide" style="width: 10%;"></div>
         </div>

web/templates/settings/api_key_modal.hbs

@@ -14,8 +14,10 @@
                         <p>{{t "Please re-enter your password to confirm your identity." }}</p>
                         <div class="settings-password-div">
                             <label for="password" class="modal-field-label">{{t "Your password" }}</label>
-                            <input type="password" autocomplete="off" name="password" id="get_api_key_password" class=" modal_password_input" value="" />
+                            <div class="password-input-row">
-                            <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
+                                <input type="password" autocomplete="off" name="password" id="get_api_key_password" class=" modal_password_input" value="" />
+                                <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
+                            </div>
                         </div>
                         <p class="small">
                             {{#tr}}If you don't know your password, you can <z-link>reset it</z-link>.