diff --git a/frontend_tests/node_tests/browser_history.js b/frontend_tests/node_tests/browser_history.js index dc231c6496..8192dcf01f 100644 --- a/frontend_tests/node_tests/browser_history.js +++ b/frontend_tests/node_tests/browser_history.js @@ -22,7 +22,7 @@ function test(label, f) { } test("basics", () => { - const hash1 = "#settings/your-account"; + const hash1 = "#settings/profile"; const hash2 = "#narrow/is/private"; browser_history.go_to_location(hash1); assert.equal(location.hash, hash1); diff --git a/frontend_tests/node_tests/hash_util.js b/frontend_tests/node_tests/hash_util.js index 68a14616eb..4e1452317c 100644 --- a/frontend_tests/node_tests/hash_util.js +++ b/frontend_tests/node_tests/hash_util.js @@ -86,26 +86,26 @@ run_test("test_get_hash_category", () => { assert.deepEqual(hash_util.get_hash_category("#drafts"), "drafts"); assert.deepEqual(hash_util.get_hash_category("invites"), "invites"); - location.hash = "#settings/your-account"; + location.hash = "#settings/profile"; assert.deepEqual(hash_util.get_current_hash_category(), "settings"); }); run_test("test_get_hash_section", () => { assert.equal(hash_util.get_hash_section("streams/subscribed"), "subscribed"); - assert.equal(hash_util.get_hash_section("#settings/your-account"), "your-account"); + assert.equal(hash_util.get_hash_section("#settings/profile"), "profile"); assert.equal(hash_util.get_hash_section("settings/10/general/"), "10"); assert.equal(hash_util.get_hash_section("#drafts"), ""); assert.equal(hash_util.get_hash_section(""), ""); - location.hash = "#settings/your-account"; - assert.deepEqual(hash_util.get_current_hash_section(), "your-account"); + location.hash = "#settings/profile"; + assert.deepEqual(hash_util.get_current_hash_section(), "profile"); }); run_test("build_reload_url", () => { - location.hash = "#settings/your-account"; - assert.equal(hash_util.build_reload_url(), "+oldhash=settings%2Fyour-account"); + location.hash = "#settings/profile"; + assert.equal(hash_util.build_reload_url(), "+oldhash=settings%2Fprofile"); location.hash = "#test"; assert.equal(hash_util.build_reload_url(), "+oldhash=test"); diff --git a/frontend_tests/puppeteer_tests/settings.ts b/frontend_tests/puppeteer_tests/settings.ts index 4332a6bce8..ea1e10317d 100644 --- a/frontend_tests/puppeteer_tests/settings.ts +++ b/frontend_tests/puppeteer_tests/settings.ts @@ -27,7 +27,7 @@ async function open_settings(page: Page): Promise { await page.waitForSelector(settings_selector, {visible: true}); await page.click(settings_selector); - await page.waitForSelector("#settings_content .account-settings-form", {visible: true}); + await page.waitForSelector("#settings_content .profile-settings-form", {visible: true}); const page_url = await common.page_url_with_fragment(page); assert.ok( page_url.includes("/#settings/"), @@ -36,23 +36,18 @@ async function open_settings(page: Page): Promise { } async function test_change_full_name(page: Page): Promise { - await page.click("#change_full_name"); - - const change_full_name_button_selector = "#change_full_name_button"; - await page.waitForSelector(change_full_name_button_selector, {visible: true}); + await page.click("#full_name"); const full_name_input_selector = 'input[name="full_name"]'; - await page.$eval(full_name_input_selector, (el) => { - (el as HTMLInputElement).value = ""; - }); - await page.waitForFunction(() => $(":focus").attr("id") === "change_full_name_modal"); - await page.type(full_name_input_selector, "New name"); - await page.click(change_full_name_button_selector); - await page.waitForFunction(() => $("#change_full_name").text().trim() === "New name"); - await common.wait_for_modal_to_close(page); + await common.clear_and_type(page, full_name_input_selector, "New name"); + + await page.click("#settings_content .profile-settings-form"); + await page.waitForSelector(".full-name-change-form .alert-success", {visible: true}); + await page.waitForFunction(() => $("#full_name").val() === "New name"); } async function test_change_password(page: Page): Promise { + await page.click('[data-section="account-and-privacy"]'); await page.click("#change_password"); const change_password_button_selector = "#change_password_button"; diff --git a/static/js/avatar.js b/static/js/avatar.js index 1dc3ea84c4..3a82bd1ab6 100644 --- a/static/js/avatar.js +++ b/static/js/avatar.js @@ -95,7 +95,7 @@ export function build_user_avatar_widget(upload_function) { }, }); } - const modal_parent = $("#account-settings"); + const modal_parent = $("#profile-settings"); const html_body = render_confirm_delete_user_avatar(); diff --git a/static/js/hash_util.js b/static/js/hash_util.js index dabe21a581..19fc6c731b 100644 --- a/static/js/hash_util.js +++ b/static/js/hash_util.js @@ -12,7 +12,7 @@ export function get_hash_category(hash) { } export function get_hash_section(hash) { - // given "#settings/your-account", returns "your-account" + // given "#settings/profile", returns "profile" // given '#streams/5/social", returns "5" if (!hash) { return ""; diff --git a/static/js/settings_account.js b/static/js/settings_account.js index 87c4e54150..785daa2075 100644 --- a/static/js/settings_account.js +++ b/static/js/settings_account.js @@ -36,15 +36,10 @@ export function update_email(new_email) { } export function update_full_name(new_full_name) { - const full_name_field = $("#full_name_value"); - if (full_name_field) { - full_name_field.text(new_full_name); - } - // Arguably, this should work more like how the `update_email` // flow works, where we update the name in the modal on open, // rather than updating it here, but this works. - const full_name_input = $(".full_name_change_container input[name='full_name']"); + const full_name_input = $(".full-name-change-form input[name='full_name']"); if (full_name_input) { full_name_input.val(new_full_name); } @@ -279,13 +274,8 @@ export function add_custom_profile_fields_to_settings() { return; } - const element_id = "#account-settings .custom-profile-fields-form"; + const element_id = "#profile-settings .custom-profile-fields-form"; $(element_id).html(""); - if (page_params.custom_profile_fields.length > 0) { - $("#account-settings #custom-field-header").show(); - } else { - $("#account-settings #custom-field-header").hide(); - } append_custom_profile_fields(element_id, people.my_current_user_id()); initialize_custom_user_type_fields(element_id, people.my_current_user_id(), true, true); @@ -403,15 +393,6 @@ export function set_up() { clear_password_change(); - $("#change_full_name").on("click", (e) => { - e.preventDefault(); - e.stopPropagation(); - if (settings_data.user_can_change_name()) { - $("#change_full_name_modal").find("input[name='full_name']").val(page_params.full_name); - overlays.open_modal("#change_full_name_modal"); - } - }); - $("#change_password").on("click", async (e) => { e.preventDefault(); e.stopPropagation(); @@ -487,28 +468,18 @@ export function set_up() { password_quality?.(field.val(), $("#pw_strength .bar"), field); }); - $("#change_full_name_button").on("click", (e) => { + $("#full_name").on("change", (e) => { e.preventDefault(); e.stopPropagation(); - const change_full_name_error = $("#change_full_name_modal") - .find(".change_full_name_info") - .expectOne(); const data = {}; - data.full_name = $(".full_name_change_container").find("input[name='full_name']").val(); + data.full_name = $("#full_name").val(); - const opts = { - success_continuation() { - overlays.close_modal("#change_full_name_modal"); - }, - error_msg_element: change_full_name_error, - }; settings_ui.do_settings_change( channel.patch, "/json/settings", data, - $("#account-settings-status").expectOne(), - opts, + $(".full-name-status").expectOne(), ); }); @@ -556,7 +527,7 @@ export function set_up() { } }); - $("#account-settings").on("click", ".custom_user_field .remove_date", (e) => { + $("#profile-settings").on("click", ".custom_user_field .remove_date", (e) => { e.preventDefault(); e.stopPropagation(); const field = $(e.target).closest(".custom_user_field").expectOne(); @@ -564,7 +535,7 @@ export function set_up() { update_user_custom_profile_fields([field_id], channel.del); }); - $("#account-settings").on("change", ".custom_user_field_value", function (e) { + $("#profile-settings").on("change", ".custom_user_field_value", function (e) { const fields = []; const value = $(this).val(); const field_id = Number.parseInt( diff --git a/static/js/settings_sections.js b/static/js/settings_sections.js index f1c55fe3b6..ef1b01adf6 100644 --- a/static/js/settings_sections.js +++ b/static/js/settings_sections.js @@ -38,6 +38,10 @@ export function get_group(section) { case "deactivated-users-admin": return "org_users"; + case "profile": + case "account-and-privacy": + return "your-account"; + default: return section; } diff --git a/static/styles/settings.css b/static/styles/settings.css index 923d7ad939..e8796259bf 100644 --- a/static/styles/settings.css +++ b/static/styles/settings.css @@ -62,7 +62,8 @@ h3 .fa-question-circle-o { text-align: left; } } - #account-settings { + #account-settings, + #profile-field-settings { .grid { label { min-width: 120px; @@ -108,8 +109,7 @@ h3 .fa-question-circle-o { } #change_password_modal, -#change_email_modal, -#change_full_name_modal { +#change_email_modal { max-width: 480px; } @@ -587,12 +587,14 @@ input[type="checkbox"] { } } -#account-settings { - .custom-profile-fields-form .custom_user_field label { +#profile-settings { + .custom-profile-fields-form .custom_user_field label, + .full-name-change-form label { min-width: fit-content; } - .alert-notification.custom-field-status { + .alert-notification.custom-field-status, + .alert-notification.full-name-status { padding-top: 0; padding-bottom: 0; margin-top: 0; @@ -1511,7 +1513,6 @@ input[type="checkbox"] { width: 245px; } - #change_full_name_modal .change_full_name_info, #change_email_modal .change_email_info, #change_password_modal .change_password_info, #api_key_modal #api_key_status { @@ -1519,7 +1520,7 @@ input[type="checkbox"] { } } -#account-settings, +#profile-settings, #edit-user-form { .user-role button { cursor: default; diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs index 904da4c503..8744692a3c 100644 --- a/static/templates/settings/account_settings.hbs +++ b/static/templates/settings/account_settings.hbs @@ -1,9 +1,9 @@ -
+