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

change_password: Migrate modal to dialog_widget.

This commit is contained in:
Ganesh Pawar 2021-07-22 21:20:43 +05:30 committed by Tim Abbott
parent 3b5b98c8f9
commit f5fbf5f0e0
8 changed files with 67 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend_tests/puppeteer_tests/settings.ts
View File

@ -50,22 +50,17 @@ async function test_change_password(page: Page): Promise<void> {
await page.click('[data-section="account-and-privacy"]');
await page.click("#change_password");
const change_password_button_selector = "#change_password_button";
const change_password_button_selector = "#change_password_modal .dialog_submit_button";
await page.waitForSelector(change_password_button_selector, {visible: true});
// For some strange reason #change_password_modal:focus is not working with Firefox.
// The below line is an alternative to that.
// TODO: Replace the below line with `await page.waitForSelector("#change_password_modal:focus", {visible: true})`
// when the above issue is resolved.
await page.waitForFunction(() => document.activeElement!.id === "change_password_modal");
await common.wait_for_micromodal_to_open(page);
await page.type("#old_password", test_credentials.default_user.password);
test_credentials.default_user.password = "new_password";
await page.type("#new_password", test_credentials.default_user.password);
await page.click(change_password_button_selector);
// On success the change password modal gets closed.
await page.waitForFunction(() => $("#change_password_modal").attr("aria-hidden") === "true");
await common.wait_for_modal_to_close(page);
await common.wait_for_micromodal_to_close(page);
}
async function test_get_api_key(page: Page): Promise<void> {

11
static/js/settings.js
View File

@ -7,7 +7,6 @@ import render_settings_tab from "../templates/settings_tab.hbs";
import * as admin from "./admin";
import * as blueslip from "./blueslip";
import * as common from "./common";
import {$t, $t_html} from "./i18n";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
@ -103,16 +102,6 @@ export function build_page() {
});
$(".settings-box").html(rendered_settings_tab);
common.setup_password_visibility_toggle(
"#old_password",
"#old_password + .password_visibility_toggle",
{tippy_tooltips: true},
);
common.setup_password_visibility_toggle(
"#new_password",
"#new_password + .password_visibility_toggle",
{tippy_tooltips: true},
);
}
export function launch(section) {

48
static/js/settings_account.js
View File

@ -2,6 +2,7 @@ import $ from "jquery";
import _ from "lodash";
import render_confirm_deactivate_own_user from "../templates/confirm_dialog/confirm_deactivate_own_user.hbs";
import render_dialog_change_password from "../templates/dialog_change_password.hbs";
import render_settings_api_key_modal from "../templates/settings/api_key_modal.hbs";
import render_settings_custom_user_profile_field from "../templates/settings/custom_user_profile_field.hbs";
import render_settings_dev_env_email_access from "../templates/settings/dev_env_email_access.hbs";
@ -392,12 +393,38 @@ export function set_up() {
password_quality?.("", $("#pw_strength .bar"), $("#new_password"));
}
clear_password_change();
function change_password_post_render() {
$("#change_password_modal")
.find("[data-micromodal-close]")
.on("click", () => {
clear_password_change();
});
common.setup_password_visibility_toggle(
"#old_password",
"#old_password + .password_visibility_toggle",
{tippy_tooltips: true},
);
common.setup_password_visibility_toggle(
"#new_password",
"#new_password + .password_visibility_toggle",
{tippy_tooltips: true},
);
clear_password_change();
}
$("#change_password").on("click", async (e) => {
e.preventDefault();
e.stopPropagation();
overlays.open_modal("#change_password_modal");
dialog_widget.launch({
html_heading: $t_html({defaultMessage: "Change password"}),
html_body: render_dialog_change_password(),
html_submit_button: $t_html({defaultMessage: "Change"}),
loading_spinner: true,
id: "change_password_modal",
form_id: "change_password_container",
post_render: change_password_post_render,
on_click: do_change_password,
});
$("#pw_change_controls").show();
if (page_params.realm_password_auth_enabled !== false) {
// zxcvbn.js is pretty big, and is only needed on password
@ -407,18 +434,10 @@ export function set_up() {
}
});
$("#change_password_modal")
.find("[data-dismiss=modal]")
.on("click", () => {
clear_password_change();
});
$("#change_password_button").on("click", (e) => {
function do_change_password(e) {
e.preventDefault();
e.stopPropagation();
const change_password_error = $("#change_password_modal")
.find(".change_password_info")
.expectOne();
const change_password_error = $("#change_password_modal").find("#dialog_error");
const data = {
old_password: $("#old_password").val(),
@ -446,9 +465,10 @@ export function set_up() {
const opts = {
success_continuation() {
channel.set_password_change_in_progress(false);
overlays.close_modal("#change_password_modal");
dialog_widget.close_modal();
},
error_continuation() {
dialog_widget.hide_dialog_spinner();
channel.set_password_change_in_progress(false);
},
error_msg_element: change_password_error,
@ -462,7 +482,7 @@ export function set_up() {
opts,
);
clear_password_change();
});
}
$("#new_password").on("input", () => {
const field = $("#new_password");

12
static/styles/settings.css
View File

@ -983,6 +983,13 @@ input[type="checkbox"] {
}
}
#change_password_modal {
.change_password_info,
#change_password_container {
margin: 0;
}
}
#api_key_form,
#change_password_modal {
.password-div {
@ -994,8 +1001,8 @@ input[type="checkbox"] {
.password_visibility_toggle {
position: absolute;
left: 190px;
top: 28px;
left: 194px;
top: 32px;
width: 14px;
opacity: 0.6;
@ -1520,7 +1527,6 @@ input[type="checkbox"] {
}
#change_email_modal .change_email_info,
#change_password_modal .change_password_info,
#api_key_modal #api_key_status {
margin-top: 3px;
}

1
static/styles/zulip.css
View File

@ -1400,6 +1400,7 @@ a.dark_background:hover,
display: inline-block;
position: relative;
color: hsl(0, 0%, 73%);
bottom: 4px;
}
div.message_table {

19
static/templates/dialog_change_password.hbs Normal file
View File

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

33
static/templates/settings/account_settings.hbs
View File

@ -52,39 +52,6 @@
</div>
</div>
{{/if}}
<div id="change_password_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
aria-labelledby="change_password_modal_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
<h3 class="inline-block" id="change_password_modal_label">{{t "Change password" }}</h3>
<div class="alert-notification change_password_info"></div>
</div>
<div class="modal-body">
<div class="field password-div">
<label for="old_password" class="title">{{t "Old password" }}</label>
<input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block" value="" />
<i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
<div class="settings-forgot-password">
<a href="/accounts/password/reset/" class="sea-green" target="_blank" rel="noopener noreferrer">{{t "Forgotten it?" }}</a>
</div>
</div>
<div class="field password-div">
<label for="new_password" class="title">{{t "New password" }}</label>
<input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block" value=""
data-min-length="{{ page_params.password_min_length }}" data-min-guesses="{{ page_params.password_min_guesses }}" />
<i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
<div class="progress inline-block" id="pw_strength">
<div class="bar bar-danger fade" style="width: 10%;"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="button white rounded" type="button" data-dismiss="modal">{{t "Cancel" }}</button>
<button id='change_password_button' class="button rounded sea-green">{{t "Change" }}</button>
</div>
</div>
</form>
<div class="input-group">

2
tools/linter_lib/custom_check.py
View File

@ -697,7 +697,7 @@ html_rules: List["Rule"] = [
"templates/zerver/accounts_home.html",
"templates/zerver/login.html",
# Needs the width cleaned up; display: none is fine
"static/templates/settings/account_settings.hbs",
"static/templates/dialog_change_password.hbs",
# background image property is dynamically generated
"static/templates/user_profile_modal.hbs",
"static/templates/pm_list_item.hbs",