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

22 lines
1.3 KiB
Handlebars
Raw Normal View History

change_password: Migrate modal to dialog_widget.
2021-07-22 17:50:43 +02:00
<form id="change_password_container">
settings: Convert password dialog box to use flexbox. Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/Eye.20icon.20misaligned.20in.20Manage.20your.20API.20key/near/1890711. The eye icon to show and hide password was misaligned in the 16px info density mode. But since the icon was using absolute positioning to style the icon, we took this chance to refactor the element to use flexbox. We've renamed the `password-div` to `settings-password-div` for settings specific styling. The eye icon was only broken in settings, and since the settings and the login/signup stuff the same class was used at is quite different from each other, it might be better to have two different classes. The other `password-div` has not been refactored, it might be better refactored in its own PR along with other similar elements to use flexbox.
2024-07-17 11:48:01 +02:00
<div class="settings-password-div">
settings: Remove dropdown-title class. We now use "settings-field-label" and "modal-field-label" class on label elements in settings and modals respectively to add the bottom margin which was previously done by "dropdown-title" class as it is better to have more generic names to use on label for all type of inputs.
2024-03-29 07:54:50 +01:00
<label for="old_password" class="modal-field-label">{{t "Old password" }}</label>
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.
2024-07-17 12:41:48 +02:00
<div class="password-input-row">
settings: Remove .w-200 class from .new-style cluster. All elements that use this have their width already superseded by other selectors.
2024-08-30 21:51:24 +02:00
<input type="password" autocomplete="off" name="old_password" id="old_password" class="inline-block modal_password_input" value="" />
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.
2024-07-17 12:41:48 +02:00
<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>
change_password: Migrate modal to dialog_widget.
2021-07-22 17:50:43 +02:00
</div>
settings: Convert password dialog box to use flexbox. Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/Eye.20icon.20misaligned.20in.20Manage.20your.20API.20key/near/1890711. The eye icon to show and hide password was misaligned in the 16px info density mode. But since the icon was using absolute positioning to style the icon, we took this chance to refactor the element to use flexbox. We've renamed the `password-div` to `settings-password-div` for settings specific styling. The eye icon was only broken in settings, and since the settings and the login/signup stuff the same class was used at is quite different from each other, it might be better to have two different classes. The other `password-div` has not been refactored, it might be better refactored in its own PR along with other similar elements to use flexbox.
2024-07-17 11:48:01 +02:00
<div class="settings-password-div">
settings: Remove dropdown-title class. We now use "settings-field-label" and "modal-field-label" class on label elements in settings and modals respectively to add the bottom margin which was previously done by "dropdown-title" class as it is better to have more generic names to use on label for all type of inputs.
2024-03-29 07:54:50 +01:00
<label for="new_password" class="modal-field-label">{{t "New password" }}</label>
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.
2024-07-17 12:41:48 +02:00
<div class="password-input-row">
settings: Remove .w-200 class from .new-style cluster. All elements that use this have their width already superseded by other selectors.
2024-08-30 21:51:24 +02:00
<input type="password" autocomplete="new-password" name="new_password" id="new_password" class="inline-block modal_password_input" value=""
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.
2024-07-17 12:41:48 +02:00
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>
change_password: Migrate modal to dialog_widget.
2021-07-22 17:50:43 +02:00
<div class="progress inline-block" id="pw_strength">
settings: Do not use bootstrap "fade" class. We used bootstrap "fade" class to show the password strength only after password_quality module is imported. Adding "fade" class was only hiding the bar by setting opacity and the transition defined in bootstrap was not used as it was overridden by transition in progress_bar.css. So, we just hide and show the bootstrap by using "hide" class and remove the use of "fade" as part of the bootstrap removal project.
2024-01-29 07:41:56 +01:00
<div class="bar bar-danger hide" style="width: 10%;"></div>
change_password: Migrate modal to dialog_widget.
2021-07-22 17:50:43 +02:00
</div>
</div>
</form>