\n \n

\n );\n}\n\n// Login Form Component\nfunction LoginForm({ onLogin, switchToRegister }) {\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [error, setError] = useState('');\n\n async function handleSubmit(e) {\n e.preventDefault();\n \n // Email validation\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(email)) {\n setError('Invalid email format');\n return;\n }\n\n try {\n // Hash the password for secure comparison\n const hashedPassword = await hashPassword(password);\n \n const response = await fetch('/api/login', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ email, password: hashedPassword })\n });\n \n const result = await response.json();\n if (result.success) {\n onLogin(result.user);\n } else {\n setError(result.message || 'Login failed');\n }\n } catch (error) {\n setError('Network error. Please try again.');\n }\n }\n\n return (\n

\n \n

\n );\n}\n\n// Rest of the existing code remains the same (StudentDetailsForm, AttendancePopup, App, etc.)\nfunction StudentDetailsForm({ user, onDetailsSubmit }) {\n const [rollNumber, setRollNumber] = useState('');\n const [semester, setSemester] = useState('');\n const [honour, setHonour] = useState('');\n const [error, setError] = useState('');\n\n const semesters = [\n '1st Semester', '2nd Semester', '3rd Semester', \n '4th Semester', '5th Semester', '6th Semester', \n '7th Semester', '8th Semester'\n ];\n\n const honours = [\n 'Computer Science', \n 'Mathematics', \n 'Physics', \n 'Chemistry', \n 'Biology', \n 'Electronics',\n 'Mechanical Engineering',\n 'Civil Engineering'\n ];\n\n async function handleSubmit(e) {\n e.preventDefault();\n \n // Validation\n if (!rollNumber || !semester || !honour) {\n setError('Please fill all fields');\n return;\n }\n\n try {\n const response = await fetch('/api/student-details', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n userId: user.id,\n rollNumber, \n semester, \n honour \n })\n });\n \n const result = await response.json();\n if (result.success) {\n onDetailsSubmit(result.studentDetails);\n } else {\n setError(result.message || 'Failed to submit details');\n }\n } catch (error) {\n setError('Network error. Please try again.');\n }\n }\n\n return (\n

\n \n

\n );\n}\n\nfunction AttendancePopup({ onClose }) {\n return (\n

✅ Attendance Submitted Successfully!

Your attendance has been recorded.

\n \n

\n );\n}\n\nfunction App() {\n const [user, setUser] = useState(null);\n const [isRegistering, setIsRegistering] = useState(false);\n const [studentDetails, setStudentDetails] = useState(null);\n const [showAttendancePopup, setShowAttendancePopup] = useState(false);\n const [courses, setCourses] = useState([]);\n const [selectedCourse, setSelectedCourse] = useState(null);\n\n function handleDetailsSubmit(details) {\n setStudentDetails(details);\n }\n\n function handleAttendanceSubmit() {\n setShowAttendancePopup(true);\n }\n\n if (!user) {\n return isRegistering ? (\n {\n setUser(userData);\n setIsRegistering(false);\n }} \n switchToLogin={() => setIsRegistering(false)}\n />\n ) : (\n setUser(userData)}\n switchToRegister={() => setIsRegistering(true)}\n />\n );\n }\n\n if (!studentDetails) {\n return (\n \n );\n }\n\n return (\n

College Attendance System

Welcome, {user.name}

Roll Number: {studentDetails.rollNumber}

Semester: {studentDetails.semester}

Honour: {studentDetails.honour}

\n\n

Available Courses

\n {courses.map(course => (\n

setSelectedCourse(course)}\n >\n {course.name}\n

\n ))}\n

