/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [user, setUser] = useState(null); const [view, setView] = useState("login"); const [addresses, setAddresses] = useState([]); const [selectedAddress, setSelectedAddress] = useState(null); const handleLogin = async (username, password) => { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); try { const result = await sqlite.execute(` SELECT * FROM ${KEY}_users WHERE username = ? AND password = ? `, [username, password]); if (result.rows.length > 0) { setUser({ username }); setView("list"); // Load user's contacts const contactsResult = await sqlite.execute(` SELECT * FROM ${KEY}_contacts WHERE username = ? `, [username]); setAddresses(contactsResult.rows); } else { alert('Invalid username or password'); } } catch (error) { alert('Login failed: ' + error.message); } }; const handleSignup = async (username, password) => { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); try { // Check if user already exists const existingUser = await sqlite.execute(` SELECT * FROM ${KEY}_users WHERE username = ? `, [username]); if (existingUser.rows.length > 0) { alert('Username already exists'); return; } // Insert new user await sqlite.execute(` INSERT INTO ${KEY}_users (username, password) VALUES (?, ?) `, [username, password]); setUser({ username }); setView("list"); } catch (error) { alert('Signup failed: ' + error.message); } }; const handleLogout = () => { setUser(null); setAddresses([]); setView("login"); }; const handleAddContact = async (newContact) => { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); try { const result = await sqlite.execute(` INSERT INTO ${KEY}_contacts (username, name, street, city, state, zip) VALUES (?, ?, ?, ?, ?, ?) `, [ user.username, newContact.name, newContact.street, newContact.city, newContact.state, newContact.zip ]); const contactWithId = { ...newContact, id: result.lastInsertRowid }; setAddresses([...addresses, contactWithId]); setView("list"); } catch (error) { alert('Add contact failed: ' + error.message); } }; const renderContent = () => { switch (view) { case "login": return ( setView("signup")} /> ); case "signup": return ( setView("login")} /> ); case "list": return (

Your Contacts

Welcome, {user.username}!

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

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

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

{renderContent()}

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

📇 Contact Manager Login

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

📝 Create Account

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

`, { headers: { "content-type": "text/html", }, }); } // CSS remains the same as in the previous implementation const css = `...`;

zdmta