invite: Restructure "Invite user" modal for improved user experience.

This commit revamps the invite type section of the "Invite user" modal
to provide a more intuitive user experience. The section now includes a
radio button option with two choices: "Send an email" and "Generate an
invite link." The email input box is hidden when the "Generate an invite
link" option is selected.

Fixes #24692.

help/invite-new-users.md

@@ -31,6 +31,8 @@ permission to invite users.
 
 {relative|gear|invite}
 
+1. Click **Send an email**.
+
 1. Enter a list of email addresses.
 
 1. Select when the invitation will expire.

web/src/invite.js

@@ -269,6 +269,13 @@ function open_invite_user_modal(e) {
 
     function invite_user_modal_post_render() {
         $("#invite-user-modal .dialog_submit_button").prop("disabled", true);
+        $("#email_invite_radio").prop("checked", true);
+
+        if (!page_params.is_admin) {
+            $("#generate_multiuse_invite_radio").prop("disabled", true);
+            $("#generate_multiuse_invite_radio_container").addClass("control-label-disabled");
+            $("#generate_multiuse_invite_radio_container").addClass("disabled_setting_tooltip");
+        }
 
         autosize($("#invitee_emails").trigger("focus"));
 
@@ -288,24 +295,19 @@ function open_invite_user_modal(e) {
             toggle_invite_submit_button();
         });
 
-        $("#invite-user-modal").on("change", "#generate_multiuse_invite_radio", () => {
+        $("#invite-user-modal").on("change", "#email_invite_radio", () => {
-            $("#invitee_emails").prop("disabled", false);
+            $("#invitee_emails_container").show();
             $("#invite-user-modal .dialog_submit_button").text($t({defaultMessage: "Invite"}));
             $("#invite-user-modal .dialog_submit_button").data(
                 "loading-text",
                 $t({defaultMessage: "Inviting..."}),
             );
-            $("#multiuse_radio_section").hide();
-            $("#invite-method-choice").show();
             toggle_invite_submit_button();
             reset_error_messages();
         });
 
-        $("#generate_multiuse_invite_button").on("click", () => {
+        $("#invite-user-modal").on("change", "#generate_multiuse_invite_radio", () => {
-            $("#generate_multiuse_invite_radio").prop("checked", true);
+            $("#invitee_emails_container").hide();
-            $("#multiuse_radio_section").show();
-            $("#invite-method-choice").hide();
-            $("#invitee_emails").prop("disabled", true);
             $("#invite-user-modal .dialog_submit_button").text(
                 $t({defaultMessage: "Generate invite link"}),
             );

web/src/tippyjs.js

@@ -610,6 +610,18 @@ export function initialize() {
         },
     });
 
+    delegate("body", {
+        target: ["#generate_multiuse_invite_radio_container.disabled_setting_tooltip"],
+        content: $t({
+            defaultMessage:
+                "You do not have permissions to generate invite links in this organization.",
+        }),
+        appendTo: () => document.body,
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     delegate("body", {
         target: "#pm_tooltip_container",
         onShow(instance) {

web/styles/zulip.css

@@ -2534,14 +2534,25 @@ select.invite-as {
     }
 }
 
-#invite-method-choice {
+.invite_type_radio_section {
-    margin-top: 2px;
+    margin: 2px 2px 2px 5px;
+
+    & input[type="radio"] {
+        cursor: pointer;
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    .control-label-disabled label {
+        pointer-events: none;
+        cursor: not-allowed;
+    }
 }
 
-#multiuse_radio_section {
+#generate_multiuse_invite_radio_container {
-    margin-top: 4px;
+    width: fit-content;
-    margin-bottom: -2px;
-    display: none;
 }
 
 #custom-invite-expiration-time {

web/templates/invite_user_modal.hbs

@@ -3,20 +3,25 @@
     <div class="alert" id="dev_env_msg"></div>
     {{/if}}
     <div class="input-group">
-        <label for="invitee_emails">{{t "Emails (one on each line or comma-separated)" }}</label>
+        <label>{{t "How would you like to invite users?" }}</label>
-        <textarea rows="2" id="invitee_emails" name="invitee_emails" class="invitee_emails" placeholder="{{t 'One or more email addresses...' }}"></textarea>
+        <div class="invite_type_radio_section prop-element" id="invite-user">
-        {{#if is_admin}}
+            <div id="generate_multiuse_invite_radio_container">
-        <div id="invite-method-choice">
+                <label class="generate_multiuse_invite_radio_label">
-            {{t "or" }} <a role="button" tabindex="0" id="generate_multiuse_invite_button">{{t "Generate invite link" }}</a>
+                    <input type="radio" id="generate_multiuse_invite_radio" name="invite-user" value="generate-multiuse-invite" />
+                    {{t "Generate invite link" }}
+                </label>
+            </div>
+            <div id="email_invite_radio_container">
+                <label class="email_invite_radio_label">
+                    <input type="radio" id="email_invite_radio" name="invite-user" value="email-invite" />
+                    {{t "Send an email" }}
+                </label>
+            </div>
         </div>
-        <div id="multiuse_radio_section" class="new-style">
+        <div id="invitee_emails_container">
-            <label class="checkbox display-block" for="generate_multiuse_invite_radio">
+            <label for="invitee_emails">{{t "Emails (one on each line or comma-separated)" }}</label>
-                <input type="checkbox" name="generate_multiuse_invite_radio" id="generate_multiuse_invite_radio"/>
+            <textarea rows="2" id="invitee_emails" name="invitee_emails" class="invitee_emails" placeholder="{{t 'One or more email addresses...' }}"></textarea>
-                <span></span>
-                {{t "Generate invite link" }}
-            </label>
         </div>
-        {{/if}}
     </div>
     <div class="input-group">
         <label for="expires_in">{{t "Invitation expires after" }}</label>