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

settings: Improve UI for email changes. 

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.

Fixes #31975.
This commit is contained in:
Saubhagya Patel 2024-11-20 14:03:49 +05:30
parent 2b2c4259d9
commit d1d0cab290
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/tippyjs.ts
View File

@ -423,7 +423,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) {

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

@ -9,9 +9,14 @@
<div class="input-group">
<label class="settings-field-label" for="change_email_button">{{t "Email" }}</label>
<div id="change_email_button_container" class="{{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
<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="button rounded" disabled="disabled" />
</div>
{{#if user_can_change_email}}
<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}}
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
{{/if}}
</div>
<div id="email-change-status"></div>
</div>