demo-orgs: Disable invite user modal before owner sets email.

Until the owner of a demo organization sets an email, the submit
button on the invite user modal is now disabled.

The input div for email addresses is also disabled, which wasn't
disabled before because it's not an input element on the form.
This commit is contained in:
Lauryn Menard
2025-04-23 21:44:28 +02:00
committed by Tim Abbott
parent 9a2f4c7e15
commit 79061c08d2
4 changed files with 15 additions and 5 deletions

View File

@@ -444,9 +444,10 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
const $button = $("#invite-user-modal .dialog_submit_button");
$button.prop(
"disabled",
(selected_tab === "invite-email-tab" &&
email_pill_widget.items().length === 0 &&
email_pill.get_current_email(email_pill_widget) === null) ||
!user_has_email_set ||
(selected_tab === "invite-email-tab" &&
email_pill_widget.items().length === 0 &&
email_pill.get_current_email(email_pill_widget) === null) ||
($expires_in.val() === "custom" && !valid_custom_time),
);
if (selected_tab === "invite-email-tab") {

View File

@@ -1852,6 +1852,10 @@
hsl(0deg 0% 100%),
hsl(0deg 0% 0% / 20%)
);
--color-background-pill-container-input-disabled: light-dark(
hsl(0deg 0% 93%),
hsl(0deg 0% 0% / 20%)
);
/* Inbox view constants - Values from Figma design */
--height-inbox-search: 1.8571em; /* 26px / 14px em */

View File

@@ -240,6 +240,11 @@
);
}
#invitee_emails_container .pill-container.not-editable-by-user {
height: var(--height-input-pill);
background-color: var(--color-background-pill-container-input-disabled);
}
.add_subscribers_container .pill-container,
.add_streams_container .pill-container,
.add-user-group-container .pill-container,

View File

@@ -15,8 +15,8 @@
<div id="invite_users_option_tabs_container"></div>
<div id="invitee_emails_container">
<label for="invitee_emails" class="modal-field-label">{{t "Emails (one on each line or comma-separated)" }}</label>
<div class="pill-container">
<div class="input" contenteditable="true"></div>
<div class="pill-container {{#unless user_has_email_set}}not-editable-by-user{{/unless}}">
<div class="input" {{#if user_has_email_set}}contenteditable="true"{{/if}}></div>
</div>
</div>
</div>