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

settings: Use confirm_dialog for deactivating own account modal. 

This refactor changes two things - position of the modal, as it
is moved up by some amount because of using confirm_dialog and
also loading spinner of confirm_dialog widget is used.
This commit is contained in:
sahil839 2021-06-23 14:53:03 +05:30 committed by Tim Abbott
parent 6d39dd9d01
commit 4df22564f4
3 changed files with 62 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
static/js/settings_account.js
View File

@ -1,6 +1,7 @@
import $ from "jquery"; import $ from "jquery";
import _ from "lodash"; import _ from "lodash";
import render_confirm_deactivate_own_user from "../templates/confirm_dialog/confirm_deactivate_own_user.hbs";
import render_settings_api_key_modal from "../templates/settings/api_key_modal.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_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"; import render_settings_dev_env_email_access from "../templates/settings/dev_env_email_access.hbs";
@ -9,6 +10,7 @@ import * as avatar from "./avatar";
import * as blueslip from "./blueslip"; import * as blueslip from "./blueslip";
import * as channel from "./channel"; import * as channel from "./channel";
import * as common from "./common"; import * as common from "./common";
import * as confirm_dialog from "./confirm_dialog";
import {csrf_token} from "./csrf"; import {csrf_token} from "./csrf";
import {$t_html} from "./i18n"; import {$t_html} from "./i18n";
import * as overlays from "./overlays"; import * as overlays from "./overlays";
@ -553,14 +555,6 @@ export function set_up() {
} }
}); });
$("#user_deactivate_account_button").on("click", (e) => {
// This click event must not get propagated to parent container otherwise the modal
// will not show up because of a call to `close_active_modal` in `settings.js`.
e.preventDefault();
e.stopPropagation();
overlays.open_modal("#deactivate_self_modal");
});
$("#account-settings").on("click", ".custom_user_field .remove_date", (e) => { $("#account-settings").on("click", ".custom_user_field .remove_date", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -585,52 +579,65 @@ export function set_up() {
} }
}); });
$("#do_deactivate_self_button").on("click", () => { $("#user_deactivate_account_button").on("click", (e) => {
$("#do_deactivate_self_button .loader").css("display", "inline-block"); // This click event must not get propagated to parent container otherwise the modal
$("#do_deactivate_self_button span").hide(); // will not show up because of a call to `close_active_modal` in `settings.js`.
$("#do_deactivate_self_button object").on("load", function () { e.preventDefault();
const doc = this.getSVGDocument(); e.stopPropagation();
const $svg = $(doc).find("svg");
$svg.find("rect").css("fill", "#000");
});
setTimeout(() => { function handle_confirm() {
channel.del({ setTimeout(() => {
url: "/json/users/me", channel.del({
success() { url: "/json/users/me",
overlays.close_modal("#deactivate_self_modal"); success() {
window.location.href = "/login/"; confirm_dialog.hide_confirm_dialog_spinner();
}, overlays.close_modal("#confirm_dialog_modal");
error(xhr) { window.location.href = "/login/";
const error_last_owner = $t_html({ },
defaultMessage: "Error: Cannot deactivate the only organization owner.", error(xhr) {
}); const error_last_owner = $t_html({
const error_last_user = $t_html( defaultMessage: "Error: Cannot deactivate the only organization owner.",
{ });
defaultMessage: const error_last_user = $t_html(
"Error: Cannot deactivate the only user. You can deactivate the whole organization though in your <z-link>organization profile settings</z-link>.", {
}, defaultMessage:
{ "Error: Cannot deactivate the only user. You can deactivate the whole organization though in your <z-link>organization profile settings</z-link>.",
"z-link": (content_html) => },
`<a target="_blank" href="/#organization/organization-profile">${content_html}</a>`, {
}, "z-link": (content_html) =>
); `<a target="_blank" href="/#organization/organization-profile">${content_html}</a>`,
let rendered_error_msg; },
if (xhr.responseJSON.code === "CANNOT_DEACTIVATE_LAST_USER") { );
if (xhr.responseJSON.is_last_owner) { let rendered_error_msg;
rendered_error_msg = error_last_owner; if (xhr.responseJSON.code === "CANNOT_DEACTIVATE_LAST_USER") {
} else { if (xhr.responseJSON.is_last_owner) {
rendered_error_msg = error_last_user; rendered_error_msg = error_last_owner;
} else {
rendered_error_msg = error_last_user;
}
} }
} confirm_dialog.hide_confirm_dialog_spinner();
overlays.close_modal("#deactivate_self_modal"); overlays.close_modal("#confirm_dialog_modal");
$("#account-settings-status") $("#account-settings-status")
.addClass("alert-error") .addClass("alert-error")
.html(rendered_error_msg) .html(rendered_error_msg)
.show(); .show();
}, },
}); });
}, 5000); }, 5000);
}
const html_body = render_confirm_deactivate_own_user();
const modal_parent = $("#account-settings .account-settings-form");
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Deactivate your account"}),
html_body,
html_yes_button: $t_html({defaultMessage: "Confirm"}),
on_click: handle_confirm,
help_link: "/help/deactivate-your-account",
fade: true,
loading_spinner: true,
});
}); });
$("#show_my_user_profile_modal").on("click", () => { $("#show_my_user_profile_modal").on("click", () => {

3
static/templates/confirm_dialog/confirm_deactivate_own_user.hbs Normal file
View File

@ -0,0 +1,3 @@
<p>{{#tr}}By deactivating your account, you will be logged out immediately.{{/tr}}</p>
<p>{{t "Note that any bots that you maintain will be disabled." }}</p>
<p>{{t "Are you sure you want to deactivate your account?"}}</p>

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

@ -158,28 +158,6 @@
<i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview profile' }}"></i> <i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview profile' }}"></i>
</button> </button>
<div id="deactivate_self_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_self_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 id="deactivation_self_modal_label">
{{t "Deactivate your account" }}
{{> ../help_link_widget link="/help/deactivate-your-account" }}
</h3>
</div>
<div class="modal-body">
<p>{{#tr}}By deactivating your account, you will be logged out immediately.{{/tr}}</p>
<p>{{t "Note that any bots that you maintain will be disabled." }}</p>
<p>{{t "Are you sure you want to deactivate your account?"}}</p>
</div>
<div class="modal-footer">
<button class="button" data-dismiss="modal">{{t "Cancel" }}</button>
<button class="button btn-danger rounded" id="do_deactivate_self_button">
<object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
<span>{{t "Confirm" }}</span>
</button>
</div>
</div>
<hr class="settings_separator" /> <hr class="settings_separator" />
<div class="form-horizontal" id="api_key_button_box"> <div class="form-horizontal" id="api_key_button_box">