Your Contacts

Welcome, {user.username}!

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {addresses.map(address => (\n {\n setSelectedAddress(address);\n setView(\"details\");\n }}\n >\n \n \n \n \n \n \n ))}\n \n

Name	Street	City	State	ZIP
{address.name}	{address.street}	{address.city}	{address.state}	{address.zip}

\n );\n case \"add\":\n return setView(\"list\")}\n />;\n case \"details\":\n return selectedAddress ? (\n setView(\"list\")}\n onEdit={() => setView(\"edit\")}\n />\n ) : null;\n case \"edit\":\n return selectedAddress ? (\n {\n // TODO: Implement contact update in SQLite\n setAddresses(addresses.map(addr => \n addr.id === selectedAddress.id ? updatedContact : addr\n ));\n setSelectedAddress(updatedContact);\n setView(\"details\");\n }}\n onCancel={() => setView(\"details\")}\n />\n ) : null;\n default:\n return null;\n }\n };\n\n return (\n

\n {renderContent()}\n

\n );\n}\n\nfunction LoginForm({ onLogin, onSignupView }) {\n const [username, setUsername] = useState('');\n const [password, setPassword] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (username && password) {\n onLogin(username, password);\n } else {\n alert('Please enter both username and password');\n }\n };\n\n return (\n

📇 Contact Manager Login

\n );\n}\n\nfunction SignupForm({ onSignup, onLoginView }) {\n const [username, setUsername] = useState('');\n const [password, setPassword] = useState('');\n const [confirmPassword, setConfirmPassword] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!username) {\n alert('Username is required');\n return;\n }\n if (password !== confirmPassword) {\n alert('Passwords do not match');\n return;\n }\n if (password.length < 6) {\n alert('Password must be at least 6 characters');\n return;\n }\n onSignup(username, password);\n };\n\n return (\n

📝 Create Account

\n );\n}\n\n// Rest of the components remain the same as in the previous implementation\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"laudableTurquoiseOpossum\";\n\n // Create tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n username TEXT PRIMARY KEY,\n password TEXT NOT NULL\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_contacts (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n name TEXT NOT NULL,\n street TEXT NOT NULL,\n city TEXT NOT NULL,\n state TEXT NOT NULL,\n zip TEXT NOT NULL,\n FOREIGN KEY(username) REFERENCES ${KEY}_users(username)\n )\n `);\n\n return new Response(`\n \n \n Contact Manager\n \n \n \n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\n// CSS remains the same as in the previous implementation\nconst css = `...`;","deleted","label",[99],"permalink","https://www.val.town/x/zdmta/laudableTurquoiseOpossum/code/main.tsx","extension","actionData","errors"]