settings: Add dropdown for email_address_visibility setting.

This commit adds dropdown for user-level and realm-level
default of email address visibility setting.

static/js/settings.js

@@ -107,6 +107,7 @@ export function build_page() {
             defaultMessage: "Read receipts are currently disabled in this organization.",
         }),
         user_is_only_organization_owner: people.is_current_user_only_owner(),
+        email_address_visibility_values: settings_config.email_address_visibility_values,
     });
 
     $(".settings-box").html(rendered_settings_tab);

static/js/settings_account.js

@@ -871,4 +871,20 @@ export function set_up() {
             $("#account-settings .privacy-setting-status").expectOne(),
         );
     });
+
+    $("#user_email_address_visibility").val(user_settings.email_address_visibility);
+
+    $("#user_email_address_visibility").on("change", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const data = {email_address_visibility: this.value};
+
+        settings_ui.do_settings_change(
+            channel.patch,
+            "/json/settings",
+            data,
+            $("#account-settings .privacy-setting-status").expectOne(),
+        );
+    });
 }

static/js/settings_config.ts

@@ -123,11 +123,10 @@ export const email_address_visibility_values = {
         code: 1,
         description: $t({defaultMessage: "Admins, moderators, members and guests"}),
     },
-    // // Backend support for this configuration is not available yet.
-    // admins_and_members: {
-    //     code: 2,
-    //     description: $t({defaultMessage: "Members and admins"}),
-    // },
+    members: {
+        code: 2,
+        description: $t({defaultMessage: "Admins, moderators and members"}),
+    },
     moderators: {
         code: 5,
         description: $t({defaultMessage: "Admins and moderators"}),

static/js/settings_realm_user_settings_defaults.js

@@ -56,6 +56,8 @@ export function set_up() {
     settings_display.set_up(realm_default_settings_panel);
     settings_notifications.set_up(realm_default_settings_panel);
 
+    $("#realm_email_address_visibility").val(realm_user_settings_defaults.email_address_visibility);
+
     settings_org.register_save_discard_widget_handlers(
         $container,
         "/json/realm/user_settings_defaults",

static/styles/settings.css

@@ -1483,7 +1483,9 @@ $option_title_width: 180px;
 #id_realm_delete_own_message_policy,
 #id_realm_message_content_delete_limit_seconds,
 #id_realm_move_messages_within_stream_limit_seconds,
-#id_realm_move_messages_between_streams_limit_seconds {
+#id_realm_move_messages_between_streams_limit_seconds,
+#user_email_address_visibility,
+#realm_email_address_visibility {
     width: 325px;
 }
 

static/templates/settings/account_settings.hbs

@@ -78,6 +78,15 @@
                   help_link="/help/status-and-availability"
                   prefix="user_"}}
             </div>
+            <div class="input-group">
+                <label for="email_address_visibility" class="dropdown-title">{{t "Who can access your email address" }}
+                    {{> ../help_link_widget link="/help/restrict-visibility-of-email-addresses" }}
+                </label>
+                <select name="email_address_visibility" class="email_address_visibility prop-element bootstrap-focus-style" data-setting-widget-type="number"
+                  id="user_email_address_visibility">
+                    {{> dropdown_options_widget option_values=email_address_visibility_values}}
+                </select>
+            </div>
         </div>
 
         <hr class="settings_separator" />

static/templates/settings/organization_user_settings_defaults.hbs

@@ -28,6 +28,16 @@
           label=settings_label.realm_send_read_receipts
           prefix="realm_"
           help_link="/help/read-receipts"}}
+
+        <div class="input-group">
+            <label for="email_address_visibility" class="dropdown-title">{{t "Who can access user's email address" }}
+                {{> ../help_link_widget link="/help/restrict-visibility-of-email-addresses" }}
+            </label>
+            <select name="email_address_visibility" class="email_address_visibility prop-element bootstrap-focus-style" data-setting-widget-type="number"
+              id="realm_email_address_visibility">
+                {{> dropdown_options_widget option_values=email_address_visibility_values}}
+            </select>
+        </div>
     </div>
 
     <div class="other_settings settings-subsection-parent">