Merge pull request COVID19Tracking#1422 from COVID19Tracking/kevee/re…

…captcha

chore: Add recaptcha to contact forms

gatsby-config.js

@@ -13,6 +13,7 @@ const gatsbyConfig = {
   siteMetadata: {
     title: 'The COVID Tracking Project',
     siteUrl: 'https://covidtracking.com/',
+    recaptchaKey: '6LcZIPQUAAAAAB-y_TpTUDQ0HvCk0c7a8kXgZVGD',
     description:
       'The COVID Tracking Project collects and publishes the most complete testing data available for US states and territories.',
     production:

gatsby-ssr.js

@@ -4,4 +4,14 @@ exports.onRenderBody = ({ setPostBodyComponents, setBodyAttributes }) => {
   setBodyAttributes({
     className: 'no-js',
   })
+
+  setPostBodyComponents([
+    <script
+      type="text/javascript"
+      key="recaptcha-script"
+      async
+      defer
+      src="https://www.google.com/recaptcha/api.js"
+    />,
+  ])
 }

package.json

@@ -85,6 +85,7 @@
     "react-dom": "^16.12.0",
     "react-expand-animated": "^1.0.2",
     "react-helmet": "^5.2.1",
+    "react-recaptcha": "^2.3.10",
     "react-typography": "^0.16.19",
     "slugify": "^1.4.0",
     "smartypants": "^0.1.1"

src/components/common/recaptcha.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useStaticQuery, graphql } from 'gatsby'
+import ReCaptcha from 'react-recaptcha'
+
+const Recaptcha = () => {
+  const data = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          recaptchaKey
+        }
+      }
+    }
+  `)
+
+  return (
+    <>
+      {typeof window !== 'undefined' && (
+        <ReCaptcha
+          sitekey={data.site.siteMetadata.recaptchaKey}
+          render="explicit"
+          elementID={`captcha-${Math.round(Math.random() * 1000)}`}
+        />
+      )}
+    </>
+  )
+}
+
+export default Recaptcha

src/pages/contact/data.js

@@ -4,6 +4,7 @@ import { graphql } from 'gatsby'
 import Layout from '~components/layout'
 import { Form, Textarea, Input, Select, List } from '~components/common/form'
 import { Row, Col } from '~components/common/grid'
+import Recaptcha from '~components/common/recaptcha'
 import Alert from '~components/common/alert'
 
 const ContactPage = ({ data }) => {
@@ -124,6 +125,9 @@ const ContactPage = ({ data }) => {
             <Alert>You must complete all fields</Alert>
           </div>
         )}
+        <div>
+          <Recaptcha />
+        </div>
         <button
           type="submit"
           disabled={!isComplete()}

src/pages/contact/other.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import Layout from '~components/layout'
 import { Form, Textarea, Select, Input } from '~components/common/form'
 import { Row, Col } from '~components/common/grid'
+import Recaptcha from '~components/common/recaptcha'
 import Alert from '~components/common/alert'
 
 const defaultReason = '-- Select a reason --'
@@ -78,7 +79,6 @@ const ContactOtherPage = () => {
           isRequired
           onChange={event => setMessage(event.target.value)}
         />
-
         {reason === defaultReason && (
           <Alert>
             Please let us know{' '}
@@ -89,7 +89,6 @@ const ContactOtherPage = () => {
         {reason !== defaultReason && !(email && message && name) && (
           <Alert>All fields are required</Alert>
         )}
-
         <input
           type="text"
           aria-hidden
@@ -108,7 +107,10 @@ const ContactOtherPage = () => {
           type="hidden"
           name="autoreply-sender-name"
           value="The COVID Tracking Project"
-        />
+        />{' '}
+        <div>
+          <Recaptcha />
+        </div>
         <button
           type="submit"
           disabled={reason === defaultReason || !(email && message && name)}