From 05b27d216ace51935af9a65d6383aa36b1219af0 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 14 Jun 2026 15:37:26 -0500
Subject: [PATCH] feat: Dockerfile/docker-compose updates, server improvements,
 contact form with recaptcha, API integration (batch 0.9.0)

---
 Dockerfile                              |   7 ++
 docker-compose.yml                      |   5 +
 server/index.js                         |  27 ++++-
 src/components/RecaptchaPlaceholder.jsx | 104 ++++++++++++++--
 src/lib/api.js                          |   2 +-
 src/pages/Contact.jsx                   | 150 ++++++++++++++----------
 6 files changed, 217 insertions(+), 78 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index b48e2bb..bdfdad1 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -15,6 +15,10 @@ RUN npm ci
 # Copy source files
 COPY . .
 
+# Public Vite values are compiled into the frontend bundle at build time.
+ARG VITE_RECAPTCHA_SITE_KEY=
+ENV VITE_RECAPTCHA_SITE_KEY=$VITE_RECAPTCHA_SITE_KEY
+
 # Build the frontend
 RUN npm run build
 
@@ -50,6 +54,9 @@ ENV ZOHO_CLIENT_ID=
 ENV ZOHO_CLIENT_SECRET=
 ENV ZOHO_REFRESH_TOKEN=
 ENV ZOHO_CASES_ENABLED=false
+ENV RECAPTCHA_ENABLED=false
+ENV RECAPTCHA_SECRET_KEY=
+ENV RECAPTCHA_MIN_SCORE=0.5
 
 # Create app directory structure
 RUN mkdir -p /app/db /app/logs
diff --git a/docker-compose.yml b/docker-compose.yml
index 2926a2b..f113cb0 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,6 +5,8 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        - VITE_RECAPTCHA_SITE_KEY=${VITE_RECAPTCHA_SITE_KEY:-}
     container_name: queuenorth-website
     ports:
       - "3001:3001"
@@ -26,6 +28,9 @@ services:
       - ZOHO_CLIENT_SECRET=
       - ZOHO_REFRESH_TOKEN=
       - ZOHO_REDIRECT_URI=
+      - RECAPTCHA_ENABLED=${RECAPTCHA_ENABLED:-false}
+      - RECAPTCHA_SECRET_KEY=${RECAPTCHA_SECRET_KEY:-}
+      - RECAPTCHA_MIN_SCORE=${RECAPTCHA_MIN_SCORE:-0.5}
     restart: unless-stopped
     # Container runs as non-root user (UID 1001) for security
 
diff --git a/server/index.js b/server/index.js
index aba41f5..823cfc1 100644
--- a/server/index.js
+++ b/server/index.js
@@ -1,7 +1,7 @@
 import express from 'express'
 import path from 'path'
 import { fileURLToPath } from 'url'
-import { existsSync, mkdirSync } from 'fs'
+import { existsSync, mkdirSync, readFileSync } from 'fs'
 import sqlite3 from 'better-sqlite3'
 import z from 'zod'
 import rateLimit from 'express-rate-limit'
@@ -13,6 +13,27 @@ const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 const app = express()
 
