From add09cf84ad8bd67595f8800d1e49fdd11530b22 Mon Sep 17 00:00:00 2001
From: Daniel Heene <daniel@heene.io>
Date: Fri, 14 Aug 2026 07:44:36 +0200
Subject: [PATCH] feat(contact): wire up the resume contact form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ResumeContact block previously rendered only a title/caption with a
commented-out mail link — no actual form existed.

- Add ContactForm.client.tsx: name/email/message inputs plus a hidden
  honeypot field, driven by useActionState against a server action.
- Add submitContactForm server action: validates input with zod, rejects
  silently on a filled honeypot, looks up the recipient email from
  GlobalUserSettings, and sends via the existing useSendAdapter through
  payload.sendEmail, with the submitter set as replyTo. Errors are logged
  server-side and reported to the client as a generic message so upstream
  details never leak.
- Wire ContactForm into ResumeContactBlockClientRenderer in place of the
  commented-out button.
---
 .../Renderer/ContactForm.client.tsx           | 138 ++++++++++++++++
 .../Renderer/Renderer.client.tsx              |  10 +-
 src/lib/actions/submitContactForm.test.ts     | 152 ++++++++++++++++++
 src/lib/actions/submitContactForm.ts          | 109 +++++++++++++
 4 files changed, 402 insertions(+), 7 deletions(-)
 create mode 100644 src/blocks/ResumeContactBlock/Renderer/ContactForm.client.tsx
 create mode 100644 src/lib/actions/submitContactForm.test.ts
 create mode 100644 src/lib/actions/submitContactForm.ts

