Google reCAPTCHA

frontend/.env

 //http://localhost:1337
 MAILCHIMP_FORM_URL = http://eepurl.com/iaRrv1
 GOOGLE_TRACKING_ID = "G-PTZC3WLTZ1"
-REACT_APP_MEASUREMENT_ID = G-PD7YZVDG30
+REACT_APP_MEASUREMENT_ID = G-PD7YZVDG30
+REACT_APP_SITE_KEY = 6LdCnHgjAAAAAAV4z_GBHwLYdKhxE9Y3oBzO6cxK

frontend/package-lock.json

 {
   "name": "frontend",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "1.1.6",
+      "version": "1.1.8",
       "dependencies": {
         "@faceless-ui/slider": "^1.1.14",
         "@faceless-ui/window-info": "^2.1.1",
         "react-dropzone": "^12.0.5",
         "react-ga": "^3.3.1",
         "react-ga4": "^1.4.1",
+        "react-google-recaptcha": "^2.1.0",
         "react-mailchimp-subscribe": "^2.1.3",
         "react-markdown": "^8.0.0",
         "react-router-dom": "^6.2.1",
         "node": ">=14"
       }
     },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-cookie": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
       "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz",
       "integrity": "sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w=="
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz",
+      "integrity": "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-cookie": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz",
       "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz",
       "integrity": "sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w=="
     },
+    "react-google-recaptcha": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz",
+      "integrity": "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==",
+      "requires": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.1.1"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

