diff --git a/package.json b/package.json index 7b56828..02565b5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "queuenorth-website", "private": true, - "version": "0.6.0", + "version": "0.6.1", "type": "module", "scripts": { "dev": "concurrently \"vite\" \"node server/index.js\"", diff --git a/server/index.js b/server/index.js index 14d95aa..97f0bc7 100644 --- a/server/index.js +++ b/server/index.js @@ -66,7 +66,7 @@ const apiLimiter = rateLimit({ const cspDirectives = { defaultSrc: ["'self'"], scriptSrc: ["'self'"], - styleSrc: ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'], + styleSrc: ["'self'", 'https://fonts.googleapis.com'], fontSrc: ["'self'", 'https://fonts.gstatic.com'], imgSrc: ["'self'", 'data:'], connectSrc: ["'self'"], diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx index 8346e4d..11f00f2 100644 --- a/src/components/layout/Header.jsx +++ b/src/components/layout/Header.jsx @@ -110,7 +110,7 @@ const Header = () => {
{errors.company}
+ {debouncedErrors.company && ( +{debouncedErrors.company}
)}{errors.name}
+ {debouncedErrors.name && ( +{debouncedErrors.name}
)} @@ -225,8 +228,8 @@ const Contact = () => { placeholder="your.email@example.com" className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''} /> - {errors.email && ( -{errors.email}
+ {debouncedErrors.email && ( +{debouncedErrors.email}
)} @@ -293,8 +296,8 @@ const Contact = () => { rows={5} className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.message ? 'border-red-500 focus-visible:ring-red-500' : ''}`} /> - {errors.message && ( -{errors.message}
+ {debouncedErrors.message && ( +{debouncedErrors.message}
)} diff --git a/src/pages/Support.jsx b/src/pages/Support.jsx index e2368ac..dc54bec 100644 --- a/src/pages/Support.jsx +++ b/src/pages/Support.jsx @@ -6,6 +6,7 @@ import { Input } from '@/components/ui/Input' import { Textarea } from '@/components/ui/Textarea' import { Select } from '@/components/ui/Select' import { api } from '@/lib/api' +import { useDebounce } from '@/hooks/useDebounce' const Support = () => { const [formState, setFormState] = useState({ @@ -22,6 +23,8 @@ const Support = () => { email: '', issue: '', }) + // Debounce validation errors so they don't flash on every keystroke + const debouncedErrors = useDebounce(errors, 300) const mutation = useMutation({ mutationFn: (data) => api.post('/support', data), @@ -209,8 +212,8 @@ const Support = () => { placeholder="Your full name" className={errors.name ? 'border-red-500 focus-visible:ring-red-500' : ''} /> - {errors.name && ( -{errors.name}
+ {debouncedErrors.name && ( +{debouncedErrors.name}
)} @@ -228,8 +231,8 @@ const Support = () => { placeholder="Your company name" className={errors.company ? 'border-red-500 focus-visible:ring-red-500' : ''} /> - {errors.company && ( -{errors.company}
+ {debouncedErrors.company && ( +{debouncedErrors.company}
)} @@ -247,8 +250,8 @@ const Support = () => { placeholder="your.email@example.com" className={errors.email ? 'border-red-500 focus-visible:ring-red-500' : ''} /> - {errors.email && ( -{errors.email}
+ {debouncedErrors.email && ( +{debouncedErrors.email}
)} @@ -296,8 +299,8 @@ const Support = () => { rows={5} className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`} /> - {errors.issue && ( -{errors.issue}
+ {debouncedErrors.issue && ( +{debouncedErrors.issue}
)}