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 = \"facebookLoginPage\";\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`;","deleted","label",[99],"permalink","https://www.val.town/x/manjit/facebookLoginPage/code/main.tsx","extension","actionData","errors"]