90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useActionState, JSX } from "react";
|
|
import { addUserAction, FormState } from "../actions/UserActionsZod";
|
|
import SubmitButton from "./SubmitButton";
|
|
|
|
const initialState: FormState = {
|
|
success: false,
|
|
message: "",
|
|
};
|
|
|
|
export default function AddUserForm(): JSX.Element {
|
|
// useActionState receives (action, initialState)
|
|
const [state, formAction] = useActionState(addUserAction, initialState);
|
|
|
|
return (
|
|
<div className="card bg-base-100 shadow border border-base-300">
|
|
<div className="card-body">
|
|
<h2 className="card-title text-lg">
|
|
Add New User using Zod Validation
|
|
</h2>
|
|
|
|
{/* Global Success / Failure Alerts */}
|
|
{state.message && (
|
|
<div
|
|
className={`alert ${state.success ? "alert-success" : "alert-error"} text-sm py-2`}
|
|
>
|
|
<span>{state.message}</span>
|
|
</div>
|
|
)}
|
|
|
|
<form action={formAction} className="space-y-4 mt-2">
|
|
{/* Name Input */}
|
|
<div className="form-control">
|
|
<label className="label label-text font-medium">Name</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="Jane Doe"
|
|
className={`input input-bordered w-full ${state.errors?.name ? "input-error" : ""}`}
|
|
/>
|
|
{state.errors?.name && (
|
|
<span className="text-xs text-error mt-1">
|
|
{state.errors.name[0]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Email Input */}
|
|
<div className="form-control">
|
|
<label className="label label-text font-medium">Email</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="jane@example.com"
|
|
className={`input input-bordered w-full ${state.errors?.email ? "input-error" : ""}`}
|
|
/>
|
|
{state.errors?.email && (
|
|
<span className="text-xs text-error mt-1">
|
|
{state.errors.email[0]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Password Input */}
|
|
<div className="form-control">
|
|
<label className="label label-text font-medium">Password</label>
|
|
<input
|
|
type="password"
|
|
name="pass"
|
|
placeholder="••••••••"
|
|
className={`input input-bordered w-full ${state.errors?.pass ? "input-error" : ""}`}
|
|
/>
|
|
{state.errors?.pass && (
|
|
<span className="text-xs text-error mt-1">
|
|
{state.errors.pass[0]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Submit Button with Loading Spinner */}
|
|
<div className="flex justify-end pt-2">
|
|
<SubmitButton label="Create Account" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|