feat: Dockerfile/docker-compose updates, server improvements, contact form with recaptcha, API integration (batch 0.9.0)
This commit is contained in:
null
parent
76cb558e8b
commit
05b27d216a
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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'"],
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`, {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue