75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import StepIndicator from "./step-indicator"
|
|
import SignupFormStep from "./signup-form-step"
|
|
import OtpVerificationStep from "./otp-verification-step"
|
|
import PasskeySetupStep from "./passkey-setup-step"
|
|
|
|
export default function SignupWizard() {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const stepParam = searchParams.get("step")
|
|
|
|
const [step, setStep] = useState<1 | 2 | 3>(() => {
|
|
if (stepParam === "otp") return 2
|
|
if (stepParam === "passkey") return 3
|
|
return 1
|
|
})
|
|
const [email, setEmail] = useState("")
|
|
|
|
// Update URL when step changes
|
|
useEffect(() => {
|
|
const params = new URLSearchParams()
|
|
if (step === 2) params.set("step", "otp")
|
|
if (step === 3) params.set("step", "passkey")
|
|
const query = params.toString()
|
|
router.replace(`/signup${query ? `?${query}` : ""}`, {
|
|
scroll: false,
|
|
})
|
|
}, [step, router])
|
|
|
|
const handleSignupSuccess = (userEmail: string) => {
|
|
setEmail(userEmail)
|
|
setStep(2)
|
|
}
|
|
|
|
const handleOtpSuccess = () => {
|
|
setStep(3)
|
|
}
|
|
|
|
const handlePasskeyComplete = () => {
|
|
router.push("/")
|
|
}
|
|
|
|
const handlePasskeySkip = () => {
|
|
router.push("/")
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<StepIndicator currentStep={step} totalSteps={3} />
|
|
|
|
{step === 1 && (
|
|
<SignupFormStep onSuccess={handleSignupSuccess} />
|
|
)}
|
|
|
|
{step === 2 && (
|
|
<OtpVerificationStep
|
|
email={email}
|
|
onSuccess={handleOtpSuccess}
|
|
onBack={() => setStep(1)}
|
|
/>
|
|
)}
|
|
|
|
{step === 3 && (
|
|
<PasskeySetupStep
|
|
onSuccess={handlePasskeyComplete}
|
|
onSkip={handlePasskeySkip}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|