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 = () => {
setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
-
+ onChange={setRecaptchaToken} />
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"