Fix recaptch

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"
     }
 }

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 [email, setEmail] = useState(undefined);
-  const [lastName, setLastname] = useState("")
+  const [lastName, setLastname] = useState(undefined)
-  const [firstname, setFirstname] = useState("");
+  const [firstname, setFirstname] = useState(undefined);
-  const [password, setPassword] = useState("");
+  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
+            <ReCAPTCHA
-              ref={setRecaptcha}
               sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
-              verifyCallback={setRecaptcha}
+              onChange={setRecaptchaToken} />
-              na/>
           </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" />

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"