Gate Titus download, require full name forms, remove companion UI

Dockerfile

@@ -18,6 +18,7 @@ RUN npm ci --omit=dev
 
 COPY --from=build /app/dist ./dist
 COPY server.js ./server.js
+COPY --from=build /app/A_Study_of_Titus.pdf ./A_Study_of_Titus.pdf
 
 # Copy seed data to a separate directory so the entrypoint can seed /app/data
 # only when no live data exists yet — upgrades never overwrite existing data.

README.md

@@ -108,6 +108,14 @@ Deployment note:
 
 - To keep Admin saves working on the internet, deploy with the Node API (`server.js`) and writable server storage for `data/admin-content.json`.
 
+Titus study download gate:
+
+- The site now gates Titus study downloads behind a name/email form.
+- Default source file is `A_Study_of_Titus.pdf` in the project root.
+- Override source path with `TITUS_STUDY_FILE` (relative to project root or absolute).
+- Override downloaded filename with `TITUS_STUDY_DOWNLOAD_NAME`.
+- When the form checkbox is left enabled (default), contacts are synced to Resend using the same contact sync flow as the contact form.
+
 Useful container commands:
 
 ```bash

server.js

@@ -34,6 +34,10 @@ const CHATBOT_FILE = path.join(DATA_DIR, 'chatbot-content.json')
 const BACKUP_DIR = path.join(DATA_DIR, 'backups')
 const DIST_DIR = path.join(__dirname, 'dist')
 const INDEX_FILE = path.join(DIST_DIR, 'index.html')
+const TITUS_STUDY_FILE = process.env.TITUS_STUDY_FILE
+  ? path.resolve(__dirname, process.env.TITUS_STUDY_FILE)
+  : path.join(__dirname, 'A_Study_of_Titus.pdf')
+const TITUS_STUDY_DOWNLOAD_NAME = process.env.TITUS_STUDY_DOWNLOAD_NAME ?? 'A_Study_of_Titus.pdf'
 
 const EMPTY_HIT_STATS = {
   totalHits: 0,
@@ -68,6 +72,8 @@ const EMPTY_VISITOR_STATS = {
 }
 
 const MAX_CONTACT_SUBMISSIONS = 5000
+const DOWNLOAD_TOKEN_TTL_MS = 10 * 60 * 1000
+const titusDownloadTokens = new Map()
 
 const MAX_QUESTIONS = 1000
 let visitorStats = { ...EMPTY_VISITOR_STATS }
@@ -267,6 +273,57 @@ function addContactSubmission({ name, email, message, messageType, subscribe })
   return submission
 }
 
+async function syncContactToResend(name, email) {
+  if (!process.env.RESEND_API_KEY) return
+
+  const { firstName, lastName } = splitName(name)
+  const contactResend = new Resend(process.env.RESEND_CONTACTS_API_KEY ?? process.env.RESEND_API_KEY)
+
+  try {
+    const { error: contactError } = await contactResend.contacts.create({
+      email,
+      firstName,
+      lastName,
+      unsubscribed: false,
+      ...(process.env.RESEND_SEGMENT_ID
+        ? { segments: [{ id: process.env.RESEND_SEGMENT_ID }] }
+        : {}),
+    })
+
+    if (contactError) {
+      const { error: updateError } = await contactResend.contacts.update({
+        email,
+        firstName,
+        lastName,
+        unsubscribed: false,
+      })
+
+      if (updateError) {
+        console.error('[resend] contact sync error:', updateError)
+      }
+    }
+  } catch (err) {
+    console.error('[resend] contact sync exception:', err)
+  }
+}
+
+function createTitusDownloadToken(email) {
+  const token = randomUUID()
+  titusDownloadTokens.set(token, {
+    email,
+    expiresAt: Date.now() + DOWNLOAD_TOKEN_TTL_MS,
+  })
+  return token
+}
+
+function consumeTitusDownloadToken(token) {
+  const entry = titusDownloadTokens.get(token)
+  if (!entry) return false
+  titusDownloadTokens.delete(token)
+  if (entry.expiresAt <= Date.now()) return false
+  return true
+}
+
 function sanitizeUserAgent(userAgent) {
   if (!userAgent || typeof userAgent !== 'string') return 'unknown'
   return userAgent.trim().slice(0, 300) || 'unknown'
@@ -1042,6 +1099,7 @@ app.use((req, res, next) => {
 
 // Rate-limit contact submissions: max 5 per IP per 10 minutes
 const contactHits = new Map()
+const downloadHits = new Map()
 function contactRateLimit(req, res, next) {
   const ip = req.ip ?? 'unknown'
   const now = Date.now()
@@ -1060,9 +1118,99 @@ function contactRateLimit(req, res, next) {
   next()
 }
 
+function studyDownloadRateLimit(req, res, next) {
+  const ip = req.ip ?? 'unknown'
+  const now = Date.now()
+  const windowMs = 10 * 60 * 1000
+  const entry = downloadHits.get(ip) ?? { count: 0, start: now }
+  if (now - entry.start > windowMs) {
+    entry.count = 0
+    entry.start = now
+  }
+  entry.count += 1
+  downloadHits.set(ip, entry)
+  if (entry.count > 10) {
+    res.status(429).json({ message: 'Too many download requests. Please wait a few minutes.' })
+    return
+  }
+  next()
+}
+
+app.post('/api/study-downloads/titus', studyDownloadRateLimit, async (req, res) => {
+  try {
+    const { firstName, lastName, email, subscribe, _honey } = req.body ?? {}
+
+    if (_honey) {
+      res.json({ ok: true })
+      return
+    }
+
+    if (!firstName || typeof firstName !== 'string' || firstName.trim().length < 1 || firstName.trim().length > 100) {
+      res.status(400).json({ message: 'First name is required.' })
+      return
+    }
+
+    if (!lastName || typeof lastName !== 'string' || lastName.trim().length < 1 || lastName.trim().length > 100) {
+      res.status(400).json({ message: 'Last name is required.' })
+      return
+    }
+
+    if (!email || typeof email !== 'string' || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
+      res.status(400).json({ message: 'A valid email address is required.' })
+      return
+    }
+
+    try {
+      await stat(TITUS_STUDY_FILE)
+    } catch {
+      res.status(503).json({ message: 'The Titus study file is not configured yet.' })
+      return
+    }
+
+    const trimmedFirstName = firstName.trim()
+    const trimmedLastName = lastName.trim()
+    const trimmedName = `${trimmedFirstName} ${trimmedLastName}`.trim()
+    const trimmedEmail = email.trim()
+    const wantsSubscribe = subscribe !== false
+
+    addContactSubmission({
+      name: trimmedName,
+      email: trimmedEmail,
+      message: 'Requested Titus study download.',
+      messageType: 'general',
+      subscribe: wantsSubscribe,
+    })
+
+    if (wantsSubscribe) {
+      await syncContactToResend(trimmedName, trimmedEmail)
+    }
+
+    const token = createTitusDownloadToken(trimmedEmail)
+    res.json({ ok: true, downloadUrl: `/api/study-downloads/titus/file?token=${encodeURIComponent(token)}` })
+  } catch (err) {
+    console.error('[study-download] request error:', err)
+    res.status(500).json({ message: 'Failed to process your request. Please try again.' })
+  }
+})
+
+app.get('/api/study-downloads/titus/file', async (req, res) => {
+  const token = typeof req.query?.token === 'string' ? req.query.token : ''
+  if (!token || !consumeTitusDownloadToken(token)) {
+    res.status(403).json({ message: 'Invalid or expired download link. Submit the form again.' })
+    return
+  }
+
+  try {
+    await stat(TITUS_STUDY_FILE)
+    res.download(TITUS_STUDY_FILE, TITUS_STUDY_DOWNLOAD_NAME)
+  } catch {
+    res.status(503).json({ message: 'The Titus study file is not configured yet.' })
+  }
+})
+
 app.post('/api/contact', contactRateLimit, async (req, res) => {
   try {
-    const { name, email, message, messageType, subscribe, _honey } = req.body ?? {}
+    const { firstName, lastName, email, message, messageType, subscribe, _honey } = req.body ?? {}
 
     // Honeypot — silently discard if filled by a bot
     if (_honey) {
@@ -1070,8 +1218,12 @@ app.post('/api/contact', contactRateLimit, async (req, res) => {
       return
     }
 
-    if (!name || typeof name !== 'string' || name.trim().length < 1 || name.trim().length > 200) {
+    if (!firstName || typeof firstName !== 'string' || firstName.trim().length < 1 || firstName.trim().length > 100) {
-      res.status(400).json({ message: 'Name is required.' })
+      res.status(400).json({ message: 'First name is required.' })
+      return
+    }
+    if (!lastName || typeof lastName !== 'string' || lastName.trim().length < 1 || lastName.trim().length > 100) {
+      res.status(400).json({ message: 'Last name is required.' })
       return
     }
     if (!email || typeof email !== 'string' || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
@@ -1089,7 +1241,7 @@ app.post('/api/contact', contactRateLimit, async (req, res) => {
       return
     }
 
-    const trimmedName = name.trim()
+    const trimmedName = `${firstName.trim()} ${lastName.trim()}`.trim()
     const trimmedEmail = email.trim()
     const trimmedMessage = message.trim()
     const normalizedMessageType = normalizeMessageType(messageType)
@@ -1126,35 +1278,7 @@ app.post('/api/contact', contactRateLimit, async (req, res) => {
     const resend = new Resend(process.env.RESEND_API_KEY)
 
     if (subscribe === true) {
-      const { firstName, lastName } = splitName(trimmedName)
+      await syncContactToResend(trimmedName, trimmedEmail)
-      const contactResend = new Resend(process.env.RESEND_CONTACTS_API_KEY ?? process.env.RESEND_API_KEY)
-
-      try {
-        const { error: contactError } = await contactResend.contacts.create({
-          email: trimmedEmail,
-          firstName,
-          lastName,
-          unsubscribed: false,
-          ...(process.env.RESEND_SEGMENT_ID
-            ? { segments: [{ id: process.env.RESEND_SEGMENT_ID }] }
-            : {}),
-        })
-
-        if (contactError) {
-          const { error: updateError } = await contactResend.contacts.update({
-            email: trimmedEmail,
-            firstName,
-            lastName,
-            unsubscribed: false,
-          })
-
-          if (updateError) {
-            console.error('[contact] contact sync error:', updateError)
-          }
-        }
-      } catch (contactSyncErr) {
-        console.error('[contact] contact sync exception:', contactSyncErr)
-      }
     }
 
     const { error } = await resend.emails.send({

src/App.css

@@ -1144,6 +1144,69 @@
   padding: 0;
 }
 
+.guide-actions {
+  margin-top: 0.9rem;
+}
+
+.study-download-form {
+  margin-top: 0.8rem;
+  background: #121212;
+  border: 1px solid rgba(201, 168, 76, 0.22);
+  border-radius: 14px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.study-download-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.85rem;
+}
+
+.study-download-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  font-family: var(--brand-font-body);
+  font-weight: 500;
+  font-size: 0.82rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--brand-gold);
+}
+
+.study-download-form input {
+  background: #0c0c0c;
+  border: 1px solid rgba(201, 168, 76, 0.25);
+  border-radius: 8px;
+  color: var(--brand-warm-white);
+  font-family: var(--brand-font-body);
+  font-size: 1rem;
+  font-weight: 300;
+  padding: 0.7rem 0.85rem;
+  outline: none;
+  transition: border-color 200ms;
+}
+
+.study-download-form input:focus {
+  border-color: rgba(201, 168, 76, 0.7);
+}
+
+.study-download-form .btn-primary {
+  justify-content: center;
+  width: 100%;
+  margin-top: 0.2rem;
+}
+
+.study-download-success {
+  font-family: var(--brand-font-body);
+  font-size: 0.95rem;
+  color: #97cd85;
+  margin: 0;
+}
+
 /* ── Admin page ── */
 .admin-page {
   min-height: 100vh;
@@ -2231,6 +2294,10 @@
     margin: 0 auto;
   }
 
+  .study-download-grid {
+    grid-template-columns: 1fr;
+  }
+
   .admin-content-summary {
     grid-template-columns: 1fr;
   }

src/App.tsx

@@ -381,7 +381,7 @@ function QASection() {
 
 function ContactForm() {
   const navigate = useNavigate()
-  const [fields, setFields] = useState({ name: '', email: '', message: '', messageType: 'question' })
+  const [fields, setFields] = useState({ firstName: '', lastName: '', email: '', message: '', messageType: 'question' })
   const [subscribe, setSubscribe] = useState(true)
   const [honey, setHoney] = useState('')
   const [status, setStatus] = useState<'idle' | 'submitting' | 'error'>('idle')
@@ -430,8 +430,12 @@ function ContactForm() {
         onChange={e => setHoney(e.target.value)}
       />
       <label>
-        Name
+        First Name
-        <input type="text" name="name" required autoComplete="name" value={fields.name} onChange={handleChange} />
+        <input type="text" name="firstName" required autoComplete="given-name" value={fields.firstName} onChange={handleChange} />
+      </label>
+      <label>
+        Last Name
+        <input type="text" name="lastName" required autoComplete="family-name" value={fields.lastName} onChange={handleChange} />
       </label>
       <label>
         Email
@@ -466,6 +470,89 @@ function ContactForm() {
   )
 }
 
+function StudyDownloadForm() {
+  const [fields, setFields] = useState({ firstName: '', lastName: '', email: '' })
+  const [subscribe, setSubscribe] = useState(true)
+  const [honey, setHoney] = useState('')
+  const [status, setStatus] = useState<'idle' | 'submitting' | 'error' | 'success'>('idle')
+  const [errorMsg, setErrorMsg] = useState('')
+  const [successMsg, setSuccessMsg] = useState('')
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setFields(f => ({ ...f, [e.target.name]: e.target.value }))
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setStatus('submitting')
+    setErrorMsg('')
+    setSuccessMsg('')
+
+    try {
+      const res = await fetch('/api/study-downloads/titus', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...fields, subscribe, _honey: honey }),
+      })
+
+      const data = await res.json().catch(() => ({})) as { message?: string; downloadUrl?: string }
+      if (!res.ok || !data.downloadUrl) {
+        setErrorMsg(data.message ?? 'Could not process your request. Please try again.')
+        setStatus('error')
+        return
+      }
+
+      setStatus('success')
+      setSuccessMsg('Your download should start now. If not, use the link below.')
+      window.location.assign(data.downloadUrl)
+    } catch {
+      setErrorMsg('Could not connect. Please try again later.')
+      setStatus('error')
+    }
+  }
+
+  return (
+    <form className="study-download-form" onSubmit={handleSubmit} noValidate>
+      <input
+        type="text"
+        className="contact-honeypot"
+        tabIndex={-1}
+        autoComplete="off"
+        aria-hidden="true"
+        value={honey}
+        onChange={e => setHoney(e.target.value)}
+      />
+      <div className="study-download-grid">
+        <label>
+          First Name
+          <input type="text" name="firstName" required autoComplete="given-name" value={fields.firstName} onChange={handleChange} />
+        </label>
+        <label>
+          Last Name
+          <input type="text" name="lastName" required autoComplete="family-name" value={fields.lastName} onChange={handleChange} />
+        </label>
+        <label>
+          Email
+          <input type="email" name="email" required autoComplete="email" value={fields.email} onChange={handleChange} />
+        </label>
+      </div>
+      <label className="contact-consent">
+        <input
+          type="checkbox"
+          checked={subscribe}
+          onChange={e => setSubscribe(e.target.checked)}
+        />
+        <span>Subscribe me to updates from Verse by Verse with Nate.</span>
+      </label>
+      {status === 'error' && <p className="contact-error">{errorMsg}</p>}
+      {status === 'success' && <p className="study-download-success">{successMsg}</p>}
+      <button type="submit" className="btn-primary" disabled={status === 'submitting'}>
+        {status === 'submitting' ? 'Preparing Download...' : 'Download Titus Study'}
+      </button>
+    </form>
+  )
+}
+
 function AnalyticsConsentBanner() {
   const [choice, setChoice] = useState<'unknown' | 'accepted' | 'declined'>(() => {
     const saved = localStorage.getItem(CONSENT_KEY)
@@ -900,18 +987,23 @@ function LandingPage({ content }: { content: SiteContent }) {
             </svg>
           </div>
           <div className="guide-text">
-            <p className="eyebrow">Available on Amazon</p>
+            <p className="eyebrow">Free Download</p>
             <h2>{content.studyGuideTitle}</h2>
             <p>{content.studyGuideDescription}</p>
+            <StudyDownloadForm />
+            {content.studyGuideUrl && (
+              <div className="guide-actions">
                 <a
                   href={content.studyGuideUrl}
                   target="_blank"
                   rel="noreferrer"
-              className="btn-primary"
+                  className="btn-secondary"
                 >
-              Get the Book →
+                  Get Printed Copy on Amazon
                 </a>
               </div>
+            )}
+          </div>
         </div>
       </section>
 
@@ -1111,7 +1203,8 @@ function ThankYouPage() {
 
 function SubscribePage() {
   const navigate = useNavigate()
-  const [name, setName] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
   const [email, setEmail] = useState('')
   const [honey, setHoney] = useState('')
   const [status, setStatus] = useState<'idle' | 'submitting' | 'error'>('idle')
@@ -1127,7 +1220,8 @@ function SubscribePage() {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          name,
+          firstName,
+          lastName,
           email,
           messageType: 'general',
           message: 'Newsletter signup from subscribe page',
@@ -1170,14 +1264,25 @@ function SubscribePage() {
             onChange={e => setHoney(e.target.value)}
           />
           <label>
-            Name
+            First Name
             <input
               type="text"
-              name="name"
+              name="firstName"
               required
-              autoComplete="name"
+              autoComplete="given-name"
-              value={name}
+              value={firstName}
-              onChange={e => setName(e.target.value)}
+              onChange={e => setFirstName(e.target.value)}
+            />
+          </label>
+          <label>
+            Last Name
+            <input
+              type="text"
+              name="lastName"
+              required
+              autoComplete="family-name"
+              value={lastName}
+              onChange={e => setLastName(e.target.value)}
             />
           </label>
           <label>