"use client"; import { type ChangeEvent, useState } from "react"; import { Field, Honeypot, StatusBanner } from "@/components/forms/Field"; import { inputClass, isEmail, isRequired, submitDemo, type SubmitResult } from "@/lib/forms"; const ROLES = ["Developer", "QA engineer", "Designer", "Product", "Other"]; const STEP_LABELS = ["Account", "Profile", "Review"]; export function SignupForm() { const [step, setStep] = useState(0); const [v, setV] = useState({ email: "", password: "", confirm: "", name: "", company: "", role: "", website: "", }); const [errors, setErrors] = useState>({}); const [status, setStatus] = useState(null); const [submitting, setSubmitting] = useState(false); const upd = (k: keyof typeof v) => (e: ChangeEvent) => setV((p) => ({ ...p, [k]: e.target.value })); function validateStep(s: number) { const er: Record = {}; if (s === 0) { if (!isEmail(v.email)) er.email = "Please enter a valid email."; if (v.password.length < 8) er.password = "Use at least 8 characters."; if (v.confirm !== v.password) er.confirm = "Passwords do not match."; } else if (s === 1) { if (!isRequired(v.name)) er.name = "Please enter your name."; if (!isRequired(v.role)) er.role = "Please choose a role."; } setErrors(er); return Object.keys(er).length === 0; } function next() { if (validateStep(step)) setStep((s) => Math.min(s + 1, 2)); } function back() { setErrors({}); setStep((s) => Math.max(s - 1, 0)); } async function onSubmit(e: React.FormEvent) { e.preventDefault(); setSubmitting(true); const result = await submitDemo({ email: v.email, name: v.name, company: v.company, role: v.role, website: v.website, }); setStatus(result); setSubmitting(false); } return (

{i + 1} {label} {i < 2 && }

{step === 0 && (

)} {step === 1 && (

)} {step === 2 && (

Review your details

{k}: {val}

)}

{step > 0 && ( )} {step < 2 ? ( ) : ( )}

{status && } ); }

Multi-step signup