register: Allow user to change email_address_visibility during signup.

We now allow user to change email_address_visibility during user
signup and it overrides the realm-level default and also overrides
the setting if user import settings from existing account.
We do not show UI to set email_address_visibility during realm
creation.

Fixes #24310.

templates/zerver/register.html

@@ -118,8 +118,29 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
                 <div class="input-box no-validation">
                     <input type='hidden' name='key' value='{{ key }}' />
                     <input type='hidden' name='timezone' id='timezone'/>
+                    <input type="hidden" name="email_address_visibility" id="email_address_visibility"/>
                     <label for="id_email" class="inline-block label-title">{{ _('Email') }}</label>
                     <div id="id_email">{{ email }}</div>
+                    {% if not creating_new_team %}
+                    <p id="new-user-email-address-visibility">
+                        <span class="current-selected-option">
+                            {% if default_email_address_visibility == email_address_visibility_admins_only %}
+                                {% trans %}Administrators of this Zulip organization will be able to see this email address.
+                                {% endtrans %}
+                            {% elif default_email_address_visibility == email_address_visibility_moderators %}
+                                {% trans %}Administrators and moderators of this Zulip organization will be able to see this email address.
+                                {% endtrans %}
+                            {% elif default_email_address_visibility == email_address_visibility_nobody %}
+                                {% trans %}Nobody in this Zulip organization will be able to see this email address.
+                                {% endtrans %}
+                            {% else %}
+                                {% trans %}Other users in this Zulip organization will be able to see this email address.
+                                {% endtrans %}
+                            {% endif %}
+                        </span>
+                        <a target="_blank" class="change_email_address_visibility" rel="noopener noreferrer">{{ _('Change') }}</a>
+                    </p>
+                    {% endif %}
                 </div>
 
                 {% if accounts %}
@@ -277,4 +298,40 @@ Form is validated both client-side using jquery-validation (see signup.js) and s
     </div>
 </div>
 
+{% if not creating_new_team %}
+<div class="micromodal" id="change-email-address-visibility-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1">
+        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
+            <header class="modal__header">
+                <h1 class="modal__title dialog_heading">
+                    {{ _('Configure email address privacy') }}
+                </h1>
+                <button class="modal__close" aria-label="{{ _('Close modal') }}" data-micromodal-close></button>
+            </header>
+            <main class="modal__content">
+                <p>
+                    {{ _('Zulip lets you control which roles in the organization can view your email address.') }}
+                    {{ _('Do you want to change the privacy setting for your email from the default configuration for this organization?') }}
+                </p>
+                <label for="new_user_email_address_visibility">{{ _('Who can access your email address') }}</label>
+                <select id="new_user_email_address_visibility" class="modal_select">
+                    {% for value, name in email_address_visibility_options_dict.items() %}
+                        <option value="{{ value }}" {% if value == default_email_address_visibility %}selected{% endif %}>{{name}}</option>
+                    {% endfor %}
+                </select>
+                <p>
+                    {% trans %}You can also change this setting <a href="{{ root_domain_uri }}/help/configure-email-visibility" target="_blank" rel="noopener noreferrer">after you join</a>.{% endtrans %}
+                </p>
+            </main>
+            <footer class="modal__footer">
+                <button class="modal__btn dialog_cancel_button" aria-label="{{ '(Close this dialog window)' }}" data-micromodal-close>{{ _('Cancel') }}</button>
+                <button class="modal__btn dialog_submit_button">
+                    <span>{{ _('Confirm') }}</span>
+                </button>
+            </footer>
+        </div>
+    </div>
+</div>
+{% endif %}
+
 {% endblock %}

web/src/bundles/common.js

@@ -12,6 +12,7 @@ import "../../images/icons/zulip-icons.font";
 import "source-sans/source-sans-3.css";
 import "source-code-pro/source-code-pro.css";
 import "../../styles/alerts.css";
+import "../../styles/modal.css";
 import "../../styles/pygments.css";
 import "@uppy/core/dist/style.css";
 import "@uppy/progress-bar/dist/style.css";

web/src/portico/signup.js

@@ -1,7 +1,10 @@
 import $ from "jquery";
+import Micromodal from "micromodal";
 
 import * as common from "../common";
+import {$t} from "../i18n";
 import {password_quality, password_warning} from "../password_quality";
