contact-us turnstile

.env

@@ -1 +1,2 @@
 NEXT_PUBLIC_ZOHO_PASS=bw8gDdMm5P7i
+NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAYF95fpqit1gynJ

app/api/routes/route.ts

@@ -20,12 +20,13 @@ export async function POST(req: any) {
   const plainTextContent = stripHTMLTags(htmlContent)
 
   try {
-    await transporter.sendMail({
+    console.log(req.headers)
-      ...mailOptions,
+    // await transporter.sendMail({
-      subject: `Contact Inquiry - VizoleLabs Web`,
+    //   ...mailOptions,
-      text: plainTextContent,
+    //   subject: `Contact Inquiry - VizoleLabs Web`,
-      html: htmlContent,
+    //   text: plainTextContent,
-    })
+    //   html: htmlContent,
+    // })
     return NextResponse.json({ success: true })
   } catch (error: any) {
     console.error(error)

components/ContactUs/ContactUs.tsx

@@ -4,6 +4,8 @@ import { Button } from "components/Button/Button"
 import { useState } from "react"
 import MoveUpWhenVisible from "utils/ScrollAnimations/MoveUpOnScroll"
 import { toast, Toaster } from "sonner"
+import Script from "next/script"
+import { copyFile } from "fs"
 
 interface ResponseData {
   success: boolean
@@ -15,6 +17,7 @@ export default function ContactUs() {
     email: "",
     subject: "",
     message: "",
+    token: "",
   })
 
   const [submiting, setSubmiting] = useState(false)
@@ -31,15 +34,25 @@ export default function ContactUs() {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setSubmiting(true)
-
+    const submitdata = new FormData(e.currentTarget)
+    const token = submitdata.get("cf-turnstile-response")
+    if (!token) {
+      toast.error("Please complete the captcha")
+      setSubmiting(false)
+      return
+    }
+    setFormData({
+      ...formData,
+      token: token as string,
+    })
     function clearForm() {
       setFormData({
         email: "",
         subject: "",
         message: "",
+        token: "",
       })
     }
-
     const response = await fetch("/api/routes", {
       method: "POST",
       headers: {
@@ -63,6 +76,12 @@ export default function ContactUs() {
   }
 
   return (
+    <div>
+      <Script
+        src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback"
+        defer={true}
+        async={true}
+      ></Script>
       <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
         <MoveUpWhenVisible>
           <h2 className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
@@ -115,6 +134,7 @@ export default function ContactUs() {
                 placeholder="Leave a comment..."
               ></textarea>
             </div>
+            <div className="cf-turnstile" data-sitekey={process.env.NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY}></div>
             <Toaster
               position="top-right"
               toastOptions={{
@@ -133,5 +153,6 @@ export default function ContactUs() {
           </form>
         </MoveUpWhenVisible>
       </div>
+    </div>
   )
 }