68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { signIn, signOut, useSession } from "next-auth/react"
|
|
|
|
export default function AuthPanel() {
|
|
const { data: session } = useSession()
|
|
const [email, setEmail] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [name, setName] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
const [msg, setMsg] = useState("")
|
|
|
|
const doSignup = async () => {
|
|
setLoading(true)
|
|
setMsg("")
|
|
try {
|
|
const res = await fetch("/api/signup", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email, password, name }),
|
|
})
|
|
if (!res.ok) {
|
|
const j = await res.json().catch(() => ({}))
|
|
throw new Error(j?.error || `HTTP ${res.status}`)
|
|
}
|
|
setMsg("Signed up. Now log in.")
|
|
} catch (e: any) {
|
|
setMsg(e?.message || "Failed")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const doLogin = async () => {
|
|
setLoading(true)
|
|
setMsg("")
|
|
const res = await signIn("credentials", { email, password, redirect: false })
|
|
if (res?.error) setMsg(res.error)
|
|
setLoading(false)
|
|
}
|
|
|
|
if (session?.user) {
|
|
return (
|
|
<div className="border rounded p-4 space-y-2">
|
|
<div>Logged in as {session.user.email}</div>
|
|
<button className="border px-3 py-1" onClick={() => signOut()}>Logout</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="border rounded p-4 space-y-2">
|
|
<div className="text-sm opacity-70">Credentials auth (SQLite)</div>
|
|
<input className="border rounded px-2 py-1 w-full" placeholder="Name (optional)" value={name} onChange={(e) => setName(e.target.value)} />
|
|
<input className="border rounded px-2 py-1 w-full" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
|
|
<input className="border rounded px-2 py-1 w-full" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
|
|
<div className="flex gap-2">
|
|
<button className="border px-3 py-1" disabled={loading} onClick={doSignup}>Sign up</button>
|
|
<button className="border px-3 py-1" disabled={loading} onClick={doLogin}>Log in</button>
|
|
</div>
|
|
{msg && <div className="text-sm text-amber-600">{msg}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|