Access denied

Only @val.town Google accounts can access this app.

\n Try a different account →\n `,\n { status: 403, headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n\n const sessionId = crypto.randomUUID();\n await sqlite.execute({\n sql: \"INSERT INTO sessions (id, email) VALUES (?, ?)\",\n args: [sessionId, user.email],\n });\n\n return new Response(null, {\n status: 302,\n headers: {\n Location: \"/\",\n \"Set-Cookie\": `session=${sessionId}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=2592000`,\n },\n });\n});\n\napp.post(\"/auth/logout\", async (c) => {\n const sessionId = getCookie(c, \"session\");\n if (sessionId) {\n await sqlite.execute({ sql: \"DELETE FROM sessions WHERE id = ?\", args: [sessionId] });\n }\n return new Response(null, {\n status: 302,\n headers: {\n Location: \"/\",\n \"Set-Cookie\": \"session=; Path=/; HttpOnly; Max-Age=0\",\n },\n });\n});\n\napp.get(\"/api/me\", async (c) => {\n const session = await getSession(c);\n if (!session) return c.json({ error: \"Unauthorized\" }, 401);\n return c.json({ email: session.email });\n});\n\n// --- Forms (protected) ---\n\napp.get(\"/api/forms\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const result = await sqlite.execute(`\n SELECT f.*, COUNT(r.id) as response_count\n FROM forms f\n LEFT JOIN responses r ON r.form_id = f.id\n GROUP BY f.id\n ORDER BY f.created_at DESC\n `);\n return c.json(result.rows);\n});\n\napp.post(\"/api/forms\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const { title, description } = await c.req.json();\n const id = crypto.randomUUID();\n await sqlite.execute({\n sql: \"INSERT INTO forms (id, title, description) VALUES (?, ?, ?)\",\n args: [id, title, description || \"\"],\n });\n const result = await sqlite.execute({ sql: \"SELECT * FROM forms WHERE id = ?\", args: [id] });\n return c.json(result.rows[0], 201);\n});\n\n// Public: used by form filler\napp.get(\"/api/forms/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const formResult = await sqlite.execute({ sql: \"SELECT * FROM forms WHERE id = ?\", args: [id] });\n if (!formResult.rows.length) return c.json({ error: \"Not found\" }, 404);\n const questionsResult = await sqlite.execute({\n sql: \"SELECT * FROM questions WHERE form_id = ? ORDER BY order_num ASC\",\n args: [id],\n });\n return c.json({\n ...formResult.rows[0],\n questions: questionsResult.rows.map((q) => ({\n ...q,\n options: JSON.parse((q.options as string) || \"[]\"),\n })),\n });\n});\n\napp.put(\"/api/forms/:id\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = c.req.param(\"id\");\n const { title, description } = await c.req.json();\n await sqlite.execute({\n sql: \"UPDATE forms SET title = ?, description = ? WHERE id = ?\",\n args: [title, description || \"\", id],\n });\n const result = await sqlite.execute({ sql: \"SELECT * FROM forms WHERE id = ?\", args: [id] });\n return c.json(result.rows[0]);\n});\n\napp.delete(\"/api/forms/:id\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = c.req.param(\"id\");\n await sqlite.batch([\n {\n sql: \"DELETE FROM answers WHERE response_id IN (SELECT id FROM responses WHERE form_id = ?)\",\n args: [id],\n },\n { sql: \"DELETE FROM responses WHERE form_id = ?\", args: [id] },\n { sql: \"DELETE FROM questions WHERE form_id = ?\", args: [id] },\n { sql: \"DELETE FROM forms WHERE id = ?\", args: [id] },\n ]);\n return c.json({ ok: true });\n});\n\n// --- Questions (protected) ---\n\napp.post(\"/api/forms/:id/questions\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const formId = c.req.param(\"id\");\n const { type, text, options, required } = await c.req.json();\n const countResult = await sqlite.execute({\n sql: \"SELECT COUNT(*) as count FROM questions WHERE form_id = ?\",\n args: [formId],\n });\n const orderNum = (countResult.rows[0].count as number) + 1;\n const id = crypto.randomUUID();\n await sqlite.execute({\n sql: \"INSERT INTO questions (id, form_id, type, text, options, order_num, required) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [id, formId, type, text, JSON.stringify(options || []), orderNum, required !== false ? 1 : 0],\n });\n const result = await sqlite.execute({ sql: \"SELECT * FROM questions WHERE id = ?\", args: [id] });\n const q = result.rows[0];\n return c.json({ ...q, options: JSON.parse((q.options as string) || \"[]\") }, 201);\n});\n\napp.put(\"/api/questions/:id\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = c.req.param(\"id\");\n const { type, text, options, required, order_num } = await c.req.json();\n await sqlite.execute({\n sql: \"UPDATE questions SET type = ?, text = ?, options = ?, required = ?, order_num = ? WHERE id = ?\",\n args: [type, text, JSON.stringify(options || []), required !== false ? 1 : 0, order_num, id],\n });\n const result = await sqlite.execute({ sql: \"SELECT * FROM questions WHERE id = ?\", args: [id] });\n const q = result.rows[0];\n return c.json({ ...q, options: JSON.parse((q.options as string) || \"[]\") });\n});\n\napp.delete(\"/api/questions/:id\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = c.req.param(\"id\");\n await sqlite.execute({ sql: \"DELETE FROM questions WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\n// --- Responses ---\n\n// Public: end users submit responses\napp.post(\"/api/forms/:id/responses\", async (c) => {\n const formId = c.req.param(\"id\");\n const { answers } = await c.req.json();\n const responseId = crypto.randomUUID();\n await sqlite.execute({\n sql: \"INSERT INTO responses (id, form_id) VALUES (?, ?)\",\n args: [responseId, formId],\n });\n if (answers?.length > 0) {\n await sqlite.batch(\n answers.map((a: { question_id: string; value: string }) => ({\n sql: \"INSERT INTO answers (id, response_id, question_id, value) VALUES (?, ?, ?, ?)\",\n args: [crypto.randomUUID(), responseId, a.question_id, a.value],\n })),\n );\n }\n return c.json({ id: responseId }, 201);\n});\n\n// Protected: only creators see responses\napp.get(\"/api/forms/:id/responses\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const formId = c.req.param(\"id\");\n const responsesResult = await sqlite.execute({\n sql: \"SELECT * FROM responses WHERE form_id = ? ORDER BY submitted_at DESC\",\n args: [formId],\n });\n const responses = await Promise.all(\n responsesResult.rows.map(async (r) => {\n const answersResult = await sqlite.execute({\n sql: `SELECT a.*, q.text as question_text, q.type as question_type\n FROM answers a JOIN questions q ON a.question_id = q.id\n WHERE a.response_id = ? ORDER BY q.order_num ASC`,\n args: [r.id],\n });\n return { ...r, answers: answersResult.rows };\n }),\n );\n return c.json(responses);\n});\n\n// SPA catch-all\napp.get(\"*\", () => serveFile(\"/frontend/index.html\"));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[124],"50bd62a2-5eaa-11f1-ba3e-1607ee4eb77e",["D",1780422101593],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[118],"50bd613a-5eaa-11f1-ba3e-1607ee4eb77e",["D",1780422101593],[131],"pulls","branches","forks","envVars",{"_144":20,"_389":20},"connections",{"_144":51,"_388":20},"unfilledCount","emptyCount",{"_44":378,"_13":131,"_91":130,"_54":-5,"_46":47,"_367":51,"_368":287,"_48":459,"_50":20,"_94":95,"_370":-5,"_96":24,"_372":-5,"_404":460,"_330":461},{"_44":455,"_13":93,"_91":92,"_54":130,"_46":47,"_367":51,"_368":287,"_48":456,"_50":20,"_94":95,"_370":-5,"_96":24,"_372":-5,"_404":457,"_330":458},{"_44":450,"_13":112,"_91":111,"_54":92,"_46":47,"_367":249,"_368":287,"_48":451,"_50":151,"_94":106,"_370":452,"_96":24,"_372":-5,"_404":453,"_330":454},{"_44":445,"_13":105,"_91":104,"_54":92,"_46":47,"_367":51,"_368":287,"_48":446,"_50":20,"_94":106,"_370":447,"_96":24,"_372":-5,"_404":448,"_330":449},{"_44":440,"_13":185,"_91":184,"_54":92,"_46":47,"_367":270,"_368":287,"_48":441,"_50":179,"_94":106,"_370":442,"_96":24,"_372":-5,"_404":443,"_330":444},{"_44":435,"_13":194,"_91":193,"_54":92,"_46":47,"_367":188,"_368":287,"_48":436,"_50":20,"_94":106,"_370":437,"_96":24,"_372":-5,"_404":438,"_330":439},{"_44":430,"_13":203,"_91":202,"_54":92,"_46":47,"_367":197,"_368":287,"_48":431,"_50":20,"_94":106,"_370":432,"_96":24,"_372":-5,"_404":433,"_330":434},{"_44":425,"_13":211,"_91":210,"_54":92,"_46":47,"_367":145,"_368":287,"_48":426,"_50":20,"_94":106,"_370":427,"_96":24,"_372":-5,"_404":428,"_330":429},{"_44":420,"_13":148,"_91":147,"_54":130,"_46":47,"_367":51,"_368":287,"_48":421,"_50":20,"_94":65,"_370":422,"_96":24,"_372":-5,"_404":423,"_330":424},{"_44":415,"_13":143,"_91":142,"_54":130,"_46":47,"_367":158,"_368":287,"_48":416,"_50":51,"_94":65,"_370":417,"_96":24,"_372":-5,"_404":418,"_330":419},{"_44":410,"_13":137,"_91":136,"_54":130,"_46":47,"_367":165,"_368":287,"_48":411,"_50":51,"_94":106,"_370":412,"_96":24,"_372":-5,"_404":413,"_330":414},{"_44":374,"_13":118,"_91":117,"_54":-5,"_46":47,"_367":51,"_368":287,"_48":407,"_50":20,"_94":65,"_370":376,"_96":24,"_372":-5,"_404":408,"_330":409},{"_44":366,"_13":124,"_91":123,"_54":-5,"_46":47,"_367":242,"_368":287,"_48":403,"_50":158,"_94":125,"_370":371,"_96":24,"_372":-5,"_404":405,"_330":406},["D",1780425138983],"children",[],[124],["D",1780422101593],[],[118],"808d6186-5eae-11f1-a975-1607ee4eb77e",["D",1780423899914],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element\");\ncreateRoot(root).render();\n",[],[131,137],"7e688b10-5eae-11f1-86ad-1607ee4eb77e",["D",1780423896306],"\n\n \n \n \n Forms\n \n \n \n \n

\n \n \n \n\n",[],[131,143],"50bd2e86-5eaa-11f1-ba3e-1607ee4eb77e",["D",1780422101593],"\n",[],[131,148],"d791c918-5eae-11f1-93a6-1607ee4eb77e",["D",1780424045906],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Answer {\n question_id: string;\n question_text: string;\n question_type: string;\n value: string;\n}\n\ninterface Response {\n id: string;\n form_id: string;\n submitted_at: number;\n answers: Answer[];\n}\n\ninterface Form {\n id: string;\n title: string;\n}\n\ninterface Props {\n formId: string;\n navigate: (path: string) => void;\n}\n\nexport function ResponsesView({ formId, navigate }: Props) {\n const [form, setForm] = useState

(null);\n const [responses, setResponses] = useState([]);\n const [loading, setLoading] = useState(true);\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n Promise.all([\n fetch(`/api/forms/${formId}`).then((r) => r.json()),\n fetch(`/api/forms/${formId}/responses`).then((r) => r.json()),\n ]).then(([formData, responsesData]) => {\n setForm(formData);\n setResponses(responsesData);\n setLoading(false);\n });\n }, [formId]);\n\n const formatValue = (answer: Answer) => {\n if (answer.question_type === \"multi_select\") {\n try {\n const arr = JSON.parse(answer.value);\n return Array.isArray(arr) ? arr.join(\", \") : answer.value;\n } catch {\n return answer.value;\n }\n }\n return answer.value;\n };\n\n const copyShareLink = () => {\n navigator.clipboard.writeText(`${window.location.origin}/fill/${formId}`);\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n };\n\n if (loading) {\n return (\n

\n Loading...\n

\n );\n }\n\n return (\n

\n \n\n

{form?.title}

\n {responses.length} response{responses.length !== 1 ? \"s\" : \"\"}\n

\n \n {copied ? \"Copied!\" : \"Copy Share Link\"}\n \n

\n\n {responses.length === 0 ? (\n

📭

No responses yet

Share the form link to start collecting responses

\n \n {copied ? \"Copied!\" : \"Copy Share Link\"}\n \n

\n ) : (\n

\n {responses.map((response, idx) => (\n \n

\n \n Response #{responses.length - idx}\n \n \n {new Date(response.submitted_at * 1000).toLocaleString()}\n \n

\n {response.answers.length === 0 ? (\n

No answers recorded

\n ) : (\n response.answers.map((answer) => (\n

\n {answer.question_text}\n

{formatValue(answer)}

\n ))\n )}\n

\n ))}\n

\n )}\n

\n \n );\n}\n",[],[131,93,211],"cbb34c3e-5eae-11f1-bf6a-1607ee4eb77e",["D",1780424025995],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Question {\n id: string;\n type: \"short_answer\" | \"long_answer\" | \"single_select\" | \"multi_select\";\n text: string;\n options: string[];\n required: boolean;\n}\n\ninterface Form {\n id: string;\n title: string;\n description: string;\n questions: Question[];\n}\n\ninterface Props {\n formId: string;\n navigate: (path: string) => void;\n}\n\nexport function FormFiller({ formId }: Props) {\n const [form, setForm] = useState(null);\n const [loading, setLoading] = useState(true);\n const [step, setStep] = useState<\"welcome\" | number | \"done\">(\"welcome\");\n const [answers, setAnswers] = useState>({});\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n fetch(`/api/forms/${formId}`)\n .then((r) => r.json())\n .then((data) => { setForm(data); setLoading(false); });\n }, [formId]);\n\n if (loading) {\n return (\n

\n Loading...\n

\n );\n }\n\n if (!form || !form.questions) {\n return (\n

\n Form not found.\n

\n );\n }\n\n if (step === \"done\") {\n return (\n

🎉

Thanks!

Your response has been recorded.

\n );\n }\n\n if (step === \"welcome\") {\n return (\n

{form.title}

\n {form.description && (\n

{form.description}

\n )}\n

{form.questions.length} question{form.questions.length !== 1 ? \"s\" : \"\"}

\n setStep(0)}\n className=\"bg-white text-purple-600 font-bold px-10 py-3 rounded-full text-lg hover:bg-purple-50 transition-colors shadow-lg\"\n >\n Start →\n \n

\n );\n }\n\n const idx = step as number;\n const q = form.questions[idx];\n const progress = ((idx + 1) / form.questions.length) * 100;\n const answer = answers[q.id] ?? (q.type === \"multi_select\" ? [] : \"\");\n\n const setAnswer = (val: string | string[]) => {\n setAnswers((a) => ({ ...a, [q.id]: val }));\n setError(\"\");\n };\n\n const canAdvance = () => {\n if (!q.required) return true;\n if (Array.isArray(answer)) return answer.length > 0;\n return (answer as string).trim().length > 0;\n };\n\n const advance = async () => {\n if (!canAdvance()) { setError(\"Please answer this question to continue.\"); return; }\n setError(\"\");\n if (idx < form.questions.length - 1) {\n setStep(idx + 1);\n } else {\n setSubmitting(true);\n const answerList = Object.entries(answers).map(([question_id, value]) => ({\n question_id,\n value: Array.isArray(value) ? JSON.stringify(value) : value,\n }));\n await fetch(`/api/forms/${formId}/responses`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ answers: answerList }),\n });\n setSubmitting(false);\n setStep(\"done\");\n }\n };\n\n const isLast = idx === form.questions.length - 1;\n\n return (\n

\n {/* Progress bar */}\n

\n \n

\n\n

\n {idx + 1} / {form.questions.length}\n

\n\n

\n {q.text}\n {q.required && *}\n

\n\n {error &&

{error}

}\n\n

\n {q.type === \"short_answer\" && (\n setAnswer(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && advance()}\n placeholder=\"Type your answer...\"\n className=\"w-full bg-transparent border-b-2 border-white border-opacity-40 focus:border-opacity-100 outline-none text-white text-xl py-2 placeholder-white placeholder-opacity-30 transition-all\"\n />\n )}\n\n {q.type === \"long_answer\" && (\n setAnswer(e.target.value)}\n placeholder=\"Type your answer...\"\n rows={4}\n className=\"w-full bg-white bg-opacity-10 border border-white border-opacity-30 focus:border-opacity-70 rounded-xl text-white text-lg p-4 placeholder-white placeholder-opacity-30 outline-none resize-none transition-all\"\n />\n )}\n\n {q.type === \"single_select\" && (\n

\n {q.options.map((opt, i) => (\n setAnswer(opt)}\n className={`w-full text-left px-5 py-3 rounded-xl border text-white font-medium transition-all flex items-center gap-3 ${\n answer === opt\n ? \"bg-white bg-opacity-20 border-white\"\n : \"bg-white bg-opacity-5 border-white border-opacity-25 hover:bg-opacity-10\"\n }`}\n >\n \n {String.fromCharCode(65 + i)}\n \n {opt}\n \n ))}\n

\n )}\n\n {q.type === \"multi_select\" && (\n

Select all that apply

\n {q.options.map((opt, i) => {\n const selected = (answer as string[]).includes(opt);\n return (\n {\n const cur = answer as string[];\n setAnswer(selected ? cur.filter((v) => v !== opt) : [...cur, opt]);\n }}\n className={`w-full text-left px-5 py-3 rounded-xl border text-white font-medium transition-all flex items-center gap-3 ${\n selected\n ? \"bg-white bg-opacity-20 border-white\"\n : \"bg-white bg-opacity-5 border-white border-opacity-25 hover:bg-opacity-10\"\n }`}\n >\n \n {selected ? \"✓\" : \"\"}\n \n {opt}\n \n );\n })}\n

\n )}\n

\n\n

\n { setError(\"\"); setStep(idx - 1); }}\n disabled={idx === 0}\n className=\"text-white opacity-50 hover:opacity-100 text-sm transition-opacity disabled:pointer-events-none\"\n >\n ← Back\n \n \n {submitting ? \"Submitting...\" : isLast ? \"Submit\" : \"Next →\"}\n \n

\n\n

\n Press Enter ↵ to continue\n

\n );\n}\n",[],[131,93,203],"b6a4abd0-5eae-11f1-a89d-1607ee4eb77e",["D",1780423990661],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ntype QuestionType = \"short_answer\" | \"long_answer\" | \"single_select\" | \"multi_select\";\n\ninterface Question {\n id?: string;\n type: QuestionType;\n text: string;\n options: string[];\n required: boolean;\n order_num?: number;\n}\n\ninterface Props {\n navigate: (path: string) => void;\n formId?: string;\n}\n\nconst QUESTION_TYPES: { value: QuestionType; label: string; icon: string }[] = [\n { value: \"short_answer\", label: \"Short Answer\", icon: \"—\" },\n { value: \"long_answer\", label: \"Long Answer\", icon: \"≡\" },\n { value: \"single_select\", label: \"Single Select\", icon: \"◉\" },\n { value: \"multi_select\", label: \"Multi Select\", icon: \"☑\" },\n];\n\nconst blank = (): Question => ({ type: \"short_answer\", text: \"\", options: [], required: true });\n\nexport function FormBuilder({ navigate, formId }: Props) {\n const isEditing = !!formId;\n const [title, setTitle] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n const [questions, setQuestions] = useState([]);\n const [saving, setSaving] = useState(false);\n const [loading, setLoading] = useState(isEditing);\n const [addingQuestion, setAddingQuestion] = useState(false);\n const [newQ, setNewQ] = useState(blank());\n const [optionInput, setOptionInput] = useState(\"\");\n\n useEffect(() => {\n if (!isEditing) return;\n fetch(`/api/forms/${formId}`)\n .then((r) => r.json())\n .then((data) => {\n setTitle(data.title);\n setDescription(data.description || \"\");\n setQuestions(data.questions || []);\n setLoading(false);\n });\n }, [formId]);\n\n const saveForm = async () => {\n if (!title.trim()) return;\n setSaving(true);\n if (isEditing) {\n await fetch(`/api/forms/${formId}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, description }),\n });\n } else {\n const res = await fetch(\"/api/forms\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, description }),\n });\n const form = await res.json();\n for (const q of questions) {\n await fetch(`/api/forms/${form.id}/questions`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(q),\n });\n }\n }\n setSaving(false);\n navigate(\"/\");\n };\n\n const addQuestion = async () => {\n if (!newQ.text.trim()) return;\n if (isEditing) {\n const res = await fetch(`/api/forms/${formId}/questions`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(newQ),\n });\n const q = await res.json();\n setQuestions((qs) => [...qs, q]);\n } else {\n setQuestions((qs) => [...qs, { ...newQ, order_num: qs.length + 1 }]);\n }\n setNewQ(blank());\n setOptionInput(\"\");\n setAddingQuestion(false);\n };\n\n const deleteQuestion = async (idx: number, qId?: string) => {\n if (isEditing && qId) {\n await fetch(`/api/questions/${qId}`, { method: \"DELETE\" });\n }\n setQuestions((qs) => qs.filter((_, i) => i !== idx));\n };\n\n const addOption = () => {\n if (!optionInput.trim()) return;\n setNewQ((q) => ({ ...q, options: [...q.options, optionInput.trim()] }));\n setOptionInput(\"\");\n };\n\n const needsOptions = newQ.type === \"single_select\" || newQ.type === \"multi_select\";\n\n if (loading) {\n return (\n

\n Loading...\n

\n );\n }\n\n return (\n

\n \n

\n {isEditing ? \"Edit Form\" : \"New Form\"}\n

\n\n {/* Form metadata */}\n

\n Form Title *\n setTitle(e.target.value)}\n placeholder=\"e.g. Customer Feedback\"\n className=\"w-full border border-gray-200 rounded-lg px-3 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-300\"\n />\n

\n \n Description (optional)\n \n setDescription(e.target.value)}\n placeholder=\"Brief description of the form\"\n className=\"w-full border border-gray-200 rounded-lg px-3 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-300\"\n />\n

\n\n {/* Questions list */}\n {questions.length > 0 && (\n

\n {questions.map((q, i) => (\n \n

\n \n {QUESTION_TYPES.find((t) => t.value === q.type)?.label}\n \n {q.required && Required}\n

{q.text}

\n {q.options.length > 0 && (\n

{q.options.join(\" · \")}

\n )}\n

\n deleteQuestion(i, q.id)}\n className=\"ml-3 text-gray-300 hover:text-red-400 text-lg leading-none\"\n >\n ✕\n \n

\n ))}\n

\n )}\n\n {/* Add question panel */}\n {addingQuestion ? (\n

New Question

\n\n

\n Type\n

\n {QUESTION_TYPES.map((t) => (\n setNewQ((q) => ({ ...q, type: t.value, options: [] }))}\n className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${\n newQ.type === t.value\n ? \"border-purple-500 bg-purple-50 text-purple-700\"\n : \"border-gray-200 text-gray-600 hover:bg-gray-50\"\n }`}\n >\n {t.icon} {t.label}\n \n ))}\n

\n\n

\n \n Question Text *\n \n setNewQ((q) => ({ ...q, text: e.target.value }))}\n placeholder=\"e.g. What is your name?\"\n className=\"w-full border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-300\"\n />\n

\n\n {needsOptions && (\n

\n Options\n

\n {newQ.options.map((opt, i) => (\n

\n •\n {opt}\n \n setNewQ((q) => ({ ...q, options: q.options.filter((_, j) => j !== i) }))\n }\n className=\"text-gray-400 hover:text-red-400\"\n >\n ✕\n \n

\n ))}\n

\n setOptionInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addOption()}\n placeholder=\"Add option...\"\n className=\"flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-300\"\n />\n \n Add\n \n

\n )}\n\n

\n \n setNewQ((q) => ({ ...q, required: e.target.checked }))}\n />\n Required\n \n

\n {\n setAddingQuestion(false);\n setNewQ(blank());\n setOptionInput(\"\");\n }}\n className=\"px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg\"\n >\n Cancel\n \n \n Add Question\n \n

\n ) : (\n setAddingQuestion(true)}\n className=\"w-full py-3 border-2 border-dashed border-gray-200 rounded-xl text-gray-400 hover:border-purple-300 hover:text-purple-400 transition-colors mb-4 text-sm font-medium\"\n >\n + Add Question\n \n )}\n\n

\n navigate(\"/\")}\n className=\"px-5 py-2.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50\"\n >\n Cancel\n \n \n {saving ? \"Saving...\" : isEditing ? \"Save Changes\" : \"Create Form\"}\n \n

\n \n );\n}\n",[],[131,93,194],"121ea058-5eb2-11f1-8add-1607ee4eb77e",["D",1780425432626],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Form {\n id: string;\n title: string;\n description: string;\n created_at: number;\n response_count: number;\n}\n\ninterface Props {\n navigate: (path: string) => void;\n user: { email: string };\n}\n\nexport function Dashboard({ navigate, user }: Props) {\n const [forms, setForms] = useState([]);\n const [loading, setLoading] = useState(true);\n const [copied, setCopied] = useState(null);\n\n useEffect(() => {\n const load = () =>\n fetch(\"/api/forms\")\n .then((r) => {\n if (r.status === 401) { window.location.reload(); return null; }\n return r.json();\n })\n .then((data) => {\n if (Array.isArray(data)) { setForms(data); setLoading(false); }\n });\n load();\n const interval = setInterval(load, 10_000);\n return () => clearInterval(interval);\n }, []);\n\n const deleteForm = async (id: string) => {\n if (!confirm(\"Delete this form and all its responses?\")) return;\n await fetch(`/api/forms/${id}`, { method: \"DELETE\" });\n setForms((f) => f.filter((x) => x.id !== id));\n };\n\n const copyLink = (id: string) => {\n const url = `${window.location.origin}/fill/${id}`;\n navigator.clipboard.writeText(url);\n setCopied(id);\n setTimeout(() => setCopied(null), 1500);\n };\n\n return (\n

\n {user.email}\n \n \n Log out\n \n \n

My Forms

Create and manage your forms

\n navigate(\"/forms/new\")}\n className=\"bg-purple-600 text-white px-5 py-2.5 rounded-lg font-medium hover:bg-purple-700 transition-colors\"\n >\n + New Form\n \n

\n\n {loading ? (\n

\n ) : forms.length === 0 ? (\n

📋

No forms yet

Create your first form to get started

\n navigate(\"/forms/new\")}\n className=\"bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition-colors\"\n >\n Create a form\n \n

\n ) : (\n

\n {forms.map((form) => (\n \n

{form.title}

\n {form.description && (\n

{form.description}

\n )}\n

\n Created {new Date(form.created_at * 1000).toLocaleDateString()}\n {\" · \"}\n \n {form.response_count} response{form.response_count !== 1 ? \"s\" : \"\"}\n \n

\n copyLink(form.id)}\n className=\"text-sm px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors\"\n >\n {copied === form.id ? \"Copied!\" : \"Share\"}\n \n navigate(`/forms/${form.id}/responses`)}\n className=\"text-sm px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors\"\n >\n Responses\n \n navigate(`/forms/${form.id}/edit`)}\n className=\"text-sm px-3 py-1.5 rounded-lg border border-purple-200 text-purple-600 hover:bg-purple-50 transition-colors\"\n >\n Edit\n \n deleteForm(form.id)}\n className=\"text-sm px-3 py-1.5 rounded-lg border border-red-100 text-red-500 hover:bg-red-50 transition-colors\"\n >\n Delete\n \n

\n ))}\n

\n )}\n\n

\n View source\n

\n \n );\n}\n",[],[131,93,185],"50bd21e8-5eaa-11f1-ba3e-1607ee4eb77e",["D",1780422101593],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[131,93,105],"7439118e-5eb1-11f1-aeaa-1607ee4eb77e",["D",1780425167707],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { FormBuilder } from \"./FormBuilder.tsx\";\nimport { FormFiller } from \"./FormFiller.tsx\";\nimport { ResponsesView } from \"./ResponsesView.tsx\";\n\ntype Route =\n | { view: \"dashboard\" }\n | { view: \"new-form\" }\n | { view: \"edit-form\"; formId: string }\n | { view: \"fill-form\"; formId: string }\n | { view: \"responses\"; formId: string };\n\nfunction parseRoute(hash: string): Route {\n const path = hash.replace(/^#/, \"\") || \"/\";\n if (path === \"/\" || path === \"\") return { view: \"dashboard\" };\n const editForm = path.match(/^\\/forms\\/([^/]+)\\/edit$/);\n if (editForm) return { view: \"edit-form\", formId: editForm[1] };\n const fillForm = path.match(/^\\/forms\\/([^/]+)\\/fill$/);\n if (fillForm) return { view: \"fill-form\", formId: fillForm[1] };\n const responses = path.match(/^\\/forms\\/([^/]+)\\/responses$/);\n if (responses) return { view: \"responses\", formId: responses[1] };\n if (path.match(/^\\/forms\\/new$/)) return { view: \"new-form\" };\n return { view: \"dashboard\" };\n}\n\nfunction GoogleIcon() {\n return (\n \n );\n}\n\nfunction LoginScreen() {\n return (\n

📋

Forms

\n \n \n Sign in with Google\n \n

\n );\n}\n\nexport function App() {\n const [route, setRoute] = useState(() => parseRoute(window.location.hash));\n const [authState, setAuthState] = useState<\"loading\" | \"authed\" | \"unauthed\">(\"loading\");\n const [user, setUser] = useState<{ email: string } | null>(null);\n\n useEffect(() => {\n const onHash = () => setRoute(parseRoute(window.location.hash));\n window.addEventListener(\"hashchange\", onHash);\n return () => window.removeEventListener(\"hashchange\", onHash);\n }, []);\n\n useEffect(() => {\n fetch(\"/api/me\")\n .then((r) => r.ok ? r.json() : Promise.reject())\n .then((data) => { setUser(data); setAuthState(\"authed\"); })\n .catch(() => setAuthState(\"unauthed\"));\n }, []);\n\n const navigate = (path: string) => { window.location.hash = path; };\n\n // Fill route is always public — render immediately regardless of auth\n if (route.view === \"fill-form\") return ;\n\n if (authState === \"loading\") {\n return (\n

\n Loading...\n

\n );\n }\n\n if (authState === \"unauthed\") return ;\n\n if (route.view === \"dashboard\") return ;\n if (route.view === \"new-form\") return ;\n if (route.view === \"edit-form\") return ;\n if (route.view === \"responses\") return ;\n return ;\n}\n",[],[131,93,112],"50bd2cf6-5eaa-11f1-ba3e-1607ee4eb77e",["D",1780422101593],[392,393,394,395,396,397],[131,93],["D",1780422101593],[391,398,399,400],[131],["D",1780422101593],["D",1789500119686],{"_11":12,"_329":99},{"_11":12,"_324":325,"_98":99,"_25":97,"_326":327,"_328":24},{"_50":270,"_13":16,"_44":47,"_313":275,"_314":88,"_315":316,"_317":279,"_318":319,"_320":321,"_322":14,"_323":12},"ctx",{"_63":-5,"_351":500,"_501":502,"_503":504,"_505":24,"_506":24,"_507":24,"_508":287,"_509":-5,"_510":-7,"_511":-7,"_512":20,"_513":24,"_514":24,"_515":-5,"_516":24,"_517":24,"_518":24,"_519":-5},"ENV",{"_471":472,"_473":474,"_475":16,"_476":477,"_478":479,"_480":481,"_482":483,"_484":485,"_486":487,"_488":489,"_490":491,"_492":493,"_494":495,"_496":497,"_498":499},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History