paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Shubham Padia
2024-07-17 10:41:48 +00:00
committed by Tim Abbott
parent 2778aa5b0e
commit e72b42ec13
3 changed files with 61 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/styles/settings.css
View File

@@ -1166,11 +1166,18 @@ input[type="checkbox"] {
flex: 0 0 100%; flex: 0 0 100%;
} }
.password-input-row {
display: flex;
margin-bottom: 10px;
.modal_password_input { .modal_password_input {
/* The usual width of input is 206px, but we reduce /* The usual width of input is 206px, but we reduce
it by 30px to make way for the padding. */ it by 30px to make way for the padding. */
width: 176px; width: 176px;
padding-right: 30px; padding-right: 30px;
/* Override the original 10px value so that we can
set the margin-bottom in the parent div instead. */
margin-bottom: 0;
} }
.password_visibility_toggle { .password_visibility_toggle {
@@ -1198,11 +1205,6 @@ input[type="checkbox"] {
opacity: 0.6; 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 { &:hover {
opacity: 1; opacity: 1;
} }
@@ -1215,10 +1217,7 @@ input[type="checkbox"] {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 10px; margin-left: 10px;
/* 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;
} }
} }
} }

4
web/templates/dialog_change_password.hbs
View File

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

2
web/templates/settings/api_key_modal.hbs
View File

@@ -14,9 +14,11 @@
<p>{{t "Please re-enter your password to confirm your identity." }}</p> <p>{{t "Please re-enter your password to confirm your identity." }}</p>
<div class="settings-password-div"> <div class="settings-password-div">
<label for="password" class="modal-field-label">{{t "Your password" }}</label> <label for="password" class="modal-field-label">{{t "Your password" }}</label>
<div class="password-input-row">
<input type="password" autocomplete="off" name="password" id="get_api_key_password" class=" modal_password_input" value="" /> <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> <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
</div> </div>
</div>
<p class="small"> <p class="small">
{{#tr}}If you don't know your password, you can <z-link>reset it</z-link>. {{#tr}}If you don't know your password, you can <z-link>reset it</z-link>.
{{#*inline "z-link"}}<a href="/accounts/password/reset/" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}} {{#*inline "z-link"}}<a href="/accounts/password/reset/" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}