From 09ed5a39d866b6be59ed5487abe255e4317c8db9 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Sun, 6 Dec 2020 09:13:43 -0800
Subject: [PATCH] Fix recaptch

---
 packages/login/package.json                   |  2 +-
 .../login/src/components/RegistrationPage.tsx | 32 +++++--------------
 yarn.lock                                     | 23 +++++++++----
 3 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/packages/login/package.json b/packages/login/package.json
index b9217e5c..e1cbe609 100644
--- a/packages/login/package.json
+++ b/packages/login/package.json
@@ -43,8 +43,8 @@
         "axios": "^0.21.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
+        "react-google-recaptcha": "^2.1.0",
         "react-intl": "^5.10.6",
-        "react-recaptcha-v3": "^2.0.1",
         "react-router-dom": "^5.2.0"
     }
 }
diff --git a/packages/login/src/components/RegistrationPage.tsx b/packages/login/src/components/RegistrationPage.tsx
index 88fefc6f..254047da 100644
--- a/packages/login/src/components/RegistrationPage.tsx
+++ b/packages/login/src/components/RegistrationPage.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import axios from 'axios'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { ReCaptcha } from 'react-recaptcha-v3'
+import ReCAPTCHA from "react-google-recaptcha";
 import { useHistory } from "react-router-dom";
 
 
@@ -35,30 +35,16 @@ type RegistrationBody = {
   recaptcha: string;
 }
 const RegistrationForm = () => {
-  const [email, setEmail] = useState("");
-  const [lastName, setLastname] = useState("")
-  const [firstname, setFirstname] = useState("");
-  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState(undefined);
+  const [lastName, setLastname] = useState(undefined)
+  const [firstname, setFirstname] = useState(undefined);
+  const [password, setPassword] = useState(undefined);
   const [recaptchaToken, setRecaptchaToken] = useState(undefined);
-  const [recaptcha, setRecaptcha] = useState(undefined);
   const [errorMsg, setErrorMsg] = useState(undefined);
-  
-  
+
   const history = useHistory();
   const intl = useIntl();
 
-
-  const verifyCallback = (recaptchaToken:string) => {
-    // Here you will get the final recaptchaToken!!!  
-    console.log(recaptchaToken, "<= your recaptcha token");
-    setRecaptchaToken(recaptchaToken);
-  }
-
-  const updateToken = () => {
-    // you will get a new token in verifyCallback
-    recaptcha.execute();
-  }
-  
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
 
@@ -105,11 +91,9 @@ const RegistrationForm = () => {
           <input type="password" name="password" onChange={e => setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
 
           <div>
-            <ReCaptcha
-              ref={setRecaptcha}
+            <ReCAPTCHA
               sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
-              verifyCallback={setRecaptcha}
-              na/>
+              onChange={setRecaptchaToken} />
           </div>
           <p>
             <FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
diff --git a/yarn.lock b/yarn.lock
index b05a0d46..1459dfc0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7435,7 +7435,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7581,6 +7581,14 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-async-script@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
+  integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.0"
+
 react-dom@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
@@ -7590,6 +7598,14 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
+react-google-recaptcha@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz#9f6f4954ce49c1dedabc2c532347321d892d0a16"
+  integrity sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==
+  dependencies:
+    prop-types "^15.5.0"
+    react-async-script "^1.1.1"
+
 react-intl@^5.10.6:
   version "5.10.6"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.10.6.tgz#064dd69f3e96434f9145cac0b21c5a47f3ac6088"
@@ -7613,11 +7629,6 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-recaptcha-v3@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/react-recaptcha-v3/-/react-recaptcha-v3-2.0.1.tgz#b8dd391e9e36785f250d5e01aad235dd2fea2285"
-  integrity sha512-ZQ+auotgu+E/6YAbPqk53sf9xgcp8TFvVVfL4bVR7PXj98nQmdaONugdLJEA7g1iTZ4yQqC4mZbcVUGZmwb25Q==
-
 react-router-dom@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"