Create New Account

\n \n

\n {error &&

{error}

}\n

\n setFirstName(e.target.value)}\n required \n />\n setLastName(e.target.value)}\n required \n />\n

\n setEmail(e.target.value)}\n required \n />\n setPassword(e.target.value)}\n required \n />\n

\n Date of Birth\n setBirthDate(e.target.value)}\n required \n />\n

\n Gender\n

\n \n setGender(\"female\")}\n /> Female\n \n \n setGender(\"male\")}\n /> Male\n \n \n setGender(\"custom\")}\n /> Custom\n \n

\n \n

\n );\n}\n\nfunction ForgotPasswordModal({ onClose, onPasswordResetRequested }) {\n const [email, setEmail] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [success, setSuccess] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n setSuccess(\"\");\n\n try {\n const response = await fetch('/forgot-password', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ email })\n });\n\n const result = await response.json();\n\n if (response.ok) {\n setSuccess(result.message);\n onPasswordResetRequested(result.message);\n } else {\n setError(result.error || \"Password reset failed\");\n }\n } catch (err) {\n setError(\"Network error. Please try again.\");\n }\n };\n\n return (\n

Forgot Password

\n \n

\n {error &&

{error}

}\n {success &&

{success}

}\n \n

\n );\n}\n\nfunction FacebookLoginPage() {\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [showCreateAccount, setShowCreateAccount] = useState(false);\n const [showForgotPassword, setShowForgotPassword] = useState(false);\n const [loginMessage, setLoginMessage] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n try {\n const response = await fetch('/login', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ email, password })\n });\n\n const result = await response.json();\n\n if (response.ok) {\n setLoginMessage(\"Login successful!\");\n } else {\n setLoginMessage(result.error || \"Login failed\");\n }\n } catch (err) {\n setLoginMessage(\"Network error. Please try again.\");\n }\n };\n\n return (\n

facebook

\n {loginMessage &&

{loginMessage}

}\n \n

\n {showCreateAccount && (\n setShowCreateAccount(false)} \n onAccountCreated={(message) => setLoginMessage(message)}\n />\n )}\n {showForgotPassword && (\n setShowForgotPassword(false)}\n onPasswordResetRequested={(message) => setLoginMessage(message)}\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): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n const SCHEMA_VERSION = 3; // Increment schema version for reset token\n\n // Create users table with reset token column\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n first_name TEXT NOT NULL,\n last_name TEXT NOT NULL,\n email TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL,\n birth_date TEXT NOT NULL,\n gender TEXT NOT NULL,\n reset_token TEXT,\n reset_token_expires_at DATETIME,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Generate a random reset token\n function generateResetToken() {\n return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);\n }\n\n // Handle forgot password request\n if (request.method === 'POST' && new URL(request.url).pathname === '/forgot-password') {\n try {\n const { email } = await request.json();\n\n // Find user by email\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE email = ?`, \n [email]\n );\n\n if (result.rows.length > 0) {\n // Generate reset token\n const resetToken = generateResetToken();\n const resetTokenExpiresAt = new Date(Date.now() + 3600000); // 1 hour from now\n\n // Update user with reset token\n await sqlite.execute(\n `UPDATE ${KEY}_users_${SCHEMA_VERSION} \n SET reset_token = ?, reset_token_expires_at = ? \n WHERE email = ?`,\n [resetToken, resetTokenExpiresAt.toISOString(), email]\n );\n\n // In a real app, you would send an email with the reset link\n return new Response(JSON.stringify({ \n message: `Password reset link sent to ${email}. Token: ${resetToken}` \n }), { \n headers: { 'Content-Type': 'application/json' }\n });\n } else {\n return new Response(JSON.stringify({ error: 'Email not found' }), { \n status: 404,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n } catch (error) {\n return new Response(JSON.stringify({ error: 'Server error' }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Handle account creation\n if (request.method === 'POST' && new URL(request.url).pathname === '/create-account') {\n try {\n const { \n firstName, \n lastName, \n email, \n password, \n birthDate, \n gender \n } = await request.json();\n\n // Basic validation\n if (!firstName || !lastName || !email || !password || !birthDate || !gender) {\n return new Response(JSON.stringify({ error: 'All fields are required' }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Check if email already exists\n const existingUser = await sqlite.execute(\n `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE email = ?`, \n [email]\n );\n\n if (existingUser.rows.length > 0) {\n return new Response(JSON.stringify({ error: 'Email already in use' }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Insert new user\n await sqlite.execute(\n `INSERT INTO ${KEY}_users_${SCHEMA_VERSION} \n (first_name, last_name, email, password, birth_date, gender) \n VALUES (?, ?, ?, ?, ?, ?)`,\n [firstName, lastName, email, password, birthDate, gender]\n );\n\n return new Response(JSON.stringify({ \n message: 'Account created successfully! You can now log in.' \n }), { \n headers: { 'Content-Type': 'application/json' }\n });\n\n } catch (error) {\n return new Response(JSON.stringify({ error: 'Server error' }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Handle login\n if (request.method === 'POST' && new URL(request.url).pathname === '/login') {\n try {\n const { email, password } = await request.json();\n\n // Find user\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE email = ? AND password = ?`, \n [email, password]\n );\n\n if (result.rows.length > 0) {\n return new Response(JSON.stringify({ message: 'Login successful' }), { \n headers: { 'Content-Type': 'application/json' }\n });\n } else {\n return new Response(JSON.stringify({ error: 'Invalid email or password' }), { \n status: 401,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n } catch (error) {\n return new Response(JSON.stringify({ error: 'Server error' }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Serve HTML for initial page load\n return new Response(`\n \n \n Facebook - Log In\n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: #f0f2f5;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n}\n\n.facebook-login {\n width: 100%;\n max-width: 400px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n position: relative;\n}\n\n.login-container h1 {\n color: #1877f2;\n text-align: center;\n font-size: 48px;\n margin-bottom: 20px;\n}\n\nform {\n display: flex;\n flex-direction: column;\n}\n\ninput {\n margin-bottom: 12px;\n padding: 14px;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 16px;\n}\n\nbutton {\n background-color: #1877f2;\n color: white;\n border: none;\n padding: 14px;\n border-radius: 6px;\n font-size: 18px;\n font-weight: bold;\n cursor: pointer;\n margin-bottom: 12px;\n}\n\nbutton:hover {\n background-color: #166fe5;\n}\n\n.forgot-links {\n display: flex;\n justify-content: space-between;\n text-align: center;\n}\n\n.forgot-links a {\n color: #1877f2;\n text-decoration: none;\n font-size: 14px;\n}\n\n.forgot-links a:hover {\n text-decoration: underline;\n}\n\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.modal-content {\n background: white;\n width: 100%;\n max-width: 500px;\n border-radius: 8px;\n padding: 20px;\n max-height: 90vh;\n overflow-y: auto;\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid #ddd;\n padding-bottom: 15px;\n margin-bottom: 15px;\n}\n\n.modal-header h2 {\n margin: 0;\n color: #1877f2;\n}\n\n.close-btn {\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n color: #666;\n}\n\n.name-row {\n display: flex;\n gap: 10px;\n}\n\n.name-row input {\n flex: 1;\n}\n\n.birth-section, .gender-section {\n margin-bottom: 15px;\n}\n\n.birth-section label, .gender-section label {\n display: block;\n margin-bottom: 5px;\n color: #606770;\n}\n\n.gender-options {\n display: flex;\n justify-content: space-between;\n}\n\n.gender-options label {\n display: flex;\n align-items: center;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\n.gender-options input[type=\"radio\"] {\n margin-right: 5px;\n}\n\n.create-account-btn {\n background-color: #42b72a;\n font-size: 18px;\n}\n\n.create-account-btn:hover {\n background-color: #36a420;\n}\n`;","createdAt",["D",1739945652702],"version",3,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","manjit","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0RlBvTkw4TklSdlA3Y2VCS3MzOFQwTE5GdiJ9","forkedVal","interval","slug","manjit/facebookLoginPage","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[142,145,148,151],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1739945652702],{"_118":91,"_143":-5,"_116":146,"_113":147},["D",1739945443426],"405ab0ec-ee88-11ef-878d-e6cdfca9ef9f",{"_118":125,"_143":-5,"_116":149,"_113":150},["D",1739945237289],"c57c3292-ee87-11ef-a742-e6cdfca9ef9f",{"_118":32,"_143":-5,"_116":152,"_113":153},["D",1739945097258],"720627a8-ee87-11ef-bdb7-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[158],{"_113":159,"_160":161,"_116":162,"_163":-5,"_164":26,"_165":26,"_20":166},"6f3c8f5c-ee88-11ef-a2e9-e6cdfca9ef9f","body","fgdfgd",["D",1739945522097],"updatedAt","canDelete","canEdit",{"_130":131,"_132":133},"isOwner","routes/_app.v.$handle.$name.dependencies",{"_170":171,"_238":125,"_239":137,"_240":32,"_95":241},"dependenciesList",[172],{"_101":173,"_174":175},"08f95904-3584-11ef-8995-0e10024e3b32","initialData",{"_99":176,"_96":177,"_101":173,"_103":178,"_104":-5,"_105":106,"_107":179,"_108":180,"_110":181,"_112":26,"_113":181,"_114":182,"_116":183,"_118":184,"_120":26,"_121":185,"_123":186,"_124":125,"_126":125,"_122":187,"_127":32,"_128":-5,"_20":188,"_134":191,"_135":-7,"_138":196,"_197":-5,"_136":198,"_140":199},"sqlite","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","76a8911e-393e-11ef-8e71-de64eea55b61","# LLM-Safe Fork of @std/sqlite\n\nWe found that LLMs have trouble with the inputs and outputs of our @std/sqlite method.\n\n1. It expects the input to be `(sql: string, args: any[])` but it's `{ sql: string, args: any[] }`\n2. It expects the output to be objects, but they are arrays\n\nInstead of struggling to teach it, we built this val to be a wrapper around @std/sqlite that adheres to what the LLMs expect. \n\nThis val is also backwards-compatible with @std/sqlite, so we're considering merging it in.","script","5631f2d0-dcb9-11ef-80ec-e6cdfca9ef9f","import { API_URL } from \"https://esm.town/v/std/API_URL\";\nimport { LibsqlError, type ResultSet, type Row, type TransactionMode } from \"npm:@libsql/client\";\nimport { z } from \"npm:zod\";\n\n/**\n * Every Val Town account comes with its own private\n * [SQLite database](https://www.sqlite.org/) that\n * is accessible from any of your vals.\n * ([Docs ↗](https://docs.val.town/std/sqlite))\n */\nexport const sqlite = {\n /**\n * Executes a SQLite statement.\n *\n * @param {InStatement} statement - The SQLite statement to execute.\n * @example String query:\n * `sqlite.execute(\"SELECT 1;\")`\n * @example Query with arguments:\n * `sqlite.execute({sql: \"SELECT * from books WHERE year > ?;\", args: [2020]})`\n */\n execute,\n\n /**\n * Executes a batch of SQLite statements.\n *\n * @param {InStatement[]} statements - An array of SQLite statements to execute.\n * @param {TransactionMode} [mode] - The transaction mode for the batch execution.\n */\n batch,\n};\n\n// ------------\n// Functions\n// ------------\n\nasync function execute(statement: InStatement, args?: InArgs): Promise {\n const res = await fetch(`${API_URL}/v1/sqlite/execute`, {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${Deno.env.get(\"valtown\")}`,\n },\n body: JSON.stringify({ statement: normalizeStatement(statement, args) }),\n });\n if (!res.ok) {\n throw createResError(await res.text());\n }\n const resultSet = await res.json();\n return upgradeResultSet(resultSet);\n}\n\nasync function batch(statements: InStatement[], mode?: TransactionMode): Promise {\n if (mode && ![\"write\", \"read\", \"deferred\"].includes(mode)) {\n throw new Error(\"Invalid transaction mode provided to sqlite.batch. Must be 'write', 'read', or 'deferred.\");\n }\n const res = await fetch(`${API_URL}/v1/sqlite/batch`, {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${Deno.env.get(\"valtown\")}`,\n },\n body: JSON.stringify({ statements: statements.map(s => normalizeStatement(s)), mode }),\n });\n if (!res.ok) {\n throw createResError(await res.text());\n }\n const resultSets = await res.json();\n return resultSets.map(upgradeResultSet);\n}\n\nfunction createResError(body: string) {\n try {\n const e = zLibsqlError.parse(JSON.parse(body));\n // e.message already contains the code, and LibsqlError adds the\n // code to the beginning, so we remove it here\n const msg = e.message.replace(e.code, \"\").replace(/^:\\s+/, \"\");\n return new LibsqlError(msg, e.code, e.rawCode);\n } catch (_) {\n // Failed to parse libsql error\n }\n return new Error(body);\n}\n\n/* Val Town's Turso Proxy returns rows as an array of values\n * Yet the LibSQL API has a Row type which behave as an array or object,\n * ie you can access it via numerical index or string\n */\ninterface ImpoverishedResultSet extends ResultSet {\n rows: any[];\n}\n\nfunction normalizeStatement(statement: InStatement, args?: InArgs) {\n if (Array.isArray(statement)) {\n // for the case of an array of arrays\n return normalizeStatement(statement[0], statement[1]);\n }\n if (typeof statement === \"string\") {\n if (args) {\n return { sql: statement, args };\n } else return statement;\n }\n else if (typeof statement === \"object\") {\n if (statement.args) {\n return statement;\n }\n if (args) {\n return { sql: statement.sql, args };\n }\n return statement.sql;\n }\n else throw new Error(\"Error normalizing sql input\");\n}\n\nfunction upgradeResultSet(results: ImpoverishedResultSet): ResultSet {\n return {\n ...results,\n rows: results.rows.map(row => rowFromSql(row, results.columns)),\n };\n}\n\n// adapted from\n// https://github.com/tursodatabase/libsql-client-ts/blob/17dd996b840c950dd22b871adfe4ba0eb4a5ead3/packages/libsql-client/src/sqlite3.ts#L314C1-L337C2\nfunction rowFromSql(\n sqlRow: Array,\n columns: Array,\n): Row {\n const row = {};\n // make sure that the \"length\" property is not enumerable\n Object.defineProperty(row, \"length\", { value: sqlRow.length });\n for (let i = 0; i < sqlRow.length; ++i) {\n const value = sqlRow[i];\n Object.defineProperty(row, i, { value });\n\n const column = columns[i];\n if (!Object.hasOwn(row, column)) {\n Object.defineProperty(row, column, {\n value,\n enumerable: true,\n configurable: true,\n writable: true,\n });\n }\n }\n return row as Row;\n}\n\n// ------------\n// Helpers\n// ------------\n\nconst zLibsqlError = z.object({\n message: z.string(),\n code: z.string(),\n rawCode: z.number().optional(),\n});\n\n// We patch these types to only support JSON values\nexport type InValue = null | string | number | boolean;\nexport type InArgs = Array | Record;\nexport type InStatement = {\n /**\n * The SQL statement to execute.\n */\n sql: string;\n\n /**\n * The arguments to bind to the SQL statement.\n */\n args: InArgs;\n} | string;",["D",1737987404484],13,11,16282,21,{"_130":189,"_132":190},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_113":192,"_130":193,"_99":176,"_118":194,"_195":-5},"56c849ee-f1f8-11ee-9b87-cab58f78796a","std",6,"prDisabledHint","LLM-Safe Fork of @std/sqlite We found that LLMs have trouble with the inputs and outputs of our @std/sqlite method. It expects the input to be (sql: string, args: any[]) but it's { sql: string, args: any[] } It expects the output to be objects, but they are arrays Instead of struggling to teach it, we built this val to be a wrapper around @std/sqlite that adheres to what the LLMs expect. This val is also backwards-compatible with @std/sqlite, so we're considering merging it in.","latestEvaluation","stevekrouse/sqlite",[200,204,208,211,215,219,223,227,230,234],{"_116":201,"_118":184,"_202":203},["D",1737987404484],"n","1",{"_116":205,"_118":206,"_202":207},["D",1724087412304],12,"2",{"_116":209,"_118":185,"_202":210},["D",1724087404512],"3",{"_116":212,"_118":213,"_202":214},["D",1723494410142],10,"4",{"_116":216,"_118":217,"_202":218},["D",1723494389876],9,"5",{"_116":220,"_118":221,"_202":222},["D",1723494345363],8,"6",{"_116":224,"_118":225,"_202":226},["D",1723494323065],7,"7",{"_116":228,"_118":194,"_202":229},["D",1719604370206],"8",{"_116":231,"_118":232,"_202":233},["D",1719604260994],5,"9",{"_116":235,"_118":236,"_202":237},["D",1719604144103],4,"10","dependenciesCount","valname","page",{"_113":111,"_99":100,"_130":131,"_11":97,"_118":119,"_101":102,"_114":115,"_105":106,"_112":26,"_136":137},"routes/_app","actionData","errors"]