\n\n {selectedCourse && (\n

Mark Attendance for {selectedCourse.name}

\n \n

\n )}\n\n {showAttendancePopup && (\n setShowAttendancePopup(false)} \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 = \"attendanceSite\";\n\n // Existing users table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users_5 (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n email TEXT UNIQUE NOT NULL,\n password TEXT NOT NULL,\n role TEXT NOT NULL\n )\n `);\n\n // New student details table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_student_details_2 (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER UNIQUE NOT NULL,\n roll_number TEXT UNIQUE NOT NULL,\n semester TEXT NOT NULL,\n honour TEXT NOT NULL,\n FOREIGN KEY(user_id) REFERENCES ${KEY}_users_5(id)\n )\n `);\n\n const url = new URL(request.url);\n\n // Login Endpoint\n if (request.method === 'POST' && url.pathname === '/api/login') {\n const { email, password } = await request.json();\n \n try {\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_users_5 WHERE email = ? AND password = ?`, \n [email, password]\n );\n\n if (result.rows.length > 0) {\n const user = result.rows[0];\n return new Response(JSON.stringify({\n success: true,\n user: {\n id: user.id,\n name: user.name,\n email: user.email,\n role: user.role\n }\n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } else {\n return new Response(JSON.stringify({\n success: false,\n message: 'Invalid credentials'\n }), { \n status: 401,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n } catch (error) {\n return new Response(JSON.stringify({\n success: false,\n message: 'Login error'\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Registration Endpoint\n if (request.method === 'POST' && url.pathname === '/api/register') {\n const { name, email, password, role } = await request.json();\n \n try {\n // Check if email already exists\n const existingUser = await sqlite.execute(\n `SELECT * FROM ${KEY}_users_5 WHERE email = ?`, \n [email]\n );\n\n if (existingUser.rows.length > 0) {\n return new Response(JSON.stringify({\n success: false,\n message: 'Email already registered'\n }), { \n status: 409,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Insert new user\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_users_5 (name, email, password, role) VALUES (?, ?, ?, ?)`, \n [name, email, password, role]\n );\n\n return new Response(JSON.stringify({\n success: true,\n user: {\n id: result.lastInsertRowid,\n name,\n email,\n role\n }\n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } catch (error) {\n return new Response(JSON.stringify({\n success: false,\n message: 'Registration error'\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // Student Details Submission Endpoint\n if (request.method === 'POST' && url.pathname === '/api/student-details') {\n const { userId, rollNumber, semester, honour } = await request.json();\n \n try {\n // Check if roll number already exists\n const existingStudent = await sqlite.execute(\n `SELECT * FROM ${KEY}_student_details_2 WHERE roll_number = ?`, \n [rollNumber]\n );\n\n if (existingStudent.rows.length > 0) {\n return new Response(JSON.stringify({\n success: false,\n message: 'Roll number already registered'\n }), { \n status: 409,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Insert student details\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_student_details_2 (user_id, roll_number, semester, honour) VALUES (?, ?, ?, ?)`, \n [userId, rollNumber, semester, honour]\n );\n\n return new Response(JSON.stringify({\n success: true,\n studentDetails: {\n id: result.lastInsertRowid,\n userId,\n rollNumber,\n semester,\n honour\n }\n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } catch (error) {\n return new Response(JSON.stringify({\n success: false,\n message: 'Student details submission error'\n }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' } \n });\n }\n }\n\n // HTML Response with additional styles\n return new Response(`\n \n \n College Attendance System\n \n \n \n \n

\n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\n.attendance-dashboard {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background: white;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n}\n.student-info {\n background: #f4f4f4;\n padding: 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n}\n.courses-section {\n margin-bottom: 20px;\n}\n.course-list {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 10px;\n}\n.course-item {\n background: #e0e0e0;\n padding: 10px;\n border-radius: 5px;\n cursor: pointer;\n transition: background 0.3s;\n}\n.course-item:hover {\n background: #d0d0d0;\n}\n.attendance-section {\n text-align: center;\n padding: 20px;\n background: #f9f9f9;\n border-radius: 5px;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Bobbyai/attendanceSite/code/main.tsx","extension","actionData","errors"]

College Attendance Registration

College Attendance Login

Student Details

✅ Attendance Submitted Successfully!

College Attendance System

Welcome, {user.name}

Available Courses

Mark Attendance for {selectedCourse.name}