238 lines
8.8 KiB
TypeScript
238 lines
8.8 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
|
|
import { useAuth } from '@/context/AuthContext'
|
|
import { analytics } from '@/hooks/useAnalytics'
|
|
import { captureUTMParams } from '@/lib/analytics'
|
|
import { api } from '@/lib/api'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Mail, Lock, User, ArrowRight, AlertCircle, Check, Sparkles } from 'lucide-react'
|
|
|
|
export function Register() {
|
|
const [searchParams] = useSearchParams()
|
|
const selectedPlan = searchParams.get('plan') || 'pro'
|
|
const referralCode = searchParams.get('ref') || null
|
|
|
|
const [name, setName] = useState('')
|
|
const [email, setEmail] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [confirmPassword, setConfirmPassword] = useState('')
|
|
const [error, setError] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const { register, user } = useAuth()
|
|
const navigate = useNavigate()
|
|
|
|
// Capture UTM parameters on mount
|
|
useEffect(() => {
|
|
captureUTMParams()
|
|
}, [])
|
|
|
|
// Track referral and signup after user is registered
|
|
useEffect(() => {
|
|
if (user?.$id && referralCode) {
|
|
// Track referral if code exists
|
|
api.trackReferral(user.$id, referralCode).catch((err) => {
|
|
console.error('Failed to track referral:', err)
|
|
})
|
|
}
|
|
|
|
if (user?.$id) {
|
|
// Track signup conversion with UTM parameters
|
|
analytics.trackSignup(user.$id, email)
|
|
analytics.setUserId(user.$id)
|
|
}
|
|
}, [user, referralCode, email])
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError('')
|
|
|
|
if (password !== confirmPassword) {
|
|
setError('Passwords do not match.')
|
|
return
|
|
}
|
|
|
|
if (password.length < 8) {
|
|
setError('Password must be at least 8 characters long.')
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
await register(email, password, name)
|
|
navigate('/setup')
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : 'Registration failed. Please try again.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex">
|
|
{/* Left side - Decorative */}
|
|
<div className="hidden lg:flex lg:flex-1 bg-gradient-to-br from-slate-900 via-primary-900 to-slate-900 items-center justify-center p-12 relative overflow-hidden">
|
|
{/* Background pattern */}
|
|
<div className="absolute inset-0 gradient-mesh opacity-20" />
|
|
|
|
<div className="relative max-w-md">
|
|
<Badge className="mb-6 bg-accent-500/20 text-accent-300 border-accent-400/30">
|
|
<Sparkles className="w-3 h-3 mr-1" />
|
|
14-day free trial
|
|
</Badge>
|
|
|
|
<h2 className="text-4xl font-bold text-white mb-6">
|
|
Start with EmailSorter today
|
|
</h2>
|
|
|
|
<ul className="space-y-4 mb-8">
|
|
{[
|
|
'No credit card required',
|
|
'Gmail & Outlook support',
|
|
'AI-powered categorization',
|
|
'Cancel anytime',
|
|
].map((item, index) => (
|
|
<li key={index} className="flex items-center gap-3 text-slate-300">
|
|
<div className="w-6 h-6 rounded-full bg-accent-500/20 flex items-center justify-center">
|
|
<Check className="w-4 h-4 text-accent-400" />
|
|
</div>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Plan indicator */}
|
|
<div className="bg-white/10 backdrop-blur rounded-xl p-4 border border-white/10">
|
|
<p className="text-sm text-slate-400 mb-1">Selected plan</p>
|
|
<p className="text-xl font-semibold text-white capitalize">{selectedPlan}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right side - Form */}
|
|
<div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 bg-white dark:bg-slate-900">
|
|
<div className="w-full max-w-md">
|
|
{/* Logo */}
|
|
<Link to="/" className="flex items-center gap-2 mb-8">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
|
|
<Mail className="w-5 h-5 text-white" />
|
|
</div>
|
|
<span className="text-xl font-bold text-slate-900 dark:text-slate-100">
|
|
E-Mail-<span className="text-primary-600 dark:text-primary-400">Sorter</span>
|
|
</span>
|
|
</Link>
|
|
|
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-2">
|
|
Create account
|
|
</h1>
|
|
<p className="text-slate-600 dark:text-slate-400 mb-8">
|
|
Ready to go in less than a minute.
|
|
</p>
|
|
|
|
{/* Error message */}
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-xl flex items-start gap-3">
|
|
<AlertCircle className="w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5" />
|
|
<p className="text-sm text-red-600 dark:text-red-300">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Name (optional)</Label>
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<Input
|
|
id="name"
|
|
type="text"
|
|
placeholder="John Smith"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email address</Label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="john@example.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="At least 8 characters"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="confirmPassword">Confirm password</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<Input
|
|
id="confirmPassword"
|
|
type="password"
|
|
placeholder="Repeat password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full" size="lg" disabled={loading}>
|
|
{loading ? (
|
|
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
|
) : (
|
|
<>
|
|
Get started free
|
|
<ArrowRight className="w-5 h-5 ml-2" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
<p className="text-xs text-slate-500 dark:text-slate-400 text-center">
|
|
By signing up, you agree to our{' '}
|
|
<a href="#" className="text-primary-600 dark:text-primary-400 hover:underline">Terms of Service</a> and{' '}
|
|
<a href="#" className="text-primary-600 dark:text-primary-400 hover:underline">Privacy Policy</a>.
|
|
</p>
|
|
</form>
|
|
|
|
<p className="mt-8 text-center text-slate-600 dark:text-slate-400">
|
|
Already have an account?{' '}
|
|
<Link to="/login" className="text-primary-600 dark:text-primary-400 font-semibold hover:text-primary-700 dark:hover:text-primary-300">
|
|
Sign in
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|