paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-15 11:22:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Improve UI for email changes.

Browse Source 
This commit includes the following changes:
 - The email field is now a disabled text field.
 - An "Edit" (pencil) button is added next to the email
   field, which opens the change email modal.
 - The "Edit" button is not shown if the user doesn't
   have permission to edit their email.
 - When email changes are disabled, the "email changes are
   disabled" tooltip now appears over the email field, which
   previously appeared to the right of the email field.
 - Refactor `settings_org.test.cjs` to align with the changes
   of the added "Edit" button.

Fixes #31975.
This commit is contained in:
Saubhagya Patel
2024-12-05 22:38:57 +05:30
committed by Tim Abbott
parent 74112e4034
commit c44c153b9a
4 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/settings_account.ts
View File

@@ -43,10 +43,12 @@ let password_quality:
let user_avatar_widget_created = false;
export function update_email(new_email: string): void {
const $email_input = $("#change_email_button");
const $email_input = $("#email_field_container");
if ($email_input) {
$email_input.text(new_email);
$("#email-change-status").hide();
$("#dev-account-settings-status").hide();
}
}
@@ -82,12 +84,12 @@ export function update_email_change_display(): void {
}
if (!settings_data.user_can_change_email()) {
$("#change_email_button").prop("disabled", true);
$("#change_email_button_container").addClass("disabled_setting_tooltip");
$("#change_email_button").addClass("hide");
$("#email_field_container").addClass("disabled_setting_tooltip");
$("label[for='change_email_button']").addClass("cursor-text");
} else {
$("#change_email_button").prop("disabled", false);
$("#change_email_button_container").removeClass("disabled_setting_tooltip");
$("#change_email_button").removeClass("hide");
$("#email_field_container").removeClass("disabled_setting_tooltip");
$("label[for='change_email_button']").removeClass("cursor-text");
}
}
@@ -595,7 +597,7 @@ export function set_up(): void {
$t_html(
{
defaultMessage:
"Check your email ({email}) to confirm the new address.",
"Check your email (<b>{email}</b>) to confirm the new address.",
},
{email: data.email},
),

2
web/src/tippyjs.ts
View File

@@ -422,7 +422,7 @@ export function initialize(): void {
});
tippy.delegate("body", {
target: "#change_email_button_container.disabled_setting_tooltip",
target: "#email_field_container.disabled_setting_tooltip",
content: $t({defaultMessage: "Email address changes are disabled in this organization."}),
appendTo: () => document.body,
onHidden(instance) {

9
web/templates/settings/account_settings.hbs
View File

@@ -8,9 +8,12 @@
{{#if user_has_email_set}}
<div class="input-group">
<label class="settings-field-label {{#unless user_can_change_email}}cursor-text{{/unless}}" for="change_email_button">{{t "Email" }}</label>
<div id="change_email_button_container" class="{{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
<button id="change_email_button" type="button" class="button rounded tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Change your email' }}" {{#unless user_can_change_email}}disabled="disabled"{{/unless}}>
{{current_user.delivery_email}}
<div>
<div id="email_field_container" class="inline-block {{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
<input type="email" value="{{current_user.delivery_email}}" class="settings_text_input" disabled="disabled" />
</div>
<button id="change_email_button" type="button" class="button rounded tippy-zulip-delayed-tooltip {{#unless user_can_change_email}}hide{{/unless}}" data-tippy-content="{{t 'Change your email' }}" aria-label="{{t 'Change your email' }}">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</div>
<div id="email-change-status"></div>

6
web/tests/settings_org.test.cjs
View File

@@ -809,12 +809,12 @@ test("misc", ({override}) => {
override(realm, "realm_email_changes_disabled", false);
settings_account.update_email_change_display();
assert.ok(!$("#change_email_button").prop("disabled"));
assert.ok(!$("#change_email_button").hasClass("hide"));
assert.ok(!$("label[for='change_email_button']").hasClass("cursor-text"));
override(realm, "realm_email_changes_disabled", true);
settings_account.update_email_change_display();
assert.ok($("#change_email_button").prop("disabled"));
assert.ok($("#change_email_button").hasClass("hide"));
assert.ok($("label[for='change_email_button']").hasClass("cursor-text"));
override(realm, "realm_avatar_changes_disabled", false);
@@ -842,7 +842,7 @@ test("misc", ({override}) => {
assert.ok(!$("label[for='full_name']").hasClass("cursor-text"));
settings_account.update_email_change_display();
assert.ok(!$("#change_email_button").prop("disabled"));
assert.ok(!$("#change_email_button").hasClass("hide"));
settings_account.update_avatar_change_display();
assert.ok(!$("#user-avatar-upload-widget .image_upload_button").hasClass("hide"));