function MainComponent() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [response, setResponse] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleUsernameChange = (event)=>{ setUsername(event.target.value); }; const handlePasswordChange = (event)=>{ setPassword(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); try { const result = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `username: ${username}, password: ${password}` } ], system_prompt: 'Please assist with the login process', max_tokens: 2000 }) }); const data = await result.json(); setLoading(false); if (data.status === true) { setResponse(data.result); } else { setResponse('An error occurred in the login process.'); } } catch (error) { setLoading(false); setResponse('Failed to communicate with the API.'); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F2F2F2] flex items-center justify-center", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md px-5", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white shadow-md rounded-lg px-8 pt-10 pb-12 mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-4xl text-[#005792] font-bold mb-8 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Orlando Health Donor Portal"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block text-[#353535] text-sm font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Username"), /*#__PURE__*/ React.createElement("input", { name: "username", id: "username", type: "text", placeholder: "Enter your username", value: username, onChange: handleUsernameChange, className: "shadow appearance-none border border-[#D1D5DB] rounded-lg w-full py-3 px-4 text-[#353535] leading-tight focus:outline-none focus:shadow-outline font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-[#353535] text-sm font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { name: "password", id: "password", type: "password", placeholder: "Enter your password", value: password, onChange: handlePasswordChange, className: "shadow appearance-none border border-[#D1D5DB] rounded-lg w-full py-3 px-4 text-[#353535] leading-tight focus:outline-none focus:shadow-outline font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this })), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center py-3", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "spinner", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-between", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#005792] hover:bg-[#003865] text-white font-semibold py-3 px-6 rounded-lg w-full focus:outline-none focus:shadow-outline font-roboto mb-3", type: "submit", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "Sign In"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-sm font-semibold text-[#005792] hover:text-[#003865] font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Forgot Password?")), response && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-[#E5E7EB] p-4 text-sm text-[#353535] rounded-lg font-roboto", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, response)), /*#__PURE__*/ React.createElement("p", { className: "text-center text-[#353535] text-xs font-roboto", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "©2023 Orlando Health. All rights reserved.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, ` .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 36px; height: 36px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }