UX: Use icons as bulleted list in invite modal (#13229)

UX: Use icons as bulleted list in invite modal (#13229)

diff --git a/app/assets/javascripts/discourse/app/controllers/create-invite.js b/app/assets/javascripts/discourse/app/controllers/create-invite.js
index 3237366..d24e452 100644
--- a/app/assets/javascripts/discourse/app/controllers/create-invite.js
+++ b/app/assets/javascripts/discourse/app/controllers/create-invite.js
@@ -1,11 +1,11 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
-import { equal } from "@ember/object/computed";
+import { empty, notEmpty } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { extractError } from "discourse/lib/ajax-error";
+import { getNativeContact } from "discourse/lib/pwa-utils";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { getNativeContact } from "discourse/lib/pwa-utils";
 import Group from "discourse/models/group";
 import Invite from "discourse/models/invite";
 import I18n from "I18n";
@@ -24,7 +24,8 @@ export default Controller.extend(
     limitToEmail: false,
     autogenerated: false,
 
-    type: "link",
+    isLink: empty("buffered.email"),
+    isEmail: notEmpty("buffered.email"),
 
     onShow() {
       Group.findAll().then((groups) => {
@@ -52,10 +53,7 @@ export default Controller.extend(
     },
 
     setInvite(invite) {
-      this.setProperties({
-        invite,
-        type: invite.email ? "email" : "link",
-      });
+      this.set("invite", invite);
     },
 
     setAutogenerated(value) {
@@ -70,7 +68,7 @@ export default Controller.extend(
       const data = { ...this.buffered.buffer };
 
       if (data.groupIds !== undefined) {
-        data.group_ids = data.groupIds;
+        data.group_ids = data.groupIds.length > 0 ? data.groupIds : "";
         delete data.groupIds;
       }
 
@@ -80,13 +78,12 @@ export default Controller.extend(
         delete data.topicTitle;
       }
 
-      if (this.type === "link") {
-        if (this.buffered.get("email")) {
-          data.email = "";
-          data.custom_message = "";
+      if (this.isLink) {
+        if (this.invite.email) {
+          data.email = data.custom_message = "";
         }
-      } else if (this.type === "email") {
-        if (this.buffered.get("max_redemptions_allowed") > 1) {
+      } else if (this.isEmail) {
+        if (this.invite.max_redemptions_allowed > 1) {
           data.max_redemptions_allowed = 1;
         }
 
@@ -106,7 +103,7 @@ export default Controller.extend(
           this.rollbackBuffer();
           this.setAutogenerated(opts.autogenerated);
           if (!this.autogenerated) {
-            if (this.type === "email" && opts.sendEmail) {
+            if (this.isEmail && opts.sendEmail) {
               this.send("closeModal");
             } else {
               this.appEvents.trigger("modal-body:flash", {
@@ -126,9 +123,6 @@ export default Controller.extend(
         );
     },
 
-    isLink: equal("type", "link"),
-    isEmail: equal("type", "email"),
-
     @discourseComputed(
       "currentUser.staff",
       "siteSettings.invite_link_max_redemptions_limit",
@@ -156,47 +150,17 @@ export default Controller.extend(
       return staff || groups.any((g) => g.owner);
     },
 
-    @discourseComputed("type", "buffered.email")
-    disabled(type, email) {
-      if (type === "email") {
-        return !email;
-      }
-
-      return false;
-    },
-
-    @discourseComputed("buffered.hasBufferedChanges", "invite.email", "type")
-    changed(hasBufferedChanges, inviteEmail, type) {
-      return hasBufferedChanges || (inviteEmail ? "email" : "link") !== type;
-    },
-
-    @discourseComputed("currentUser.staff", "type")
-    hasAdvanced(staff, type) {
-      return staff || type === "email";
+    @discourseComputed("currentUser.staff", "isEmail", "canInviteToGroup")
+    hasAdvanced(staff, isEmail, canInviteToGroup) {
+      return staff || isEmail || canInviteToGroup;
     },
 
     @action
     copied() {
-      if (this.type === "email" && !this.buffered.get("email")) {
-        return this.appEvents.trigger("modal-body:flash", {
-          text: I18n.t("user.invited.invite.blank_email"),
-          messageClass: "error",
-        });
-      }
-
       this.save({ sendEmail: false, copy: true });
     },
 
     @action
-    toggleLimitToEmail() {
-      const limitToEmail = !this.limitToEmail;
-      this.setProperties({
-        limitToEmail,
-        type: limitToEmail ? "email" : "link",
-      });
-    },
-
-    @action
     saveInvite(sendEmail) {
       this.appEvents.trigger("modal-body:clearFlash");
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs b/app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs
index bae33d6..7d384bc 100644
--- a/app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/choose-topic.hbs
@@ -1,4 +1,6 @@
-<label for="choose-topic-title">{{i18n labelText}}</label>
+<label for="choose-topic-title">
+  {{#if labelIcon}}{{d-icon labelIcon}}{{/if}}{{i18n labelText}}
+</label>
 
 {{text-field value=topicTitle placeholderKey="choose_topic.title.placeholder" id="choose-topic-title"}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs b/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
index bb629c4..2ff6e7d 100644
--- a/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
@@ -1,6 +1,8 @@
 <div class="future-date-input">
   <div class="control-group">
-    <label class={{labelClasses}}>{{displayLabel}}</label>
+    <label class={{labelClasses}}>
+      {{#if displayLabelIcon}}{{d-icon displayLabelIcon}}{{/if}}{{displayLabel}}
+    </label>
     {{future-date-input-selector
       minimumResultsForSearch=-1
       statusType=statusType
diff --git a/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs b/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
index 941531c..9063845 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/create-invite.hbs
@@ -13,33 +13,31 @@
       </div>
     </div>
 
-    <p>{{expiresAtLabel}}</p>
-
-    <div class="input-group invite-type">
-      {{input type="checkbox" id="invite-type" checked=limitToEmail click=(action "toggleLimitToEmail")}}
-      <label for="invite-type">{{i18n "user.invited.invite.restrict_email"}}</label>
+    <div class="input-group input-expires-at">
+      <label>{{d-icon "far-clock"}}{{expiresAtLabel}}</label>
+    </div>
 
-      {{#if isEmail}}
-        <div class="invite-input-with-button">
-          {{input
-            id="invite-email"
-            value=buffered.email
-            placeholderKey="topic.invite_reply.email_placeholder"
+    <div class="input-group input-email">
+      <label for="invite-email">{{d-icon "envelope"}}{{i18n "user.invited.invite.restrict_email"}}</label>
+      <div class="invite-input-with-button">
+        {{input
+          id="invite-email"
+          value=buffered.email
+          placeholderKey="topic.invite_reply.email_placeholder"
+        }}
+        {{#if capabilities.hasContactPicker}}
+          {{d-button
+            icon="address-book"
+            action=(action "searchContact")
+            class="btn-primary open-contact-picker"
           }}
-          {{#if capabilities.hasContactPicker}}
-            {{d-button
-              icon="address-book"
-              action=(action "searchContact")
-              class="btn-primary open-contact-picker"
-            }}
-          {{/if}}
-        </div>
-      {{/if}}
+        {{/if}}
+      </div>
     </div>
 
     {{#if isLink}}

[... diff too long, it was truncated ...]

GitHub sha: 447d8dfc

This commit appears in #13229 which was approved by eviltrout. It was merged by udan11.