function MainComponent() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [loginError, setLoginError] = React.useState(''); const handleUsernameChange = (event)=>{ setUsername(event.target.value); }; const handlePasswordChange = (event)=>{ setPassword(event.target.value); }; const generateUsername = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: username } ], system_prompt: 'Generate a game username', max_tokens: 50 }) }); const data = await response.json(); if (data.status) { setUsername(data.result); } else { throw new Error('Failed to generate username'); } } catch (error) { console.error('Error generating username:', error); } finally{ setIsLoading(false); } }; const handleSubmit = async (event)=>{ event.preventDefault(); setIsLoading(true); setLoginError(''); try { // Placeholder for auth API call. const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); const data = await response.json(); if (data.status) { // Redirect to game dashboard. window.location.href = '/dashboard'; } else { setLoginError(data.message || 'Invalid credentials'); } } catch (error) { setLoginError('An error occurred while logging in.'); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-[#343a40]", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-[#f8f9fa] shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#495057] text-sm font-roboto mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "BlixyName"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "username", type: "text", placeholder: "Enter your username", name: "username", value: username, onChange: handleUsernameChange, required: true, className: "shadow appearance-none border rounded-l w-full py-2 px-3 text-[#495057] leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateUsername, disabled: isLoading, type: "button", className: `flex items-center justify-center px-4 border-l ${isLoading ? 'cursor-wait' : 'cursor-pointer'} border text-[#495057] bg-[#e9ecef] rounded-r`, __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle-notch fa-spin", __source: { fileName: "", lineNumber: 91, columnNumber: 23 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-random", __source: { fileName: "", lineNumber: 93, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#495057] text-sm font-roboto mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Passphrase"), /*#__PURE__*/ React.createElement("input", { id: "password", type: "password", placeholder: "Enter your password", name: "password", value: password, onChange: handlePasswordChange, required: true, className: "shadow border rounded w-full py-2 px-3 text-[#495057] leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this })), loginError && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#dc3545] mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, loginError), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://blixyblox.xyz/loginauth", target: "_blank", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { disabled: isLoading, type: "submit", className: "bg-[#007bff] hover:bg-[#0056b3] text-white font-roboto py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full", __source: { fileName: "", lineNumber: 118, columnNumber: 71 }, __self: this }, isLoading ? 'Logging in...' : 'Log In'))), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-[#868e96] mt-6", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, "Don't have a game account? ", /*#__PURE__*/ React.createElement("a", { target: "_self", href: "https://blixyblox.xyz/signup", className: "text-[#007bff] hover:text-[#0056b3]", __source: { fileName: "", lineNumber: 127, columnNumber: 40 }, __self: this }, "Sign Up"))))); }