feat(forms): builder UI, management pages, and public fill page (Phase 3)
- components/forms/form-renderer.tsx: one controlled renderer for all 8 field types, shared by the builder preview and the public page - components/forms/form-builder.tsx: easy builder — label-only field creation (keys auto-derived and de-duped at save), one-click type buttons, up/down reordering, inline options editor, live preview; edit mode adds publish/close/draft/delete and copy-public-link - /forms directory, /forms/new, /forms/[id]/edit, /forms/[id]/results (CSV download). Server-gated by lib/forms-guard.ts (forms.manage via the same RPC the RLS uses; RLS remains the real boundary) - public app/f/[slug] (outside the app group): getPublicForm serves only published public forms — members-only forms are never exposed there; waiver consent, anon email capture, signed-in gate for public_auth, thank-you state - sidebar "Forms & waivers" link; sonner toasts (codebase convention) - ARCHITECTURE + HANDOFF updated 285/285 tests, build clean, all four routes compiled. No deploy.
This commit is contained in:
Moheeb Zara
@@ -0,0 +1,443 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { ArrowUp, ArrowDown, Trash2, Plus } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { SectionTitle } from '@/components/ui/page-title'
|
||||
import { useConfirm } from '@/components/ui/confirm'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
createForm,
|
||||
updateForm,
|
||||
setFormStatus,
|
||||
deleteForm,
|
||||
} from '@/lib/actions'
|
||||
import { formFieldTypes } from '@/lib/validations'
|
||||
import type { FormField } from '@/lib/forms-schema'
|
||||
import { FormRenderer } from './form-renderer'
|
||||
|
||||
type Kind = 'form' | 'waiver'
|
||||
type Visibility = 'public_anon' | 'public_auth' | 'members'
|
||||
type Status = 'draft' | 'published' | 'closed'
|
||||
|
||||
export type BuilderForm = {
|
||||
id?: string
|
||||
slug: string
|
||||
title: string
|
||||
description: string
|
||||
kind: Kind
|
||||
visibility: Visibility
|
||||
legal_text: string
|
||||
status?: Status
|
||||
schema: FormField[]
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<(typeof formFieldTypes)[number], string> = {
|
||||
short_text: 'Text',
|
||||
long_text: 'Paragraph',
|
||||
email: 'Email',
|
||||
number: 'Number',
|
||||
date: 'Date',
|
||||
checkbox: 'Checkbox',
|
||||
select: 'Dropdown',
|
||||
radio: 'Choice',
|
||||
}
|
||||
|
||||
function slugify(s: string, sep: '-' | '_') {
|
||||
const cleaned = s
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, sep)
|
||||
.replace(new RegExp(`^\\${sep}+|\\${sep}+$`, 'g'), '')
|
||||
return cleaned
|
||||
}
|
||||
|
||||
// Keys are derived from labels so the builder only ever asks for a label.
|
||||
// Duplicates and empties are made safe here, matching the server schema.
|
||||
function deriveKeys(fields: FormField[]): FormField[] {
|
||||
const seen = new Set<string>()
|
||||
return fields.map((f, i) => {
|
||||
let base = slugify(f.label || '', '_') || `field_${i + 1}`
|
||||
let key = base
|
||||
let n = 2
|
||||
while (seen.has(key)) key = `${base}_${n++}`
|
||||
seen.add(key)
|
||||
return { ...f, key }
|
||||
})
|
||||
}
|
||||
|
||||
export function FormBuilder({ initial }: { initial: BuilderForm }) {
|
||||
const router = useRouter()
|
||||
const confirm = useConfirm()
|
||||
const isEdit = Boolean(initial.id)
|
||||
|
||||
const [slug, setSlug] = useState(initial.slug)
|
||||
const [slugTouched, setSlugTouched] = useState(isEdit)
|
||||
const [title, setTitle] = useState(initial.title)
|
||||
const [description, setDescription] = useState(initial.description)
|
||||
const [kind, setKind] = useState<Kind>(initial.kind)
|
||||
const [visibility, setVisibility] = useState<Visibility>(initial.visibility)
|
||||
const [legalText, setLegalText] = useState(initial.legal_text)
|
||||
const [fields, setFields] = useState<FormField[]>(initial.schema)
|
||||
const [preview, setPreview] = useState<Record<string, unknown>>({})
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
function onTitle(v: string) {
|
||||
setTitle(v)
|
||||
if (!isEdit && !slugTouched) setSlug(slugify(v, '-'))
|
||||
}
|
||||
|
||||
function addField(type: (typeof formFieldTypes)[number]) {
|
||||
setFields(f => [
|
||||
...f,
|
||||
{
|
||||
key: '',
|
||||
type,
|
||||
label: `Untitled ${TYPE_LABELS[type]}`,
|
||||
required: false,
|
||||
options: type === 'select' || type === 'radio' ? ['Option 1'] : undefined,
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
function patch(i: number, p: Partial<FormField>) {
|
||||
setFields(f => f.map((x, idx) => (idx === i ? { ...x, ...p } : x)))
|
||||
}
|
||||
|
||||
function move(i: number, dir: -1 | 1) {
|
||||
setFields(f => {
|
||||
const j = i + dir
|
||||
if (j < 0 || j >= f.length) return f
|
||||
const next = [...f]
|
||||
;[next[i], next[j]] = [next[j], next[i]]
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
async function removeField(i: number) {
|
||||
const ok = await confirm({
|
||||
title: 'Remove this field?',
|
||||
description: 'It will be gone from the form. Save to make it permanent.',
|
||||
destructive: true,
|
||||
confirmText: 'Remove',
|
||||
})
|
||||
if (ok) setFields(f => f.filter((_, idx) => idx !== i))
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!title.trim()) {
|
||||
toast.error('Title is required')
|
||||
return
|
||||
}
|
||||
setSaving(true)
|
||||
const schema = deriveKeys(fields)
|
||||
const common = {
|
||||
title: title.trim(),
|
||||
description: description.trim() || null,
|
||||
visibility,
|
||||
schema,
|
||||
legal_text: kind === 'waiver' ? legalText : null,
|
||||
}
|
||||
const res = isEdit
|
||||
? await updateForm({ formId: initial.id, ...common })
|
||||
: await createForm({ slug, kind, ...common })
|
||||
setSaving(false)
|
||||
|
||||
if ('error' in res && res.error) {
|
||||
toast.error(res.error || 'Could not save')
|
||||
return
|
||||
}
|
||||
toast.success(isEdit ? 'Form saved' : 'Form created')
|
||||
router.push('/forms')
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function changeStatus(status: Status) {
|
||||
setBusy(true)
|
||||
const res = await setFormStatus({ formId: initial.id, status })
|
||||
setBusy(false)
|
||||
if ('error' in res && res.error) {
|
||||
toast.error(res.error || 'Could not update')
|
||||
return
|
||||
}
|
||||
toast.success(`Form ${status}`)
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
const ok = await confirm({
|
||||
title: 'Delete this form?',
|
||||
description: 'This cannot be undone. Forms with submissions cannot be deleted.',
|
||||
destructive: true,
|
||||
confirmText: 'Delete',
|
||||
})
|
||||
if (!ok) return
|
||||
setBusy(true)
|
||||
const res = await deleteForm({ formId: initial.id })
|
||||
setBusy(false)
|
||||
if ('error' in res && res.error) {
|
||||
toast.error(res.error || 'Could not delete')
|
||||
return
|
||||
}
|
||||
toast.success('Form deleted')
|
||||
router.push('/forms')
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
const publicUrl =
|
||||
typeof window !== 'undefined' ? `${window.location.origin}/f/${initial.slug}` : `/f/${initial.slug}`
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* Editor */}
|
||||
<div className="space-y-6">
|
||||
{isEdit && (
|
||||
<div className="flex flex-wrap items-center gap-2 rounded-lg border p-3">
|
||||
<Badge variant={initial.status === 'published' ? 'default' : 'secondary'}>
|
||||
{initial.status}
|
||||
</Badge>
|
||||
{initial.status !== 'published' && (
|
||||
<Button size="sm" disabled={busy} onClick={() => changeStatus('published')}>
|
||||
Publish
|
||||
</Button>
|
||||
)}
|
||||
{initial.status === 'published' && (
|
||||
<Button size="sm" variant="secondary" disabled={busy} onClick={() => changeStatus('closed')}>
|
||||
Close
|
||||
</Button>
|
||||
)}
|
||||
{initial.status !== 'draft' && (
|
||||
<Button size="sm" variant="ghost" disabled={busy} onClick={() => changeStatus('draft')}>
|
||||
Back to draft
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="ghost" className="text-destructive" disabled={busy} onClick={remove}>
|
||||
<Trash2 className="size-4" /> Delete
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isEdit && initial.status === 'published' && visibility !== 'members' && (
|
||||
<div className="flex items-center gap-2 rounded-lg border bg-muted/40 p-3 text-sm">
|
||||
<span className="truncate font-mono text-xs">{publicUrl}</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
navigator.clipboard?.writeText(publicUrl)
|
||||
toast.success('Link copied')
|
||||
}}
|
||||
>
|
||||
Copy link
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<SectionTitle>Form details</SectionTitle>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fb-title">Title</Label>
|
||||
<Input id="fb-title" value={title} onChange={e => onTitle(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fb-slug">Link slug</Label>
|
||||
<Input
|
||||
id="fb-slug"
|
||||
value={slug}
|
||||
disabled={isEdit}
|
||||
onChange={e => {
|
||||
setSlugTouched(true)
|
||||
setSlug(e.target.value)
|
||||
}}
|
||||
/>
|
||||
{isEdit ? (
|
||||
<p className="text-xs text-muted-foreground">The slug cannot change after creation.</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">Public address: /f/{slug || '…'}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fb-desc">Description</Label>
|
||||
<Textarea
|
||||
id="fb-desc"
|
||||
rows={2}
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fb-kind">Type</Label>
|
||||
<select
|
||||
id="fb-kind"
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm disabled:opacity-50"
|
||||
value={kind}
|
||||
disabled={isEdit}
|
||||
onChange={e => setKind(e.target.value as Kind)}
|
||||
>
|
||||
<option value="form">Form</option>
|
||||
<option value="waiver">Waiver</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fb-vis">Who can submit</Label>
|
||||
<select
|
||||
id="fb-vis"
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm"
|
||||
value={visibility}
|
||||
onChange={e => setVisibility(e.target.value as Visibility)}
|
||||
>
|
||||
<option value="members">Members only</option>
|
||||
<option value="public_auth">Anyone signed in</option>
|
||||
<option value="public_anon">Anyone (no account)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{kind === 'waiver' && (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fb-legal">Waiver / consent text</Label>
|
||||
<Textarea
|
||||
id="fb-legal"
|
||||
rows={5}
|
||||
value={legalText}
|
||||
onChange={e => setLegalText(e.target.value)}
|
||||
placeholder="The legal text the signer must agree to. Snapshotted into every signature."
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<SectionTitle>Fields</SectionTitle>
|
||||
{fields.map((f, i) => (
|
||||
<div key={i} className="space-y-2 rounded-lg border p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="shrink-0">
|
||||
{TYPE_LABELS[f.type]}
|
||||
</Badge>
|
||||
<Input
|
||||
aria-label={`Field ${i + 1} label`}
|
||||
value={f.label}
|
||||
onChange={e => patch(i, { label: e.target.value })}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
aria-label="Move up"
|
||||
disabled={i === 0}
|
||||
onClick={() => move(i, -1)}
|
||||
>
|
||||
<ArrowUp className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
aria-label="Move down"
|
||||
disabled={i === fields.length - 1}
|
||||
onClick={() => move(i, 1)}
|
||||
>
|
||||
<ArrowDown className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
aria-label="Remove field"
|
||||
className="text-destructive"
|
||||
onClick={() => removeField(i)}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{(f.type === 'select' || f.type === 'radio') && (
|
||||
<div className="space-y-1.5 pl-1">
|
||||
{(f.options ?? []).map((opt, oi) => (
|
||||
<div key={oi} className="flex items-center gap-2">
|
||||
<Input
|
||||
aria-label={`Option ${oi + 1}`}
|
||||
value={opt}
|
||||
onChange={e =>
|
||||
patch(i, {
|
||||
options: (f.options ?? []).map((o, k) => (k === oi ? e.target.value : o)),
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
aria-label="Remove option"
|
||||
onClick={() =>
|
||||
patch(i, { options: (f.options ?? []).filter((_, k) => k !== oi) })
|
||||
}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => patch(i, { options: [...(f.options ?? []), `Option ${(f.options?.length ?? 0) + 1}`] })}
|
||||
>
|
||||
<Plus className="size-4" /> Add option
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 pl-1">
|
||||
<Checkbox
|
||||
id={`req-${i}`}
|
||||
checked={f.required === true}
|
||||
onCheckedChange={c => patch(i, { required: c === true })}
|
||||
/>
|
||||
<Label htmlFor={`req-${i}`} className="font-normal">
|
||||
Required
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{formFieldTypes.map(t => (
|
||||
<Button key={t} size="sm" variant="outline" onClick={() => addField(t)}>
|
||||
<Plus className="size-4" /> {TYPE_LABELS[t]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={save} disabled={saving}>
|
||||
{saving ? 'Saving…' : isEdit ? 'Save changes' : 'Create form'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Live preview */}
|
||||
<div className="lg:sticky lg:top-4 h-fit space-y-3 rounded-lg border p-4">
|
||||
<SectionTitle>Live preview</SectionTitle>
|
||||
<h2 className="text-lg font-semibold">{title || 'Untitled form'}</h2>
|
||||
{description && <p className="text-sm text-muted-foreground">{description}</p>}
|
||||
{kind === 'waiver' && legalText && (
|
||||
<div className="whitespace-pre-wrap rounded-md bg-muted/40 p-3 text-sm">{legalText}</div>
|
||||
)}
|
||||
<FormRenderer
|
||||
fields={deriveKeys(fields)}
|
||||
values={preview}
|
||||
onChange={(k, v) => setPreview(p => ({ ...p, [k]: v }))}
|
||||
idPrefix="pv"
|
||||
/>
|
||||
{kind === 'waiver' && (
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" disabled /> I agree to the waiver above
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
'use client'
|
||||
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import type { FormField } from '@/lib/forms-schema'
|
||||
|
||||
// Renders a form's field schema as a controlled, fillable form. Shared by the
|
||||
// builder's live preview and the public /f/[slug] page so the two can never
|
||||
// drift.
|
||||
export function FormRenderer({
|
||||
fields,
|
||||
values,
|
||||
onChange,
|
||||
disabled,
|
||||
idPrefix = 'f',
|
||||
}: {
|
||||
fields: FormField[]
|
||||
values: Record<string, unknown>
|
||||
onChange: (key: string, value: unknown) => void
|
||||
disabled?: boolean
|
||||
idPrefix?: string
|
||||
}) {
|
||||
if (fields.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No fields yet. Add one to see it here.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{fields.map(field => {
|
||||
const id = `${idPrefix}-${field.key}`
|
||||
const v = values[field.key]
|
||||
return (
|
||||
<div key={field.key} className="space-y-1.5">
|
||||
{field.type !== 'checkbox' && (
|
||||
<Label htmlFor={id}>
|
||||
{field.label}
|
||||
{field.required && <span className="text-destructive"> *</span>}
|
||||
</Label>
|
||||
)}
|
||||
|
||||
{field.type === 'short_text' && (
|
||||
<Input
|
||||
id={id}
|
||||
value={(v as string) ?? ''}
|
||||
disabled={disabled}
|
||||
onChange={e => onChange(field.key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.type === 'long_text' && (
|
||||
<Textarea
|
||||
id={id}
|
||||
rows={4}
|
||||
value={(v as string) ?? ''}
|
||||
disabled={disabled}
|
||||
onChange={e => onChange(field.key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.type === 'email' && (
|
||||
<Input
|
||||
id={id}
|
||||
type="email"
|
||||
value={(v as string) ?? ''}
|
||||
disabled={disabled}
|
||||
onChange={e => onChange(field.key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.type === 'number' && (
|
||||
<Input
|
||||
id={id}
|
||||
type="number"
|
||||
value={v === undefined || v === null ? '' : String(v)}
|
||||
disabled={disabled}
|
||||
onChange={e => onChange(field.key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.type === 'date' && (
|
||||
<Input
|
||||
id={id}
|
||||
type="date"
|
||||
value={(v as string) ?? ''}
|
||||
disabled={disabled}
|
||||
onChange={e => onChange(field.key, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.type === 'checkbox' && (
|
||||
<div className="flex items-start gap-2">
|
||||
<Checkbox
|
||||
id={id}
|
||||
checked={v === true}
|
||||
disabled={disabled}
|
||||
onCheckedChange={c => onChange(field.key, c === true)}
|
||||
/>
|
||||
<Label htmlFor={id} className="font-normal leading-snug">
|
||||
{field.label}
|
||||
{field.required && <span className="text-destructive"> *</span>}
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{field.type === 'select' && (
|
||||
<select
|
||||
id={id}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm disabled:opacity-50"
|
||||
value={(v as string) ?? ''}
|
||||
disabled={disabled}
|
||||
onChange={e => onChange(field.key, e.target.value)}
|
||||
>
|
||||
<option value="">Select…</option>
|
||||
{(field.options ?? []).map(o => (
|
||||
<option key={o} value={o}>
|
||||
{o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
|
||||
{field.type === 'radio' && (
|
||||
<div className="space-y-1.5" role="radiogroup" aria-label={field.label}>
|
||||
{(field.options ?? []).map(o => (
|
||||
<label key={o} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="radio"
|
||||
name={id}
|
||||
value={o}
|
||||
checked={v === o}
|
||||
disabled={disabled}
|
||||
onChange={() => onChange(field.key, o)}
|
||||
/>
|
||||
{o}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{field.help && field.type !== 'checkbox' && (
|
||||
<p className="text-xs text-muted-foreground">{field.help}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user