diff --git a/src/blocks/ResumeContactBlock/Renderer/ContactForm.client.tsx b/src/blocks/ResumeContactBlock/Renderer/ContactForm.client.tsx
new file mode 100644
index 0000000..e08251f
--- /dev/null
+++ b/src/blocks/ResumeContactBlock/Renderer/ContactForm.client.tsx
@@ -0,0 +1,138 @@
+'use client'
+
+import { useActionState, useEffect, useId, useRef } from 'react'
+
+import { Button } from '@/components/Button'
+import { type ContactFormState, submitContactForm } from '@/lib/actions/submitContactForm'
+import { cn } from '@/lib/cn'
+
+const initialState: ContactFormState = {
+  status: 'idle',
+}
+
+const inputStyles = cn(
+  'w-full rounded-none border border-border bg-transparent px-4 py-3',
+  'text-base placeholder:text-muted-foreground',
+  'outline-none transition-colors',
+  'focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30',
+  'aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20',
+)
+
+export const ContactForm = () => {
+  const [state, formAction, isPending] = useActionState(submitContactForm, initialState)
+  const formRef = useRef<HTMLFormElement>(null)
+  const nameId = useId()
+  const emailId = useId()
+  const messageId = useId()
+  const companyId = useId()
+
+  useEffect(() => {
+    if (state.status === 'success') {
+      formRef.current?.reset()
+    }
+  }, [
+    state.status,
+  ])
+
+  return (
+    <form
+      ref={formRef}
+      action={formAction}
+      noValidate
+      className="col-span-12 md:col-start-3 md:col-span-8 my-8 flex flex-col gap-6 text-left"
+    >
+      <div className="flex flex-col gap-2">
+        <label htmlFor={nameId} className="text-sm font-mono uppercase tracking-wide">
+          Name
+        </label>
+        <input
+          id={nameId}
+          name="name"
+          type="text"
+          autoComplete="name"
+          required
+          maxLength={200}
+          aria-invalid={Boolean(state.fieldErrors?.name)}
+          aria-describedby={state.fieldErrors?.name ? `${nameId}-error` : undefined}
+          className={inputStyles}
+        />
+        {state.fieldErrors?.name && (
+          <p id={`${nameId}-error`} className="text-sm text-destructive">
+            {state.fieldErrors.name}
+          </p>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor={emailId} className="text-sm font-mono uppercase tracking-wide">
+          Email
+        </label>
+        <input
+          id={emailId}
+          name="email"
+          type="email"
+          autoComplete="email"
+          required
+          maxLength={320}
+          aria-invalid={Boolean(state.fieldErrors?.email)}
+          aria-describedby={state.fieldErrors?.email ? `${emailId}-error` : undefined}
+          className={inputStyles}
+        />
+        {state.fieldErrors?.email && (
+          <p id={`${emailId}-error`} className="text-sm text-destructive">
+            {state.fieldErrors.email}
+          </p>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor={messageId} className="text-sm font-mono uppercase tracking-wide">
+          Message
+        </label>
+        <textarea
+          id={messageId}
+          name="message"
+          rows={6}
+          required
+          maxLength={5000}
+          aria-invalid={Boolean(state.fieldErrors?.message)}
+          aria-describedby={state.fieldErrors?.message ? `${messageId}-error` : undefined}
+          className={cn(inputStyles, 'resize-y')}
+        />
+        {state.fieldErrors?.message && (
+          <p id={`${messageId}-error`} className="text-sm text-destructive">
+            {state.fieldErrors.message}
+          </p>
+        )}
+      </div>
+
+      {/*
+        Honeypot: hidden from sighted and keyboard users via CSS + tabIndex,
+        and out of the accessibility tree via aria-hidden, but still present
+        for naive bots that fill in every input they find. Any value here
+        makes submitContactForm silently no-op.
+      */}
+      <div aria-hidden="true" className="absolute left-[-9999px] top-auto h-0 w-0 overflow-hidden">
+        <label htmlFor={companyId}>Company</label>
+        <input id={companyId} name="company" type="text" tabIndex={-1} autoComplete="off" />
+      </div>
+
+      <div className="flex flex-col items-start gap-3">
+        <Button type="submit" variant="default" disabled={isPending}>
+          {isPending ? 'Sending…' : 'Send message'}
+        </Button>
+
+        {state.status === 'success' && (
+          <p role="status" className="text-sm text-muted-foreground">
+            Thanks for reaching out — I'll get back to you soon.
+          </p>
+        )}
+        {state.status === 'error' && state.message && !state.fieldErrors && (
+          <p role="alert" className="text-sm text-destructive">
+            {state.message}
+          </p>
+        )}
+      </div>
+    </form>
+  )
+}
diff --git a/src/blocks/ResumeContactBlock/Renderer/Renderer.client.tsx b/src/blocks/ResumeContactBlock/Renderer/Renderer.client.tsx
index d5fc58c..bfc6475 100644
--- a/src/blocks/ResumeContactBlock/Renderer/Renderer.client.tsx
+++ b/src/blocks/ResumeContactBlock/Renderer/Renderer.client.tsx
@@ -6,6 +6,8 @@ import { SectionContainer } from '@/components/SectionContainer'
 import { cn } from '@/lib/cn'
 import { ResumeContactBlock } from '@/types/payload'
 
+import { ContactForm } from './ContactForm.client'
+
 interface ResumeContactBlockClientRendererProps extends ResumeContactBlock {
   title: string
 }
@@ -27,13 +29,7 @@ export const ResumeContactBlockClientRenderer = ({
           <RichText data={caption} enableGutter={false} className="text-lg" />
         </div>
       )}
-      {/*{mailButton?.label && mailButton?.href && (*/}
-      {/*  <Button asChild variant="default" type="submit">*/}
-      {/*    <Link className="font-bold text-xl col-span-12 md:col-start-4 md:col-span-6 my-2 cursor-pointer" href={mailButton.href}>*/}
-      {/*      {mailButton.label}*/}
-      {/*    </Link>*/}
-      {/*  </Button>*/}
-      {/*)}*/}
+      <ContactForm />
     </div>
   </SectionContainer>
 )
diff --git a/src/lib/actions/submitContactForm.test.ts b/src/lib/actions/submitContactForm.test.ts
new file mode 100644
index 0000000..611ebce
--- /dev/null
+++ b/src/lib/actions/submitContactForm.test.ts
@@ -0,0 +1,152 @@
+import { getPayload } from 'payload'
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { type ContactFormState, submitContactForm } from './submitContactForm'
+
+vi.mock('@payload-config', () => ({
+  default: {},
+}))
+
+const RECIPIENT_EMAIL = 'owner@example.com'
+
+const findGlobal = vi.fn(async () => ({
+  email: RECIPIENT_EMAIL,
+}))
+const sendEmail = vi.fn(async () => ({}))
+const loggerError = vi.fn()
+
+beforeEach(() => {
+  findGlobal.mockClear()
+  findGlobal.mockResolvedValue({
+    email: RECIPIENT_EMAIL,
+  })
+  sendEmail.mockClear()
+  sendEmail.mockResolvedValue({})
+  loggerError.mockClear()
+
+  vi.mocked(getPayload).mockResolvedValue({
+    findGlobal,
+    sendEmail,
+    logger: {
+      info: vi.fn(),
+      error: loggerError,
+    },
+  } as never)
+})
+
+const initialState: ContactFormState = {
+  status: 'idle',
+}
+
+const formData = (fields: Partial<Record<'name' | 'email' | 'message' | 'company', string>>) => {
+  const data = new FormData()
+  for (const [key, value] of Object.entries(fields)) {
+    if (value !== undefined) {
+      data.set(key, value)
+    }
+  }
+  return data
+}
+
+describe('submitContactForm', () => {
+  it('sends an email to the configured recipient with the submitter as reply-to', async () => {
+    const result = await submitContactForm(
+      initialState,
+      formData({
+        name: 'Ada Lovelace',
+        email: 'ada@example.com',
+        message: 'Hello there',
+      }),
+    )
+
+    expect(result.status).toBe('success')
+    expect(sendEmail).toHaveBeenCalledTimes(1)
+    expect(sendEmail.mock.calls[0][0]).toMatchObject({
+      to: RECIPIENT_EMAIL,
+      replyTo: 'Ada Lovelace <ada@example.com>',
+      subject: 'New contact form message from Ada Lovelace',
+    })
+    expect(sendEmail.mock.calls[0][0].text).toContain('Hello there')
+  })
+
+  it('rejects an invalid email without sending', async () => {
+    const result = await submitContactForm(
+      initialState,
+      formData({
+        name: 'Ada',
+        email: 'not-an-email',
+        message: 'Hi',
+      }),
+    )
+
+    expect(result.status).toBe('error')
+    expect(result.fieldErrors?.email).toBeTruthy()
+    expect(sendEmail).not.toHaveBeenCalled()
+  })
+
+  it('rejects an empty message without sending', async () => {
+    const result = await submitContactForm(
+      initialState,
+      formData({
+        name: 'Ada',
+        email: 'ada@example.com',
+        message: '   ',
+      }),
+    )
+
+    expect(result.status).toBe('error')
+    expect(result.fieldErrors?.message).toBeTruthy()
+    expect(sendEmail).not.toHaveBeenCalled()
+  })
+
+  it('silently succeeds without sending when the honeypot field is filled', async () => {
+    const result = await submitContactForm(
+      initialState,
+      formData({
+        name: 'Bot',
+        email: 'bot@example.com',
+        message: 'buy now',
+        company: 'Acme Spam Co',
+      }),
+    )
+
+    expect(result.status).toBe('success')
+    expect(sendEmail).not.toHaveBeenCalled()
+  })
+
+  it('reports an error without leaking details when no recipient email is configured', async () => {
+    findGlobal.mockResolvedValue({
+      email: undefined,
+    })
+
+    const result = await submitContactForm(
+      initialState,
+      formData({
+        name: 'Ada',
+        email: 'ada@example.com',
+        message: 'Hi',
+      }),
+    )
+
+    expect(result.status).toBe('error')
+    expect(sendEmail).not.toHaveBeenCalled()
+  })
+
+  it('reports a generic error and logs details when sending fails', async () => {
+    sendEmail.mockRejectedValue(new Error('usesend: 500 upstream error'))
+
+    const result = await submitContactForm(
+      initialState,
+      formData({
+        name: 'Ada',
+        email: 'ada@example.com',
+        message: 'Hi',
+      }),
+    )
+
+    expect(result.status).toBe('error')
+    expect(result.message).not.toContain('usesend')
+    expect(loggerError).toHaveBeenCalledWith(expect.stringContaining('usesend: 500 upstream error'))
+  })
+})
diff --git a/src/lib/actions/submitContactForm.ts b/src/lib/actions/submitContactForm.ts
new file mode 100644
index 0000000..afc8655
--- /dev/null
+++ b/src/lib/actions/submitContactForm.ts
@@ -0,0 +1,109 @@
+'use server'
+
+import config from '@payload-config'
+import { getPayload } from 'payload'
+
+import { z } from 'zod'
+
+import { extractErrorMessage } from '@/lib/extractErrorMessage'
+import { GlobalSlug } from '@/types/globals'
+
+const ContactFormSchema = z.object({
+  name: z.string().trim().min(1, 'Please enter your name.').max(200),
+  email: z.email('Please enter a valid email address.').max(320),
+  message: z.string().trim().min(1, 'Please enter a message.').max(5000),
+  /**
+   * Honeypot field: real visitors never see or fill this input (hidden via
+   * CSS), so any non-empty value here means a bot filled the form. Treated
+   * as a silent success below rather than surfaced as an error, so bots
+   * don't learn their submission was rejected.
+   */
+  company: z.string().max(200).nullish(),
+})
+
+export type ContactFormState = {
+  status: 'idle' | 'success' | 'error'
+  message?: string
+  fieldErrors?: Partial<Record<'name' | 'email' | 'message', string>>
+}
+
+export const submitContactForm = async (
+  _prevState: ContactFormState,
+  formData: FormData,
+): Promise<ContactFormState> => {
+  const parsed = ContactFormSchema.safeParse({
+    name: formData.get('name'),
+    email: formData.get('email'),
+    message: formData.get('message'),
+    company: formData.get('company'),
+  })
+
+  if (!parsed.success) {
+    const fieldErrors: ContactFormState['fieldErrors'] = {}
+    for (const issue of parsed.error.issues) {
+      const key = issue.path[0]
+      if (key === 'name' || key === 'email' || key === 'message') {
+        fieldErrors[key] = issue.message
+      }
+    }
+    return {
+      status: 'error',
+      message: 'Please check the highlighted fields.',
+      fieldErrors,
+    }
+  }
+
+  const { name, email, message, company } = parsed.data
+
+  // Honeypot tripped: report success without sending anything.
+  if (company) {
+    return {
+      status: 'success',
+    }
+  }
+
+  try {
+    const payload = await getPayload({
+      config,
+    })
+
+    const { email: recipientEmail } = await payload.findGlobal({
+      slug: GlobalSlug.GlobalUserSettings,
+      draft: false,
+    })
+
+    if (!recipientEmail) {
+      payload.logger.error('Contact form submitted but no recipient email is configured.')
+      return {
+        status: 'error',
+        message: 'Sorry, the contact form is currently unavailable. Please try again later.',
+      }
+    }
+
+    await payload.sendEmail({
+      to: recipientEmail,
+      replyTo: `${name} <${email}>`,
+      subject: `New contact form message from ${name}`,
+      text: [
+        `Name: ${name}`,
+        `Email: ${email}`,
+        '',
+        message,
+      ].join('\n'),
+    })
+
+    return {
+      status: 'success',
+    }
+  } catch (error) {
+    const payload = await getPayload({
+      config,
+    })
+    payload.logger.error(`Failed to send contact form email: ${extractErrorMessage(error)}`)
+
+    return {
+      status: 'error',
+      message: 'Sorry, something went wrong sending your message. Please try again later.',
+    }
+  }
+}