Add email addresses validation

[MAILPOET-2677]

assets/js/src/settings/pages/basics/default_sender.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { t, onChange } from 'settings/utils';
+import { t, onChange, isEmail } from 'settings/utils';
 import { Label, Inputs } from 'settings/components';
-import { useSetting, useSelector } from 'settings/store/hooks';
+import { useSetting, useSelector, useAction } from 'settings/store/hooks';
 import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
 
 export default function DefaultSender() {
@@ -10,6 +10,12 @@ export default function DefaultSender() {
   const [senderEmail, setSenderEmail] = useSetting('sender', 'address');
   const [replyToName, setReplyToName] = useSetting('reply_to', 'name');
   const [replyToEmail, setReplyToEmail] = useSetting('reply_to', 'address');
+  const setErrorFlag = useAction('setErrorFlag');
+  const invalidSenderEmail = (senderEmail && !isEmail(senderEmail));
+  const invalidReplyToEmail = replyToEmail && !isEmail(replyToEmail);
+  React.useEffect(() => {
+    setErrorFlag(invalidSenderEmail || invalidReplyToEmail);
+  }, [invalidReplyToEmail, invalidSenderEmail, setErrorFlag]);
   return (
     <>
       <Label
@@ -34,6 +40,11 @@ export default function DefaultSender() {
           value={senderEmail}
           onChange={onChange(setSenderEmail)}
         />
+        {invalidSenderEmail && (
+          <span className="mailpoet_error_item mailpoet_error">
+            {t`invalidEmail`}
+          </span>
+        )}
         <div className="regular-text">
           <SenderEmailAddressWarning
             emailAddress={senderEmail}
@@ -56,6 +67,11 @@ export default function DefaultSender() {
           value={replyToEmail}
           onChange={onChange(setReplyToEmail)}
         />
+        {invalidReplyToEmail && (
+          <span className="mailpoet_error_item mailpoet_error">
+            {t`invalidEmail`}
+          </span>
+        )}
       </Inputs>
     </>
   );

assets/js/src/settings/pages/basics/new_subscriber_notifications.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { t, onToggle, onChange } from 'settings/utils';
+import { t, onChange, isEmail } from 'settings/utils';
 import { useSetting, useAction } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
@@ -8,9 +8,10 @@ export default function NewSubscriberNotifications() {
   const [email, setEmail] = useSetting('subscriber_email_notification', 'address');
   const setErrorFlag = useAction('setErrorFlag');
   const hasError = enabled === '1' && email.trim() === '';
+  const invalidEmail = email && !isEmail(email);
   React.useEffect(() => {
-    setErrorFlag(hasError);
-  }, [hasError, setErrorFlag]);
+    setErrorFlag(hasError || invalidEmail);
+  }, [hasError, invalidEmail, setErrorFlag]);
 
   return (
     <>
@@ -42,6 +43,11 @@ export default function NewSubscriberNotifications() {
             {t`pleaseFillEmail`}
           </div>
         )}
+        {invalidEmail && (
+          <div className="mailpoet_error_item mailpoet_error">
+            {t`invalidEmail`}
+          </div>
+        )}
       </Inputs>
     </>
   );

assets/js/src/settings/pages/basics/stats_notifications.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { t, onToggle, onChange } from 'settings/utils';
+import {
+  t, onToggle, onChange, isEmail,
+} from 'settings/utils';
 import { useSetting, useAction } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
 
@@ -9,9 +11,10 @@ export default function StatsNotifications() {
   const [email, setEmail] = useSetting('stats_notifications', 'address');
   const setErrorFlag = useAction('setErrorFlag');
   const hasError = (enabled === '1' || automated === '1') && email.trim() === '';
+  const invalidEmail = email && !isEmail(email);
   React.useEffect(() => {
-    setErrorFlag(hasError);
-  }, [hasError, setErrorFlag]);
+    setErrorFlag(hasError || invalidEmail);
+  }, [hasError, invalidEmail, setErrorFlag]);
 
   return (
     <>
@@ -43,6 +46,11 @@ export default function StatsNotifications() {
             {t`pleaseFillEmail`}
           </div>
         )}
+        {invalidEmail && (
+          <div className="mailpoet_error_item mailpoet_error">
+            {t`invalidEmail`}
+          </div>
+        )}
       </Inputs>
     </>
   );

assets/js/src/settings/utils.ts

@@ -9,3 +9,5 @@ export const onChange = (setter: Setter) => (e: Event) => setter(e.target.value)
 export const onToggle = (setter: Setter) => (e: Event) => setter(e.target.checked ? '1' : '0');
 
 export const t = ([word]: TemplateStringsArray) => MailPoet.I18n.t(word);
+
+export const isEmail = (value: string): boolean => (window as any).mailpoet_email_regex.test(value);

views/settings.html

@@ -85,6 +85,8 @@
     'gdprDescription': __('You need to comply with European law in regards to data privacy if you have European subscribers. Rest assured, it’s easy!'),
     'readGuide': __('Read our guide'),
 
+    'invalidEmail': __('Invalid email address'),
+
     'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).'),
     'announcementHeader': __('Get notified when someone subscribes'),
     'announcementParagraph1': __('It’s been a popular feature request from our users, we hope you get lots of emails about all your new subscribers!'),