From 369f46defe8cd92388bd17a2c66a1164e7911db7 Mon Sep 17 00:00:00 2001
From: oriofir <97814056+oriofir@users.noreply.github.com>
Date: Mon, 29 Aug 2022 15:04:48 -0700
Subject: [PATCH] adjusted css to object-fit cover

---
 package-lock.json                             | 19 +++++++++++++++++++
 package.json                                  |  1 +
 .../sections/contact/form/index.tsx           | 11 ++++++++++-
 src/lib/renderer/blog.module.scss             |  1 +
 yarn.lock                                     |  7 +++++++
 5 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 8538382..01e20f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
         "@types/node": "^17.0.25",
         "@types/react": "^17.0.43",
         "@types/react-dom": "^17.0.14",
+        "@types/react-google-recaptcha": "^2.1.5",
         "@types/tiny-json-http": "^7.3.1",
         "@typescript-eslint/eslint-plugin": "^5.20.0",
         "@typescript-eslint/parser": "^5.20.0",
@@ -2654,6 +2655,15 @@
         "@types/react": "^17"
       }
     },
+    "node_modules/@types/react-google-recaptcha": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.5.tgz",
+      "integrity": "sha512-iWTjmVttlNgp0teyh7eBXqNOQzVq2RWNiFROWjraOptRnb1OcHJehQnji0sjqIRAk9K0z8stjyhU+OLpPb0N6w==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
@@ -13592,6 +13602,15 @@
         "@types/react": "^17"
       }
     },
+    "@types/react-google-recaptcha": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.5.tgz",
+      "integrity": "sha512-iWTjmVttlNgp0teyh7eBXqNOQzVq2RWNiFROWjraOptRnb1OcHJehQnji0sjqIRAk9K0z8stjyhU+OLpPb0N6w==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
diff --git a/package.json b/package.json
index 1d45017..46dc65a 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "@types/node": "^17.0.25",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
+    "@types/react-google-recaptcha": "^2.1.5",
     "@types/tiny-json-http": "^7.3.1",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
diff --git a/src/components/sections/contact/form/index.tsx b/src/components/sections/contact/form/index.tsx
index 9783e5e..abbe48a 100644
--- a/src/components/sections/contact/form/index.tsx
+++ b/src/components/sections/contact/form/index.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import { ReCAPTCHA } from 'react-google-recaptcha'
 import Select from 'react-select'
 
 import { Container } from '~/components/layout/container'
@@ -39,6 +40,7 @@ const CustomForm = ({ data }: FormProps) => {
   const [errorMsg, setErrorMsg] = useState('')
   const [isFormSent, setIsFormSent] = useState(false)
   const [isSending, setIsSending] = useState(false)
+  const reRef = useRef<ReCAPTCHA>()
 
   const handleSubmit = async (e: any) => {
     e.preventDefault()
@@ -59,6 +61,8 @@ const CustomForm = ({ data }: FormProps) => {
         inquiry: selectedOption.value
       }
 
+      const token = await reRef.current.executeAsync()
+
       await fetch(`${process.env.NEXT_PUBLIC_API}/api/contact`, {
         method: 'POST',
         mode: 'no-cors',
@@ -123,6 +127,11 @@ const CustomForm = ({ data }: FormProps) => {
             onChange={(e) => setText(e.target.value)}
           ></textarea>
         </label>
+        <ReCAPTCHA
+          siteKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
+          size="invisible"
+          ref={reRef}
+        />
         <Button size="medium" variant="primary">
           {data?.formLabelButton}
         </Button>
diff --git a/src/lib/renderer/blog.module.scss b/src/lib/renderer/blog.module.scss
index 6ad9f28..e3d4ba9 100644
--- a/src/lib/renderer/blog.module.scss
+++ b/src/lib/renderer/blog.module.scss
@@ -145,6 +145,7 @@
 
   > img {
     object-fit: cover;
+    height: 100%;
     width: 100%;
   }
 }
diff --git a/yarn.lock b/yarn.lock
index bedb747..817793d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1362,6 +1362,13 @@
   dependencies:
     "@types/react" "^17"
 
+"@types/react-google-recaptcha@^2.1.5":
+  "integrity" "sha512-iWTjmVttlNgp0teyh7eBXqNOQzVq2RWNiFROWjraOptRnb1OcHJehQnji0sjqIRAk9K0z8stjyhU+OLpPb0N6w=="
+  "resolved" "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.5.tgz"
+  "version" "2.1.5"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.4.0":
   "integrity" "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug=="
   "resolved" "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz"