Merge pull request #455 from sharetribe/validate-email-addresses

Validate email addresses

src/containers/ContactDetailsForm/ContactDetailsForm.js

@@ -78,6 +78,10 @@ class ContactDetailsFormComponent extends Component {
       id: 'ContactDetailsForm.emailRequired',
     });
     const emailRequired = validators.required(emailRequiredMessage);
+    const emailInvalidMessage = intl.formatMessage({
+      id: 'ContactDetailsForm.emailInvalid',
+    });
+    const emailValid = validators.emailFormatValid(emailInvalidMessage);
 
     const tooManyVerificationRequests = isTooManyEmailVerificationRequestsError(
       sendVerificationEmailError
@@ -210,7 +214,7 @@ class ContactDetailsFormComponent extends Component {
             id={`${form}.email`}
             label={emailLabel}
             placeholder={emailPlaceholder}
-            validate={emailRequired}
+            validate={[emailRequired, emailValid]}
             customErrorText={emailTakenErrorText}
           />
           {emailVerifiedInfo}

src/containers/LoginForm/LoginForm.js

@@ -31,6 +31,10 @@ const LoginFormComponent = props => {
     id: 'LoginForm.emailRequired',
   });
   const emailRequired = validators.required(emailRequiredMessage);
+  const emailInvalidMessage = intl.formatMessage({
+    id: 'LoginForm.emailInvalid',
+  });
+  const emailValid = validators.emailFormatValid(emailInvalidMessage);
 
   // password
   const passwordLabel = intl.formatMessage({
@@ -64,7 +68,7 @@ const LoginFormComponent = props => {
           id={`${form}.email`}
           label={emailLabel}
           placeholder={emailPlaceholder}
-          validate={emailRequired}
+          validate={[emailRequired, emailValid]}
         />
         <TextInputField
           className={css.password}

src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js

@@ -36,8 +36,13 @@ const PasswordRecoveryFormComponent = props => {
   const emailNotFoundMessage = intl.formatMessage({
     id: 'PasswordRecoveryForm.emailNotFound',
   });
+  const emailInvalidMessage = intl.formatMessage({
+    id: 'PasswordRecoveryForm.emailInvalid',
+  });
 
   const emailRequired = validators.required(emailRequiredMessage);
+  const emailValid = validators.emailFormatValid(emailInvalidMessage);
+
   // In case a given email is not found, pass a custom error message
   // to be rendered with the input component
   const customErrorText = isPasswordRecoveryEmailNotFoundError(recoveryError)
@@ -64,7 +69,7 @@ const PasswordRecoveryFormComponent = props => {
         id={`${form}.email`}
         label={emailLabel}
         placeholder={emailPlaceholder}
-        validate={emailRequired}
+        validate={[emailRequired, emailValid]}
         customErrorText={customErrorText}
       />
 

src/containers/SignupForm/SignupForm.js

@@ -31,6 +31,10 @@ const SignupFormComponent = props => {
     id: 'SignupForm.emailRequired',
   });
   const emailRequired = validators.required(emailRequiredMessage);
+  const emailInvalidMessage = intl.formatMessage({
+    id: 'SignupForm.emailInvalid',
+  });
+  const emailValid = validators.emailFormatValid(emailInvalidMessage);
 
   // password
   const passwordLabel = intl.formatMessage({
@@ -106,7 +110,7 @@ const SignupFormComponent = props => {
           id={`${form}.email`}
           label={emailLabel}
           placeholder={emailPlaceholder}
-          validate={emailRequired}
+          validate={[emailRequired, emailValid]}
         />
         <div className={css.name}>
           <TextInputField

src/translations/en.json

@@ -50,6 +50,7 @@
   "CheckoutPage.title": "Book {listingTitle}",
   "ContactDetailsForm.confirmChangesInfo": "To change your email, you need to enter your current password.",
   "ContactDetailsForm.confirmChangesTitle": "Confirm your changes",
+  "ContactDetailsForm.emailInvalid": "A valid email address is required",
   "ContactDetailsForm.emailLabel": "Your email",
   "ContactDetailsForm.emailRequired": "Email is required",
   "ContactDetailsForm.emailSent": "Verification email sent!",
@@ -166,8 +167,8 @@
   "InboxPage.statePending": "Pending",
   "InboxPage.stateRequested": "Requested",
   "InboxPage.title": "Inbox",
-  "LandingPage.schemaTitle": "Book saunas everywhere",
   "LandingPage.schemaDescription": "You can book a sauna from Saunatime or get some income by sharing your own sauna",
+  "LandingPage.schemaTitle": "Book saunas everywhere",
   "ListingCard.hostedBy": "Hosted by {authorName}.",
   "ListingCard.perNight": "per night",
   "ListingCard.unsupportedPrice": "({currency})",
@@ -190,6 +191,7 @@
   "ListingPage.ownListing": "This is your own listing.",
   "ListingPage.perNight": "per night",
   "ListingPage.viewImagesButton": "View photos ({count})",
+  "LoginForm.emailInvalid": "A valid email address is required",
   "LoginForm.emailLabel": "Email",
   "LoginForm.emailPlaceholder": "john.doe@example.com",
   "LoginForm.emailRequired": "This field is required",
@@ -264,6 +266,7 @@
   "PasswordChangePage.emailTabTitle": "Email",
   "PasswordChangePage.passwordTabTitle": "Password",
   "PasswordChangePage.title": "Password settings",
+  "PasswordRecoveryForm.emailInvalid": "A valid email address is required",
   "PasswordRecoveryForm.emailLabel": "Email",
   "PasswordRecoveryForm.emailNotFound": "Hmm. We didn't find an account with that email. Please double-check your email and try again.",
   "PasswordRecoveryForm.emailPlaceholder": "john.doe@example.com",
@@ -393,11 +396,12 @@
   "SearchPage.loadingResults": "Loading search results…",
   "SearchPage.noResults": "Could not find any listings.",
   "SearchPage.openMapView": "Map view",
-  "SearchPage.schemaTitle": "Saunatime | search saunas everywhere",
   "SearchPage.schemaDescription": "Showing search results",
+  "SearchPage.schemaTitle": "Saunatime | search saunas everywhere",
   "SearchPage.searchError": "Search failed. Please try again.",
   "SearchResultsPanel.nextPage": "Next page",
   "SearchResultsPanel.previousPage": "Previous page",
+  "SignupForm.emailInvalid": "A valid email address is required",
   "SignupForm.emailLabel": "Email",
   "SignupForm.emailPlaceholder": "john.doe@example.com",
   "SignupForm.emailRequired": "You need to add an email.",

src/util/validators.js

@@ -59,3 +59,12 @@ export const bookingDatesRequired = (inValidStartDateMessage, inValidEndDateMess
       return VALID;
     }
   };
+
+// Source: http://www.regular-expressions.info/email.html
+// See the link above for an explanation of the tradeoffs.
+const EMAIL_RE = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+export const emailFormatValid = message =>
+  value => {
+    return value && EMAIL_RE.test(value) ? VALID : message;
+  };