contact-us turnstile

.env

@@ -1 +1,2 @@
-NEXT_PUBLIC_ZOHO_PASS=bw8gDdMm5P7i
+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,75 +76,83 @@ export default function ContactUs() {
   }
 
   return (
-    <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
+    <div>
-      <MoveUpWhenVisible>
+      <Script
-        <h2 className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
+        src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback"
-          Contact Us
+        defer={true}
-        </h2>
+        async={true}
-      </MoveUpWhenVisible>
+      ></Script>
-      <MoveUpWhenVisible>
+      <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
-        <p className="mb-8 text-center font-light text-slate-200 dark:text-gray-400 sm:text-xl lg:mb-16">
+        <MoveUpWhenVisible>
-          Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let
+          <h2 className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
-          us know.
+            Contact Us
-        </p>
+          </h2>
-      </MoveUpWhenVisible>
+        </MoveUpWhenVisible>
-      <MoveUpWhenVisible>
+        <MoveUpWhenVisible>
-        <form action="#" className="space-y-8" onSubmit={handleSubmit}>
+          <p className="mb-8 text-center font-light text-slate-200 dark:text-gray-400 sm:text-xl lg:mb-16">
-          <div>
+            Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let
-            <label htmlFor="email" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
+            us know.
-              Your email
+          </p>
-            </label>
+        </MoveUpWhenVisible>
-            <input
+        <MoveUpWhenVisible>
-              type="email"
+          <form action="#" className="space-y-8" onSubmit={handleSubmit}>
-              name="email"
+            <div>
-              onChange={handleInputChange}
+              <label htmlFor="email" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                Your email
-              placeholder="name@gmail.com"
+              </label>
-              required
+              <input
+                type="email"
+                name="email"
+                onChange={handleInputChange}
+                className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="name@gmail.com"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="subject" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
+                Subject
+              </label>
+              <input
+                type="text"
+                onChange={handleInputChange}
+                name="subject"
+                className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300  bg-homeBg2 p-3 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="Let us know how we can help you"
+                required
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <label htmlFor="message" className="mb-2 block text-sm font-medium text-white dark:text-gray-400">
+                Your message
+              </label>
+              <textarea
+                onChange={handleInputChange}
+                name="message"
+                rows={6}
+                className="block w-full rounded-lg border border-gray-300  bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                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={{
+                classNames: {
+                  toast: "bg-vizoleG2",
+                  title: "text-white",
+                },
+              }}
             />
-          </div>
+            <button
-          <div>
+              type="submit"
-            <label htmlFor="subject" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
+              className="rounded-lg bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-              Subject
+            >
-            </label>
+              Send message
-            <input
+            </button>
-              type="text"
+          </form>
-              onChange={handleInputChange}
+        </MoveUpWhenVisible>
-              name="subject"
+      </div>
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300  bg-homeBg2 p-3 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
-              placeholder="Let us know how we can help you"
-              required
-            />
-          </div>
-          <div className="sm:col-span-2">
-            <label htmlFor="message" className="mb-2 block text-sm font-medium text-white dark:text-gray-400">
-              Your message
-            </label>
-            <textarea
-              onChange={handleInputChange}
-              name="message"
-              rows={6}
-              className="block w-full rounded-lg border border-gray-300  bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
-              placeholder="Leave a comment..."
-            ></textarea>
-          </div>
-          <Toaster
-            position="top-right"
-            toastOptions={{
-              classNames: {
-                toast: "bg-vizoleG2",
-                title: "text-white",
-              },
-            }}
-          />
-          <button
-            type="submit"
-            className="rounded-lg bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-          >
-            Send message
-          </button>
-        </form>
-      </MoveUpWhenVisible>
     </div>
   )
 }