Koito/client/app/components/modals/Account.tsx

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 new 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>
        </>
    )
}