File size: 5,822 Bytes
25732fb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 | import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { motion } from 'framer-motion'
import { useAuth } from '../../hooks/useAuth'
import { UserPlus, Mail, Lock, User, BookOpen } from 'lucide-react'
const Register = () => {
const navigate = useNavigate()
const { register } = useAuth()
const [formData, setFormData] = useState({
username: '',
email: ''
})
const [loading, setLoading] = useState(false)
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
})
}
const handleSubmit = async (e) => {
e.preventDefault()
setLoading(true)
try {
await register(formData)
navigate('/')
} catch (error) {
// Error handled by toast
} finally {
setLoading(false)
}
}
return (
<div className="min-h-screen flex items-center justify-center p-4">
{/* Background decoration */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-40 -right-40 w-80 h-80 bg-accent-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse-slow"></div>
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-primary-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse-slow" style={{ animationDelay: '1s' }}></div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="relative z-10 w-full max-w-md"
>
{/* Header */}
<div className="text-center mb-8">
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-accent-500 to-primary-500 rounded-2xl mb-4 shadow-xl"
>
<BookOpen className="w-10 h-10 text-white" />
</motion.div>
<h1 className="text-4xl font-bold gradient-text mb-2">
Join Us Today
</h1>
<p className="text-slate-600">
Start your personalized learning journey
</p>
</div>
{/* Register Form */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.3 }}
className="card"
>
<form onSubmit={handleSubmit} className="space-y-6">
{/* Username */}
<div>
<label className="block text-sm font-semibold text-slate-700 mb-2">
Username
</label>
<div className="relative">
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
className="input-field pl-11"
placeholder="Choose a username"
required
/>
</div>
</div>
{/* Email */}
<div>
<label className="block text-sm font-semibold text-slate-700 mb-2">
Email
</label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
className="input-field pl-11"
placeholder="Enter your email"
required
/>
</div>
</div>
{/* Submit Button */}
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
type="submit"
disabled={loading}
className="w-full btn-primary flex items-center justify-center gap-2 disabled:opacity-50"
>
{loading ? (
<>
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
Creating account...
</>
) : (
<>
<UserPlus className="w-5 h-5" />
Create Account
</>
)}
</motion.button>
</form>
{/* Divider */}
<div className="relative my-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-slate-200"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-4 bg-white text-slate-500">
Already have an account?
</span>
</div>
</div>
{/* Login Link */}
<Link to="/login">
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
type="button"
className="w-full btn-secondary"
>
Login
</motion.button>
</Link>
</motion.div>
{/* Footer */}
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.5 }}
className="text-center text-sm text-slate-500 mt-6"
>
By registering, you agree to our AI-powered adaptive learning
</motion.p>
</motion.div>
</div>
)
}
export default Register |