!feat: added Cloudflare Turnstile captcha to the contact form

feat: added contact form disclaimer

app/_page_sections/ContactSection.module.scss

@@ -93,5 +93,11 @@
 				}
 			}
 		}
+
+		.disclaimer
+		{
+			text-align: right;
+			color: $colorNeutralForeground4;
+		}
 	}
 }

app/_page_sections/ContactSection.tsx

@@ -4,10 +4,12 @@ import Button from "@/_components/Button";
 import SocialLinks from "@/_components/SocialLinks";
 import contacts from "@/_data/contacts";
 import FormStatusTracker from "@/_utils/FormStatusTracker";
-import React, { InputHTMLAttributes, useMemo, useState } from "react";
+import React, { InputHTMLAttributes, useEffect, useMemo, useState } from "react";
 import { useFormState } from "react-dom";
+import Turnstile from "react-turnstile";
 import sendInquiry, { FormStatus } from "../_utils/sendInquiry";
 import cls from "./ContactSection.module.scss";
+import { getSitekey } from "@/_utils/turnstile";
 
 const defaultState: FormStatus = { status: "idle" };
 
@@ -16,6 +18,7 @@ const ContactSection: React.FC = () =>
 	const [pending, setPending] = useState<boolean>(false);
 	const [{ status, message }, formAction] = useFormState<FormStatus, FormData>(sendInquiry, defaultState);
 	const { telephone: phone, email, socials } = contacts;
+	const [cfSitekey, setCfSitekey] = useState<string | undefined | null>(null);
 
 	const sharedProps: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> = useMemo(() => ({
 		required: true,
@@ -23,6 +26,11 @@ const ContactSection: React.FC = () =>
 		readOnly: status === "success"
 	}), [status, pending]);
 
+	useEffect(() =>
+	{
+		getSitekey().then(sitekey => setCfSitekey(sitekey));
+	}, []);
+
 	return (
 		<section id="contacts" className={ cls.section }>
 			<h2>Let's get in touch</h2>
@@ -53,6 +61,16 @@ const ContactSection: React.FC = () =>
 						<input name="timezone" type="hidden" readOnly
 							value={ Intl.DateTimeFormat().resolvedOptions().timeZone } />
 
+						<div>
+							{ cfSitekey &&
+								<Turnstile sitekey={ cfSitekey } size="flexible" action="contact_form" />
+							}
+
+							<p className={ cls.disclaimer }>
+								*Using this form does not guarantee I will respond to your request
+							</p>
+						</div>
+
 						<div className={ cls.formToolbar }>
 							<div className={ `${cls.status} ${pending ? "" : cls[status]}` }>
 								{ pending &&

app/_utils/sendInquiry.ts

@@ -3,6 +3,7 @@
 import { canonicalName } from "@/_data/metadata";
 import nodemailer from "nodemailer";
 import { z } from "zod";
+import { verifyTurnstile } from "./turnstile";
 
 const schema = z.object({
 	email: z.string().email().max(60),
@@ -24,6 +25,32 @@ const mailClient = nodemailer.createTransport({
 
 export default async function sendInquiry(_: FormStatus, formData: FormData): Promise<FormStatus>
 {
+	const cfToken = formData.get("cf-turnstile-response")?.toString();
+
+	if (!cfToken)
+		return {
+			status: "error",
+			message: "You must complete the challenge"
+		};
+
+	const [isValid, error] = await verifyTurnstile(cfToken);
+
+	if (!isValid)
+	{
+		if (error === "timeout-or-duplicate")
+			return {
+				status: "error",
+				message: "Challenge has expired. Try again"
+			};
+
+		console.error(error);
+
+		return {
+			status: "error",
+			message: "Something went wrong"
+		};
+	}
+
 	const { success, data } = schema.safeParse({
 		email: formData.get("email"),
 		subject: formData.get("subject"),

app/_utils/turnstile.ts

@@ -0,0 +1,51 @@
+"use server";
+
+import { headers } from "next/headers";
+
+export async function getSitekey(): Promise<string | undefined>
+{
+	return process.env.CF_SITEKEY;
+}
+
+export async function verifyTurnstile(token: string): Promise<[false, TurnstileErrorType] | [true]>
+{
+	if (!process.env.CF_SECRET)
+		return [true];
+
+	const formData = new FormData();
+
+	console.log(headers().get("CF-Connecting-IP"));
+
+	formData.append("secret", process.env.CF_SECRET);
+	formData.append("response", token);
+	formData.append("remoteip", headers().get("CF-Connecting-IP") ?? "");
+
+	const response = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify",
+		{
+			body: formData,
+			method: "POST"
+		}
+	);
+
+	const result: TurnstileValidationResponse = await response.json();
+
+	if (result.success)
+		return [result.success];
+	else
+		return [result.success, result["error-codes"][0]];
+}
+
+export type TurnstileValidationResponse =
+	{
+		success: boolean;
+		challenge_ts: string;
+		hostname: string;
+		"error-codes": TurnstileErrorType[];
+		action: string;
+		cdata: `sessionid-${string}`;
+		metadata: Record<string, string>;
+	};
+
+export type TurnstileErrorType =
+	"missing-input-secret" | "invalid-input-secret" | "missing-input-response" |
+	"invalid-input-response" | "bad-request" | "timeout-or-duplicate" | "internal-error";