36 lines
914 B
TypeScript
36 lines
914 B
TypeScript
"use client";
|
|
|
|
import { signup } from "./actions";
|
|
import { useActionState } from "react";
|
|
|
|
export default function SignupForm() {
|
|
const [state, action, pending] = useActionState(signup, undefined);
|
|
|
|
return (
|
|
<form action={action}>
|
|
<div>
|
|
<label htmlFor="name">Name</label>
|
|
<input id="name" name="name" placeholder="Name" />
|
|
</div>
|
|
{state?.errors?.name && <p>{state.errors.name}</p>}
|
|
<div>
|
|
<label htmlFor="password">Password</label>
|
|
<input id="password" name="password" type="password" />
|
|
</div>
|
|
{state?.errors?.password && (
|
|
<div>
|
|
<p>Password must:</p>
|
|
<ul>
|
|
{state.errors.password.map((error) => (
|
|
<li key={error}>- {error}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
<button disabled={pending} type="submit">
|
|
Sign Up
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|