mirror of https://github.com/zulip/zulip.git
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.
This commit is contained in:
Akarsh Jain
Tim Abbott
parent
b7909db987
commit
e20e7482ca
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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", () => {
|
||||
$("#invitee_emails").prop("disabled", false);
|
||||
$("#invite-user-modal").on("change", "#email_invite_radio", () => {
|
||||
$("#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", () => {
|
||||
$("#generate_multiuse_invite_radio").prop("checked", true);
|
||||
$("#multiuse_radio_section").show();
|
||||
$("#invite-method-choice").hide();
|
||||
$("#invitee_emails").prop("disabled", true);
|
||||
$("#invite-user-modal").on("change", "#generate_multiuse_invite_radio", () => {
|
||||
$("#invitee_emails_container").hide();
|
||||
$("#invite-user-modal .dialog_submit_button").text(
|
||||
$t({defaultMessage: "Generate invite link"}),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -2534,14 +2534,25 @@ select.invite-as {
|
|||
}
|
||||
}
|
||||
|
||||
#invite-method-choice {
|
||||
margin-top: 2px;
|
||||
.invite_type_radio_section {
|
||||
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 {
|
||||
margin-top: 4px;
|
||||
margin-bottom: -2px;
|
||||
display: none;
|
||||
#generate_multiuse_invite_radio_container {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#custom-invite-expiration-time {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<textarea rows="2" id="invitee_emails" name="invitee_emails" class="invitee_emails" placeholder="{{t 'One or more email addresses...' }}"></textarea>
|
||||
{{#if is_admin}}
|
||||
<div id="invite-method-choice">
|
||||
{{t "or" }} <a role="button" tabindex="0" id="generate_multiuse_invite_button">{{t "Generate invite link" }}</a>
|
||||
<label>{{t "How would you like to invite users?" }}</label>
|
||||
<div class="invite_type_radio_section prop-element" id="invite-user">
|
||||
<div id="generate_multiuse_invite_radio_container">
|
||||
<label class="generate_multiuse_invite_radio_label">
|
||||
<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">
|
||||
<label class="checkbox display-block" for="generate_multiuse_invite_radio">
|
||||
<input type="checkbox" name="generate_multiuse_invite_radio" id="generate_multiuse_invite_radio"/>
|
||||
<span></span>
|
||||
{{t "Generate invite link" }}
|
||||
</label>
|
||||
<div id="invitee_emails_container">
|
||||
<label for="invitee_emails">{{t "Emails (one on each line or comma-separated)" }}</label>
|
||||
<textarea rows="2" id="invitee_emails" name="invitee_emails" class="invitee_emails" placeholder="{{t 'One or more email addresses...' }}"></textarea>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="expires_in">{{t "Invitation expires after" }}</label>
|
||||
|
|
|
|||
Loading…
Reference in New Issue