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

user_profile: Disable save button until changes are made. 

Prevents modal from closing when `Save changes` is clicked
after editing a profile field. Also, disables the `Save changes`
button until at least one field has been edited.

Fixes part of #26692.

Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>.
Co-authored-by: Angelica <angelica.ferlin@gmail.com>.
This commit is contained in:
sanchi-t 2024-03-07 16:12:17 +05:30 committed by Tim Abbott
parent c442db64fc
commit 5a0abeed92
3 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/custom_profile_fields_ui.js
View File

@ -156,7 +156,9 @@ export function initialize_custom_date_type_fields(element_id) {
$(element_id)
.find(".custom_user_field .remove_date")
.on("click", function () {
$(this).parent().find(".custom_user_field_value").val("");
const $custom_user_field = $(this).parent().find(".custom_user_field_value");
$custom_user_field.val("");
$custom_user_field.trigger("input");
});
}

5
web/src/dialog_widget.ts
View File

@ -130,6 +130,11 @@ export function get_current_values($inputs: JQuery): Record<string, unknown> {
current_values[property_name] = this.files[0];
} else if (property_name === "edit_bot_owner") {
current_values[property_name] = $(this).find(".dropdown_widget_value").text();
} else if ($(this).hasClass("pill-container")) {
// Notably, this just concatenates the pill labels;
// good enough for checking if something has changed,
// but not appropriate for many other potential uses.
current_values[property_name] = $(this).find(".pill-value").text();
} else {
current_values[property_name] = $(this).val();
}

44
web/src/user_profile.js
View File

@ -1,6 +1,7 @@
import ClipboardJS from "clipboard";
import {parseISO} from "date-fns";
import $ from "jquery";
import _ from "lodash";
import render_profile_access_error_model from "../templates/profile_access_error_modal.hbs";
import render_admin_human_form from "../templates/settings/admin_human_form.hbs";
@ -49,6 +50,7 @@ let user_streams_list_widget;
let user_profile_subscribe_widget;
let toggler;
let bot_owner_dropdown_widget;
let original_values;
const INCOMING_WEBHOOK_BOT_TYPE = 2;
const OUTGOING_WEBHOOK_BOT_TYPE = "3";
@ -421,6 +423,7 @@ export function show_user_profile(user, default_tab_key = "profile-tab") {
$("#user-profile-modal-holder").html(render_user_profile_modal(args));
modals.open("user-profile-modal", {autoremove: true, on_hide: on_user_profile_hide});
$(".tabcontent").hide();
$("#user-profile-modal .dialog_submit_button").prop("disabled", true);
let default_tab = 0;
@ -537,6 +540,11 @@ export function show_edit_bot_info_modal(user_id, $container) {
const bot_type = bot.bot_type.toString();
const service = bot_data.get_services(bot.user_id)[0];
edit_bot_post_render();
original_values = get_current_values($("#bot-edit-form"));
$("#bot-edit-form").on("input", "input, select, button", (e) => {
e.preventDefault();
toggle_submit_button($("#bot-edit-form"));
});
$("#user-profile-modal").on("click", ".dialog_submit_button", () => {
const role = Number.parseInt($("#bot-role-select").val().trim(), 10);
const $full_name = $("#bot-edit-form").find("input[name='full_name']");
@ -581,7 +589,10 @@ export function show_edit_bot_info_modal(user_id, $container) {
contentType: false,
success() {
avatar_widget.clear();
hide_user_profile();
hide_button_spinner($submit_btn);
original_values = get_current_values($("#bot-edit-form"));
toggle_submit_button($("#edit-user-form"));
$cancel_btn.prop("disabled", false);
},
error(xhr) {
ui_report.error(
@ -740,6 +751,23 @@ function get_human_profile_data(fields_user_pills) {
return new_profile_data;
}
function get_current_values($edit_form) {
const current_values = dialog_widget.get_current_values(
$edit_form.find("input, select, textarea, button, .pill-container"),
);
return current_values;
}
function toggle_submit_button($edit_form) {
const current_values = get_current_values($edit_form);
const $submit_btn = $("#user-profile-modal .dialog_submit_button");
if (!_.isEqual(original_values, current_values)) {
$submit_btn.prop("disabled", false);
} else {
$submit_btn.prop("disabled", true);
}
}
export function show_edit_user_info_modal(user_id, $container) {
const person = people.maybe_get_user_by_id(user_id);
const is_active = people.is_person_active(user_id);
@ -781,7 +809,11 @@ export function show_edit_user_info_modal(user_id, $container) {
custom_profile_field_form_selector,
user_id,
true,
() => {
toggle_submit_button($("#edit-user-form"));
},
);
original_values = get_current_values($("#edit-user-form"));
// Handle deactivation
$("#edit-user-form").on("click", ".deactivate_user_button", (e) => {
@ -807,6 +839,11 @@ export function show_edit_user_info_modal(user_id, $container) {
user_deactivation_ui.confirm_reactivation(user_id, handle_confirm, true);
});
$("#edit-user-form").on("input", "input, select, textarea", (e) => {
e.preventDefault();
toggle_submit_button($("#edit-user-form"));
});
$("#user-profile-modal").on("click", ".dialog_submit_button", () => {
const role = Number.parseInt($("#user-role-select").val().trim(), 10);
const $full_name = $("#edit-user-form").find("input[name='full_name']");
@ -828,7 +865,10 @@ export function show_edit_user_info_modal(user_id, $container) {
url,
data,
success() {
hide_user_profile();
hide_button_spinner($submit_btn);
original_values = get_current_values($("#edit-user-form"));
toggle_submit_button($("#edit-user-form"));
$cancel_btn.prop("disabled", false);
},
error(xhr) {
ui_report.error(