improvement(contact): add Turnstile CAPTCHA, honeypot, and robustness fixes

apps/sim/app/(landing)/components/contact/contact-form.tsx

@@ -1,10 +1,13 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
+import { toError } from '@sim/utils/errors'
 import { useMutation } from '@tanstack/react-query'
-import { Combobox, Input, Textarea } from '@/components/emcn'
+import Link from 'next/link'
+import { Combobox, type ComboboxOption, Input, Textarea } from '@/components/emcn'
 import { Check } from '@/components/emcn/icons'
-import { cn } from '@/lib/core/utils/cn'
+import { getEnv } from '@/lib/core/config/env'
 import { captureClientEvent } from '@/lib/posthog/client'
 import {
  CONTACT_TOPIC_OPTIONS,
@@ -34,12 +37,28 @@ const INITIAL_FORM_STATE: ContactFormState = {
  message: '',
 }
 
-const COMBOBOX_TOPICS = [...CONTACT_TOPIC_OPTIONS]
-
 const LANDING_INPUT =
- 'h-[36px] rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-3 font-[430] font-season text-[14px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)]'
+ 'h-[40px] rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg-surface)] px-3 font-[430] font-season text-[14px] text-[var(--landing-text)] outline-none transition-colors placeholder:text-[var(--landing-text-muted)] focus:border-[var(--landing-border-strong)]'
+
+const LANDING_TEXTAREA =
+ 'min-h-[140px] rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg-surface)] px-3 py-2.5 font-[430] font-season text-[14px] text-[var(--landing-text)] outline-none transition-colors placeholder:text-[var(--landing-text-muted)] focus:border-[var(--landing-border-strong)]'
+
+const LANDING_COMBOBOX =
+ 'h-[40px] rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg-surface)] px-3 font-[430] font-season text-[14px] text-[var(--landing-text)] hover:bg-[var(--landing-bg-surface)] focus-within:border-[var(--landing-border-strong)]'
+
+const LANDING_SUBMIT =
+ 'flex h-[40px] w-full items-center justify-center rounded-[5px] border border-[var(--landing-text-subtle)] bg-[var(--landing-text-subtle)] font-[430] font-season text-[14px] text-[var(--landing-text-dark)] transition-colors hover:border-[var(--landing-bg-hover)] hover:bg-[var(--landing-bg-hover)] disabled:cursor-not-allowed disabled:opacity-60'
+
+const LANDING_LABEL =
+ 'font-[500] font-season text-[13px] text-[var(--landing-text)] tracking-[0.02em]'
 
-async function submitContactRequest(payload: ContactRequestPayload) {
+interface SubmitContactRequestInput extends ContactRequestPayload {
+ website: string
+ captchaToken?: string
+ captchaUnavailable?: boolean
+}
+
+async function submitContactRequest(payload: SubmitContactRequestInput) {
  const response = await fetch('/api/contact', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
@@ -59,9 +78,7 @@ async function submitContactRequest(payload: ContactRequestPayload) {
 }
 
 export function ContactForm() {
- const [form, setForm] = useState<ContactFormState>(INITIAL_FORM_STATE)
- const [errors, setErrors] = useState<ContactErrors>({})
- const [submitSuccess, setSubmitSuccess] = useState(false)
+ const turnstileRef = useRef<TurnstileInstance>(null)
 
  const contactMutation = useMutation({
  mutationFn: submitContactRequest,
@@ -71,8 +88,23 @@ export function ContactForm() {
  setErrors({})
  setSubmitSuccess(true)
  },
+ onError: () => {
+ turnstileRef.current?.reset()
+ },
  })
 
+ const [form, setForm] = useState<ContactFormState>(INITIAL_FORM_STATE)
+ const [errors, setErrors] = useState<ContactErrors>({})
+ const [submitSuccess, setSubmitSuccess] = useState(false)
+ const [isSubmitting, setIsSubmitting] = useState(false)
+ const [website, setWebsite] = useState('')
+ const [widgetReady, setWidgetReady] = useState(false)
+ const [turnstileSiteKey, setTurnstileSiteKey] = useState<string | undefined>()
+
+ useEffect(() => {
+ setTurnstileSiteKey(getEnv('NEXT_PUBLIC_TURNSTILE_SITE_KEY'))
+ }, [])
+
  function updateField<TField extends keyof ContactFormState>(
  field: TField,
  value: ContactFormState[TField]
@@ -91,9 +123,10 @@ export function ContactForm() {
  }
  }
 
- function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault()
- if (contactMutation.isPending) return
+ if (contactMutation.isPending || isSubmitting) return
+ setIsSubmitting(true)
 
  const parsed = contactRequestSchema.safeParse({
  ...form,
@@ -110,35 +143,55 @@ export function ContactForm() {
  subject: fieldErrors.subject?.[0],
  message: fieldErrors.message?.[0],
  })
+ setIsSubmitting(false)
  return
  }
 
- contactMutation.mutate(parsed.data)
+ let captchaToken: string | undefined
+ let captchaUnavailable: boolean | undefined
+ const widget = turnstileRef.current
+
+ if (turnstileSiteKey) {
+ if (widgetReady && widget) {
+ try {
+ widget.reset()
+ widget.execute()
+ captchaToken = await widget.getResponsePromise(30_000)
+ } catch {
+ captchaUnavailable = true
+ }
+ } else {
+ captchaUnavailable = true
+ }
+ }
+
+ contactMutation.mutate({ ...parsed.data, website, captchaToken, captchaUnavailable })
+ setIsSubmitting(false)
  }
 
+ const isBusy = contactMutation.isPending || isSubmitting
+
  const submitError = contactMutation.isError
- ? contactMutation.error instanceof Error
- ? contactMutation.error.message
- : 'Failed to send message. Please try again.'
+ ? toError(contactMutation.error).message || 'Failed to send message. Please try again.'
  : null
 
  if (submitSuccess) {
  return (
- <div className='flex min-h-[460px] flex-col items-center justify-center rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] px-8 py-16 text-center'>
- <div className='flex h-16 w-16 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--bg-subtle)] text-[var(--text-primary)]'>
+ <div className='flex flex-col items-center px-8 py-16 text-center'>
+ <div className='flex h-16 w-16 items-center justify-center rounded-full border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg-surface)] text-[var(--landing-text)]'>
  <Check className='h-8 w-8' />
  </div>
- <h2 className='mt-6 font-[430] font-season text-[24px] text-[var(--text-primary)] leading-[1.2] tracking-[-0.02em]'>
+ <h2 className='mt-6 font-[430] font-season text-[24px] text-[var(--landing-text)] leading-[1.2] tracking-[-0.02em]'>
  Message received
  </h2>
- <p className='mt-3 max-w-sm font-season text-[14px] text-[var(--text-secondary)] leading-[1.6]'>
+ <p className='mt-3 max-w-sm font-season text-[14px] text-[var(--landing-text-body)] leading-[1.6]'>
  Thanks for reaching out. We've sent a confirmation to your inbox and will get back to you
  shortly.
  </p>
  <button
  type='button'
  onClick={() => setSubmitSuccess(false)}
- className='mt-6 font-season text-[13px] text-[var(--text-primary)] underline underline-offset-2 transition-opacity hover:opacity-80'
+ className='mt-6 font-season text-[13px] text-[var(--landing-text)] underline underline-offset-2 transition-opacity hover:opacity-80'
  >
  Send another message
  </button>
@@ -147,12 +200,33 @@ export function ContactForm() {
  }
 
  return (
- <form
- onSubmit={handleSubmit}
- className='flex flex-col gap-4 rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] p-6 sm:p-8'
- >
- <div className='grid gap-4 sm:grid-cols-2'>
- <LandingField htmlFor='contact-name' label='Name' error={errors.name}>
+ <form onSubmit={handleSubmit} className='relative flex flex-col gap-5'>
+ {/* Honeypot */}
+ <div
+ aria-hidden='true'
+ className='pointer-events-none absolute left-[-9999px] h-px w-px overflow-hidden opacity-0'
+ >
+ <label htmlFor='contact-website'>Website</label>
+ <input
+ id='contact-website'
+ name='website'
+ type='text'
+ tabIndex={-1}
+ autoComplete='off'
+ value={website}
+ onChange={(event) => setWebsite(event.target.value)}
+ data-lpignore='true'
+ data-1p-ignore='true'
+ />
+ </div>
+
+ <div className='grid gap-5 sm:grid-cols-2'>
+ <LandingField
+ htmlFor='contact-name'
+ label='Name'
+ error={errors.name}
+ labelClassName={LANDING_LABEL}
+ >
  <Input
  id='contact-name'
  value={form.name}
@@ -161,7 +235,12 @@ export function ContactForm() {
  className={LANDING_INPUT}
  />
  </LandingField>
- <LandingField htmlFor='contact-email' label='Email' error={errors.email}>
+ <LandingField
+ htmlFor='contact-email'
+ label='Email'
+ error={errors.email}
+ labelClassName={LANDING_LABEL}
+ >
  <Input
  id='contact-email'
  type='email'
@@ -173,8 +252,14 @@ export function ContactForm() {
  </LandingField>
  </div>
 
- <div className='grid gap-4 sm:grid-cols-2'>
- <LandingField htmlFor='contact-company' label='Company' optional error={errors.company}>
+ <div className='grid gap-5 sm:grid-cols-2'>
+ <LandingField
+ htmlFor='contact-company'
+ label='Company'
+ optional
+ error={errors.company}
+ labelClassName={LANDING_LABEL}
+ >
  <Input
  id='contact-company'
  value={form.company}
@@ -183,21 +268,31 @@ export function ContactForm() {
  className={LANDING_INPUT}
  />
  </LandingField>
- <LandingField htmlFor='contact-topic' label='Topic' error={errors.topic}>
+ <LandingField
+ htmlFor='contact-topic'
+ label='Topic'
+ error={errors.topic}
+ labelClassName={LANDING_LABEL}
+ >
  <Combobox
- options={COMBOBOX_TOPICS}
+ options={CONTACT_TOPIC_OPTIONS as unknown as ComboboxOption[]}
  value={form.topic}
  selectedValue={form.topic}
  onChange={(value) => updateField('topic', value as ContactRequestPayload['topic'])}
  placeholder='Select a topic'
  editable={false}
  filterOptions={false}
- className='h-[36px] rounded-[5px] px-3 font-[430] font-season text-[14px]'
+ className={LANDING_COMBOBOX}
  />
  </LandingField>
  </div>
 
- <LandingField htmlFor='contact-subject' label='Subject' error={errors.subject}>
+ <LandingField
+ htmlFor='contact-subject'
+ label='Subject'
+ error={errors.subject}
+ labelClassName={LANDING_LABEL}
+ >
  <Input
  id='contact-subject'
  value={form.subject}
@@ -207,33 +302,53 @@ export function ContactForm() {
  />
  </LandingField>
 
- <LandingField htmlFor='contact-message' label='Message' error={errors.message}>
+ <LandingField
+ htmlFor='contact-message'
+ label='Message'
+ error={errors.message}
+ labelClassName={LANDING_LABEL}
+ >
  <Textarea
  id='contact-message'
  value={form.message}
  onChange={(event) => updateField('message', event.target.value)}
  placeholder='Share details so we can help as quickly as possible'
- className='min-h-[140px] rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-3 py-2.5 font-[430] font-season text-[14px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)]'
+ className={LANDING_TEXTAREA}
  />
  </LandingField>
 
+ {turnstileSiteKey ? (
+ <Turnstile
+ ref={turnstileRef}
+ siteKey={turnstileSiteKey}
+ options={{ execution: 'execute', appearance: 'execute', size: 'invisible' }}
+ onWidgetLoad={() => setWidgetReady(true)}
+ onExpire={() => setWidgetReady(false)}
+ onError={() => setWidgetReady(false)}
+ onUnsupported={() => setWidgetReady(false)}
+ />
+ ) : null}
+
  {submitError ? (
  <p role='alert' className='font-season text-[13px] text-[var(--text-error)]'>
  {submitError}
  </p>
  ) : null}
 
- <button
- type='submit'
- disabled={contactMutation.isPending}
- className={cn(
- 'flex h-[40px] w-full items-center justify-center rounded-[5px] bg-[var(--text-primary)]',
- 'font-[430] font-season text-[14px] text-[var(--bg)] transition-opacity',
- 'hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60'
- )}
- >
- {contactMutation.isPending ? 'Sending...' : 'Send message'}
+ <button type='submit' disabled={isBusy} className={LANDING_SUBMIT}>
+ {isBusy ? 'Sending...' : 'Send message'}
  </button>
+
+ <p className='text-center font-season text-[12px] text-[var(--landing-text-muted)] leading-[1.6]'>
+ By submitting, you agree to our{' '}
+ <Link
+ href='/privacy'
+ className='text-[var(--landing-text)] underline underline-offset-2 transition-opacity hover:opacity-80'
+ >
+ Privacy Policy
+ </Link>
+ .
+ </p>
  </form>
  )
 }

apps/sim/app/(landing)/components/forms/landing-field.tsx

@@ -6,29 +6,44 @@ interface LandingFieldProps {
  optional?: boolean
  error?: string
  children: React.ReactNode
+ /** Replaces the default label className. */
+ labelClassName?: string
 }
 
-export function LandingField({ label, htmlFor, optional, error, children }: LandingFieldProps) {
+const DEFAULT_LABEL_CLASSNAME =
+ 'font-[430] font-season text-[13px] text-[var(--text-secondary)] tracking-[0.02em]'
+
+export function LandingField({
+ label,
+ htmlFor,
+ optional,
+ error,
+ children,
+ labelClassName,
+}: LandingFieldProps) {
  const errorId = error ? `${htmlFor}-error` : undefined
  const describedChild =
  errorId && isValidElement<{ 'aria-describedby'?: string; 'aria-invalid'?: boolean }>(children)
  ? cloneElement(children, { 'aria-describedby': errorId, 'aria-invalid': true })
  : children
  return (
  <div className='flex flex-col gap-1.5'>
- <label
- htmlFor={htmlFor}
- className='font-[430] font-season text-[13px] text-[var(--text-secondary)] tracking-[0.02em]'
- >
- {label}
- {optional ? <span className='ml-1 text-[var(--text-muted)]'>(optional)</span> : null}
- </label>
+ <div className='flex min-h-[18px] items-baseline justify-between gap-3'>
+ <label htmlFor={htmlFor} className={labelClassName ?? DEFAULT_LABEL_CLASSNAME}>
+ {label}
+ {optional ? <span className='ml-1 text-[var(--text-muted)]'>(optional)</span> : null}
+ </label>
+ {error ? (
+ <span
+ id={errorId}
+ role='alert'
+ className='truncate font-season text-[12px] text-[var(--text-error)]'
+ >
+ {error}
+ </span>
+ ) : null}
+ </div>
  {describedChild}
- {error ? (
- <p id={errorId} role='alert' className='text-[12px] text-[var(--text-error)]'>
- {error}
- </p>
- ) : null}
  </div>
  )
 }