diff --git a/package.json b/package.json index 6dd6a56..e38a440 100644 --- 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 index 3ce5a2f..607fc44 100644 --- 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 ( @@ -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" > Go Back @@ -359,7 +379,16 @@ class Form extends React.Component { /> - + +