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

[SM-254] add captcha functionality for feedback form

Author: MarinaFedy

src/components/Captcha/WAFScriptLoad.js

@@ -0,0 +1,29 @@
+export const WAF_SCRIPT_ID = "AwsWAFScript";
+
+export function checkWAFEnv() {
+  const errors = [];
+  if (!process.env.REACT_APP_CAPTCHA_TOKEN) {
+    errors.push("REACT_APP_CAPTCHA_TOKEN is not set");
+  }
+  if (!process.env.REACT_APP_JSAPI_URL) {
+    errors.push("REACT_APP_JSAPI_URL is not set");
+  }
+  return { isValid: errors.length === 0, errors };
+}
+
+export function getWAFEnv() {
+  return {
+    JSAPI_URL: process.env.REACT_APP_JSAPI_URL,
+    CAPTCHA_TOKEN: process.env.REACT_APP_CAPTCHA_TOKEN,
+  };
+}
+
+export function loadCaptchaScript() {
+  const JSAPI_URL = getWAFEnv().JSAPI_URL;
+  if (document.getElementById(WAF_SCRIPT_ID) || !JSAPI_URL) return;
+  const AwsWafScript = document.createElement("script");
+  AwsWafScript.id = WAF_SCRIPT_ID;
+  AwsWafScript.async = false;
+  AwsWafScript.src = JSAPI_URL;
+  document.head.appendChild(AwsWafScript);
+}

src/components/Captcha/captchaFetchHandler.js

@@ -0,0 +1,34 @@
+import { checkWAFEnv, getWAFEnv } from "./WAFScriptLoad";
+
+export const captchaFetch = (path, init) => {
+  const { isValid, errors } = checkWAFEnv();
+  if (!isValid) {
+    throw Error(errors[0]);
+  }
+
+  const modalOverlay = document.getElementById("modalOverlay");
+  const modal = document.getElementById("modal");
+  const captchaForm = document.getElementById("captchaForm");
+  const API_KEY = getWAFEnv().CAPTCHA_TOKEN;
+
+  if (!modalOverlay || !modal || !captchaForm || !API_KEY) {
+    throw Error("Can't find modal components");
+  }
+
+  modalOverlay.style.display = "block";
+  modal.style.display = "block";
+
+  return new Promise((resolve) => {
+    window.AwsWafCaptcha.renderCaptcha(captchaForm, {
+      onSuccess: () => {
+        modalOverlay.style.display = "none";
+        modal.style.display = "none";
+        resolve(window.AwsWafIntegration.fetch(path, init));
+      },
+      onLoad: () => {
+        document.body.style.cursor = "default";
+      },
+      apiKey: API_KEY,
+    });
+  });
+};

src/components/Captcha/modal/CaptchaModal.css

@@ -0,0 +1,24 @@
+.captcha-modal.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(128,128,128,0.5);
+  display: none;
+  z-index: 1000;
+}
+
+.captcha-modal .modal {
+  position: fixed; 
+  top: 50vh;
+  left: 50vw;
+  transform: translate(-50%,-50%);
+  background-color: white; 
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.captcha-modal .captchaForm {
+  position: relative;
+}

src/components/Captcha/modal/CaptchaModal.jsx

@@ -0,0 +1,13 @@
+import './CaptchaModal.css';
+
+const CaptchaModal = () => {
+    return (
+        <div className='captcha-modal overlay' id="modalOverlay">
+            <div className='modal' id="modal">
+                <div id="captchaForm" className='captchaForm'/>
+            </div>
+        </div>
+    )
+}
+
+export default CaptchaModal;

src/components/FeedbackFormModal/index.js

@@ -1,14 +1,25 @@
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, 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 />
       <FeedbackFormModal
         sendFeedbackAPI={sendFeedbackSnetAPI}
         isModalVisible={isModalVisible}

src/components/ServiceDetails/AboutService/ServiceDemo/Purchase/ExpiredSession/GeneralAccountWallet/PaymentPopup/Purchase/PurchaseAlert.js

@@ -1,15 +1,24 @@
-import React, { useState } from "react";
+import React, { useEffect, 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/config/SupportAPI.js

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