\n {!user ? (\n

{loginMode === 'login' ? 'Login' : 'Sign Up'}

\n {authError &&

{authError}

}\n

\n setFormData({...formData, username: e.target.value})}\n required\n autoComplete=\"username\"\n />\n setFormData({...formData, password: e.target.value})}\n required\n minLength={6}\n autoComplete={loginMode === 'login' ? 'current-password' : 'new-password'}\n />\n {loginMode === 'signup' && (\n setFormData({...formData, email: e.target.value})}\n required\n autoComplete=\"email\"\n />\n )}\n \n

{\n setLoginMode(loginMode === 'login' ? 'signup' : 'login');\n setAuthError(null);\n }}\n className=\"mode-toggle\"\n >\n {loginMode === 'login' \n ? 'Need an account? Sign Up' \n : 'Already have an account? Login'}\n

\n ) : (\n

Welcome, {user.username}!

\n setFormData({...formData, habitName: e.target.value})}\n />\n setFormData({...formData, habitGoal: e.target.value})}\n />\n \n

\n {habits.map(habit => (\n

{habit.name}

\n Goal: {habit.goal} days\n

\n {habit.streak} / {habit.goal} days\n

\n \n

\n ))}\n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request) {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"HabitTracker\";\n const SCHEMA_VERSION = 5;\n\n // Create necessary tables\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT UNIQUE NOT NULL,\n email TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL,\n profile_picture TEXT,\n auth_token TEXT,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_habits_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER,\n name TEXT NOT NULL,\n goal INTEGER NOT NULL,\n streak INTEGER DEFAULT 0,\n start_date DATETIME DEFAULT CURRENT_TIMESTAMP,\n last_completed_date DATETIME,\n FOREIGN KEY(user_id) REFERENCES ${KEY}_users_${SCHEMA_VERSION}(id)\n )\n `);\n\n // Utility functions for authentication\n async function hashPassword(password) {\n const encoder = new TextEncoder();\n const data = encoder.encode(password);\n const hashBuffer = await crypto.subtle.digest('SHA-256', data);\n const hashArray = Array.from(new Uint8Array(hashBuffer));\n return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');\n }\n\n async function verifyPassword(inputPassword, storedHash) {\n const inputHash = await hashPassword(inputPassword);\n return inputHash === storedHash;\n }\n\n // Handle different routes\n const url = new URL(request.url);\n const method = request.method;\n\n if (method === 'POST') {\n const body = await request.json();\n\n switch (url.pathname) {\n case '/signup': {\n try {\n const { username, email, password } = body;\n \n // Validate input\n if (!username || !email || !password) {\n return new Response(JSON.stringify({ \n success: false, \n message: 'All fields are required' \n }), { status: 400 });\n }\n\n // Check if user already exists\n const existingUser = await sqlite.execute(\n `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ? OR email = ?`, \n [username, email]\n );\n\n if (existingUser.rows.length > 0) {\n return new Response(JSON.stringify({ \n success: false, \n message: 'Username or email already exists' \n }), { status: 400 });\n }\n\n // Hash password\n const hashedPassword = await hashPassword(password);\n const authToken = generateToken();\n\n // Insert new user\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_users_${SCHEMA_VERSION} \n (username, email, password, auth_token) \n VALUES (?, ?, ?, ?)`, \n [username, email, hashedPassword, authToken]\n );\n\n return new Response(JSON.stringify({ \n success: true, \n user: { \n id: result.lastInsertRowid, \n username, \n email \n },\n token: authToken \n }), { status: 201 });\n } catch (error) {\n console.error('Signup error:', error);\n return new Response(JSON.stringify({ \n success: false, \n message: 'Internal server error' \n }), { status: 500 });\n }\n }\n\n case '/login': {\n try {\n const { username, password } = body;\n \n // Find user\n const userResult = await sqlite.execute(\n `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username = ?`, \n [username]\n );\n\n if (userResult.rows.length === 0) {\n return new Response(JSON.stringify({ \n success: false, \n message: 'Invalid username or password' \n }), { status: 401 });\n }\n\n const user = userResult.rows[0];\n \n // Verify password\n const passwordMatch = await verifyPassword(password, user.password);\n \n if (!passwordMatch) {\n return new Response(JSON.stringify({ \n success: false, \n message: 'Invalid username or password' \n }), { status: 401 });\n }\n\n // Generate new token\n const authToken = generateToken();\n \n // Update user's token\n await sqlite.execute(\n `UPDATE ${KEY}_users_${SCHEMA_VERSION} SET auth_token = ? WHERE id = ?`, \n [authToken, user.id]\n );\n\n return new Response(JSON.stringify({ \n success: true, \n user: { \n id: user.id, \n username: user.username, \n email: user.email \n },\n token: authToken \n }), { status: 200 });\n } catch (error) {\n console.error('Login error:', error);\n return new Response(JSON.stringify({ \n success: false, \n message: 'Internal server error' \n }), { status: 500 });\n }\n }\n\n case '/validate-token': {\n try {\n const { token } = body;\n \n const userResult = await sqlite.execute(\n `SELECT id, username, email FROM ${KEY}_users_${SCHEMA_VERSION} WHERE auth_token = ?`, \n [token]\n );\n\n if (userResult.rows.length === 0) {\n return new Response(JSON.stringify({ \n valid: false \n }), { status: 401 });\n }\n\n return new Response(JSON.stringify({ \n valid: true, \n user: userResult.rows[0] \n }), { status: 200 });\n } catch (error) {\n console.error('Token validation error:', error);\n return new Response(JSON.stringify({ \n valid: false \n }), { status: 500 });\n }\n }\n\n case '/user-habits': {\n try {\n const userId = new URL(request.url).searchParams.get('userId');\n \n const habitsResult = await sqlite.execute(\n `SELECT * FROM ${KEY}_habits_${SCHEMA_VERSION} \n WHERE user_id = ?`, \n [userId]\n );\n\n return new Response(JSON.stringify({ \n success: true, \n habits: habitsResult.rows \n }), { status: 200 });\n } catch (error) {\n console.error('Fetch habits error:', error);\n return new Response(JSON.stringify({ \n success: false, \n message: 'Failed to fetch habits' \n }), { status: 500 });\n }\n }\n\n case '/add-habit': {\n try {\n const { name, goal, userId } = body;\n \n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_habits_${SCHEMA_VERSION} \n (user_id, name, goal, streak) \n VALUES (?, ?, ?, 0)`, \n [userId, name, goal]\n );\n\n return new Response(JSON.stringify({ \n success: true, \n habit: { \n id: result.lastInsertRowid, \n user_id: userId, \n name, \n goal, \n streak: 0 \n } \n }), { status: 201 });\n } catch (error) {\n console.error('Add habit error:', error);\n return new Response(JSON.stringify({ \n success: false, \n message: 'Failed to add habit' \n }), { status: 500 });\n }\n }\n\n case '/complete-habit': {\n try {\n const { habitId, userId } = body;\n \n // Check if habit exists and belongs to user\n const habitResult = await sqlite.execute(\n `SELECT * FROM ${KEY}_habits_${SCHEMA_VERSION} \n WHERE id = ? AND user_id = ?`, \n [habitId, userId]\n );\n\n if (habitResult.rows.length === 0) {\n return new Response(JSON.stringify({ \n success: false, \n message: 'Habit not found' \n }), { status: 404 });\n }\n\n const habit = habitResult.rows[0];\n const today = new Date().toISOString().split('T')[0];\n const lastCompletedDate = habit.last_completed_date \n ? new Date(habit.last_completed_date).toISOString().split('T')[0] \n : null;\n\n if (lastCompletedDate === today) {\n return new Response(JSON.stringify({ \n success: false, \n message: 'Habit already completed today' \n }), { status: 400 });\n }\n\n const newStreak = habit.streak + 1;\n\n await sqlite.execute(\n `UPDATE ${KEY}_habits_${SCHEMA_VERSION} \n SET streak = ?, last_completed_date = CURRENT_TIMESTAMP \n WHERE id = ?`, \n [newStreak, habitId]\n );\n\n return new Response(JSON.stringify({ \n success: true, \n newStreak \n }), { status: 200 });\n } catch (error) {\n console.error('Complete habit error:', error);\n return new Response(JSON.stringify({ \n success: false, \n message: 'Failed to complete habit' \n }), { status: 500 });\n }\n }\n }\n }\n\n return new Response(`\n \n \n Habit Tracker\n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \n \"content-type\": \"text/html\",\n \"Cache-Control\": \"no-cache, no-store, must-revalidate\"\n }\n });\n}\n\nconst css = `\nbody {\n font-family: 'Poppins', sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 20px;\n color: #333;\n}\n\n.habit-tracker {\n max-width: 600px;\n margin: 0 auto;\n background-color: white;\n padding: 30px;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.auth-container form input {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\n.error-message {\n color: red;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.mode-toggle {\n text-align: center;\n color: #007bff;\n cursor: pointer;\n margin-top: 15px;\n}\n\n.habit-card {\n background-color: #f9f9f9;\n border-radius: 8px;\n padding: 15px;\n margin-bottom: 15px;\n}\n\n.habit-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.streak-progress {\n background-color: #e0e0e0;\n border-radius: 10px;\n height: 20px;\n overflow: hidden;\n margin: 10px 0;\n}\n\n.progress-bar {\n background-color: #4CAF50;\n height: 100%;\n transition: width 0.5s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 12px;\n}\n\nbutton {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 10px 15px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n width: 100%;\n}\n\nbutton:hover {\n background-color: #0056b3;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n@media (max-width: 768px) {\n .habit-tracker {\n width: 95%;\n max-width: 100%;\n padding: 20px;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Gabriel_Aejis/HabitTracker/code/main.tsx","extension","actionData","errors"]