function MainComponent() { const [page, setPage] = React.useState("login"); const [user, setUser] = React.useState(null); const handleLogin = async (e)=>{ e.preventDefault(); const username = e.target.username.value; const password = e.target.password.value; const response = await fetch("/api/db/account", { method: "POST", body: JSON.stringify({ query: 'SELECT `id` FROM `users` WHERE `username` = ? AND `password` = ?', values: [ username, password ] }) }); const data = await response.json(); if (data.length > 0) { setUser({ username }); setPage("mypage"); } else { alert("ユーザー名またはパスワードが違います"); } }; const handleRegister = async (e)=>{ e.preventDefault(); const username = e.target.username.value; const password = e.target.password.value; const checkResponse = await fetch("/api/db/account", { method: "POST", body: JSON.stringify({ query: 'SELECT `id` FROM `users` WHERE `username` = ?', values: [ username ] }) }); const checkData = await checkResponse.json(); if (checkData.length === 0) { await fetch("/api/db/account", { method: "POST", body: JSON.stringify({ query: 'INSERT INTO `users` (`username`, `password`) VALUES (?, ?)', values: [ username, password ] }) }); setUser({ username }); setPage("mypage"); } else { alert("すでにユーザーが存在します"); } }; const handleLogout = ()=>{ setUser(null); setPage("login"); }; let formContent; if (page === "login") { formContent = /*#__PURE__*/ React.createElement("div", { className: "bg-white p-10 rounded-lg shadow-lg max-w-[400px] w-full", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-5 font-crimson-text text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 font-crimson-text", htmlFor: "username", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", className: "w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-black", placeholder: "ユーザー名を入力", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 font-crimson-text", htmlFor: "password", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", className: "w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-black", placeholder: "パスワードを入力", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-[#1e3a8a] text-white text-sm font-bold text-center rounded focus:outline-none font-crimson-text transition duration-500", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "ログイン"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full py-2 bg-[#1e3a8a] text-white text-sm font-bold text-center mt-4 rounded focus:outline-none font-crimson-text transition duration-500", onClick: ()=>setPage("register"), __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "アカウント新規作成"))); } else if (page === "register") { formContent = /*#__PURE__*/ React.createElement("div", { className: "bg-white p-10 rounded-lg shadow-lg max-w-[400px] w-full", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-5 font-crimson-text text-center", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "アカウント新規作成"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleRegister, __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 font-crimson-text", htmlFor: "username", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", className: "w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-black", placeholder: "ユーザー名を入力", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1 font-crimson-text", htmlFor: "password", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", className: "w-full border border-gray-300 p-2 rounded focus:outline-none focus:border-black", placeholder: "パスワードを入力", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 bg-[#1e3a8a] text-white text-sm font-bold text-center rounded focus:outline-none font-crimson-text transition duration-500", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, "登録"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full py-2 bg-[#1e3a8a] text-white text-sm font-bold text-center mt-4 rounded focus:outline-none font-crimson-text transition duration-500", onClick: ()=>setPage("login"), __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, "ログインに戻る"))); } else if (page === "mypage") { formContent = /*#__PURE__*/ React.createElement("div", { className: "bg-white p-10 rounded-lg shadow-lg max-w-[400px] w-full text-center", __source: { fileName: "", lineNumber: 144, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-5 font-crimson-text", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, "マイページ"), /*#__PURE__*/ React.createElement("p", { className: "mb-6 font-crimson-text", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, "こんにちは, ", user.username, "さん"), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 bg-[#1e3a8a] text-white rounded font-bold text-sm focus:outline-none font-crimson-text transition duration-500", onClick: handleLogout, __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, "ログアウト")); } return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 158, columnNumber: 5 }, __self: this }, formContent, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, ` button { border: 2px solid #1e3a8a; transition: all 0.5s; } button:hover { background-color: #00bfff; color: #1e3a8a; transform: scale(1.1); } `)); }