chore: initial public commit

client/app/components/modals/Account.tsx

@@ -0,0 +1,97 @@
+import { logout, updateUser } from "api/api"
+import { useState } from "react"
+import { AsyncButton } from "../AsyncButton"
+import { useAppContext } from "~/providers/AppProvider"
+
+export default function Account() {
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [confirmPw, setConfirmPw] = useState('')
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState('')
+    const [success, setSuccess] = useState('')
+    const { user, setUsername: setCtxUsername } = useAppContext()
+
+    const logoutHandler = () => {
+        setLoading(true)
+        logout()
+        .then(r => {
+            if (r.ok) {
+                window.location.reload()
+            } else {
+                r.json().then(r => setError(r.error))
+            }
+        }).catch(err => setError(err))
+        setLoading(false)
+    }
+    const updateHandler = () => {
+        if (password != "" && confirmPw === "") {
+            setError("confirm your password before submitting")
+            return
+        }
+        setError('')
+        setSuccess('')
+        setLoading(true)
+        updateUser(username, password)
+        .then(r => {
+            if (r.ok) {
+                setSuccess("sucessfully updated user")
+                if (username != "") {
+                    setCtxUsername(username)
+                }
+                setUsername('')
+                setPassword('')
+                setConfirmPw('')
+            } else {
+                r.json().then((r) => setError(r.error))
+            }
+        }).catch(err => setError(err))
+        setLoading(false)
+    }
+
+    return (
+        <>
+        <h2>Account</h2>
+        <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4 items-center">
+                <p>You're logged in as <strong>{user?.username}</strong></p>
+                <AsyncButton loading={loading} onClick={logoutHandler}>Logout</AsyncButton>
+            </div>
+            <h2>Update User</h2>
+            <div className="flex flex gap-4">
+                <input
+                    name="koito-update-username"
+                    type="text"
+                    placeholder="Update username"
+                    className="w-full mx-auto fg bg rounded p-2"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                />
+            </div>
+            <div className="flex flex gap-4">
+                <input
+                    name="koito-update-password"
+                    type="password"
+                    placeholder="Update password"
+                    className="w-full mx-auto fg bg rounded p-2"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                />
+                <input
+                    name="koito-confirm-password"
+                    type="password"
+                    placeholder="Confirm password"
+                    className="w-full mx-auto fg bg rounded p-2"
+                    value={confirmPw}
+                    onChange={(e) => setConfirmPw(e.target.value)}
+                />
+            </div>
+            <div className="w-sm">
+                <AsyncButton loading={loading} onClick={updateHandler}>Submit</AsyncButton>
+            </div>
+            {success != "" && <p className="success">{success}</p>}
+            {error != "" && <p className="error">{error}</p>}
+        </div>
+        </>
+    )
+}