diff --git a/src/components/CommonForm/index.js b/src/components/CommonForm/index.js index dc221efb9bb1..1bdcd39dd808 100644 --- a/src/components/CommonForm/index.js +++ b/src/components/CommonForm/index.js @@ -23,18 +23,14 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => { const [org, setOrg] = useState(""); const [occupation, setOccupation] = useState(""); const [role, setRole] = useState(""); + const [errorEmail, setErrorEmail] = useState(""); // const [google, setGoogleAccount] = useState(""); // const [github, setGithubAccount] = useState(""); // const [twitter, setTwitterAccount] = useState(""); // const [linkedin, setLinkedinAccount] = useState(""); - - const errorRole = "Please select role as applicable"; - const errorEmail = "Please enter a valid email address"; - const confirmationMessageRef = useRef(null); //set reference to confirmation message const navBarOffset = 120; - const scrollElementIntoView = (element, offset) => { //function to bring the confirmation message into view after submittion of form var elementPosition = element.getBoundingClientRect().top; var offsetPosition = elementPosition + window.pageYOffset - offset; @@ -44,14 +40,44 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => { behavior: "smooth" }); }; - + // Validating role + const isValidRole = (value) => { + if (!value) { + setValidateRole(true); + return false; + } else { + setValidateRole(false); + return true; + } + }; + /* + Validating Email ---- + 1. Check for email if it satisfies the standard forn for email + 2. Check for anonymous email address/domains. Currently It is checking for only 4 domains, we can add more to regex expression as we move ahead. + */ + const isValidEmail = (value) => { + const validEmail = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value); + if (!validEmail) { + setValidateEmail(true); + setErrorEmail("Please enter a valid email address"); + return false; + } else if (validEmail && /.*(?=.*@(?:duck\.com|protonmail\.com|anonaddy\.me|tuta\.io)).*/.test(value)) { + setValidateEmail(true); + setErrorEmail("Use of this email address is not allowed. Please enter a non-anonymous email address / domain."); + return false; + } else { + setValidateEmail(false); + setErrorEmail(""); + return true; + } + }; useEffect(() => { if (submit) { axios.post("https://hook.us1.make.com/r5qgpjel5tlhtyndcgjvkrdkoc65417y", { memberFormOne, }); } - }, [submit]); + }, [submit, errorEmail, validateEmail, validateRole]); return ( @@ -74,7 +100,7 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => { form: form, }} onSubmit={values => { - if (values.role && values.email && !values.email.includes(";")) { + if (isValidRole(values.role) && isValidEmail(values.email)) { setMemberFormOne(values); setStepNumber(1); setSubmit(true); @@ -82,14 +108,6 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => { // confirmationMessageRef.current.scrollIntoView({ behavior: 'smooth' }) scrollElementIntoView(confirmationMessageRef.current, navBarOffset); } else { - if (!values.role) { - setValidateRole(true); - } else if (values.email.includes(";")) { - setValidateEmail(true); - } else { - setValidateRole(false); - setValidateEmail(false); - } // if (!(values.google || values.github || values.twitter || values.linkedin)) { // setValidateAccounts(true); // } else { @@ -114,8 +132,8 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => { - {validateEmail &&

{errorEmail}

} - + {validateEmail &&

{errorEmail}

} + @@ -140,7 +158,7 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => { */} - {validateRole &&

{errorRole}

} + {validateRole &&

{errorRole}

}