diff --git a/frontend_tests/puppeteer_tests/settings.ts b/frontend_tests/puppeteer_tests/settings.ts index 18df1b5178..35b451400a 100644 --- a/frontend_tests/puppeteer_tests/settings.ts +++ b/frontend_tests/puppeteer_tests/settings.ts @@ -50,22 +50,17 @@ async function test_change_password(page: Page): Promise { 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 { diff --git a/static/js/settings.js b/static/js/settings.js index 4946333069..9b389f8298 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -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) { diff --git a/static/js/settings_account.js b/static/js/settings_account.js index b5c16228ec..8aa701880e 100644 --- a/static/js/settings_account.js +++ b/static/js/settings_account.js @@ -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"); diff --git a/static/styles/settings.css b/static/styles/settings.css index 0ed57bb325..0bbba544f4 100644 --- a/static/styles/settings.css +++ b/static/styles/settings.css @@ -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; } diff --git a/static/styles/zulip.css b/static/styles/zulip.css index f5923a5826..5c1b41a903 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -1400,6 +1400,7 @@ a.dark_background:hover, display: inline-block; position: relative; color: hsl(0, 0%, 73%); + bottom: 4px; } div.message_table { diff --git a/static/templates/dialog_change_password.hbs b/static/templates/dialog_change_password.hbs new file mode 100644 index 0000000000..5794a96176 --- /dev/null +++ b/static/templates/dialog_change_password.hbs @@ -0,0 +1,19 @@ +
+
+ + + +
+ {{t "Forgotten it?" }} +
+
+
+ + + +
+
+
+
+
diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs index fbeecd464c..0f84ac9dcc 100644 --- a/static/templates/settings/account_settings.hbs +++ b/static/templates/settings/account_settings.hbs @@ -52,39 +52,6 @@ {{/if}} - -
diff --git a/tools/linter_lib/custom_check.py b/tools/linter_lib/custom_check.py index b029f58c51..7483a7002d 100644 --- a/tools/linter_lib/custom_check.py +++ b/tools/linter_lib/custom_check.py @@ -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",