function MainComponent() { const [userType, setUserType] = React.useState(""); const [firstName, setFirstName] = React.useState(""); const [lastName, setLastName] = React.useState(""); const [businessTitle, setBusinessTitle] = React.useState(""); const [companyName, setCompanyName] = React.useState(""); const [email, setEmail] = React.useState(""); const [industrySegment, setIndustrySegment] = React.useState(""); const [password, setPassword] = React.useState(""); const [confirmPassword, setConfirmPassword] = React.useState(""); const [emailStatus, setEmailStatus] = React.useState(""); const passwordStrength = password.length >= 8 ? "Strong" : password.length >= 4 ? "Medium" : "Weak"; const validateEmail = async (email)=>{ try { const response = await fetch(`/integrations/email-check-2/v1/email/verify?email=${encodeURIComponent(email)}`, { method: 'GET' }); const data = await response.json(); setEmailStatus(data.status); } catch (error) { setEmailStatus("invalid"); } }; const handleSignup = async ()=>{ if (password !== confirmPassword || emailStatus !== "deliverable") return; const userData = { userType, firstName, lastName, businessTitle, companyName, email, industrySegment, password }; await fetch('/api/db/user-database', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `users` (`user_type`, `first_name`, `last_name`, `business_title`, `company_name`, `email`, `industry_segment`, `password`) VALUES (?, ?, ?, ?, ?, ?, ?, ?)", values: [ userData.userType, userData.firstName, userData.lastName, userData.businessTitle, userData.companyName, userData.email, userData.industrySegment, userData.password ] }) }); }; React.useEffect(()=>{ if (email) { validateEmail(email); } }, [ email ]); return /*#__PURE__*/ React.createElement("a", { href: "/authentication-interface", target: "_blank", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col justify-center items-center bg-[#f4f4f4] font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 57 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-md w-[400px]", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[20pt] font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Channel Empire"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "I am a"), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "userType", value: "Supplier", checked: userType === "Supplier", onChange: ()=>setUserType("Supplier"), className: "mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), "Supplier"), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center ml-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "userType", value: "Distributor", checked: userType === "Distributor", onChange: ()=>setUserType("Distributor"), className: "mr-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }), "Distributor")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "First Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "firstName", value: firstName, onChange: (e)=>setFirstName(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Last Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "lastName", value: lastName, onChange: (e)=>setLastName(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Business Title"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "businessTitle", value: businessTitle, onChange: (e)=>setBusinessTitle(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, "Company Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", value: companyName, onChange: (e)=>setCompanyName(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }), emailStatus && /*#__PURE__*/ React.createElement("div", { className: `text-sm mt-1 ${emailStatus === "deliverable" ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, emailStatus === "deliverable" ? "Email is valid" : "Email is invalid")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, "Industry Segment"), /*#__PURE__*/ React.createElement("select", { name: "industrySegment", value: industrySegment, onChange: (e)=>setIndustrySegment(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "Select..."), /*#__PURE__*/ React.createElement("option", { value: "Biotechnology", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "Biotechnology"), /*#__PURE__*/ React.createElement("option", { value: "Clinical Diagnostics", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Clinical Diagnostics"), /*#__PURE__*/ React.createElement("option", { value: "Pharmaceuticals", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, "Pharmaceuticals"), /*#__PURE__*/ React.createElement("option", { value: "Medical Devices", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "Medical Devices"), /*#__PURE__*/ React.createElement("option", { value: "Analytical Science", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, "Analytical Science"), /*#__PURE__*/ React.createElement("option", { value: "Environmental Science", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, "Environmental Science"), /*#__PURE__*/ React.createElement("option", { value: "Food Processing", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "Food Processing"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `text-sm mt-1 ${passwordStrength === "Weak" ? "text-red-500" : passwordStrength === "Medium" ? "text-yellow-500" : "text-green-500"}`, __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, passwordStrength)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, "Confirm Password"), /*#__PURE__*/ React.createElement("input", { type: "password", name: "confirmPassword", value: confirmPassword, onChange: (e)=>setConfirmPassword(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded hover:bg-blue-700", onClick: handleSignup, __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, "Sign Up"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#4285F4] text-white p-2 rounded hover:bg-[#357ae8]", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-google", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }), " Google"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0077B5] text-white p-2 rounded hover:bg-[#005582]", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-linkedin", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }), " LinkedIn")))))); }