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,146 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+import { ArrowLeft, Loader2, Mail } from "lucide-react"
+import { authClient } from "@/lib/auth-client"
+import OtpInput from "./otp-input"
+
+interface OtpVerificationStepProps {
+    email: string
+    onSuccess: () => void
+    onBack: () => void
+}
+
+export default function OtpVerificationStep({
+    email,
+    onSuccess,
+    onBack,
+}: OtpVerificationStepProps) {
+    const [otp, setOtp] = useState("")
+    const [error, setError] = useState("")
+    const [isLoading, setIsLoading] = useState(false)
+    const [resendTimer, setResendTimer] = useState(300) // 5 minutes
+    const [canResend, setCanResend] = useState(false)
+
+    // Countdown timer
+    useEffect(() => {
+        if (resendTimer <= 0) {
+            setCanResend(true)
+            return
+        }
+        const interval = setInterval(() => {
+            setResendTimer((prev) => prev - 1)
+        }, 1000)
+        return () => clearInterval(interval)
+    }, [resendTimer])
+
+    const formatTime = (seconds: number) => {
+        const mins = Math.floor(seconds / 60)
+        const secs = seconds % 60
+        return `${mins}:${secs.toString().padStart(2, "0")}`
+    }
+
+    const handleVerify = useCallback(async () => {
+        if (otp.length !== 6) return
+
+        setIsLoading(true)
+        setError("")
+
+        const { error } = await authClient.emailOtp.verifyEmail({
+            email,
+            otp,
+        })
+
+        setIsLoading(false)
+
+        if (error) {
+            setError(
+                error.code === "TOO_MANY_ATTEMPTS"
+                    ? "Too many attempts. Please request a new code."
+                    : "Invalid code. Please try again.",
+            )
+            return
+        }
+
+        onSuccess()
+    }, [otp, email, onSuccess])
+
+    // Auto-submit when all digits entered
+    useEffect(() => {
+        if (otp.length === 6) {
+            handleVerify()
+        }
+    }, [otp, handleVerify])
+
+    const handleResend = async () => {
+        setError("")
+        await authClient.emailOtp.sendVerificationOtp({
+            email,
+            type: "email-verification",
+        })
+        setResendTimer(300)
+        setCanResend(false)
+    }
+
+    return (
+        <div className="space-y-4">
+            <div className="text-center mb-2">
+                <Mail className="h-10 w-10 text-[#eb3779] mx-auto mb-3" />
+                <h1 className="text-lg font-bold text-[#ebe4f1]">
+                    Verify your email
+                </h1>
+                <p className="text-xs text-[#ebe4f1]/50 mt-1">
+                    We sent a 6-digit code to{" "}
+                    <strong className="text-[#ebe4f1]">{email}</strong>
+                </p>
+            </div>
+
+            <div>
+                <label className="text-xs text-[#ebe4f1]/60 block mb-2 text-center">
+                    Verification code
+                </label>
+                <OtpInput
+                    value={otp}
+                    onChange={setOtp}
+                    disabled={isLoading}
+                    error={error}
+                />
+            </div>
+
+            <div className="text-center text-xs">
+                {canResend ? (
+                    <button
+                        onClick={handleResend}
+                        className="text-[#eb3779] hover:underline"
+                    >
+                        Resend code
+                    </button>
+                ) : (
+                    <span className="text-[#ebe4f1]/40">
+                        Resend code in{" "}
+                        <span className="text-[#eb3779] font-semibold">
+                            {formatTime(resendTimer)}
+                        </span>
+                    </span>
+                )}
+            </div>
+
+            <button
+                onClick={handleVerify}
+                disabled={isLoading || otp.length !== 6}
+                className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            >
+                {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
+                Verify
+            </button>
+
+            <button
+                onClick={onBack}
+                className="flex items-center justify-center gap-1.5 w-full text-xs text-[#ebe4f1]/50 hover:text-[#ebe4f1] transition-colors"
+            >
+                <ArrowLeft className="h-3 w-3" />
+                Back to signup
+            </button>
+        </div>
+    )
+}
@@ -0,0 +1,115 @@
+"use client"
+
+import { useState } from "react"
+import { KeyRound, Check, Loader2, Fingerprint } from "lucide-react"
+import { authClient } from "@/lib/auth-client"
+
+interface PasskeySetupStepProps {
+    onSuccess: () => void
+    onSkip: () => void
+}
+
+export default function PasskeySetupStep({
+    onSuccess,
+    onSkip,
+}: PasskeySetupStepProps) {
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState("")
+
+    const isPasskeySupported =
+        typeof window !== "undefined" &&
+        "PublicKeyCredential" in window
+
+    const handleAddPasskey = async () => {
+        setIsLoading(true)
+        setError("")
+
+        const { error } = await authClient.passkey.addPasskey({
+            name: "Primary passkey",
+        })
+
+        setIsLoading(false)
+
+        if (error) {
+            setError(
+                error.message ||
+                    "Failed to set up passkey. You can try again later.",
+            )
+            return
+        }
+
+        onSuccess()
+    }
+
+    return (
+        <div className="space-y-4">
+            <div className="text-center mb-2">
+                <KeyRound className="h-10 w-10 text-[#eb3779] mx-auto mb-3" />
+                <h1 className="text-lg font-bold text-[#ebe4f1]">
+                    Set up a passkey
+                </h1>
+                <p className="text-xs text-[#ebe4f1]/50 mt-1 leading-relaxed">
+                    Sign in faster with biometrics or your device's security
+                    key. No password needed.
+                </p>
+            </div>
+
+            {/* Benefits list */}
+            <div className="bg-white/[0.02] rounded-lg p-3.5 space-y-2">
+                <div className="flex items-center gap-2 text-xs text-[#ebe4f1]/60">
+                    <Check className="h-3.5 w-3.5 text-[#22c55e] shrink-0" />
+                    Faster sign-in with fingerprint or face
+                </div>
+                <div className="flex items-center gap-2 text-xs text-[#ebe4f1]/60">
+                    <Check className="h-3.5 w-3.5 text-[#22c55e] shrink-0" />
+                    More secure than passwords
+                </div>
+                <div className="flex items-center gap-2 text-xs text-[#ebe4f1]/60">
+                    <Check className="h-3.5 w-3.5 text-[#22c55e] shrink-0" />
+                    Works across your devices
+                </div>
+            </div>
+
+            {error && (
+                <div className="text-red-400 text-xs text-center bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
+                    {error}
+                </div>
+            )}
+
+            {isPasskeySupported ? (
+                <>
+                    <button
+                        onClick={handleAddPasskey}
+                        disabled={isLoading}
+                        className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                    >
+                        {isLoading ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                            <Fingerprint className="h-4 w-4" />
+                        )}
+                        Set up passkey
+                    </button>
+                    <button
+                        onClick={onSkip}
+                        className="w-full py-2.5 rounded-lg border border-white/10 text-[#ebe4f1]/60 text-sm hover:bg-white/[0.03] transition-colors"
+                    >
+                        Skip for now
+                    </button>
+                </>
+            ) : (
+                <div className="text-center">
+                    <p className="text-xs text-[#ebe4f1]/40 mb-3">
+                        Passkeys are not supported on this device.
+                    </p>
+                    <button
+                        onClick={onSkip}
+                        className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors"
+                    >
+                        Continue
+                    </button>
+                </div>
+            )}
+        </div>
+    )
+}
@@ -0,0 +1,152 @@
+"use client"
+
+import { useState } from "react"
+import { Loader2 } from "lucide-react"
+import { authClient } from "@/lib/auth-client"
+import { signupSchema, type SignupInput } from "@/lib/auth/validation"
+import SocialButtons from "./social-buttons"
+import PasswordStrengthMeter from "./password-strength"
+import Link from "next/link"
+
+interface SignupFormStepProps {
+    onSuccess: (email: string) => void
+}
+
+export default function SignupFormStep({ onSuccess }: SignupFormStepProps) {
+    const [name, setName] = useState("")
+    const [email, setEmail] = useState("")
+    const [password, setPassword] = useState("")
+    const [errors, setErrors] = useState<Record<string, string>>({})
+    const [serverError, setServerError] = useState("")
+    const [isLoading, setIsLoading] = useState(false)
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+        setErrors({})
+        setServerError("")
+
+        const result = signupSchema.safeParse({ name, email, password })
+        if (!result.success) {
+            const fieldErrors: Record<string, string> = {}
+            result.error.issues.forEach((issue) => {
+                const field = issue.path[0] as string
+                fieldErrors[field] = issue.message
+            })
+            setErrors(fieldErrors)
+            return
+        }
+
+        setIsLoading(true)
+        const { error } = await authClient.signUp.email({
+            name,
+            email,
+            password,
+        })
+        setIsLoading(false)
+
+        if (error) {
+            setServerError(
+                error.message || "Something went wrong. Please try again.",
+            )
+            return
+        }
+
+        onSuccess(email)
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="text-center mb-2">
+                <h1 className="text-lg font-bold text-[#ebe4f1]">
+                    Create your account
+                </h1>
+                <p className="text-xs text-[#ebe4f1]/50 mt-1">
+                    Choose how you'd like to sign up
+                </p>
+            </div>
+
+            <SocialButtons callbackURL="/signup?step=passkey" />
+
+            <div className="flex items-center gap-3">
+                <div className="flex-1 h-px bg-white/[0.08]" />
+                <span className="text-[11px] text-[#ebe4f1]/40 uppercase">
+                    or use email
+                </span>
+                <div className="flex-1 h-px bg-white/[0.08]" />
+            </div>
+
+            {serverError && (
+                <div className="text-red-400 text-xs text-center bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
+                    {serverError}
+                </div>
+            )}
+
+            <div>
+                <label className="text-xs text-[#ebe4f1]/60 block mb-1">
+                    Name
+                </label>
+                <input
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Your name"
+                    className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
+                />
+                {errors.name && (
+                    <p className="text-red-400 text-xs mt-1">{errors.name}</p>
+                )}
+            </div>
+
+            <div>
+                <label className="text-xs text-[#ebe4f1]/60 block mb-1">
+                    Email
+                </label>
+                <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="you@example.com"
+                    className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
+                />
+                {errors.email && (
+                    <p className="text-red-400 text-xs mt-1">{errors.email}</p>
+                )}
+            </div>
+
+            <div>
+                <label className="text-xs text-[#ebe4f1]/60 block mb-1">
+                    Password
+                </label>
+                <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Min. 10 characters"
+                    className="w-full px-3 py-2.5 rounded-lg border border-white/10 bg-white/[0.03] text-[#ebe4f1] text-sm placeholder:text-[#ebe4f1]/40 outline-none focus:border-[#eb3779] focus:ring-2 focus:ring-[#eb3779]/50 transition-colors"
+                />
+                {errors.password && (
+                    <p className="text-red-400 text-xs mt-1">
+                        {errors.password}
+                    </p>
+                )}
+                <PasswordStrengthMeter password={password} />
+            </div>
+
+            <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full py-2.5 rounded-lg bg-[#eb3779] text-white text-sm font-semibold hover:bg-[#eb3779]/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            >
+                {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
+                Continue
+            </button>
+
+            <p className="text-center text-xs text-[#ebe4f1]/50">
+                Already have an account?{" "}
+                <Link href="/login" className="text-[#eb3779] hover:underline">
+                    Sign in
+                </Link>
+            </p>
+        </form>
+    )
+}
@@ -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>
+    )
+}