alternative UX implementation of check for email address count > 0

comment out line 122 to test

4 files changed, 25 insertions, 0 deletions

diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 3eb1f2765..c4c35d538 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -30,6 +30,10 @@ const messages = defineMessages({
     id: 'invite.skip.label',
     defaultMessage: '!!!I want to do this later',
   },
+  noEmailAddresses: {
+    id: 'invite.error.noEmails',
+    defaultMessage: '!!!At least one email address is required',
+  }
 });
 
 @observer
@@ -64,6 +68,16 @@ export default class Invite extends Component {
     e.preventDefault();
     this.form.submit({
       onSuccess: (form) => {
+
+        const atLeastOneEmailAddress = form.$('invite')
+          .map(invite => {return invite.$('email').value})
+          .some(email => email.trim() !== '')
+        
+        if (!atLeastOneEmailAddress) {
+          form.invalidate('no-email-addresses')
+          return
+        }
+  
         this.props.onSubmit({ invites: form.values().invite });
       },
       onError: () => {},
@@ -97,6 +111,11 @@ export default class Invite extends Component {
               </div>
             </div>
           ))}
+          {form.error === 'no-email-addresses' && (
+            <p className="franz-form__error invite-form__error">
+              {intl.formatMessage(messages.noEmailAddresses)}
+            </p>
+          )}
           <Button
             type="submit"
             className="auth__button"
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 63d7ce60b..f58d5634b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -45,6 +45,7 @@
   "invite.name.label": "Name",
   "invite.email.label": "Email address",
   "invite.skip.label": "I want to do this later",
+  "invite.error.noEmails": "At least one email address is required",
   "subscription.submit.label": "I want to support the development of Franz",
   "subscription.paymentSessionError": "Could not initialize payment form",
   "subscription.includedFeatures": "Paid Franz Premium Supporter Account includes",
diff --git a/src/styles/invite.scss b/src/styles/invite.scss
new file mode 100644
index 000000000..345095da8
--- /dev/null
+++ b/src/styles/invite.scss
@@ -0,0 +1,4 @@
+.invite-form__error {
+  text-align: center;
+  margin-bottom: 20px !important; /* otherwise overridden by rule: p:last-of-type */
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 261396f6f..20f1803e4 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -18,6 +18,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './type.scss';
 @import './welcome.scss';
 @import './auth.scss';
+@import './invite.scss';
 @import './tooltip.scss';
 @import './info-bar.scss';
 @import './status-bar-target-url.scss';