Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
web/styles/settings.css
View File

@ -1166,59 +1166,58 @@ input[type="checkbox"] {
flex: 0 0 100%;
}
.modal_password_input {
/* 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. */
.password-input-row {
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 {
opacity: 1;
.modal_password_input {
/* 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 {
/* 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;
/* 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;
.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;
&: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;
}
}
}
}

16
web/templates/dialog_change_password.hbs
View File

@ -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="" />
<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 class="password-input-row">
<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>
<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=""
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 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=""
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>

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

@ -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="" />
<i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
<div class="password-input-row">
<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>.