Show error message when from address is not authorized

[MAILPOET-1985]

assets/js/src/newsletters/send.jsx

@@ -74,6 +74,38 @@ const NewsletterSend = createReactClass({ // eslint-disable-line react/prefer-es
     return jQuery('#mailpoet_newsletter').parsley().isValid();
   },
 
+  isValidFromAddress: function isValidFromAddress() {
+    const fromAddress = jQuery('#field_sender_address').val();
+    if (window.mailpoet_mta_method !== 'MailPoet') {
+      return true;
+    }
+    return this.state.authorizedEmailAddresses.indexOf(fromAddress) !== -1;
+  },
+
+  showInvalidFromAddressError: function showInvalidFromAddressError() {
+    const errorMessage = MailPoet.I18n.t('newsletterInvalidFromAddress')
+      .replace('%$1s', jQuery('#field_sender_address').val())
+      .replace('[i]', '<i>')
+      .replace('[/i]', '</i>')
+      .replace('[link]', '<a href="https://account.mailpoet.com/authorization" target="_blank" rel="noopener noreferrer">')
+      .replace('[/link]', '</a>');
+    jQuery('#field_sender_address')
+      .parsley()
+      .addError(
+        'invalidFromAddress',
+        { message: errorMessage, updateClass: true }
+      );
+  },
+
+  removeInvalidFromAddressError: function removeInvalidFromAddressError() {
+    jQuery('#field_sender_address')
+      .parsley()
+      .removeError(
+        'invalidFromAddress',
+        { updateClass: true }
+      );
+  },
+
   loadItem: function loadItem(id) {
     this.setState({ loading: true });
 
@@ -141,11 +173,16 @@ const NewsletterSend = createReactClass({ // eslint-disable-line react/prefer-es
 
   handleSend: function handleSend(e) {
     e.preventDefault();
+    this.removeInvalidFromAddressError();
 
     if (!this.isValid()) {
       return jQuery('#mailpoet_newsletter').parsley().validate();
     }
 
+    if (!this.isValidFromAddress()) {
+      return this.showInvalidFromAddressError();
+    }
+
     MailPoet.Modal.loading(true);
 
     return this.saveNewsletter(e).done(() => {

views/newsletters.html

@@ -38,6 +38,7 @@
       var mailpoet_installed_at = '<%= settings.installed_at %>';
       var mailpoet_mss_active = <%= json_encode(mss_active) %>;
       var mailpoet_free_plan_announcement_seen = !!+'<%= settings.free_plan_announcement_seen %>';
+      var mailpoet_mta_method = '<%= settings.mta.method %>';
     <% endautoescape %>
   </script>
 <% endblock %>
@@ -265,6 +266,7 @@
     'newsletterBeingSent': __('The newsletter is being sent...'),
     'newsletterHasBeenScheduled': __('The newsletter has been scheduled.'),
     'newsletterSendingHasBeenResumed': __('The newsletter sending has been resumed.'),
+    'newsletterInvalidFromAddress': _x('You need to authorize the email address [i]%$1s[/i] to be able to send with it. [link]Authorize my email address[/link]', 'Users need to confirm that they own the email address they want to use to send their newsletter'),
     'welcomeEmailActivated': __('Your Welcome Email is now activated!'),
     'welcomeEmailActivationFailed': __('Your Welcome Email could not be activated, please check the settings.'),
     'postNotificationActivated': __('Your post notification is now active!'),