function StudentSignupForm() { const handleSignUp = ()=>{ const formData = { firstName: document.getElementsByName('firstName')[0].value, middleName: document.getElementsByName('middleName')[0].value, lastName: document.getElementsByName('lastName')[0].value, contactNo: document.getElementsByName('contactNo')[0].value, schoolYear: document.getElementsByName('schoolYear')[0].value, gradeLevel: document.getElementsByName('gradeLevel')[0].value, section: document.getElementsByName('section')[0].value, adviser: document.getElementsByName('adviser')[0].value, bldg: document.getElementsByName('bldg')[0].value, roomNo: document.getElementsByName('roomNo')[0].value }; fetch('/api/db/userdata-21', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `signup` (first_name, middle_name, last_name, contact_no, school_year, grade_level, section, adviser, bldg, room_no) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)", values: [ formData.firstName, formData.middleName, formData.lastName, formData.contactNo, formData.schoolYear, formData.gradeLevel, formData.section, formData.adviser, formData.bldg, formData.roomNo ] }) }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Sign Up"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "firstName", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "First Name"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "firstName", type: "text", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "middleName", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Middle Name"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "middleName", type: "text", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "lastName", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Last Name"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "lastName", type: "text", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "contactNo", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Contact No."), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "contactNo", type: "text", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "schoolYear", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "School Year"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "schoolYear", type: "text", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "gradeLevel", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Grade Level"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "gradeLevel", type: "text", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "section", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Section"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "section", type: "text", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "adviser", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Adviser"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "adviser", type: "text", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "bldg", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Bldg"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "bldg", type: "text", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "roomNo", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Room No."), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", name: "roomNo", type: "text", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", type: "button", onClick: handleSignUp, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Sign Up")))); } function StudentSignupFormStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StudentSignupForm, { __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isSignup, setIsSignup] = React.useState(false); const handleToggleSignup = ()=>{ setIsSignup(!isSignup); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-50", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, !isSignup ? /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 font-roboto text-center", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "User Login"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "Email:"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full border border-gray-300 p-2 rounded mt-1", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "Password:"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", className: "w-full border border-gray-300 p-2 rounded mt-1", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-medium font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, "Role:"), /*#__PURE__*/ React.createElement("select", { name: "role", className: "w-full border border-gray-300 p-2 rounded mt-1", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "administrator", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "Administrator"), /*#__PURE__*/ React.createElement("option", { value: "teacher", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "Teacher"), /*#__PURE__*/ React.createElement("option", { value: "student", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "Student"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Login"), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-500", onClick: handleToggleSignup, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Sign up for new user"), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-500", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-google mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }), "Sign up with Google"))))) : /*#__PURE__*/ React.createElement(StudentSignupForm, { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this })); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this })); }