158 lines
7.3 KiB
TypeScript
158 lines
7.3 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { SignUpForm } from "./signup-form"
|
|
import { Button } from "@/components/ui/button"
|
|
import { CheckCircle, ArrowRight } from "lucide-react"
|
|
|
|
export function SignUpPage() {
|
|
const [isSuccess, setIsSuccess] = useState(false)
|
|
const router = useRouter()
|
|
|
|
const handleSignUpSuccess = () => {
|
|
setIsSuccess(true)
|
|
// Redirect to signin after 3 seconds
|
|
setTimeout(() => {
|
|
router.push("/signin?message=Please check your email to verify your account")
|
|
}, 3000)
|
|
}
|
|
|
|
if (isSuccess) {
|
|
return (
|
|
<div className="min-h-screen bg-black text-white flex items-center justify-center p-6">
|
|
<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10">
|
|
{/* Left: Gradient panel */}
|
|
<div className="hidden lg:block">
|
|
<div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-orange-400 via-orange-500 to-black p-10">
|
|
{/* subtle grain */}
|
|
<div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]">
|
|
<div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div>
|
|
</div>
|
|
|
|
{/* soft circular accents */}
|
|
<div className="pointer-events-none absolute -top-10 -right-10 w-72 h-72 rounded-full blur-3xl bg-purple-300/40"></div>
|
|
<div className="pointer-events-none absolute top-1/3 -left-10 w-56 h-56 rounded-full blur-2xl bg-indigo-300/25"></div>
|
|
<div className="pointer-events-none absolute -bottom-12 left-1/3 w-64 h-64 rounded-full blur-3xl bg-purple-400/20"></div>
|
|
|
|
<div className="relative z-10 flex h-full flex-col justify-center">
|
|
<div className="mb-12">
|
|
<p className="text-5xl font-bold text-center text-white/80">Codenuk</p>
|
|
</div>
|
|
<h2 className="text-3xl text-center font-bold mb-3">Account Created!</h2>
|
|
<p className="text-white/80 text-center mb-10">Your account has been successfully created. Please verify your email to continue.</p>
|
|
|
|
<div className="space-y-4">
|
|
{/* Step 1 - Completed */}
|
|
<div className="bg-white text-black rounded-xl p-4 flex items-center">
|
|
<div className="w-9 h-9 rounded-full bg-green-500 text-white flex items-center justify-center mr-4 text-sm font-semibold">
|
|
<CheckCircle className="h-5 w-5" />
|
|
</div>
|
|
<span className="font-medium">Sign up completed</span>
|
|
</div>
|
|
{/* Step 2 - Next */}
|
|
<div className="bg-white/10 text-white border border-white/20 rounded-xl p-4 flex items-center">
|
|
<div className="w-9 h-9 rounded-full bg-white/20 text-white flex items-center justify-center mr-4 text-sm font-semibold">2</div>
|
|
<span className="font-medium">Verify email & sign in</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Success message */}
|
|
<div className="flex items-center">
|
|
<div className="w-full max-w-md ml-auto text-center">
|
|
<div className="mb-8">
|
|
<div className="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<CheckCircle className="h-10 w-10 text-white" />
|
|
</div>
|
|
<h1 className="text-2xl font-semibold text-white mb-2">Account Created Successfully!</h1>
|
|
<p className="text-white/60 mb-6">We've sent a verification email to your inbox. Please check your email and click the verification link to activate your account.</p>
|
|
<div className="bg-orange-500/10 border border-orange-500/30 rounded-lg p-4 mb-6">
|
|
<p className="text-orange-300 text-sm">
|
|
<strong>Next step:</strong> Check your email and click the verification link, then sign in to your account.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => router.push("/signin")}
|
|
className="bg-gradient-to-r from-orange-500 to-orange-600 text-white hover:from-orange-600 hover:to-orange-700"
|
|
>
|
|
Go to Sign In
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-black text-white flex items-center justify-center p-6">
|
|
<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10">
|
|
{/* Left: Gradient panel with steps */}
|
|
<div className="hidden lg:block">
|
|
<div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-orange-400 via-orange-500 to-black p-10">
|
|
{/* subtle grain */}
|
|
<div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]">
|
|
<div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div>
|
|
</div>
|
|
|
|
{/* soft circular accents */}
|
|
<div className="pointer-events-none absolute -top-10 -right-10 w-72 h-72 rounded-full blur-3xl bg-purple-300/40"></div>
|
|
<div className="pointer-events-none absolute top-1/3 -left-10 w-56 h-56 rounded-full blur-2xl bg-indigo-300/25"></div>
|
|
<div className="pointer-events-none absolute -bottom-12 left-1/3 w-64 h-64 rounded-full blur-3xl bg-purple-400/20"></div>
|
|
|
|
<div className="relative z-10 flex h-full flex-col justify-center">
|
|
<div className="mb-12">
|
|
<p className="text-5xl font-bold text-center text-white/80">Codenuk</p>
|
|
</div>
|
|
<h2 className="text-3xl text-center font-bold mb-3">Get Started with Us</h2>
|
|
<p className="text-white/80 text-center mb-10">Complete these easy steps to register your account.</p>
|
|
|
|
<div className="space-y-4">
|
|
{/* Step 1 - Active */}
|
|
<div className="bg-white text-black rounded-xl p-4 flex items-center">
|
|
<div className="w-9 h-9 rounded-full bg-black text-white flex items-center justify-center mr-4 text-sm font-semibold">1</div>
|
|
<span className="font-medium">Sign up your account</span>
|
|
</div>
|
|
{/* Step 2 - Next */}
|
|
<div className="bg-white/10 text-white border border-white/20 rounded-xl p-4 flex items-center">
|
|
<div className="w-9 h-9 rounded-full bg-white/20 text-white flex items-center justify-center mr-4 text-sm font-semibold">2</div>
|
|
<span className="font-medium">Verify email & sign in</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Form area */}
|
|
<div className="flex items-center">
|
|
<div className="w-full max-w-md ml-auto">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-2xl font-semibold text-white mb-1">Sign Up Account</h1>
|
|
<p className="text-white/60">Enter your personal data to create your account.</p>
|
|
</div>
|
|
|
|
<SignUpForm onSignUpSuccess={handleSignUpSuccess} />
|
|
|
|
<div className="text-center pt-4">
|
|
<div className="text-white/60 text-xs mb-1">Already have an account?</div>
|
|
<Button
|
|
type="button"
|
|
variant="link"
|
|
onClick={() => router.push("/signin")}
|
|
className="text-orange-400 hover:text-orange-300 font-medium transition-colors text-sm p-0 h-auto cursor-pointer"
|
|
>
|
|
Sign in to your account
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|