function MainComponent() { const [role, setRole] = React.useState(""); const [showPopup, setShowPopup] = React.useState(true); const [loginMode, setLoginMode] = React.useState(false); const handleRoleChange = (e)=>{ setRole(e.target.value); }; const handleFormSubmit = async (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const data = Object.fromEntries(formData.entries()); if (loginMode) { const response = await fetch('/api/db/users', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `users` WHERE `email` = ? AND `password` = ?', values: [ data.email, data.password ] }) }); const result = await response.json(); if (result.length > 0) { window.location.href = "/home"; } else { alert("Invalid email or password"); } } else { await fetch('/api/db/users', { method: 'POST', body: JSON.stringify({ query: `INSERT INTO \`users\` (\`name\`, \`age\`, \`expertise\`, \`gender\`, \`email\`, \`password\`, \`role\`, \`subjects\`, \`resume\`) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`, values: [ data.name, data.age, data.expertise || '', data.gender || '', data.email, data.password, data.role, data.subjects || '', data.resume || '' ] }) }); window.location.href = "/home"; } }; const handleNavigation = (page)=>{ setShowPopup(false); if (page === "login") { setLoginMode(true); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, showPopup && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Welcome"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Have an account?"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#007bff] text-white py-2 px-4 rounded mb-2 hover:bg-[#0056b3]", onClick: ()=>handleNavigation("login"), __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Log In"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#007bff] text-white py-2 px-4 rounded hover:bg-[#0056b3]", onClick: ()=>setShowPopup(false), __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Create New Account"))), !showPopup && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, loginMode ? 'Log In' : 'Sign Up'), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, !loginMode && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "age", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, "Age"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "age", name: "age", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "expertise", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "Expertise"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "expertise", name: "expertise", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "gender", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, "Gender"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "gender", name: "gender", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", id: "password", name: "password", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this })), !loginMode && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "role", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Role"), /*#__PURE__*/ React.createElement("select", { id: "role", name: "role", value: role, onChange: handleRoleChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", required: true, __source: { fileName: "", lineNumber: 113, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 114, columnNumber: 21 }, __self: this }, "Select Role"), /*#__PURE__*/ React.createElement("option", { value: "student", __source: { fileName: "", lineNumber: 115, columnNumber: 21 }, __self: this }, "Student"), /*#__PURE__*/ React.createElement("option", { value: "teacher", __source: { fileName: "", lineNumber: 116, columnNumber: 21 }, __self: this }, "Teacher"))), role === "teacher" && /*#__PURE__*/ React.createElement("div", { id: "teacherFields", __source: { fileName: "", lineNumber: 120, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "subjects", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 122, columnNumber: 23 }, __self: this }, "Subjects You Teach"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "subjects", name: "subjects", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 123, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "resume", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 126, columnNumber: 23 }, __self: this }, "Resume"), /*#__PURE__*/ React.createElement("textarea", { id: "resume", name: "resume", className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 127, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#007bff] text-white py-2 px-4 rounded hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, loginMode ? 'Log In' : 'Create Account'))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, ` body { background-image: url('https://fal-cdn.batuhan-941.workers.dev/files/elephant/y_nTa5HSjqbEuoL5MLnfT.jpeg'); background-size: cover; background-repeat: no-repeat; background-position: center center; opacity: ${showPopup ? '1' : '0.6'}; } `)); }