Merge pull request #99 from Web-Dev-Path/feature/add-recaptcha

add reCaptcha

Author: vmcodes

.env-template

@@ -1,7 +1,8 @@
+To get rid of the `console.log` errors related to MailChimp and reCapctha:
 
-# When updating the Subscribe MailChimp functionality present on the footer:
-# 1 Ask for the url link on Slack
-# 2 Create your local `.env` with the url credentials that will not be tracked into our repository for security reasons
+- 1 Ask for the the credentials on Slack
+- 2 Create your local `.env` with the credentials that will not be tracked into our repository for security reasons
 
 NEXT_PUBLIC_MAILCHIMP_URL={Add the url link}
-
+NEXT_PUBLIC_RECAPTCHA_SITE={Add the key}
+RECAPTCHA_SECRET_KEY={Add the key}

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - CardsColumns.js and Card.js
 - footer copyright
 - Header.js component
+- reCAPTCHA
 
 ### Fixed
 

README.md

@@ -28,6 +28,7 @@ After talking to us on Slack and deciding this project is your "cup of tea", you
 This is how to get started locally:
 
 - [Git clone this repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository)
+- Ask on Slack for the `.env` file credentials with MailChimp and reCaptcha keys and add it to your local copy.
 - Run `yarn install`
 - Run `yarn run dev` (for Windows)
 - Run `yarn run dev-mac` (for macOS)

components/mailchimp/NewsletterForm.js

@@ -1,11 +1,51 @@
-import { useState } from 'react';
+import { createRef, useState } from 'react';
 import { decode } from 'html-entities';
 import Container from '../Container';
 import newsletterStyles from '../../styles/Newsletter.module.scss';
+import ReCAPTCHA from 'react-google-recaptcha';
+
+const SITE_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
 
 const NewsletterForm = ({ status, message, onValidated }) => {
   const [error, setError] = useState(null);
-  const [email, setEmail] = useState(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const recaptchaRef = createRef();
+
+  const onReCAPTCHAChange = async captchaCode => {
+    // If the reCAPTCHA code is null or undefined indicating that
+    // the reCAPTCHA was expired then return early
+    if (!captchaCode) {
+      return;
+    }
+    try {
+      const response = await fetch('/api/register', {
+        method: 'POST',
+        body: JSON.stringify({ email, name, captcha: captchaCode }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      if (response.ok) {
+        // If the response is ok than show the success console.log
+        console.log('Email registered successfully');
+      } else {
+        // Else throw an error with the message returned
+        const error = await response.json();
+        throw new Error(error.message);
+      }
+    } catch (error) {
+      console.log(error?.message || 'Something went wrong');
+    } finally {
+      // Reset the reCAPTCHA when the request has failed or succeeded
+      if (recaptchaRef?.current) {
+        recaptchaRef.current.reset();
+      }
+
+      setEmail('');
+      setName('');
+    }
+  };
 
   /**
    * Handle form submit.
@@ -17,17 +57,24 @@ const NewsletterForm = ({ status, message, onValidated }) => {
 
     setError(null);
 
+    if (!name) {
+      setError('Please enter a name');
+      return null;
+    }
+
     if (!email) {
       setError('Please enter a valid email address');
       return null;
     }
 
+    recaptchaRef.current.execute();
+
     const isFormValidated = onValidated({ EMAIL: email });
 
     event.target.reset();
 
     // On success return true
-    return email && email.indexOf('@') > -1 && isFormValidated;
+    return name && email && email.indexOf('@') > -1 && isFormValidated;
   };
 
   /**
@@ -77,22 +124,36 @@ const NewsletterForm = ({ status, message, onValidated }) => {
           >
             <input
               className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__name}`}
+              onChange={event => setName(event?.target?.value ?? '')}
               type="text"
               name="name"
+              value={name}
               placeholder="name"
             />
             <input
               className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__email}`}
               onChange={event => setEmail(event?.target?.value ?? '')}
               type="email"
               name="email"
+              value={email}
               placeholder="email"
               onKeyUp={event => handleInputKeyEvent(event)}
             />
-            <button className={newsletterStyles.newsletter__button}>
+            <button
+              className={newsletterStyles.newsletter__button}
+              type="submit"
+            >
               Subscribe
             </button>
+
+            <ReCAPTCHA
+              ref={recaptchaRef}
+              size="invisible"
+              sitekey={SITE_KEY}
+              onChange={onReCAPTCHAChange}
+            />
           </form>
+
           <div className={newsletterStyles.newsletterFormInfo}>
             {status === 'sending' && (
               <div className={newsletterStyles.newsletterFormSending}>

package.json

@@ -15,6 +15,7 @@
     "next": "^12.0.10",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-google-recaptcha": "^2.1.0",
     "react-mailchimp-subscribe": "^2.1.3",
     "sass": "^1.35.1"
   }

pages/api/register.js

@@ -0,0 +1,56 @@
+const sleep = () =>
+  new Promise(resolve => {
+    setTimeout(() => {
+      resolve();
+    }, 350);
+  });
+
+export default async function handler(req, res) {
+  const SECRET_KEY = process.env.RECAPTCHA_SECRET_KEY;
+
+  const { body, method } = req;
+
+  // Extract the email, name, and captcha code from the request body
+  const { email, name, captcha } = body;
+
+  if (method === 'POST') {
+    // If email or captcha are missing return an error
+    if (!email || !name || !captcha) {
+      return res.status(422).json({
+        message: 'Unprocessable request, please provide the required fields',
+      });
+    }
+
+    try {
+      // Ping the google recaptcha verify API to verify the captcha code you received
+      const response = await fetch(
+        `https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEY}&response=${captcha}`,
+        {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
+          },
+          method: 'POST',
+        }
+      );
+      const captchaValidation = await response.json();
+
+      if (captchaValidation.success) {
+        // Replace this with the API that will save the data received
+        // to your backend
+        await sleep();
+        // Return 200 if everything is successful
+        return res.status(200).send('OK');
+      }
+
+      return res.status(422).json({
+        message: 'Unprocessable request, Invalid captcha code',
+      });
+    } catch (error) {
+      console.log(error);
+      return res.status(422).json({ message: 'Something went wrong' });
+    }
+  }
+  // Return 404 if someone pings the API with a method other than
+  // POST
+  return res.status(404).send('Not found');
+}

styles/Newsletter.module.scss

@@ -11,12 +11,9 @@
     color: $primary-content-color;
     margin-top: 1rem;
 
-    @include tablet {
-      margin: 0;
-    }
-
     @include large-desktop {
       font-size: 1.2rem;
+      margin: 0;
     }
   }
 }
@@ -34,13 +31,15 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+      gap: 2rem;
     }
   }
 
   &__title {
     font-size: 1.5rem;
     color: $primary-content-color;
     margin: 0;
+    white-space: nowrap;
 
     @include medium-desktop {
       font-size: 1.75rem;