+import * as settings_config from "../settings_config";
 
 $(() => {
     // NB: this file is included on multiple pages.  In each context,
@@ -230,4 +233,55 @@ $(() => {
     $("body").on("click", "#choose_email .choose-email-box", function () {
         this.parentNode.submit();
     });
+
+    $("#new-user-email-address-visibility .change_email_address_visibility").on("click", () => {
+        Micromodal.show("change-email-address-visibility-modal", {
+            disableFocus: true,
+            openClass: "modal--opening",
+        });
+    });
+
+    $("#change-email-address-visibility-modal .dialog_submit_button").on("click", () => {
+        const selected_val = Number.parseInt($("#new_user_email_address_visibility").val(), 10);
+        $("#email_address_visibility").val(selected_val);
+        Micromodal.close("change-email-address-visibility-modal");
+
+        let selected_option_text;
+
+        // These strings should be consistent with those defined for the same element in
+        // 'templates/zerver/register.html'.
+        switch (selected_val) {
+            case settings_config.email_address_visibility_values.admins_only.code: {
+                selected_option_text = $t({
+                    defaultMessage:
+                        "Administrators of this Zulip organization will be able to see this email address.",
+                });
+
+                break;
+            }
+            case settings_config.email_address_visibility_values.moderators.code: {
+                selected_option_text = $t({
+                    defaultMessage:
+                        "Administrators and moderators this Zulip organization will be able to see this email address.",
+                });
+
+                break;
+            }
+            case settings_config.email_address_visibility_values.nobody.code: {
+                selected_option_text = $t({
+                    defaultMessage:
+                        "Nobody in this Zulip organization will be able to see this email address.",
+                });
+
+                break;
+            }
+            default: {
+                selected_option_text = $t({
+                    defaultMessage:
+                        "Other users in this Zulip organization will be able to see this email address.",
+                });
+            }
+        }
+        $("#new-user-email-address-visibility .current-selected-option").text(selected_option_text);
+    });
 });

web/styles/portico/portico_signin.css

@@ -635,6 +635,37 @@ html {
     }
 }
 
+#new-user-email-address-visibility {
+    text-align: left;
+    font-size: 0.8em;
+    line-height: normal;
+    margin-left: 2px;
+
+    .change_email_address_visibility {
+        cursor: pointer;
+    }
+}
+
+#change-email-address-visibility-modal {
+    font-weight: 400;
+
+    label {
+        font-size: inherit;
+    }
+
+    h1 {
+        font-weight: 600;
+        font-family: inherit;
+    }
+
+    select {
+        margin-bottom: 10px;
+        width: auto;
+        font-size: 16px;
+        font-family: inherit;
+    }
+}
+
 /* -- /accounts/register/ page -- */
 .portico-page {
     .pitch {

zerver/views/registration.py

@@ -63,6 +63,7 @@ from zerver.models import (
     MultiuseInvite,
     PreregistrationUser,
     Realm,
+    RealmUserDefault,
     Stream,
     UserProfile,
     get_default_stream_groups,
@@ -496,6 +497,11 @@ def accounts_register(
         assert isinstance(auth_result, UserProfile)
         return login_and_go_to_home(request, auth_result)
 
+    default_email_address_visibility = None
+    if realm is not None:
+        realm_user_default = RealmUserDefault.objects.get(realm=realm)
+        default_email_address_visibility = realm_user_default.email_address_visibility
+
     return TemplateResponse(
         request,
         "zerver/register.html",
@@ -523,6 +529,11 @@ def accounts_register(
             "sorted_realm_types": sorted(
                 Realm.ORG_TYPES.values(), key=lambda d: d["display_order"]
             ),
+            "default_email_address_visibility": default_email_address_visibility,
+            "email_address_visibility_admins_only": RealmUserDefault.EMAIL_ADDRESS_VISIBILITY_ADMINS,
+            "email_address_visibility_moderators": RealmUserDefault.EMAIL_ADDRESS_VISIBILITY_MODERATORS,
+            "email_address_visibility_nobody": RealmUserDefault.EMAIL_ADDRESS_VISIBILITY_NOBODY,
+            "email_address_visibility_options_dict": UserProfile.EMAIL_ADDRESS_VISIBILITY_ID_TO_NAME_MAP,
         },
     )