reCAPTCHA fix

ryanwiemer · May 29, 2018 · 644e30b · 644e30b
1 parent 971ff22
commit 644e30b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
     "gatsby-source-contentful": "^1.3.51",
     "gatsby-source-filesystem": "^1.5.36",
     "gatsby-transformer-remark": "^1.7.41",
+    "react-async-script": "^0.9.1",
+    "react-google-recaptcha": "^0.11.1",
     "react-helmet": "^5.2.0",
     "react-reveal": "^1.2.2",
     "react-scroll": "^1.7.9",

diff --git a/src/components/Form.js b/src/components/Form.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import 'whatwg-fetch' // Fetch Polyfill
+import Recaptcha from 'react-google-recaptcha'
 import Slide from 'react-reveal/Slide'
 import Link from 'gatsby-link'
 import topography from '../images/topography.svg'
@@ -151,17 +152,21 @@ const Dogs = styled.div`
   }
 `
 
+const StyledRecaptcha = styled(Recaptcha)`
+  margin: 0 0 1em 0;
+  width: 100%;
+  height: 80px;
+`
+
 const Submit = styled.input`
   background: ${props => props.theme.colors.base} !important;
   border: none !important;
   color: white !important;
   cursor: pointer;
   transition: 0.3s;
-  &:hover {
-    opacity: 0.75;
-  }
-  @media (hover: none) {
-    opacity: 1 !important;
+  &:disabled {
+    background: gray !important;
+    cursor: not-allowed;
   }
 `
 
@@ -229,6 +234,7 @@ class Form extends React.Component {
       questions: '',
       dogs: '',
       success: false,
+      disabledSubmit: true,
     }
   }
 
@@ -241,6 +247,13 @@ class Form extends React.Component {
     })
   }
 
+  handleRecaptcha = value => {
+    this.setState({
+      'g-recaptcha-response': value,
+      disabledSubmit: false,
+    })
+  }
+
   handleSubmit = event => {
     fetch('/', {
       method: 'POST',
@@ -253,6 +266,8 @@ class Form extends React.Component {
   }
 
   handleSuccess = () => {
+    // eslint-disable-next-line
+    grecaptcha.reset()
     this.setState({
       name: '',
       email: '',
@@ -261,10 +276,14 @@ class Form extends React.Component {
       questions: '',
       dogs: '',
       success: true,
+      disabledSubmit: true,
     })
   }
 
   render() {
+    const RECAPTCHA_KEY =
+      process.env.SITE_RECAPTCHA_KEY ||
+      '6Ld7KFwUAAAAAGD3p0lGYNeVgq7jpA3PT2xib8LI'
     return (
       <Wrapper>
         <Slide bottom duration={750}>
@@ -273,6 +292,7 @@ class Form extends React.Component {
               name="register"
               onSubmit={this.handleSubmit}
               data-netlify="true"
+              data-netlify-recaptcha="true"
               data-netlify-honeypot="bot"
             >
               <Close to="/">Go Back</Close>
@@ -359,7 +379,16 @@ class Form extends React.Component {
                   />
                 </label>
               </Dogs>
-              <Submit name="submit" type="submit" value="Send" />
+              <StyledRecaptcha
+                sitekey={RECAPTCHA_KEY}
+                onChange={this.handleRecaptcha}
+              />
+              <Submit
+                disabled={this.state.disabledSubmit}
+                name="submit"
+                type="submit"
+                value="Send"
+              />
             </ContactForm>
           </Slide>
         </Slide>