Merge pull request #1454 from AppQuality/UN-1913

feat: add disposable email validation using fakefilter package

Author: marcbon

package.json

@@ -22,6 +22,7 @@
     "i18n-iso-countries": "^7.3.0",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
+    "mailchecker": "^6.0.19",
     "motion": "^12.16.0",
     "qs": "^6.10.3",
     "query-string": "^7.1.1",
@@ -130,4 +131,4 @@
     "*.{tsx,ts,js,css,md}": "prettier --write"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}

src/common/disposableEmail.ts

@@ -0,0 +1,5 @@
+import MailChecker from 'mailchecker';
+
+export function isDisposableEmail(email: string): any {
+  return !MailChecker.isValid(email);
+}

src/locales/en/translation.json

@@ -1454,6 +1454,7 @@
   "SIGNUP_FORM_COMPANY_SIZE_PLACEHOLDER": "Select company size",
   "SIGNUP_FORM_CTA_RETURN_TO_UNGUESS_LANDING": "or visit <unguess-link>UNGUESS website</unguess-link>",
   "SIGNUP_FORM_EMAIL_ALREADY_TAKEN": "Error: User with provided email already exists",
+  "SIGNUP_FORM_EMAIL_DISPOSABLE_NOT_ALLOWED": "Temporary email addresses are not allowed",
   "SIGNUP_FORM_EMAIL_ERROR_SERVER_MAIL_CHECK": "Oops! Check your email format",
   "SIGNUP_FORM_EMAIL_IS_REQUIRED": "This field is required",
   "SIGNUP_FORM_EMAIL_LABEL": "Work Email",

src/locales/it/translation.json

@@ -1498,6 +1498,7 @@
   "SIGNUP_FORM_COMPANY_SIZE_PLACEHOLDER": "",
   "SIGNUP_FORM_CTA_RETURN_TO_UNGUESS_LANDING": "",
   "SIGNUP_FORM_EMAIL_ALREADY_TAKEN": "",
+  "SIGNUP_FORM_EMAIL_DISPOSABLE_NOT_ALLOWED": "",
   "SIGNUP_FORM_EMAIL_ERROR_SERVER_MAIL_CHECK": "",
   "SIGNUP_FORM_EMAIL_IS_REQUIRED": "",
   "SIGNUP_FORM_EMAIL_LABEL": "",

src/pages/JoinPage/Steps/Step1.tsx

@@ -17,6 +17,7 @@ import { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { appTheme } from 'src/app/theme';
 import { PasswordRequirements } from 'src/common/components/PasswordRequirements';
+import { isDisposableEmail } from 'src/common/disposableEmail';
 import { useSendGTMevent } from 'src/hooks/useGTMevent';
 import { JoinFormValues } from '../valuesType';
 import { ButtonContainer } from './ButtonContainer';
@@ -66,6 +67,22 @@ export const Step1 = () => {
     let error;
     let error_event;
     if (status?.isInvited) return error;
+    if (value) {
+      const isDisposable = isDisposableEmail(value);
+
+      if (isDisposable) {
+        error = t('SIGNUP_FORM_EMAIL_DISPOSABLE_NOT_ALLOWED');
+        error_event = 'SIGNUP_FORM_EMAIL_DISPOSABLE_NOT_ALLOWED';
+        sendGTMevent({
+          event: 'sign-up-flow',
+          category: 'not set',
+          action: 'validate email',
+          content: `error: ${error_event}`,
+          target: `is invited: ${status?.isInvited}`,
+        });
+        return error;
+      }
+    }
     const res = await fetch(
       `${process.env.REACT_APP_API_URL}/users/by-email/${value}`,
       {

tests/e2e/join/index.spec.ts

@@ -75,11 +75,16 @@ test.describe('The Join page first step - case new user', () => {
     await expect(step1.elements().emailError()).toHaveText(
       i18n.t('SIGNUP_FORM_EMAIL_IS_REQUIRED')
     );
-    await step1.fillEmail('invalid-email');
+    await step1.fillEmail('invalid-email@');
     await expect(
       page.getByText(i18n.t('SIGNUP_FORM_EMAIL_MUST_BE_A_VALID_EMAIL'))
     ).toBeVisible();
 
+    await step1.fillEmail('fake-email@mailinator.com');
+    await expect(
+      page.getByText(i18n.t('SIGNUP_FORM_EMAIL_DISPOSABLE_NOT_ALLOWED'))
+    ).toBeVisible();
+
     await step1.fillRegisteredEmail();
     await expect(
       page.getByText(i18n.t('SIGNUP_FORM_EMAIL_ALREADY_TAKEN'))
@@ -94,7 +99,6 @@ test.describe('The Join page first step - case new user', () => {
     await expect(step1.elements().container()).not.toBeVisible();
     await expect(step2.elements().container()).toBeVisible();
   });
-  test('display two links to go to app.unguess and a link to terms and conditions', async () => {});
 });
 
 test.describe('The Join page second step', () => {

tests/e2e/login/index.spec.ts

@@ -6266,6 +6266,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+mailchecker@^6.0.19:
+  version "6.0.19"
+  resolved "https://registry.yarnpkg.com/mailchecker/-/mailchecker-6.0.19.tgz#7d0bc89e6f846a2dc1adb44e065e4d146e8f7d8d"
+  integrity sha512-a7yghUa0IC1n6OkSJIqCSw2HS8ujKJGBJcRkjhHiKvHqPU3JB28Yze9o90L52r6lA/sp/EBveDXOWbozcdmxYg==
+
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"