/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Utility function to hash password const hashPassword = async (password: string) => { const encoder = new TextEncoder(); const data = encoder.encode(password); const hashBuffer = await crypto.subtle.digest("SHA-256", data); const hashArray = Array.from(new Uint8Array(hashBuffer)); return hashArray.map(b => b.toString(16).padStart(2, "0")).join(""); }; function AddressForm({ address = { name: "", street: "", city: "", state: "", zip: "" }, onSubmit, onCancel, }) { const [formData, setFormData] = useState(address); const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleSubmit = async (e) => { e.preventDefault(); console.log("Submitting address:", formData); // Debug logging try { await onSubmit(formData); } catch (error) { console.error("Address submission error:", error); alert("Failed to add address. Please try again."); } }; return (

{address.id ? "Edit Contact" : "Add New Contact"}

); } function AddressDetails({ address, onEdit, onBack, onDelete, }) { const [showConfirmation, setShowConfirmation] = useState(false); const handleDeleteClick = () => { setShowConfirmation(true); }; const handleConfirmDelete = () => { onDelete(address.id); setShowConfirmation(false); }; const handleCancelDelete = () => { setShowConfirmation(false); }; return (

Address Details

Name: {address.name}

Street: {address.street}

City: {address.city}

State: {address.state}

ZIP: {address.zip}

{showConfirmation && (

Confirm Delete

Are you sure you want to delete this contact?

)}

); } function LoginPage({ onLogin, onSignupLink }) { const handleLogin = async (e) => { e.preventDefault(); const username = e.target.username.value; const password = e.target.password.value; try { const response = await fetch("/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, password }), }); if (response.ok) { const userData = await response.json(); onLogin(userData); } else { const error = await response.text(); alert(error); } } catch (error) { console.error("Login failed", error); alert("Network error. Please try again."); } }; return (

Login to Address Book

Don't have an account?

); } function SignupPage({ onSignup, onLoginLink }) { const handleSignup = async (e) => { e.preventDefault(); const username = e.target.username.value; const password = e.target.password.value; try { const response = await fetch("/signup", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, password }), }); if (response.ok) { alert("Signup successful! Please log in."); onLoginLink(); } else { const error = await response.text(); alert(error); } } catch (error) { console.error("Signup failed", error); alert("Network error. Please try again."); } }; return (

Create an Account

Already have an account?

); } function AddressBook({ user, onLogout }) { const [addresses, setAddresses] = useState([]); const [view, setView] = useState("list"); const [selectedAddress, setSelectedAddress] = useState(null); useEffect(() => { fetchAddresses(); }, []); const fetchAddresses = async () => { try { const response = await fetch("/addresses"); if (response.ok) { const addressData = await response.json(); setAddresses(addressData); } else { console.error("Failed to fetch addresses:", await response.text()); setAddresses([]); // Ensure addresses is always an array } } catch (error) { console.error("Fetch addresses error:", error); setAddresses([]); // Ensure addresses is always an array } }; const handleAddAddress = async (addressData) => { try { const response = await fetch("/addresses", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json", }, body: JSON.stringify(addressData), }); if (response.ok) { const newAddress = await response.json(); fetchAddresses(); setView("list"); } else { const errorText = await response.text(); console.error("Add address failed:", errorText); alert(`Failed to add address: ${errorText}`); } } catch (error) { console.error("Add address network error:", error); alert("Network error. Could not add address."); } }; const handleUpdateAddress = async (addressData) => { try { const response = await fetch(`/addresses/${addressData.id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(addressData), }); if (response.ok) { fetchAddresses(); setView("list"); } else { const errorText = await response.text(); console.error("Update address failed:", errorText); alert(`Failed to update address: ${errorText}`); } } catch (error) { console.error("Update address failed", error); alert("Network error. Could not update address."); } }; const handleDeleteAddress = async (addressId) => { try { const response = await fetch(`/addresses/${addressId}`, { method: "DELETE" }); if (response.ok) { fetchAddresses(); setView("list"); } else { const errorText = await response.text(); console.error("Delete address failed:", errorText); alert(`Failed to delete address: ${errorText}`); } } catch (error) { console.error("Delete address failed", error); alert("Network error. Could not delete address."); } }; const renderContent = () => { switch (view) { 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 "edit": return ( setView("details")} /> ); case "details": return ( setView("edit")} onBack={() => setView("list")} onDelete={handleDeleteAddress} /> ); } }; return (

{renderContent()}

); } function App() { const [user, setUser] = useState(null); const [view, setView] = useState("login"); useEffect(() => { checkAuth(); }, []); const checkAuth = async () => { try { const response = await fetch("/check-auth"); if (response.ok) { const userData = await response.json(); setUser(userData); } else { setUser(null); } } catch (error) { console.error("Auth check failed"); setUser(null); } }; const handleLogin = (userData) => { setUser(userData); }; const handleLogout = async () => { try { await fetch("/logout", { method: "POST" }); setUser(null); setView("login"); } catch (error) { console.error("Logout failed", error); } }; if (user) { return ; } return ( <> {view === "login" ? ( setView("signup")} /> ) : ( {}} onLoginLink={() => setView("login")} /> )} ); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } // Server function with default export 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); const SCHEMA_VERSION = 15; // Incrementing schema version // Ensure tables are created await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT UNIQUE NOT NULL, password TEXT NOT NULL ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_addresses_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, street TEXT NOT NULL, city TEXT NOT NULL, state TEXT NOT NULL, zip TEXT NOT NULL, user_id INTEGER DEFAULT 1, FOREIGN KEY(user_id) REFERENCES ${KEY}_users_${SCHEMA_VERSION}(id) ) `); const url = new URL(request.url); // Check authentication route if (url.pathname === "/check-auth" && request.method === "GET") { try { // Check if there are any users in the database const userResult = await sqlite.execute( `SELECT id, username FROM ${KEY}_users_${SCHEMA_VERSION} LIMIT 1`, ); if (userResult.rows.length > 0) { // Return the first user if exists const user = userResult.rows[0]; return new Response( JSON.stringify({ id: user.id, username: user.username, }), { status: 200, headers: { "Content-Type": "application/json" }, }, ); } // No users exist return new Response(null, { status: 404 }); } catch (error) { console.error("Check auth error:", error); return new Response(null, { status: 500 }); } } // Login route if (url.pathname === "/login" && request.method === "POST") { try { const { username, password } = await request.json(); // Basic validation if (!username || !password) { return new Response("Username and password are required", { status: 400 }); } // Hash the provided password const hashedPassword = await hashPassword(password); // Check user credentials const userResult = await sqlite.execute( `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ? AND password = ?`, [username, hashedPassword], ); if (userResult.rows.length === 0) { return new Response("Invalid username or password", { status: 401 }); } // User found, return user data const user = userResult.rows[0]; return new Response( JSON.stringify({ id: user.id, username: user.username, }), { status: 200, headers: { "Content-Type": "application/json" }, }, ); } catch (error) { console.error("Login error:", error); return new Response("Login failed", { status: 500 }); } } // Signup route if (url.pathname === "/signup" && request.method === "POST") { try { const { username, password } = await request.json(); // Basic validation if (!username || !password) { return new Response("Username and password are required", { status: 400 }); } // Hash the password const hashedPassword = await hashPassword(password); // Check if username already exists const existingUser = await sqlite.execute( `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ?`, [username], ); if (existingUser.rows.length > 0) { return new Response("Username already exists", { status: 409 }); } // Insert new user const result = await sqlite.execute( `INSERT INTO ${KEY}_users_${SCHEMA_VERSION} (username, password) VALUES (?, ?)`, [username, hashedPassword], ); return new Response( JSON.stringify({ id: result.lastInsertRowid, username, }), { status: 201, headers: { "Content-Type": "application/json" }, }, ); } catch (error) { console.error("Signup error:", error); return new Response("Signup failed", { status: 500 }); } } // Logout route if (url.pathname === "/logout" && request.method === "POST") { return new Response("Logged out", { status: 200 }); } // New route for updating addresses if (url.pathname.startsWith("/addresses/") && request.method === "PUT") { try { // Extract address ID from the URL const addressId = url.pathname.split("/").pop(); // Parse the request body const addressData = await request.json(); // Validate address data if (!addressData.name || !addressData.street || !addressData.city || !addressData.state || !addressData.zip) { return new Response("All address fields are required", { status: 400 }); } // Update the address const result = await sqlite.execute( `UPDATE ${KEY}_addresses_${SCHEMA_VERSION} SET name = ?, street = ?, city = ?, state = ?, zip = ? WHERE id = ? AND user_id = ?`, [ addressData.name, addressData.street, addressData.city, addressData.state, addressData.zip, addressId, 1, // Default user ID ], ); // Check if any rows were actually updated if (result.rowsAffected === 0n) { return new Response("Address not found or no changes made", { status: 404 }); } return new Response( JSON.stringify({ id: addressId, ...addressData, }), { status: 200, headers: { "Content-Type": "application/json" }, }, ); } catch (error) { console.error("Update address error:", error); return new Response("Failed to update address", { status: 500 }); } } // Route for adding addresses if (url.pathname === "/addresses" && request.method === "POST") { try { const addressData = await request.json(); // Validate address data if (!addressData.name || !addressData.street || !addressData.city || !addressData.state || !addressData.zip) { return new Response("All address fields are required", { status: 400 }); } // Insert new address (using a default user_id of 1 for now) const result = await sqlite.execute( `INSERT INTO ${KEY}_addresses_${SCHEMA_VERSION} (name, street, city, state, zip, user_id) VALUES (?, ?, ?, ?, ?, ?)`, [ addressData.name, addressData.street, addressData.city, addressData.state, addressData.zip, 1, // Default user ID ], ); return new Response( JSON.stringify({ id: result.lastInsertRowid, ...addressData, }), { status: 201, headers: { "Content-Type": "application/json" }, }, ); } catch (error) { console.error("Add address error:", error); return new Response("Failed to add address", { status: 500 }); } } // Route for deleting addresses if (url.pathname.startsWith("/addresses/") && request.method === "DELETE") { try { // Extract address ID from the URL const addressId = url.pathname.split("/").pop(); // Delete the address const result = await sqlite.execute( `DELETE FROM ${KEY}_addresses_${SCHEMA_VERSION} WHERE id = ? AND user_id = ?`, [addressId, 1], ); // Check if any rows were actually deleted if (result.rowsAffected === 0n) { return new Response("Address not found", { status: 404 }); } return new Response(null, { status: 204, }); } catch (error) { console.error("Delete address error:", error); return new Response("Failed to delete address", { status: 500 }); } } // Route for fetching addresses if (url.pathname === "/addresses" && request.method === "GET") { try { // Fetch addresses for the default user (ID 1) const addressResult = await sqlite.execute( `SELECT * FROM ${KEY}_addresses_${SCHEMA_VERSION} WHERE user_id = ?`, [1], ); return new Response(JSON.stringify(addressResult.rows), { status: 200, headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Fetch addresses error:", error); return new Response("Failed to fetch addresses", { status: 500 }); } } // Default route - serve the HTML if (url.pathname === "/") { return new Response( ` Address Book

`, { headers: { "Content-Type": "text/html" }, }, ); } // Return a default 404 response for unhandled routes return new Response("Not Found", { status: 404 }); } // CSS styles const css = ` body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .address-list { background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; } .address-item { border-bottom: 1px solid #eee; padding: 10px 0; cursor: pointer; } .address-item:hover { background-color: #f9f9f9; } .address-details, .address-form { background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; } .confirmation-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .confirmation-content { background-color: white; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.2); } .confirmation-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 15px; } .confirm-delete { background-color: #dc3545; } .cancel-delete { background-color: #6c757d; } form { display: flex; flex-direction: column; gap: 15px; } input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin: 5px; } button:hover { opacity: 0.9; } `;

laudableTurquoiseOpossum

Version 35