function MainComponent() { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [name, setName] = React.useState(''); const [passwordLength, setPasswordLength] = React.useState(8); const [isLoading, setIsLoading] = React.useState(false); const [chatGptResponse, setChatGptResponse] = React.useState(''); const [showPassword, setShowPassword] = React.useState(false); const handleSubmit = (event)=>{ event.preventDefault(); setIsLoading(true); const body = { messages: [ { role: "user", content: `Name: ${name}, Password: ${password}, Email: ${email}` } ], system_prompt: 'Log the user information with an emoji.', max_tokens: 200 }; fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then((response)=>response.json()).then((data)=>{ setIsLoading(false); setChatGptResponse(data.result || ''); }).catch(()=>{ setIsLoading(false); setChatGptResponse('Failed to get a response from CHAT_GPT.'); }); }; const handleInputChange = (setter)=>(event)=>{ setter(event.target.value); }; const generatePassword = ()=>{ const passwordChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_-+={[}]|:;<,>.?"; const passwordArray = Array(passwordLength).fill(passwordChars).map((x)=>x[Math.floor(Math.random() * x.length)]); setPassword(passwordArray.join('')); }; const togglePasswordVisibility = ()=>{ setShowPassword(!showPassword); }; const copyToClipboard = async ()=>{ if (password) { await navigator.clipboard.writeText(password); setChatGptResponse('Password copied to clipboard.'); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-10 bg-[#1a1a1a] backdrop-blur-md shadow-xl rounded w-full max-w-md", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-3xl text-center mb-8 text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "تسجيل الدخول"), /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "text-sm font-roboto block mb-2 text-white", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "الاسم"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", value: name, onChange: handleInputChange(setName), className: "w-full px-3 py-2 border-2 border-gray-500 rounded shadow", placeholder: "الاسم الكامل", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "text-sm font-roboto block mb-2 text-white", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "البريد الإلكتروني"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", value: email, onChange: handleInputChange(setEmail), className: "w-full px-3 py-2 border-2 border-gray-500 rounded shadow", placeholder: "email@example.com", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "text-sm font-roboto block mb-2 text-white", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "كلمة المرور"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: showPassword ? 'text' : 'password', name: "password", id: "password", value: password, onChange: handleInputChange(setPassword), className: "w-full px-3 py-2 border-2 border-gray-500 rounded-l shadow", placeholder: "********", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: togglePasswordVisibility, className: "px-3 text-white bg-gray-700 border-2 border-l-0 border-gray-500 rounded-r", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: showPassword ? "fas fa-eye-slash" : "fas fa-eye", __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "passwordLength", className: "text-sm font-roboto block mb-2 text-white", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "طول كلمة السر"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "passwordLength", id: "passwordLength", min: "8", value: passwordLength.toString(), onChange: (e)=>setPasswordLength(parseInt(e.target.value, 10)), className: "px-3 py-2 border-2 border-gray-500 rounded shadow", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: generatePassword, className: "py-2 px-4 bg-gray-700 text-white rounded font-roboto transition ease-in-out delay-150 hover:bg-gray-600 duration-300", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, "إنشاء"), password && /*#__PURE__*/ React.createElement("button", { type: "button", onClick: copyToClipboard, className: "py-2 px-4 bg-gray-700 text-white rounded font-roboto transition ease-in-out delay-150 hover:bg-gray-600 duration-300", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, "نسخ")), isLoading ? /*#__PURE__*/ React.createElement("button", { type: "button", disabled: true, className: "w-full py-3 bg-gray-600 text-white rounded font-roboto opacity-50", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "جاري التحميل...") : /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-3 bg-gray-700 text-white rounded font-roboto transition ease-in-out delay-150 hover:bg-gray-600 duration-300", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "تسجيل الدخول")), chatGptResponse && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-[#262626] p-4 text-sm text-gray-400 rounded", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, chatGptResponse))))); }