add third party captchat script

.env.example

@@ -0,0 +1,9 @@
+PORT=3002
+NUXT_TURNSTILE_SECRET_KEY=0x4AAAAAAAROoyBHEpm8Uzylk7t9h-wr9lE
+NUXT_PUBLIC_TURNSTILE_SITE_KEY=0x4AAAAAAAROo5cmxdrQFrIb
+
+
+MAILER_HOST="smtp.conop-systems.com"
+MAILER_PORT=587
+MAILER_TO_ADDRESS="info@conop-systems.com"
+

components/ContactForm.vue

@@ -40,43 +40,61 @@ const [message, messageAttrs] = defineField('message');
 const mail = useMail()
 // const { $mail } = useNuxtApp()
 
-const toggle = ref(false)
-const token = ref("")
+// const toggle = ref(false)
+// const token = ref("")
 
-const turnstile = ref()
+// const turnstile = ref()
 
-function reset() {
-    turnstile.value?.reset()
-}
+// function reset() {
+//     turnstile.value?.reset()
+// }
+const config = useRuntimeConfig()
+const recaptchaSiteKey = config.public.recaptchaSiteKey
 
 const sendingEmail = ref(false)
 
 
 const onSubmit = handleSubmit(async (values) => {
-    toggle.value = true
+    // toggle.value = true
     sendingEmail.value = true
-    watch(token, () => {
-        if (token.value !== "") {
-            try {
-                mail.send({
-                    from: values.email,
-                    subject: 'Contact from conop-systems.com',
-                    text: 'Name: ' + values.name + '\nMessage: ' + values.message + '\nTelephone: ' + values.phone,
-                });
 
-            } catch (error) {
-                alert("Sommething went wrong, please try again!")
-            }
-            setTimeout(() => {
-                sendingEmail.value = false
-            }, 2000);
-            toggle.value = false
-        } else {
-            alert("Please complete the captcha!")
-            toggle.value = false
-            sendingEmail.value = false
-        }
-    })
+    // const captchaResponse = grecaptcha.getResponse();
+
+    // try {
+    //     mail.send({
+    //         from: values.email,
+    //         subject: 'Contact from conop-systems.com',
+    //         text: 'Name: ' + values.name + '\nMessage: ' + values.message + '\nTelephone: ' + values.phone,
+    //     });
+
+    // } catch (error) {
+    //     alert("Sommething went wrong, please try again!")
+    // }
+    // setTimeout(() => {
+    //     sendingEmail.value = false
+    // }, 2000);
+    // watch(token, () => {
+    //     if (token.value !== "") {
+    //         try {
+    //             mail.send({
+    //                 from: values.email,
+    //                 subject: 'Contact from conop-systems.com',
+    //                 text: 'Name: ' + values.name + '\nMessage: ' + values.message + '\nTelephone: ' + values.phone,
+    //             });
+
+    //         } catch (error) {
+    //             alert("Sommething went wrong, please try again!")
+    //         }
+    //         setTimeout(() => {
+    //             sendingEmail.value = false
+    //         }, 2000);
+    //         toggle.value = false
+    //     } else {
+    //         alert("Please complete the captcha!")
+    //         toggle.value = false
+    //         sendingEmail.value = false
+    //     }
+    // })
 
 
 
@@ -120,8 +138,8 @@ const onSubmit = handleSubmit(async (values) => {
                 {{ errors.message }}
             </p>
         </div>
-        <NuxtTurnstile v-if="toggle" ref="turnstile" v-model="token" :key="locale" :options="{ action: 'native' }" />
-
+        <!-- <NuxtTurnstile v-if="toggle" ref="turnstile" v-model="token" :key="locale" :options="{ action: 'native' }" /> -->
+        <div class="g-recaptcha" :data-sitekey="recaptchaSiteKey"></div>
         <button type="submit"
             class="btn__contact bg-c-blue text-c-darkblue px-7 py-2 uppercase text-xl rounded-full mt-3 flex justify-center">
             <span v-if="!sendingEmail">

nuxt.config.ts

@@ -1,4 +1,3 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ["~/assets/css/main.scss"],
@@ -18,10 +17,18 @@ export default defineNuxtConfig({
         host: "smtp.conop-systems.com"
       },
     }],
-    '@nuxtjs/turnstile'
   ],
   app: {
     pageTransition: { name: 'page', mode: 'out-in' },
+    head: {
+      script: [
+        {
+          src: "https://www.google.com/recaptcha/api.js",
+          async: true,
+          defer: true
+        }
+      ]
+    }
   },
   postcss: {
     plugins: {
@@ -61,10 +68,16 @@ export default defineNuxtConfig({
       barBackground: "#00304A",
       barButtonBackground: "#0AA5D3",
     },
-    cookiesOptions: {
+    cookieOptions: {
       sameSite: 'none',
       secure: true
     }
-  }
+  },
+  runtimeConfig: {
+    recaptchaSecretKey: '', // can be overridden by NUXT_API_SECRET environment variable
+    public: {
+      recaptchaSiteKey: '6LdqNG4pAAAAAHAMtgsTv7cx8TZXwwxOXzeXppB8', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
+    }
+  },
 
 });

server/middleware/cookies.ts

@@ -1,14 +0,0 @@
-export default defineEventHandler(event => {
-    const _ga_SQCRB0TXZW = getCookie(event, '_ga_SQCRB0TXZW') || ''
-    const _ga_PHVG60J2FD = getCookie(event, '_ga_PHVG60J2FD') || ''
-
-    setCookie(event, '_ga_SQCRB0TXZW', _ga_SQCRB0TXZW, {
-        sameSite: 'none',
-        secure:true
-    })
-    setCookie(event, '_ga_PHVG60J2FD', _ga_PHVG60J2FD, {
-        sameSite: 'none',
-        secure:true
-    })
-
-})