26 lines
1.2 KiB
TypeScript
26 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useActionState } from "react";
|
|
import { login, register } from "@/app/actions/auth";
|
|
|
|
export default function AuthForm({ isRegister = false }: { isRegister?: boolean }) {
|
|
const [state, formAction] = useActionState(isRegister ? register : login, null);
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<h1 className="font-bold mb-2">{isRegister ? "Register" : "Login"}</h1>
|
|
<form className="flex flex-col gap-2" action={formAction}>
|
|
<input name="username" className="p-2 bg-neutral-800 focus:outline-none focus:bg-neutral-700" placeholder="Username" required />
|
|
<input name="password" className="p-2 bg-neutral-800 focus:outline-none focus:bg-neutral-700" placeholder="Password" type="password" required />
|
|
{isRegister && (
|
|
<input name="password_confirm" className="p-2 bg-neutral-800 focus:outline-none focus:bg-neutral-700" placeholder="Confirm password" type="password" required />
|
|
)}
|
|
<button type="submit" className="p-2 bg-neutral-800 hover:bg-neutral-700 cursor-pointer">
|
|
{isRegister ? "Register" : "Login"}
|
|
</button>
|
|
{state?.error && <p>{state.error}</p>}
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|