feat: implement contact form.

Author: zicklag

server-side/contact.ts

@@ -0,0 +1,64 @@
+import { AutoRouter, cors, error } from "npm:itty-router";
+
+const { preflight, corsify } = cors();
+const router = AutoRouter({
+  before: [preflight],
+  finally: [corsify],
+});
+
+const contactWebhook = Deno.env.get("CONTACT_WEBHOOK");
+if (!contactWebhook) throw "Missing CONTACT_WEBHOOK env var";
+const turnstileSecret = Deno.env.get("TURNSTILE_SECRET");
+if (!turnstileSecret) throw "Missing TURNSTILE_SECRET env var";
+
+router.post("/contact", async ({ formData }) => {
+  const data = await formData();
+  const cloudflareToken = data.get("cf-turnstile-response");
+  if (!cloudflareToken) return error(400, "Cloudflare captcha token missing.");
+  const name = data.get("name");
+  const email = data.get("email");
+  if (!email) return error(400, "Missing email field");
+  const message = data.get("message");
+  if (!message) return error(400, "Missing message field");
+
+  const turnstileData = new FormData();
+  turnstileData.append("secret", turnstileSecret);
+  turnstileData.append("response", cloudflareToken);
+  // turnstileData.append("remoteip", ip);
+
+  const url = "https://challenges.cloudflare.com/turnstile/v0/siteverify";
+  const result = await fetch(url, {
+    body: turnstileData,
+    method: "POST",
+  });
+  if (!result.ok) {
+    console.error("Error validating turnstile challenge:", await result.text());
+    return error(400, "Invalid turnstile challenge response");
+  }
+
+  const response = await fetch(contactWebhook, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      text: `New message from contact form:`,
+      attachments: [
+        {
+          title: `${name}${name && " "}<${email}>`,
+          text: message,
+        },
+      ],
+    }),
+  });
+  if (response.ok) {
+    return new Response(undefined, { status: 200 });
+  } else {
+    return new Response(undefined, {
+      status: 500,
+      statusText: "Failed to send message to contact webhook.",
+    });
+  }
+});
+
+Deno.serve(router.fetch);

server-side/deno.json

@@ -0,0 +1,3 @@
+{ 
+  "nodeModulesDir": "auto"
+}

server-side/deno.lock

@@ -2,14 +2,17 @@
 import type { Form as Props } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
+const isProd = import.meta.env.PROD;
+const siteKey = isProd ? '0x4AAAAAAByo9pKriiVamG2A' : '3x00000000000000000000FF';
+
 const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props;
 ---
 
 <form>
   {
     inputs &&
       inputs.map(
-        ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '' }) =>
+        ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '', required = false }) =>
           name && (
             <div class="mb-6">
               {label && (
@@ -23,6 +26,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
                 id={name}
                 autocomplete={autocomplete}
                 placeholder={placeholder}
+                required={required}
                 class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
               />
             </div>
@@ -42,6 +46,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
           rows={textarea.rows ? textarea.rows : 4}
           placeholder={textarea.placeholder}
           class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+          required={textarea.required || false}
         />
       </div>
     )
@@ -69,7 +74,10 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
 
   {
     button && (
-      <div class="mt-10 grid">
+      <div class="grid">
+        <div class="checkbox my-3 mx-auto">
+          <div class="cf-turnstile" data-sitekey={siteKey} data-theme="dark" />
+        </div>
         <Button variant="primary" type="submit">
           {button}
         </Button>
@@ -85,3 +93,54 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
     )
   }
 </form>
+
+<script define:vars={{ siteKey }} is:inline>
+  window.onloadTurnstileCallback = function () {
+    turnstile.render('#turnstile-challenge', {
+      sitekey: siteKey,
+      callback: function (_) {
+        document.querySelector('button').disabled = false;
+      },
+    });
+  };
+
+  // Add event listener for form submission
+  document.querySelector('form')?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+
+    // Call the contact webhook
+    try {
+      const response = await fetch('https://ktech-studio-contact-form.deno.dev/contact', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      window
+        .Toastify({
+          text: 'Message sent successfully',
+          style: { background: 'green' },
+        })
+        .showToast();
+
+      // Clear the form fields
+      document.querySelectorAll('input,textarea').forEach((x) => (x.value = ''));
+      window.turnstile.reset();
+      document.querySelector('button').disabled = true;
+    } catch (error) {
+      console.error('Error sending message:', error);
+      window
+        .Toastify({
+          text: 'Error sending message',
+          style: { background: 'red' },
+        })
+        .showToast();
+    }
+  });
+</script>
+
+<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" defer></script>

src/components/ui/Form.astro

@@ -36,6 +36,8 @@ const { language, textDirection } = I18N;
     <SiteVerification />
     <Analytics />
 
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" />
+
     <!-- Comment the line below to disable View Transitions -->
     <ClientRouter fallback="swap" />
   </head>
@@ -44,5 +46,7 @@ const { language, textDirection } = I18N;
     <slot />
 
     <BasicScripts />
+
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
   </body>
 </html>

src/layouts/Layout.astro

@@ -17,22 +17,20 @@ const metadata = {
         type: 'text',
         name: 'name',
         label: 'Name',
-        placeholder: 'In case it helps to know who you are...',
+        placeholder: 'In case it helps to know who you are...'
       },
       {
         type: 'email',
         name: 'email',
         label: 'Email',
         placeholder: 'If you want a response...',
+        required: true,
       },
     ]}
     textarea={{
       label: 'Message',
       placeholder: 'If you want to actually be useful... 🤨',
-    }}
-    disclaimer={{
-      label:
-        'By submitting this contact form, you acknowledge and agree to the collection of your personal information.',
+      required: true,
     }}
     description="Thanks for reaching out!"
   />

src/pages/contact.astro

@@ -1,6 +1,25 @@
 import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
 import type { HTMLAttributes, ImageMetadata } from 'astro/types';
 
+declare global {
+  interface Window {
+    /** Incomplete types from: https://github.com/apvarun/toastify-js/tree/master?tab=readme-ov-file#api */
+    Toastify(options: {
+      text: string;
+      className?: string;
+      style?: {
+        background?: string;
+      };
+      offset?: {
+        x?: number;
+        y?: number;
+      };
+      gravity?: 'top' | 'bottom';
+      position?: 'left' | 'right';
+    }): { showToast(): void };
+  }
+}
+
 export interface Post {
   /** A unique ID number that identifies a post. */
   id: string;
@@ -169,13 +188,15 @@ export interface Input {
   label?: string;
   autocomplete?: string;
   placeholder?: string;
+  required?: boolean;
 }
 
 export interface Textarea {
   label?: string;
   name?: string;
   placeholder?: string;
   rows?: number;
+  required?: boolean;
 }
 
 export interface Disclaimer {