chore: initial public commit

client/app/components/modals/LoginForm.tsx

@@ -0,0 +1,59 @@
+import { login } from "api/api"
+import { useEffect, useState } from "react"
+import { AsyncButton } from "../AsyncButton"
+
+export default function LoginForm() {
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState('')
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [remember, setRemember] = useState(false)
+
+    const loginHandler = () => {
+        if (username && password) {
+            setLoading(true)
+            login(username, password, remember)
+            .then(r => {
+                if (r.status >= 200 && r.status < 300) {
+                    window.location.reload()
+                } else {
+                    r.json().then(r => setError(r.error))
+                }
+            }).catch(err => setError(err))
+            setLoading(false)
+        } else if (username || password) {
+            setError("username and password are required")
+        }
+    }
+
+    return (
+        <>
+        <h2>Log In</h2>
+        <div className="flex flex-col items-center gap-4 w-full">
+            <p>Logging in gives you access to <strong>admin tools</strong>, such as updating images, merging items, deleting items, and more.</p>
+                <form action="#" className="flex flex-col items-center gap-4 w-3/4" onSubmit={(e) => e.preventDefault()}>
+                <input
+                    name="koito-username"
+                    type="text"
+                    placeholder="Username"
+                    className="w-full mx-auto fg bg rounded p-2"
+                    onChange={(e) => setUsername(e.target.value)}
+                />
+                <input
+                    name="koito-password"
+                    type="password"
+                    placeholder="Password"
+                    className="w-full mx-auto fg bg rounded p-2"
+                    onChange={(e) => setPassword(e.target.value)}
+                />
+                <div className="flex gap-2">
+                    <input type="checkbox" name="koito-remember" id="koito-remember" onChange={() => setRemember(!remember)} />
+                    <label htmlFor="kotio-remember">Remember me</label>
+                </div>
+                <AsyncButton loading={loading} onClick={loginHandler}>Login</AsyncButton>
+            </form>
+            <p className="error">{error}</p>
+        </div>
+        </>
+    )
+}