feat: add signup flow wizard and page

2026-04-26 01:21:34 +08:00
parent d09496ed6a
commit 284a4c1076
5 changed files with 497 additions and 0 deletions
@@ -0,0 +1,74 @@
+"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>
+    )
+}