account-settings: Refactor change email button and modal class names.

Prep commit for updating tooltip from info icon to disabled button.
This commit is contained in:
Lauryn Menard 2022-12-14 13:45:08 +01:00 committed by Tim Abbott
parent 7613928e8a
commit 782cc80d99
5 changed files with 15 additions and 15 deletions

View File

@ -753,11 +753,11 @@ test("misc", ({override_rewire}) => {
page_params.realm_email_changes_disabled = false; page_params.realm_email_changes_disabled = false;
settings_account.update_email_change_display(); settings_account.update_email_change_display();
assert.ok(!$("#change_email").prop("disabled")); assert.ok(!$("#change_email_button").prop("disabled"));
page_params.realm_email_changes_disabled = true; page_params.realm_email_changes_disabled = true;
settings_account.update_email_change_display(); settings_account.update_email_change_display();
assert.ok($("#change_email").prop("disabled")); assert.ok($("#change_email_button").prop("disabled"));
page_params.realm_avatar_changes_disabled = false; page_params.realm_avatar_changes_disabled = false;
page_params.server_avatar_changes_disabled = false; page_params.server_avatar_changes_disabled = false;
@ -783,7 +783,7 @@ test("misc", ({override_rewire}) => {
assert.equal($(".change_name_tooltip").is(":visible"), false); assert.equal($(".change_name_tooltip").is(":visible"), false);
settings_account.update_email_change_display(); settings_account.update_email_change_display();
assert.ok(!$("#change_email").prop("disabled")); assert.ok(!$("#change_email_button").prop("disabled"));
override_rewire(stream_settings_data, "get_streams_for_settings_page", () => [ override_rewire(stream_settings_data, "get_streams_for_settings_page", () => [
{name: "some_stream", stream_id: 75}, {name: "some_stream", stream_id: 75},

View File

@ -32,7 +32,7 @@ import {user_settings} from "./user_settings";
let password_quality; // Loaded asynchronously let password_quality; // Loaded asynchronously
export function update_email(new_email) { export function update_email(new_email) {
const $email_input = $("#change_email"); const $email_input = $("#change_email_button");
if ($email_input) { if ($email_input) {
$email_input.text(new_email); $email_input.text(new_email);
@ -61,10 +61,10 @@ export function update_name_change_display() {
export function update_email_change_display() { export function update_email_change_display() {
if (page_params.realm_email_changes_disabled && !page_params.is_admin) { if (page_params.realm_email_changes_disabled && !page_params.is_admin) {
$("#change_email").prop("disabled", true); $("#change_email_button").prop("disabled", true);
$(".change_email_tooltip").show(); $(".change_email_tooltip").show();
} else { } else {
$("#change_email").prop("disabled", false); $("#change_email_button").prop("disabled", false);
$(".change_email_tooltip").hide(); $(".change_email_tooltip").hide();
} }
} }
@ -606,7 +606,7 @@ export function set_up() {
e.stopPropagation(); e.stopPropagation();
const $change_email_error = $("#change_email_modal").find("#dialog_error"); const $change_email_error = $("#change_email_modal").find("#dialog_error");
const data = {}; const data = {};
data.email = $("#change_email_container").find("input[name='email']").val(); data.email = $("#change_email_form").find("input[name='email']").val();
const opts = { const opts = {
success_continuation() { success_continuation() {
@ -640,12 +640,12 @@ export function set_up() {
} }
function change_email_post_render() { function change_email_post_render() {
const $input_elem = $("#change_email_container").find("input[name='email']"); const $input_elem = $("#change_email_form").find("input[name='email']");
const email = $("#change_email").text().trim(); const email = $("#change_email_button").text().trim();
$input_elem.val(email); $input_elem.val(email);
} }
$("#change_email").on("click", (e) => { $("#change_email_button").on("click", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (!page_params.realm_email_changes_disabled || page_params.is_admin) { if (!page_params.realm_email_changes_disabled || page_params.is_admin) {
@ -655,11 +655,11 @@ export function set_up() {
html_submit_button: $t_html({defaultMessage: "Change"}), html_submit_button: $t_html({defaultMessage: "Change"}),
loading_spinner: true, loading_spinner: true,
id: "change_email_modal", id: "change_email_modal",
form_id: "change_email_container", form_id: "change_email_form",
on_click: do_change_email, on_click: do_change_email,
post_render: change_email_post_render, post_render: change_email_post_render,
on_shown() { on_shown() {
$("#change_email_container input").trigger("focus"); $("#change_email_form input").trigger("focus");
}, },
}); });
} }

View File

@ -167,7 +167,7 @@ h3,
} }
#change_email_modal { #change_email_modal {
#change_email_container { #change_email_form {
margin: 0; margin: 0;
} }
} }

View File

@ -1,4 +1,4 @@
<form id="change_email_container" class="new-style"> <form id="change_email_form" class="new-style">
<label for="email">{{t "New email" }}</label> <label for="email">{{t "New email" }}</label>
<input type="text" name="email" value="{{ page_params.delivery_email }}" autocomplete="off" spellcheck="false" autofocus="autofocus"/> <input type="text" name="email" value="{{ page_params.delivery_email }}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
</form> </form>

View File

@ -8,7 +8,7 @@
<form class="email-change-form grid"> <form class="email-change-form grid">
<div class="input-group"> <div class="input-group">
<label class="inline-block title">{{t "Email" }}</label> <label class="inline-block title">{{t "Email" }}</label>
<button id='change_email' type="button" class="button btn-link small rounded inline-block" <button id="change_email_button" type="button" class="button btn-link small rounded inline-block"
{{#if (and page_params.realm_email_changes_disabled (not page_params.is_admin))}}disabled="disabled"{{/if}}> {{#if (and page_params.realm_email_changes_disabled (not page_params.is_admin))}}disabled="disabled"{{/if}}>
{{page_params.delivery_email}} {{page_params.delivery_email}}
<i class="fa fa-pencil"></i> <i class="fa fa-pencil"></i>