feat(captcha): trying to implement captcha functionality for information bar

-

package-lock.json

@@ -12,6 +12,7 @@
         "gatsby-plugin-sass": "^5.7.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
+        "react-google-recaptcha": "^3.1.0",
         "sass": "^1.49.7"
       }
     },
@@ -9134,6 +9135,15 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -12289,6 +12299,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -12484,6 +12507,19 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -22182,6 +22218,14 @@
         }
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -24604,6 +24648,15 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -24741,6 +24794,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "requires": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "gatsby-plugin-sass": "^5.7.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-google-recaptcha": "^3.1.0",
     "sass": "^1.49.7"
   }
 }

src/pages/index.js

@@ -2,6 +2,7 @@ import * as React from "react"
 import "../styles/general.scss"
 import { content_pl } from "../content/kamil"
 import { content_en } from "../content/kamil"
+import ReCAPTCHA from "react-google-recaptcha"
 
 
 const MiniWorkImage = ({ image }) => {
@@ -265,10 +266,14 @@ const SegmentMergeBranch = ({ segment, tabs }) => {
 
 
 const SegmentGeneral = ({ segment }) => {
+  const [isVerified, setIsVerified] = React.useState(false);
+
+  const handleCaptchaChange = (value) => {
+    setIsVerified(!!value);
+  };
+
   return (
-    <div
+    <div className="segment_general">
-      className="segment_general"
-      >
       <img
         src={ segment.image }
         className="segment_image cover"
@@ -276,24 +281,24 @@ const SegmentGeneral = ({ segment }) => {
       <div className="segment_title segment_title_image">
         { segment.title }
       </div>
+      {!isVerified ? (
+        <div className="captcha-container">
+          <ReCAPTCHA
+            sitekey="YOUR_RECAPTCHA_SITE_KEY"
+            onChange={handleCaptchaChange}
+          />
+        </div>
+      ) : (
         <div className="segment_content_image">
           {
             typeof segment.content === "object" ?
               Object.keys(segment.content).map( (key) => {
                   return (
-                  <>
+                    <React.Fragment key={ "item_" + key }>
-                    <div
+                      <div className="segment_image_item">
-                      className="segment_image_item"
-                      key={ "item_" + key }
-                    >
-
                         { key + ": " }
-
                       </div>
-                    <div
+                      <div className="segment_image_item subitem">
-                      className="segment_image_item subitem"
-                    >
-
                         {
                           segment.content[key].includes("git.") ?
                             <a href={ "https://" + segment.content[key] }>
@@ -302,9 +307,8 @@ const SegmentGeneral = ({ segment }) => {
                           :
                             segment.content[key]
                         }
-
                       </div>
-                  </>
+                    </React.Fragment>
                   )
                 }
               )
@@ -312,6 +316,7 @@ const SegmentGeneral = ({ segment }) => {
               "lol"
           }
         </div>
+      )}
     </div>
   )
 }

src/styles/general.scss

@@ -207,3 +207,9 @@ body {
     width: 100%;
     height: 30px;
 }
+
+.captcha-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}