frontend/package.json

 {
   "name": "frontend",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "private": true,
   "dependencies": {
     "@faceless-ui/slider": "^1.1.14",
     "react-dropzone": "^12.0.5",
     "react-ga": "^3.3.1",
     "react-ga4": "^1.4.1",
+    "react-google-recaptcha": "^2.1.0",
     "react-mailchimp-subscribe": "^2.1.3",
     "react-markdown": "^8.0.0",
     "react-router-dom": "^6.2.1",

frontend/src/components/shared/ClientForm.jsx

+import React, { useRef } from 'react';
 import TagInput from '../TagInput';
 import img from '../../assets/images/Inqueries.png';
 import * as Yup from 'yup';
 import * as emailjs from 'emailjs-com';
 import { motion } from 'framer-motion';
 import ReactGA from 'react-ga4';
+import ReCAPTCHA from 'react-google-recaptcha';
+import axios from 'axios';
 
 export default function ClientForm() {
   //search context for prevous entry TODO
   const { clientForm, setClientForm } = useContext(ClientFormContext);
   const [sucMsg, setSucMsg] = useState(false);
-
+  const captchaRef = useRef(null);
+  const [msgText, setMsgText] = useState('');
   const changeFormHandler = event => {
     const { name, value } = event.target;
     setClientForm({
           <Formik
             initialValues={clientForm}
             validationSchema={validationSchema}
-            onSubmit={values => {
+            onSubmit={async values => {
               const data = {
                 Tag: values.tag,
                 Subject: values.subject,
                 Description: values.description,
               };
 
-              emailjs
-                .send(
-                  process.env.REACT_APP_SERVICE_ID,
-                  process.env.REACT_APP_CLIENT_TEMPLATE_ID,
-                  data,
-                  process.env.REACT_APP_USER_ID,
-                )
-                .then(
-                  result => {
-                    console.log(result.text);
+              const token = captchaRef.current.getValue();
+              captchaRef.current.reset();
+              if (token.length === 0) {
+                setSucMsg(true);
+                setMsgText('Please fill reCAPTCHA and try again. Thank you!');
+              } else {
+                await axios
+                  .post('http://localhost:2000/verify-token', { token })
+                  .then(res => {
                     setSucMsg(true);
-                  },
-                  error => {
-                    console.log(error.text);
-                  },
-                );
+                    if (res.data.data.success)
+                      setMsgText('Submission Succesful! Thank you!');
+                    else setMsgText('Please fill reCAPTCHA and try again. Thank you!');
+                  })
+                  .catch(error => {
+                    console.log(error);
+                  });
+              }
+
+              // emailjs
+              //   .send(
+              //     process.env.REACT_APP_SERVICE_ID,
+              //     process.env.REACT_APP_CLIENT_TEMPLATE_ID,
+              //     data,
+              //     process.env.REACT_APP_USER_ID,
+              //   )
+              //   .then(
+              //     result => {
+              //       console.log(result.text);
+              //       setSucMsg(true);
+              //     },
+              //     error => {
+              //       console.log(error.text);
+              //     },
+              //   );
               ReactGA.event('contact', {
                 category: 'Contact',
                 action: 'Business Inquiry',
                             />
                           </div>
                         </div>
-
+                        <ReCAPTCHA
+                          sitekey={process.env.REACT_APP_SITE_KEY}
+                          ref={captchaRef}
+                        />
                         <div className=" py-3 text-right">
                           <button
                             type="submit"
                         </div>
                         {sucMsg && (
                           <div className={'text-sm text-right text-dg-primary-900'}>
-                            Submission Succesful! Thank you!
+                            {msgText}
                           </div>
                         )}
                       </div>

frontend/src/components/shared/CookieBanner.jsx

               {cookie_p}
             </p>
           </div>
-          <div className="max-w-banner w-full flex items-center justify-end p-0 gap-2.5">
+          <div className="max-w-banner w-full flex items-center justify-end p-0 md:gap-2.5">
             <button
               onClick={handleDecline}
               className="flex items-start p-0 text-dg-primary-900 bg-dg-primary-75 font-semibold font-secondary md:px-64p px-42p md:py-20p py-15p md:w-max w-36 whitespace-nowrap"

frontend/src/components/shared/JobForm.jsx

 import ReactGA from 'react-ga4';
 import MyDropzone from './MyDropzone';
 import HashPositions from './HashPositions';
+import ReCAPTCHA from 'react-google-recaptcha';
+import axios from 'axios';
 
 export default function JobForm(props) {
   const [sucMsg, setSucMsg] = useState(false);
+  const captchaRef = useRef(null);
+  const [msgText, setMsgText] = useState('');
   const cntCareersJobs = props.cntCareers;
   let defaultPositionSelection = props.defaultPositionSelection;
   //search context for prevous entry TODO
             initialValues={jobForm}
             validationSchema={validationSchema}
             onChange={changeFormHandler}
-            onSubmit={values => {
+            onSubmit={async values => {
               const prepFile = async file => {
                 if (file.size >= 2000000) {
                   setErrorMsg('File too large!');
                 setErrorMsg('CV is Required');
               } else {
                 setErrorMsg('');
-                prepFile(jobForm.file).then(res => {
+                prepFile(jobForm.file).then(async res => {
                   const newtemplateParams = {
                     Position: values.position,
                     Other: values.other,
                     File: res,
                   };
 
-                  emailjs
-                    .send(
-                      process.env.REACT_APP_SERVICE_ID,
-                      process.env.REACT_APP_JOB_TEMPLATE_ID,
-                      newtemplateParams,
-                      process.env.REACT_APP_USER_ID,
-                    )
-                    .then(
-                      result => {
-                        console.log(result.text);
+                  const token = captchaRef.current.getValue();
+                  captchaRef.current.reset();
+                  if (token.length === 0) {
+                    setSucMsg(true);
+                    setMsgText('Please fill reCAPTCHA and try again. Thank you!');
+                  } else {
+                    await axios
+                      .post('http://localhost:2000/verify-token', { token })
+                      .then(res => {
                         setSucMsg(true);
-                      },
-                      error => {
-                        console.log(error.text);
-                      },
-                    );
+                        if (res.data.data.success)
+                          setMsgText('Submission Succesful! Thank you!');
+                        else
+                          setMsgText('Please fill reCAPTCHA and try again. Thank you!');
+                      })
+                      .catch(error => {
+                        console.log(error);
+                      });
+                  }
+
+                  // emailjs
+                  //   .send(
+                  //     process.env.REACT_APP_SERVICE_ID,
+                  //     process.env.REACT_APP_JOB_TEMPLATE_ID,
+                  //     newtemplateParams,
+                  //     process.env.REACT_APP_USER_ID,
+                  //   )
+                  //   .then(
+                  //     result => {
+                  //       console.log(result.text);
+                  //       setSucMsg(true);
+                  //     },
+                  //     error => {
+                  //       console.log(error.text);
+                  //     },
+                  //   );
                 });
               }
               ReactGA.event('contact', {
                           </div>
                         </div>
 
+                        <ReCAPTCHA
+                          sitekey={process.env.REACT_APP_SITE_KEY}
+                          ref={captchaRef}
+                        />
+
                         <div className=" py-3 text-right">
                           <button
                             type="submit"
                         </div>
                         {sucMsg && (
                           <div className={'text-sm text-right text-dg-primary-900'}>
-                            Submission Succesful! Thank you!
+                            {msgText}
                           </div>
                         )}
                       </div>

frontend/yarn.lock

     "kleur" "^3.0.3"
     "sisteransi" "^1.0.5"
 
-"prop-types@^15.0.0", "prop-types@^15.5.10", "prop-types@^15.6.0", "prop-types@^15.7.2", "prop-types@^15.8.1":
+"prop-types@^15.0.0", "prop-types@^15.5.0", "prop-types@^15.5.10", "prop-types@^15.6.0", "prop-types@^15.7.2", "prop-types@^15.8.1":
   "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
   "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   "version" "15.8.1"
     "regenerator-runtime" "^0.13.9"
     "whatwg-fetch" "^3.6.2"
 
+"react-async-script@^1.1.1":
+  "integrity" "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q=="
+  "resolved" "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz"
+  "version" "1.2.0"
+  dependencies:
+    "hoist-non-react-statics" "^3.3.0"
+    "prop-types" "^15.5.0"
+
 "react-cookie@^4.1.1":
   "integrity" "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A=="
   "resolved" "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz"
   "resolved" "https://registry.npmjs.org/react-ga4/-/react-ga4-1.4.1.tgz"
   "version" "1.4.1"
 
+"react-google-recaptcha@^2.1.0":
+  "integrity" "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ=="
+  "resolved" "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz"
+  "version" "2.1.0"
+  dependencies:
+    "prop-types" "^15.5.0"
+    "react-async-script" "^1.1.1"
+
 "react-is@^16.13.1", "react-is@^16.7.0", "react-is@>= 16.8.0":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   optionalDependencies:
     "fsevents" "^2.3.2"
 
-"react@*", "react@^15.6.2 || ^16.0 || ^17 || ^18", "react@^16 || ^17 || ^18", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.3.0", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
+"react@*", "react@^15.6.2 || ^16.0 || ^17 || ^18", "react@^16 || ^17 || ^18", "react@^16.8 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.3.0", "react@>= 16.8", "react@>= 16.8.0", "react@>=15", "react@>=16", "react@>=16.4.1", "react@>=16.8", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"