Merge pull request #1062 from singnet/SM-254_implement-captcha

Sm 254 implement captcha

Author: MarinaFedy

package.json

@@ -51,6 +51,7 @@
     "snet-sdk-web": "5.0.4",
     "utf8": "^3.0.0",
     "validate.js": "^0.13.1",
+    "waf-captcha-frontend": "0.0.7",
     "web3": "^4.11.1"
   },
   "resolutions": {
@@ -126,4 +127,4 @@
     "ts-protoc-gen": "^0.15.0",
     "url": "^0.11.4"
   }
-}
+}

src/components/Captcha/WAFScriptLoad.js

@@ -38,10 +38,10 @@ const FeedbackForm = ({ closeForm, sendFeedbackAPI }) => {
     } catch (error) {
       setAlert({ type: alertTypes.ERROR, message: error?.message });
     } finally {
+      dispatch(loaderActions.stopAppLoader());
       await new Promise((resolve) => setTimeout(resolve, 3000));
       resetForm();
       setIsRequestHandling(false);
-      dispatch(loaderActions.stopAppLoader());
       closeForm();
     }
   };

src/components/Captcha/captchaFetchHandler.js

@@ -1,25 +1,15 @@
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useState } from "react";
 import OpenFormButton from "./OpenFormButton";
 import "./styles.css";
 import FeedbackFormModal from "./FeedbackFormModal";
 import { sendFeedbackSnetAPI } from "../../config/SupportAPI";
-import CaptchaModal from "../Captcha/modal/CaptchaModal";
-import { loadCaptchaScript } from "../Captcha/WAFScriptLoad";
 
 const FeedbackForm = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
 
-  useEffect(() => {
-    try {
-      loadCaptchaScript();
-    } catch (err) {
-      console.error("CAPTCHA script error: ", err);
-    }
-  }, []);
-
   return (
     <Fragment>
-      <CaptchaModal />
+      <div id="captchaContainer" />
       <FeedbackFormModal
         sendFeedbackAPI={sendFeedbackSnetAPI}
         isModalVisible={isModalVisible}

src/components/Captcha/modal/CaptchaModal.css

@@ -1,24 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { withStyles } from "@mui/styles";
 
 import AlertBox from "../../../../../../../../common/AlertBox";
 import StyledButton from "../../../../../../../../common/StyledButton";
 import { useStyles } from "./styles";
 import { sendFeedbackSnetAPI } from "../../../../../../../../../config/SupportAPI";
 import FeedbackFormModal from "../../../../../../../../FeedbackFormModal/FeedbackFormModal";
-import { loadCaptchaScript } from "../../../../../../../../Captcha/WAFScriptLoad";
 
 const PurchaseAlert = ({ classes, alert, handleCancel }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
 
-  useEffect(() => {
-    try {
-      loadCaptchaScript();
-    } catch (err) {
-      console.error("CAPTCHA script error: ", err);
-    }
-  }, []);
-
   return (
     <div className={classes.purchaseErrorContainer}>
       <AlertBox type={alert.type} message={alert.message} />

src/components/Captcha/modal/CaptchaModal.jsx

@@ -1,9 +1,11 @@
 import axios from "axios";
-import { captchaFetch } from "../components/Captcha/captchaFetchHandler";
+import { getCaptchaFetch } from "../utility/captchaFetch";
 
 const source = "MARKETPLACE";
 
-export const sendFeedbackSnetAPI = ({ name, email, category, feedback, attachmentUrls }) => {
+const captchaFetch = getCaptchaFetch();
+
+export const sendFeedbackSnetAPI = async ({ name, email, category, feedback, attachmentUrls }) => {
   const options = {
     method: "POST",
     headers: {
@@ -27,7 +29,7 @@ export const sendFeedbackSnetAPI = ({ name, email, category, feedback, attachmen
   if (!feedbackUrl) {
     throw new Error("Cannot start the application! process.env.REACT_APP_FEEDBACK_ENDPOINT is undefined");
   }
-  captchaFetch(feedbackUrl + "/user/message", options);
+  await captchaFetch(feedbackUrl + "/user/message", options);
 };
 
 const ENTER_CODE = "%0D%0A";

src/components/FeedbackFormModal/FeedbackForm.js

@@ -0,0 +1,20 @@
+import { createCaptchaFetchHandler } from "waf-captcha-frontend";
+
+export const getCaptchaFetch = () => {
+  const keys = {
+    JSAPI_URL: process.env.REACT_APP_JSAPI_URL,
+    CAPTCHA_TOKEN: process.env.REACT_APP_CAPTCHA_TOKEN,
+  };
+
+  if (!keys.CAPTCHA_TOKEN || !keys.JSAPI_URL) {
+    throw new Error("Tokens undefined");
+  }
+
+  const captchaFetch = createCaptchaFetchHandler({
+    API_KEY: keys.CAPTCHA_TOKEN,
+    JSAPI_URL: keys.JSAPI_URL,
+    captchaContainerId: "captchaContainer",
+  });
+
+  return captchaFetch;
+};