recaptcha

src/Pages/Authentication/index.js

@@ -342,6 +342,7 @@ function SignUp({ notificationApi }) {
   const navigate = useNavigate();
 
   const [isRequesting, setIsRequesting] = useState(false);
+  const recaptchaValueRef = useRef(null);
 
   const [form] = Form.useForm();
 
@@ -360,19 +361,18 @@ function SignUp({ notificationApi }) {
       .then((values) => {
         setIsRequesting(true);
 
-        let body = {
-          companyName: values.companyName,
-          accountName: values.accountName.toLocaleLowerCase(),
-          password: EncodeStringToBase64(values.password),
-          username: values.username,
-          language: i18n.language,
-          rememberMe: values.rememberMe,
-        };
-
         myFetch({
           url: `/user/auth/signup`,
           method: "POST",
-          body: body,
+          body: {
+            companyName: values.companyName,
+            accountName: values.accountName.toLocaleLowerCase(),
+            password: EncodeStringToBase64(values.password),
+            username: values.username,
+            language: i18n.language,
+            rememberMe: values.rememberMe,
+            recaptcha: recaptchaValueRef.current,
+          },
           notificationApi: notificationApi,
           t: t,
         })
@@ -415,11 +415,20 @@ function SignUp({ notificationApi }) {
 
       <RememberMeCheckbox />
 
-      <ReCAPTCHA
-        style={{ paddingBottom: 16 }}
-        sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
-        onChange={(value) => console.log("Captcha value:", value)}
-      />
+      <Form.Item
+        name="recaptcha"
+        rules={[
+          {
+            required: true,
+            message: t("common.inputRules.recaptchaRequired"),
+          },
+        ]}
+      >
+        <ReCAPTCHA
+          sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
+          onChange={(value) => (recaptchaValueRef.current = value)}
+        />
+      </Form.Item>
 
       <Button
         type="primary"