add recaptcha

.gitignore

@@ -52,7 +52,7 @@ typings/
 *.tgz
 
 # dotenv environment variables file
-.env
+.env.*
 
 # gatsby files
 .cache/

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "@n8tb1t/use-scroll-position": "^1.0.43",
+    "@types/react-google-recaptcha": "^1.1.1",
+    "@types/react-responsive": "^8.0.2",
     "axios": "^0.19.2",
     "babel-plugin-styled-components": "^1.10.0",
     "gatsby": "^2.3.31",
@@ -38,7 +40,9 @@
     "prismjs": "^1.16.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-google-recaptcha": "^2.0.1",
     "react-helmet": "^5.2.0",
+    "react-responsive": "^8.0.3",
     "react-spinners": "^0.8.0",
     "react-typography": "^0.16.19",
     "styled-components": "^4.2.0",

src/components/contactForm.tsx

@@ -1,59 +1,79 @@
-import React from "react"
+import React, { useState } from "react"
+import { useMediaQuery } from "react-responsive"
+import RecaptchaForm from "../components/recaptcha"
 import useContactForm from "../hooks/useContactForm"
 
 interface ContactFormProps {
   handleSubmit: (inputs: any) => void
 }
 
 const ContactForm = (props: ContactFormProps) => {
+  const [recaptchaComplete, setRecaptchaComplete] = useState(false)
+
   const { handleSubmit, inputs, handleInputChange } = useContactForm(() =>
     props.handleSubmit(inputs)
   )
 
+  const handleRecaptcha = (status: boolean) => {
+    setRecaptchaComplete(status)
+  }
+
+  const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" })
+
   return (
-    <form className="contact-form" onSubmit={handleSubmit}>
-      <label>
-        Name
-        <input
-          type="text"
-          name="name"
-          id="name"
-          onChange={handleInputChange}
-          value={inputs.name}
-        />
-      </label>
-      <label>
-        Email
-        <input
-          type="email"
-          name="email"
-          id="email"
-          onChange={handleInputChange}
-          value={inputs.email}
-        />
-      </label>
-      <label>
-        Subject
-        <input
-          type="text"
-          name="subject"
-          id="subject"
-          onChange={handleInputChange}
-          value={inputs.subject}
-        />
-      </label>
-      <label>
-        Message
-        <textarea
-          name="message"
-          id="message"
-          rows={5}
-          onChange={handleInputChange}
-          value={inputs.message}
+    <div>
+      {isTabletOrMobile && <p>You are a desktop or laptop</p>}
+
+      <form className="contact-form" onSubmit={handleSubmit}>
+        <label>
+          Name
+          <input
+            type="text"
+            name="name"
+            id="name"
+            onChange={handleInputChange}
+            value={inputs.name}
+          />
+        </label>
+        <label>
+          Email
+          <input
+            type="email"
+            name="email"
+            id="email"
+            onChange={handleInputChange}
+            value={inputs.email}
+          />
+        </label>
+        <label>
+          Subject
+          <input
+            type="text"
+            name="subject"
+            id="subject"
+            onChange={handleInputChange}
+            value={inputs.subject}
+          />
+        </label>
+        <label>
+          Message
+          <textarea
+            name="message"
+            id="message"
+            rows={5}
+            onChange={handleInputChange}
+            value={inputs.message}
+          />
+        </label>
+        <RecaptchaForm
+          size={isTabletOrMobile ? "compact" : "mobile"}
+          onSubmit={handleRecaptcha}
         />
-      </label>
-      <button type="submit">Submit</button>
-    </form>
+        <button type="submit" disabled={!recaptchaComplete}>
+          Submit
+        </button>
+      </form>
+    </div>
   )
 }
 

src/components/recaptcha.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react"
+
+import ReCAPTCHA from "react-google-recaptcha"
+
+const recaptcha = (props: any) => {
+  const { size, onSubmit } = props
+  const recaptchaKey = process.env.GATSBY_RECAPTCHA_KEY || "no_key"
+
+  console.log(recaptchaKey)
+  const submitTrue = () => {
+    onSubmit(true)
+  }
+
+  const submitFalse = () => {
+    onSubmit(true)
+  }
+
+  return (
+    <div className="recaptcha">
+      <ReCAPTCHA
+        style={{ display: "block", margin: "auto", width: "35%" }}
+        size={size}
+        sitekey={recaptchaKey}
+        onChange={submitTrue}
+        onExpired={submitFalse}
+      />
+    </div>
+  )
+}
+
+export default recaptcha

src/styles/components/contactForm.scss

@@ -20,14 +20,29 @@
     padding: 12px 20px;
     color: $text-main;
     background-color: $background;
-    cursor: pointer;
 
-    &:hover, &:active{
-      background: $hover-01;
+    &:enabled{
+      cursor: pointer;
+
+      &:hover, &:active{
+        background: $hover-01;
+        opacity: 0.9;
+      }
     }
   }
+
+  :disabled{
+    opacity: 0.4;
+  }
 }
 
+.recaptcha {
+  // display: block;
+  // margin: auto;
+  text-align: center;
+}
+
+
 .contact-form {
   input[type="text"],
   input[type="email"] {
@@ -38,6 +53,7 @@
     margin: 8px 0;
   }
 
+
   input[type="reset"] {
     width: 100%;
     margin-top: 12px;