refactor contact form server action

app/contact/page.tsx

@@ -1,7 +1,13 @@
+import { headers } from "next/headers";
+import * as v from "valibot";
+import { Resend } from "resend";
 import PageTitle from "../../components/PageTitle";
 import Link from "../../components/Link";
-import ContactForm from "./form";
 import { addMetadata } from "../../lib/helpers/metadata";
+import * as config from "../../lib/config";
+
+import ContactForm from "./form";
+import ContactSchema, { type ContactState } from "./schema";
 
 export const metadata = addMetadata({
   title: "Contact Me",
@@ -11,6 +17,84 @@ export const metadata = addMetadata({
   },
 });
 
+const send = async (prevState: ContactState, formData: FormData): Promise<ContactState> => {
+  "use server";
+
+  // TODO: remove after debugging why automated spam entries are causing 500 errors
+  console.debug("[contact form] received data:", formData);
+
+  if (!process.env.RESEND_API_KEY) {
+    throw new Error("[contact form] 'RESEND_API_KEY' is not set.");
+  }
+
+  try {
+    const data = v.safeParse(ContactSchema, Object.fromEntries(formData));
+
+    if (!data.success) {
+      return {
+        success: false,
+        message: "Please make sure all fields are filled in.",
+        errors: v.flatten(data.issues).nested,
+      };
+    }
+
+    // try to get the client IP (for turnstile accuracy, not logging!) but no biggie if we can't
+    let remoteip;
+    try {
+      remoteip = (await headers()).get("x-forwarded-for");
+    } catch {} // eslint-disable-line no-empty
+
+    // validate captcha
+    const turnstileResponse = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        secret: process.env.TURNSTILE_SECRET_KEY || "1x0000000000000000000000000000000AA",
+        response: data.output["cf-turnstile-response"],
+        remoteip,
+      }),
+      cache: "no-store",
+    });
+
+    if (!turnstileResponse || !turnstileResponse.ok) {
+      throw new Error(`[contact form] turnstile validation failed: ${turnstileResponse.status}`);
+    }
+
+    const turnstileData = (await turnstileResponse.json()) as { success: boolean };
+
+    if (!turnstileData.success) {
+      return {
+        success: false,
+        message: "Did you complete the CAPTCHA? (If you're human, that is...)",
+      };
+    }
+
+    if (!process.env.RESEND_FROM_EMAIL) {
+      // https://resend.com/docs/api-reference/emails/send-email
+      console.warn("[contact form] 'RESEND_FROM_EMAIL' is not set, falling back to onboarding@resend.dev.");
+    }
+
+    // send email
+    const resend = new Resend(process.env.RESEND_API_KEY!);
+    await resend.emails.send({
+      from: `${data.output.name} <${process.env.RESEND_FROM_EMAIL || "onboarding@resend.dev"}>`,
+      replyTo: `${data.output.name} <${data.output.email}>`,
+      to: [config.authorEmail],
+      subject: `[${config.siteName}] Contact Form Submission`,
+      text: data.output.message,
+    });
+
+    return { success: true, message: "Thanks! You should hear from me soon." };
+  } catch (error) {
+    console.error("[contact form] fatal error:", error);
+
+    return {
+      success: false,
+      message: "Internal server error. Please try again later or shoot me an email.",
+    };
+  }
+};
+
 const Page = () => {
   return (
     <div
@@ -43,7 +127,7 @@ const Page = () => {
         .
       </p>
 
-      <ContactForm />
+      <ContactForm serverAction={send} />
     </div>
   );
 };