Merge pull request #396 from singnet/development

Development

Author: MarinaFedy

.vitepress/theme/captchaFetch.ts

@@ -0,0 +1,56 @@
+import { Plugin } from "vue";
+import { createCaptchaFetchHandler } from "waf-captcha-frontend";
+
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $captcha: {
+            fetch: ReturnType<typeof createCaptchaFetchHandler> | null;
+            isReady: boolean;
+        };
+    }
+}
+
+let captchaInstance: ((path: RequestInfo | URL, init: RequestInit) => Promise<Response>) | null = null;
+
+const initCaptcha = () => {
+    if (typeof window === "undefined") {
+        captchaInstance = fetch;
+        return
+    }
+    if (captchaInstance) return captchaInstance;
+
+    const { VITE_JSAPI_URL, VITE_CAPTCHA_TOKEN } = import.meta.env;
+
+    if (!VITE_CAPTCHA_TOKEN || !VITE_JSAPI_URL) {
+        console.warn('Captcha configuration missing');
+        return fetch;
+    }
+
+    captchaInstance = createCaptchaFetchHandler({
+        API_KEY: VITE_CAPTCHA_TOKEN,
+        JSAPI_URL: VITE_JSAPI_URL,
+        captchaContainerId: "captcha-modal-container"
+    });
+
+    return captchaInstance;
+};
+
+const captchaFetch = initCaptcha();
+
+const captchaPlugin: Plugin = {
+    install(app: any) {
+        app.config.globalProperties.$captchaFetch = captchaFetch;
+        app.config.globalProperties.$captcha = {
+            fetch: captchaFetch,
+            isReady: !!captchaFetch
+        };
+
+        app.provide('captchaFetch', captchaFetch);
+        app.provide('captcha', {
+            fetch: captchaFetch,
+            isReady: !!captchaFetch
+        });
+    }
+};
+
+export { captchaPlugin };

.vitepress/theme/index.ts

@@ -1,4 +1,5 @@
 import DefaultTheme from "vitepress/theme";
+import { captchaPlugin } from "./captchaFetch";
 import Home from "../../components/Home/Home.vue";
 import Video from "../../components/Common/Video.vue";
 import Footer from "../../components/Footer/Footer.vue";
@@ -33,5 +34,6 @@ export default {
         app.component("ImageViewer", ImageViewer);
         app.component("AccordionItem", AccordionItem);
         app.config.globalProperties.$daemonVersion = DAEMON_VERSION;
+        app.use(captchaPlugin);
     },
 } satisfies Theme;

components/Common/FeedBackForm.vue

@@ -1,4 +1,5 @@
 <template>
+    <div id="captcha-modal-container"></div>
     <div class="feedback-form-holder">
         <div class="feedback-form" :class="{ 'gradient-border': !isMobile, 'hidden': !isFormDisplayed }">
             <div class="form-header">
@@ -45,8 +46,13 @@
                 </div>
             </form>
         </div>
-        <div class="ready-alert" :class="{ 'hidden': !isRequestSent }">Thank you!
-            Our technical support will get in touch with you soon!</div>
+        <div class="ready-alert" :class="{ 'hidden': !isRequestSent }">
+            Thank you!
+            Our technical support will get in touch with you soon!
+        </div>
+        <div class="error-alert" :class="{ 'hidden': !isRequestErrored }">
+            Something went wrong! Please, try again later
+        </div>
         <div class="feedback-form-launcher" :class="{ 'hidden': isFormDisplayed }">
             <button @click="toggleFormVisibility">
                 <img src="/assets/images/common/feedback.webp" alt="feedback" />
@@ -75,8 +81,10 @@ const EMAIL_VALIDATION_REGEX: RegExp = new RegExp(
 export default {
     data() {
         return {
+            isCaptchaReady: false,
             isRequestHandling: false as boolean,
             isRequestSent: false as boolean,
+            isRequestErrored: false as boolean,
             isFormDisplayed: false as boolean,
             name: '' as string,
             email: '' as string,
@@ -125,9 +133,14 @@ export default {
         },
         async showAlert(): Promise<void> {
             this.isRequestSent = true;
-            await new Promise(r => setTimeout(r, 2000));
+            await new Promise(r => setTimeout(r, 5000));
             this.isRequestSent = false;
         },
+        async showError(): Promise<void> {
+            this.isRequestErrored = true;
+            await new Promise(r => setTimeout(r, 5000));
+            this.isRequestErrored = false;
+        },
         async sendFeedback(): Promise<void> {
             try {
                 const options: RequestInit = {
@@ -149,15 +162,16 @@ export default {
                         attachment_details: {},
                     })
                 };
-                if (!this.isRequestHandling) {
+                if (!this.isRequestHandling && this.$captcha.isReady) {
                     this.isRequestHandling = true;
-                    await fetch(endpoints.FEEDBACK, options);
+                    await this.$captcha?.fetch?.(endpoints.FEEDBACK, options);
                 }
                 this.isFormDisplayed = false;
                 await this.showAlert();
             } catch (error) {
                 this.isFormDisplayed = false;
                 console.log("error on feedback request: ", error);
+                this.showError();
             } finally {
                 this.resetForm();
                 this.isRequestHandling = false;
@@ -202,6 +216,7 @@ export default {
     background: var(--feedback-form-background);
 }
 
+.error-alert.hidden,
 .ready-alert.hidden,
 .feedback-form.hidden,
 .feedback-form-launcher.hidden {
@@ -335,16 +350,26 @@ form {
     transform: scale(1.1);
 }
 
+.error-alert,
 .ready-alert {
     width: 200px;
     position: absolute;
     right: 100px;
     bottom: 30px;
     padding: 10px;
     border-radius: 8px;
+    backdrop-filter: blur(5px);
+    transition: var(--feedback-form-transition) all;
+}
+
+.error-alert {
+    color: var(--vp-c-caution-3);
+    background-color: var(--vp-c-danger-soft);
+}
+
+.ready-alert {
     color: var(--vp-c-green-1);
     background-color: var(--vp-c-green-soft);
-    transition: var(--feedback-form-transition) all;
 }
 
 @media (max-width: 450px) {

package.json

@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "markdown-it-container": "^4.0.0",
-    "swiper": "^11.1.12"
+    "swiper": "^11.1.12",
+    "waf-captcha-frontend": "^0.0.7"
   },
   "devDependencies": {
     "@types/node": "^24.10.1",

utils/constants/endpoints.ts

@@ -1,13 +1,16 @@
 
+/// <reference types="vite/client" />
+
 interface ImportMetaEnv {
     readonly VITE_FEEDBACK_FORM_URL: string;
+    readonly VITE_JSAPI_URL: string;
+    readonly VITE_CAPTCHA_TOKEN: string;
 }
 
 interface ImportMeta {
     readonly env: ImportMetaEnv;
 }
 
-// @ts-ignore
 const { VITE_FEEDBACK_FORM_URL } = import.meta.env;
 
 interface APIEndpoints {