validating emails for l&e

Author: wjohnsto

src/hooks/useFormEmailValidator.ts

@@ -0,0 +1,40 @@
+import { RefObject } from 'react';
+import useFormListener from './useFormListener';
+
+export interface FormEmailValidatorOptions {
+  form: RefObject<HTMLFormElement>;
+  invalid: () => any;
+  valid: () => any;
+}
+
+export default function useFormEmailValidator({
+  form,
+  invalid,
+  valid,
+}: FormEmailValidatorOptions) {
+  useFormListener({
+    form,
+    listener: (ev: SubmitEvent) => {
+      const emailField = document.querySelector(
+        'input[type="email"]',
+      ) as HTMLInputElement;
+
+      if (!emailField) {
+        return;
+      }
+
+      const value = emailField.value;
+
+      if (/@(gmail|yahoo|aol|outlook)\.com/g.test(value)) {
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        ev.stopPropagation();
+        invalid();
+
+        return;
+      }
+
+      valid();
+    },
+  });
+}

src/hooks/useFormListener.ts

@@ -0,0 +1,32 @@
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { RefObject, useLayoutEffect } from 'react';
+
+export interface FormListenerOptions {
+  form: RefObject<HTMLFormElement>;
+  listener: (this: HTMLFormElement, ev: SubmitEvent) => any;
+}
+
+export default function useFormListener({
+  form,
+  listener,
+}: FormListenerOptions) {
+  const isBrowser = useIsBrowser();
+
+  useLayoutEffect(() => {
+    if (!isBrowser) {
+      return;
+    }
+
+    const formEl = form.current;
+
+    if (!formEl) {
+      return;
+    }
+
+    formEl.addEventListener('submit', listener);
+
+    return () => {
+      formEl.removeEventListener('submit', listener);
+    };
+  }, [isBrowser, form.current]);
+}

src/pages/lp/learn-and-earn-jwt.tsx

@@ -2,8 +2,30 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 import LandingPageWrapper from '../../components/LandingPageWrapper';
+import useFormEmailValidator from '../../hooks/useFormEmailValidator';
 
 export default function LearnAndEarnJWT() {
+  const form = React.createRef<HTMLFormElement>();
+  const warn = React.createRef<HTMLSpanElement>();
+
+  useFormEmailValidator({
+    form,
+    invalid() {
+      if (!warn.current) {
+        return;
+      }
+
+      warn.current.style.display = 'block';
+    },
+    valid() {
+      if (!warn.current) {
+        return;
+      }
+
+      warn.current.style.display = 'none';
+    },
+  });
+
   return (
     <LandingPageWrapper>
       {/* @ts-ignore */}
@@ -17,9 +39,9 @@ export default function LearnAndEarnJWT() {
           </h1>
           <div
             style={{
-              width: '70%',
-              minWidth: '370px',
-              margin: 'auto',
+              display: 'flex',
+              justifyContent: 'center',
+              margin: '1rem',
             }}>
             <p>
               Complete this short assessment for a chance to earn a $25 Amazon
@@ -29,15 +51,22 @@ export default function LearnAndEarnJWT() {
                 target="_blank">
                 this e-book.
               </a>
+              <strong>
+                Only business emails (no gmail, yahoo, etc.) will be accepted.
+              </strong>
             </p>
           </div>
           <div
             style={{
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
+              flexDirection: 'column',
             }}>
-            <form className="m-form" id="mktoForm_4161"></form>
+            <form ref={form} className="m-form" id="mktoForm_4161"></form>
+            <strong ref={warn} style={{ display: 'none' }}>
+              Only business emails (no gmail, yahoo, etc.) will be accepted.
+            </strong>
           </div>
         </article>
       </Layout>