Login Form

\n Sign in to your account\n

\n \n Email address\n \n \n {errors.email && (\n

\n {errors.email.message}\n

\n )}\n

\n \n Password\n \n \n {errors.password && (\n

\n {errors.password.message}\n

\n )}\n

\n\n {errorMessage && (\n

{errorMessage}

\n )}\n\n

\n \n {isSubmitting || isPending ? \"Signing in...\" : \"Sign in\"}\n \n

\n\n

\n Don't have an account?{\" \"}\n \n Sign up\n \n

\n );\n}\n",[],[206,213,230],[206,213],{"_105":239,"_96":240,"_157":241,"_159":207,"_160":142,"_161":208,"_163":22,"_107":242,"_101":32,"_165":224,"_167":243,"_168":22,"_169":-5,"_170":244,"_99":245},"04f9885a-9439-11f0-a09d-0224a6c84d84","index.html","04f98904-9439-11f0-a09d-0224a6c84d84",["D",1758163306590],"\n\n\n \n \n Login Form\n \n \n\n\n

\n \n\n",[],[206,240],{"_105":247,"_96":248,"_157":249,"_159":207,"_160":142,"_161":250,"_163":22,"_107":251,"_101":252,"_165":179,"_167":253,"_168":22,"_169":-5,"_170":254,"_99":255},"635de07e-9440-11f0-8de7-0224a6c84d84","index.tsx","13404d2c-9439-11f0-9e0f-0224a6c84d84",116,["D",1758166471427],1,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport { SignInForm } from \"./components/sign-in-form.tsx\";\n\nfunction App() {\n return ;\n}\n\nconst root = createRoot(document.getElementById(\"root\"));\nif (!root) {\n throw new Error(\"Root element not found\");\n}\nroot.render();\n",[],[206,248],[206],{"_105":258,"_96":259,"_157":260,"_159":-5,"_160":142,"_161":261,"_163":119,"_107":262,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":263,"_99":273},"023eebaa-9439-11f0-92e3-0224a6c84d84","shared","7333cd7c-2b90-4639-b8d5-fd15d20f5036",2,["D",1758163302012],[264],{"_105":265,"_96":266,"_157":267,"_159":260,"_160":142,"_161":268,"_163":22,"_107":269,"_101":233,"_165":179,"_167":270,"_168":22,"_169":-5,"_170":271,"_99":272},"19771fce-9441-11f0-8190-0224a6c84d84","types.ts","023ee4fc-9439-11f0-92e3-0224a6c84d84",128,["D",1758166776928],"import { z } from \"https://esm.sh/zod\";\n\n// Login form validation schema\nexport const signupSchema = z\n .object({\n firstName: z.string().min(1, { message: \"First name is required.\" }),\n lastName: z.string().min(1, { message: \"Last name is required.\" }),\n email: z.email({\n message: \"Please enter a valid email address.\",\n }),\n password: z\n .string()\n .min(6, {\n message: \"Password must be at least 6 characters.\",\n })\n .regex(/[a-zA-Z]/, { message: \"Contain at least one letter.\" })\n .regex(/[0-9]/, { message: \"Contain at least one number.\" })\n .regex(/[^a-zA-Z0-9]/, {\n message: \"Contain at least one special character.\",\n }),\n confirmPassword: z.string(),\n })\n .refine((data) => data.password === data.confirmPassword, {\n message: \"Passwords don't match.\",\n path: [\"confirmPassword\"],\n });\n\nexport type SignupFormData = z.infer;\n",[],[259,266],[259],{"_105":275,"_96":276,"_157":277,"_159":-5,"_160":142,"_161":278,"_163":119,"_107":279,"_101":32,"_165":224,"_167":280,"_168":22,"_169":-5,"_170":281,"_99":282},"352aa828-943f-11f0-9473-0224a6c84d84",".vtignore","352aa90e-943f-11f0-9473-0224a6c84d84",102,["D",1758165964426],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor",[],[276],{"_105":284,"_96":220,"_157":285,"_159":-5,"_160":142,"_161":252,"_163":119,"_107":286,"_101":32,"_165":224,"_167":287,"_168":22,"_169":-5,"_170":288,"_99":289},"ffcd672a-9438-11f0-b6e8-0224a6c84d84","ffcd67f2-9438-11f0-b6e8-0224a6c84d84",["D",1758163297916],"# Simple Login Form App\n\nA simple Hono + React application with a login form that uses Zod for validation.\n\n## Structure\n\n- `backend/index.ts` - Main Hono server entry point\n- `frontend/index.html` - Main HTML template\n- `frontend/index.tsx` - React frontend entry point\n- `frontend/components/LoginForm.tsx` - Login form component\n- `shared/types.ts` - Shared types and validation schemas\n\n## Features\n\n- Login form with email and password fields\n- Client-side validation using Zod\n- Form data logged to browser console on submission\n- Responsive design with TailwindCSS",[],[220],{"_105":291,"_96":292,"_157":293,"_159":-5,"_160":142,"_161":294,"_163":22,"_107":295,"_101":296,"_165":179,"_167":297,"_168":22,"_169":-5,"_170":298,"_99":299},"f77bb0de-943f-11f0-9835-0224a6c84d84","auth-client.ts","ca63f18a-943d-11f0-82de-0224a6c84d84",112,["D",1758166290429],13,"import { createAuthClient } from \"https://esm.sh/better-auth/react\";\nimport { httpEndpoint } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst baseURL = await httpEndpoint(\"/backend/index.ts\");\n\nexport const authClient = createAuthClient({ baseURL });\n",[],[292],{"_105":301,"_96":302,"_157":303,"_159":-5,"_160":142,"_161":304,"_163":22,"_107":305,"_101":306,"_165":179,"_167":307,"_168":22,"_169":-5,"_170":308,"_99":309},"f76d0caa-943f-11f0-8891-0224a6c84d84","auth.ts","38243c00-943b-11f0-978c-0224a6c84d84",110,["D",1758166290311],18,"import { db } from \"https://esm.town/v/nbbaier/better-auth/backend/db.ts\";\nimport { betterAuth } from \"npm:better-auth\";\nimport { drizzleAdapter } from \"npm:better-auth/adapters/drizzle\";\nimport { openAPI } from \"npm:better-auth/plugins\";\nimport * as authSchema from \"./backend/schema.ts\";\n\nexport const auth = betterAuth({\n database: drizzleAdapter(db, {\n provider: \"sqlite\",\n schema: authSchema,\n }),\n plugins: [openAPI()],\n});\n",[],[302],{"_105":311,"_96":312,"_157":313,"_159":-5,"_160":142,"_161":314,"_163":119,"_107":315,"_101":32,"_165":224,"_167":316,"_168":22,"_169":-5,"_170":317,"_99":318},"353070d2-943f-11f0-a93e-0224a6c84d84","biome.json","3530719a-943f-11f0-a93e-0224a6c84d84",103,["D",1758165964427],"{\n \"$schema\": \"https://biomejs.dev/schemas/2.2.2/schema.json\",\n \"vcs\": {\n \"enabled\": false,\n \"clientKind\": \"git\",\n \"useIgnoreFile\": false\n },\n \"files\": {\n \"ignoreUnknown\": false\n },\n \"formatter\": {\n \"enabled\": true,\n \"indentStyle\": \"space\",\n \"indentWidth\": 3\n },\n \"linter\": {\n \"enabled\": true,\n \"rules\": {\n \"recommended\": true\n }\n },\n \"javascript\": {\n \"formatter\": {\n \"quoteStyle\": \"double\"\n }\n },\n \"assist\": {\n \"enabled\": true,\n \"actions\": {\n \"source\": {\n \"organizeImports\": \"on\"\n }\n }\n }\n}",[],[312],{"_105":320,"_96":321,"_157":322,"_159":-5,"_160":142,"_161":323,"_163":119,"_107":324,"_101":252,"_165":224,"_167":325,"_168":22,"_169":-5,"_170":326,"_99":327},"f7820e20-943f-11f0-8c95-0224a6c84d84","deno.json","35254a40-943f-11f0-9473-0224a6c84d84",113,["D",1758166290318],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n },\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-sloppy-imports\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true\n },\n \"imports\": {\n \"@biomejs/biome\": \"npm:@biomejs/biome@^2.0.0\"\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-import-prefix\"]\n }\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}\n",[],[321],"files",[154,172,183,193,204,211,218,228,238,246,257,264,274,283,290,300,310,319],"counts",{"_332":32,"_333":252,"_334":32,"_335":336},"pulls","branches","forks","envVars",{"_337":32,"_338":32},"count","emptyCount","contents",[],{"_105":184,"_96":185,"_157":117,"_159":158,"_160":142,"_161":186,"_163":119,"_107":342,"_101":188,"_165":189,"_167":190,"_168":22,"_169":97,"_99":343},["D",1758166290367],[156,185],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":352,"_152":357,"_328":412,"_224":413,"_339":415,"_416":-5,"_417":-5,"_418":-5,"_419":-5,"_420":421},{"_105":106,"_96":97,"_107":353,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":354,"_136":355,"_139":356,"_151":22},["D",1758163215056],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[358,370,388,394,397,400,403,406,409],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":164,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":359,"_99":369},[360,363,366],{"_105":173,"_96":174,"_157":175,"_159":158,"_160":142,"_161":176,"_163":22,"_107":177,"_101":178,"_165":179,"_167":180,"_168":22,"_169":-5,"_170":361,"_99":362},[],[156,174],{"_105":184,"_96":185,"_157":117,"_159":158,"_160":142,"_161":186,"_163":119,"_107":187,"_101":188,"_165":189,"_167":190,"_168":22,"_169":97,"_170":364,"_99":365},[],[156,185],{"_105":194,"_96":195,"_157":196,"_159":158,"_160":142,"_161":197,"_163":119,"_107":198,"_101":199,"_165":179,"_167":200,"_168":22,"_169":-5,"_170":367,"_99":368},[],[156,195],[156],{"_105":205,"_96":206,"_157":207,"_159":-5,"_160":142,"_161":208,"_163":119,"_107":209,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":371,"_99":387},[372,381,384],{"_105":212,"_96":213,"_157":214,"_159":207,"_160":142,"_161":215,"_163":119,"_107":216,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":373,"_99":380},[374,377],{"_105":219,"_96":220,"_157":221,"_159":214,"_160":142,"_161":222,"_163":119,"_107":223,"_101":32,"_165":224,"_167":225,"_168":22,"_169":-5,"_170":375,"_99":376},[],[206,213,220],{"_105":229,"_96":230,"_157":231,"_159":214,"_160":142,"_161":102,"_163":22,"_107":232,"_101":233,"_165":179,"_167":234,"_168":22,"_169":-5,"_170":378,"_99":379},[],[206,213,230],[206,213],{"_105":239,"_96":240,"_157":241,"_159":207,"_160":142,"_161":208,"_163":22,"_107":242,"_101":32,"_165":224,"_167":243,"_168":22,"_169":-5,"_170":382,"_99":383},[],[206,240],{"_105":247,"_96":248,"_157":249,"_159":207,"_160":142,"_161":250,"_163":22,"_107":251,"_101":252,"_165":179,"_167":253,"_168":22,"_169":-5,"_170":385,"_99":386},[],[206,248],[206],{"_105":258,"_96":259,"_157":260,"_159":-5,"_160":142,"_161":261,"_163":119,"_107":262,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":389,"_99":393},[390],{"_105":265,"_96":266,"_157":267,"_159":260,"_160":142,"_161":268,"_163":22,"_107":269,"_101":233,"_165":179,"_167":270,"_168":22,"_169":-5,"_170":391,"_99":392},[],[259,266],[259],{"_105":275,"_96":276,"_157":277,"_159":-5,"_160":142,"_161":278,"_163":119,"_107":279,"_101":32,"_165":224,"_167":280,"_168":22,"_169":-5,"_170":395,"_99":396},[],[276],{"_105":284,"_96":220,"_157":285,"_159":-5,"_160":142,"_161":252,"_163":119,"_107":286,"_101":32,"_165":224,"_167":287,"_168":22,"_169":-5,"_170":398,"_99":399},[],[220],{"_105":291,"_96":292,"_157":293,"_159":-5,"_160":142,"_161":294,"_163":22,"_107":295,"_101":296,"_165":179,"_167":297,"_168":22,"_169":-5,"_170":401,"_99":402},[],[292],{"_105":301,"_96":302,"_157":303,"_159":-5,"_160":142,"_161":304,"_163":22,"_107":305,"_101":306,"_165":179,"_167":307,"_168":22,"_169":-5,"_170":404,"_99":405},[],[302],{"_105":311,"_96":312,"_157":313,"_159":-5,"_160":142,"_161":314,"_163":119,"_107":315,"_101":32,"_165":224,"_167":316,"_168":22,"_169":-5,"_170":407,"_99":408},[],[312],{"_105":320,"_96":321,"_157":322,"_159":-5,"_160":142,"_161":323,"_163":119,"_107":324,"_101":252,"_165":224,"_167":325,"_168":22,"_169":-5,"_170":410,"_99":411},[],[321],[358,360,363,366,370,372,374,377,381,384,388,390,394,397,400,403,406,409],{"_105":184,"_96":185,"_157":117,"_159":158,"_160":142,"_161":186,"_163":119,"_107":342,"_101":188,"_165":189,"_167":190,"_168":22,"_169":97,"_99":414},[156,185],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]