+const loadLocalEnv = () => {
+  const envPath = path.resolve(process.cwd(), '.env')
+  if (!existsSync(envPath)) return
+
+  const envFile = readFileSync(envPath, 'utf8')
+  for (const line of envFile.split(/\r?\n/)) {
+    const trimmed = line.trim()
+    if (!trimmed || trimmed.startsWith('#')) continue
+
+    const match = trimmed.match(/^([A-Za-z_][A-Za-z0-9_]*)=(.*)$/)
+    if (!match) continue
+
+    const [, key, rawValue] = match
+    if (process.env[key] !== undefined) continue
+
+    process.env[key] = rawValue.replace(/^(['"])(.*)\1$/, '$2')
+  }
+}
+
+loadLocalEnv()
+
 // Trust first proxy (Docker/reverse proxy) for correct client IP in rate limiting
 app.set('trust proxy', 1)
 const dbPath = path.join(__dirname, '../db/queuenorth.db')
@@ -68,7 +89,9 @@ const cspDirectives = {
   styleSrc: ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'],
   fontSrc: ["'self'", 'https://fonts.gstatic.com'],
   imgSrc: ["'self'", 'data:'],
-  connectSrc: isDev ? ["'self'", 'ws://localhost:*'] : ["'self'"],
+  connectSrc: isDev
+    ? ["'self'", 'ws://localhost:*', 'https://www.google.com/recaptcha/', 'https://www.gstatic.com/recaptcha/', 'https://recaptcha.google.com/recaptcha/']
+    : ["'self'", 'https://www.google.com/recaptcha/', 'https://www.gstatic.com/recaptcha/', 'https://recaptcha.google.com/recaptcha/'],
   frameSrc: ["'self'", 'https://crm.zoho.com', 'https://www.google.com/recaptcha/', 'https://recaptcha.google.com/recaptcha/'],
   objectSrc: ["'none'"],
   baseUri: ["'self'"],
diff --git a/src/components/RecaptchaPlaceholder.jsx b/src/components/RecaptchaPlaceholder.jsx
index bca80ec..2e6a846 100644
--- a/src/components/RecaptchaPlaceholder.jsx
+++ b/src/components/RecaptchaPlaceholder.jsx
@@ -1,16 +1,96 @@
-const RecaptchaPlaceholder = ({ error = '' }) => (
-  <div className={`rounded-md border bg-background px-4 py-3 ${error ? 'border-red-500' : 'border-border'}`}>
-    <div className="flex items-center justify-between gap-4">
-      <div>
-        <p className="text-sm font-semibold text-primary-navy">Security verification</p>
-        <p className="mt-1 text-xs text-soft-text">Google reCAPTCHA placeholder</p>
-      </div>
-      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-white">
-        <span className="h-4 w-4 rounded-sm border-2 border-primary-blue" aria-hidden="true" />
+import { useEffect, useRef, useState } from 'react'
+
+const siteKey = import.meta.env.VITE_RECAPTCHA_SITE_KEY
+
+let recaptchaScriptPromise
+
+const loadRecaptchaScript = () => {
+  if (window.grecaptcha?.render) return Promise.resolve(window.grecaptcha)
+  if (recaptchaScriptPromise) return recaptchaScriptPromise
+
+  recaptchaScriptPromise = new Promise((resolve, reject) => {
+    const existingScript = document.querySelector('script[src^="https://www.google.com/recaptcha/api.js"]')
+    if (existingScript) {
+      existingScript.addEventListener('load', () => resolve(window.grecaptcha), { once: true })
+      existingScript.addEventListener('error', reject, { once: true })
+      return
+    }
+
+    const script = document.createElement('script')
+    script.src = 'https://www.google.com/recaptcha/api.js?render=explicit'
+    script.async = true
+    script.defer = true
+    script.onload = () => resolve(window.grecaptcha)
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+
+  return recaptchaScriptPromise
+}
+
+const RecaptchaPlaceholder = ({ error = '', onVerify, onExpired, resetKey = 0 }) => {
+  const containerRef = useRef(null)
+  const widgetIdRef = useRef(null)
+  const [isReady, setIsReady] = useState(false)
+  const [loadError, setLoadError] = useState('')
+
+  useEffect(() => {
+    if (!siteKey || !containerRef.current) return undefined
+
+    let isMounted = true
+
+    loadRecaptchaScript()
+      .then((grecaptcha) => {
+        grecaptcha.ready(() => {
+          if (!isMounted || !containerRef.current || widgetIdRef.current !== null) return
+
+          widgetIdRef.current = grecaptcha.render(containerRef.current, {
+            sitekey: siteKey,
+            callback: (token) => {
+              onVerify?.(token)
+            },
+            'expired-callback': () => {
+              onExpired?.()
+            },
+            'error-callback': () => {
+              onExpired?.()
+              setLoadError('Security verification could not be completed. Please try again.')
+            },
+          })
+          setIsReady(true)
+        })
+      })
+      .catch(() => {
+        if (isMounted) {
+          setLoadError('Security verification could not load. Please refresh and try again.')
+        }
+      })
+
+    return () => {
+      isMounted = false
+    }
+  }, [onExpired, onVerify])
+
+  useEffect(() => {
+    if (widgetIdRef.current === null || !window.grecaptcha?.reset) return
+    window.grecaptcha.reset(widgetIdRef.current)
+  }, [resetKey])
+
+  if (!siteKey) {
+    return (
+      <div className="rounded-md border border-amber-400 bg-amber-50 px-4 py-3">
+        <p className="text-sm font-semibold text-primary-navy">Security verification is not configured.</p>
       </div>
+    )
+  }
+
+  return (
+    <div className={`rounded-md border bg-background px-4 py-3 ${error || loadError ? 'border-red-500' : 'border-border'}`}>
+      <div ref={containerRef} />
+      {!isReady && !loadError && <p className="text-sm text-soft-text">Loading security verification...</p>}
+      {(error || loadError) && <p className="mt-2 text-xs text-red-500">{error || loadError}</p>}
     </div>
-    {error && <p className="mt-2 text-xs text-red-500">{error}</p>}
-  </div>
-)
+  )
+}
 
 export default RecaptchaPlaceholder
diff --git a/src/lib/api.js b/src/lib/api.js
index c916b28..02741ff 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -1,4 +1,4 @@
-const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001/api'
+const API_BASE_URL = import.meta.env.VITE_API_URL || '/api'
 
 export async function submitLead(data) {
   const response = await fetch(`${API_BASE_URL}/leads`, {
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index 126e909..80f9171 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -1,14 +1,16 @@
 import SEO from '@/components/SEO'
-import { useState, useRef, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import { Textarea } from '@/components/ui/Textarea'
 import RecaptchaPlaceholder from '@/components/RecaptchaPlaceholder'
 import { ArrowRight } from 'lucide-react'
+import { submitLead } from '@/lib/api'
+
+const isRecaptchaConfigured = Boolean(import.meta.env.VITE_RECAPTCHA_SITE_KEY)
 
 const Contact = () => {
-  const formRef = useRef(null)
   const [formState, setFormState] = useState({
     'Last Name': '',
     Company: '',
@@ -16,6 +18,7 @@ const Contact = () => {
     Phone: '',
     'Zip Code': '',
     Description: '',
+    company_website: '',
   })
   const [errors, setErrors] = useState({
     'Last Name': '',
@@ -27,47 +30,14 @@ const Contact = () => {
   })
   const [debouncedErrors, setDebouncedErrors] = useState(errors)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [recaptchaToken, setRecaptchaToken] = useState('')
+  const [recaptchaResetKey, setRecaptchaResetKey] = useState(0)
 
   useEffect(() => {
     const t = setTimeout(() => setDebouncedErrors(errors), 300)
     return () => clearTimeout(t)
   }, [errors])
 
-  useEffect(() => {
-    const iframe = document.getElementById('zoho_webform_iframe')
-    if (!iframe) return
-
-    let fallbackTimer = null
-
-    const handleSuccess = () => {
-      if (fallbackTimer) clearTimeout(fallbackTimer)
-      setIsSubmitting(false)
-      toast.success("Thanks! We'll be in touch shortly.")
-      setFormState({ 'Last Name': '', Company: '', Email: '', Phone: '', 'Zip Code': '', Description: '' })
-      setErrors({ 'Last Name': '', Company: '', Email: '', 'Zip Code': '', Description: '', recaptcha_token: '' })
-    }
-
-    const handleLoad = () => { if (isSubmitting) handleSuccess() }
-
-    if (isSubmitting) {
-      fallbackTimer = setTimeout(handleSuccess, 3500)
-    }
-
-    iframe.addEventListener('load', handleLoad)
-    return () => {
-      iframe.removeEventListener('load', handleLoad)
-      if (fallbackTimer) clearTimeout(fallbackTimer)
-    }
-  }, [isSubmitting])
-
-  useEffect(() => {
-    const script = document.createElement('script')
-    script.id = 'wf_anal'
-    script.src = 'https://crm.zohopublic.com/crm/WebFormAnalyticsServeServlet?rid=e44e9662530fc5bd9cdd3c43501fc243f89ba03759e7946c4b5e5016795b606b59b54d0e73c68671b2140fac5c8e788agid3b907524e85f9cba94899d77d7200771ee5d0ea567c43ec341d7b2ce40324d40gid26922a9cd1e8191a5f58ecb2524e0d22b8dd027eb943658ee681ab6890436af2gidefa1b1002d15951a0a2ac36cb33cdb4b5c6aeb110e6f4ac68b764345b9429653&tw=e048253ca680b107993ed5922e00cc1ebab3de97e797fce56fc6ad6af0dfc0bc'
-    document.body.appendChild(script)
-    return () => { document.getElementById('wf_anal')?.remove() }
-  }, [])
-
   const validateForm = () => {
     const newErrors = { 'Last Name': '', Company: '', Email: '', 'Zip Code': '', Description: '', recaptcha_token: '' }
     if (!formState.Company.trim()) newErrors.Company = 'Company name is required'
@@ -80,6 +50,9 @@ const Contact = () => {
     } else if (!emailRegex.test(formState.Email)) {
       newErrors.Email = 'Please enter a valid email address'
     }
+    if (isRecaptchaConfigured && !recaptchaToken) {
+      newErrors.recaptcha_token = 'Security verification is required'
+    }
     const hasErrors = Object.values(newErrors).some(error => error !== '')
     setErrors(newErrors)
     if (hasErrors) {
@@ -89,14 +62,61 @@ const Contact = () => {
     return true
   }
 
-  const handleSubmit = (e) => {
+  const resetForm = () => {
+    setFormState({
+      'Last Name': '',
+      Company: '',
+      Email: '',
+      Phone: '',
+      'Zip Code': '',
+      Description: '',
+      company_website: '',
+    })
+    setErrors({ 'Last Name': '', Company: '', Email: '', 'Zip Code': '', Description: '', recaptcha_token: '' })
+    setRecaptchaToken('')
+    setRecaptchaResetKey(prev => prev + 1)
+  }
+
+  const mapApiErrors = (fields = {}) => ({
+    'Last Name': fields.name || '',
+    Company: fields.company || '',
+    Email: fields.email || '',
+    'Zip Code': fields.zip || '',
+    Description: fields.message || '',
+    recaptcha_token: fields.recaptcha_token || '',
+  })
+
+  const handleSubmit = async (e) => {
     e.preventDefault()
     if (!validateForm()) return
     setIsSubmitting(true)
-    if (typeof _wfa_track !== 'undefined' && _wfa_track.wfa_submit) {
-      _wfa_track.wfa_submit(e)
+
+    try {
+      const result = await submitLead({
+        company: formState.Company,
+        name: formState['Last Name'],
+        email: formState.Email,
+        phone: formState.Phone,
+        zip: formState['Zip Code'],
+        message: formState.Description,
+        recaptcha_token: recaptchaToken,
+        company_website: formState.company_website,
+      })
+
+      toast.success(result.message || "Thanks! We'll be in touch shortly.")
+      resetForm()
+    } catch (err) {
+      if (err.fields) {
+        setErrors(mapApiErrors(err.fields))
+        if (err.fields.recaptcha_token) {
+          setRecaptchaToken('')
+          setRecaptchaResetKey(prev => prev + 1)
+        }
+      }
+      toast.error(err.message || 'Failed to submit lead')
+    } finally {
+      setIsSubmitting(false)
     }
-    formRef.current.submit()
   }
 
   const handleChange = (e) => {
@@ -105,6 +125,16 @@ const Contact = () => {
     if (errors[name]) setErrors(prev => ({ ...prev, [name]: '' }))
   }
 
+  const handleRecaptchaVerify = useCallback((token) => {
+    setRecaptchaToken(token)
+    setErrors(prev => ({ ...prev, recaptcha_token: '' }))
+  }, [])
+
+  const handleRecaptchaExpired = useCallback(() => {
+    setRecaptchaToken('')
+    setErrors(prev => ({ ...prev, recaptcha_token: 'Security verification expired. Please try again.' }))
+  }, [])
+
   const contactDetails = [
     {
       label: 'Phone',
@@ -240,26 +270,22 @@ const Contact = () => {
               <p className="text-soft-text text-sm mb-8">We typically respond within one business day.</p>
 
               <form
-                ref={formRef}
                 id="contact-form"
-                name="WebToLeads7130861000000581796"
-                method="POST"
-                action="https://crm.zoho.com/crm/WebToLeadForm"
-                target="zoho_webform_iframe"
-                acceptCharset="UTF-8"
                 onSubmit={handleSubmit}
                 noValidate
                 className={`space-y-5 ${isSubmitting ? 'opacity-70 pointer-events-none' : ''}`}
               >
-                {/* Zoho required hidden fields */}
-                <input type="hidden" name="xnQsjsdp" value="b78607b2ef073f134a736184c22aa442ba026b6b00cfdbcb8078d8dee0bb1bbd" />
-                <input type="hidden" name="zc_gad" id="zc_gad" value="" />
-                <input type="hidden" name="xmIwtLD" value="e1201f09c921b74ca7844fca8689433ad14277423595fe88de0e4cd6c58e43e743fb001043cb5229e129ff4ab8b2beea" />
-                <input type="hidden" name="actionType" value="TGVhZHM=" />
-                <input type="hidden" name="returnURL" value="null" />
-
                 {/* Honeypot */}
-                <input type="text" name="aG9uZXlwb3Q" defaultValue="" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ display: 'none' }} readOnly />
+                <input
+                  type="text"
+                  name="company_website"
+                  value={formState.company_website}
+                  onChange={handleChange}
+                  tabIndex={-1}
+                  autoComplete="off"
+                  aria-hidden="true"
+                  style={{ display: 'none' }}
+                />
 
                 {/* Company */}
                 <div>
@@ -368,7 +394,12 @@ const Contact = () => {
                   {debouncedErrors.Description && <p className="text-xs text-red-500 mt-1">{debouncedErrors.Description}</p>}
                 </div>
 
-                <RecaptchaPlaceholder error={debouncedErrors.recaptcha_token} />
+                <RecaptchaPlaceholder
+                  error={debouncedErrors.recaptcha_token}
+                  onVerify={handleRecaptchaVerify}
+                  onExpired={handleRecaptchaExpired}
+                  resetKey={recaptchaResetKey}
+                />
 
                 <Button type="submit" className="w-full h-11" disabled={isSubmitting}>
                   {isSubmitting ? (
@@ -384,13 +415,6 @@ const Contact = () => {
                   )}
                 </Button>
               </form>
-
-              <iframe
-                name="zoho_webform_iframe"
-                id="zoho_webform_iframe"
-                title="Zoho form submission"
-                style={{ display: 'none' }}
-              />
             </div>
           </div>
         </div>