Removed unused imports
This commit is contained in:
@@ -4,7 +4,6 @@ import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Mail,
|
||||
Lock,
|
||||
User,
|
||||
Phone,
|
||||
GraduationCap,
|
||||
@@ -38,13 +37,20 @@ export default function RegisterPage() {
|
||||
agreeToRules: false,
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isRegistered, setIsRegistered] = useState(false);
|
||||
const [isEmailValid, setIsEmailValid] = useState<boolean | null>(null);
|
||||
const [isPhoneValid, setIsPhoneValid] = useState<boolean | null>(null);
|
||||
|
||||
const validateEmail = (email: string) => {
|
||||
const sjecEmailRegex = /^[a-zA-Z0-9._%+-]+@sjec\.ac\.in$/;
|
||||
return sjecEmailRegex.test(email);
|
||||
};
|
||||
|
||||
const validatePhone = (phone: string) => {
|
||||
const phoneRegex = /^(\+91[\s-]?)?[6-9]\d{9}$/;
|
||||
return phoneRegex.test(phone.replace(/\s/g, ""));
|
||||
};
|
||||
|
||||
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const email = e.target.value;
|
||||
setFormData({ ...formData, email });
|
||||
@@ -55,18 +61,72 @@ export default function RegisterPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const phone = e.target.value;
|
||||
setFormData({ ...formData, phone });
|
||||
if (phone.length > 0) {
|
||||
setIsPhoneValid(validatePhone(phone));
|
||||
} else {
|
||||
setIsPhoneValid(null);
|
||||
}
|
||||
};
|
||||
|
||||
const isFormValid =
|
||||
formData.name.trim().length > 0 &&
|
||||
isEmailValid === true &&
|
||||
isPhoneValid !== false &&
|
||||
formData.phone.trim().length > 0 &&
|
||||
formData.department.length > 0 &&
|
||||
formData.year.length > 0 &&
|
||||
formData.agreeToRules;
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!isEmailValid) return;
|
||||
if (!isFormValid) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
// TODO: Implement actual registration logic
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
setIsSubmitting(false);
|
||||
setIsRegistered(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-black pt-32 pb-20">
|
||||
{isRegistered ? (
|
||||
<div className="max-w-xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-20">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<div className="w-20 h-20 rounded-full bg-lime-400 flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle className="w-10 h-10 text-black" />
|
||||
</div>
|
||||
<h1 className="text-3xl sm:text-4xl font-black text-white mb-4">
|
||||
Registration Successful!
|
||||
</h1>
|
||||
<p className="text-zinc-400 text-lg mb-8">
|
||||
Welcome to ArtSplash 2026! You can now submit your artwork.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/submit"
|
||||
className="inline-flex items-center justify-center gap-2 bg-lime-400 text-black px-8 py-4 rounded-full font-bold hover:bg-lime-300 transition-all"
|
||||
>
|
||||
Submit Artwork
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center justify-center gap-2 bg-transparent text-white px-8 py-4 rounded-full font-bold border border-zinc-700 hover:border-zinc-500 transition-all"
|
||||
>
|
||||
Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-start">
|
||||
{/* Left Column - Info */}
|
||||
@@ -210,11 +270,31 @@ export default function RegisterPage() {
|
||||
type="tel"
|
||||
required
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
className="w-full bg-zinc-800 border border-zinc-700 rounded-xl pl-12 pr-4 py-3 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors"
|
||||
onChange={handlePhoneChange}
|
||||
className={`w-full bg-zinc-800 border rounded-xl pl-12 pr-12 py-3 text-white placeholder-zinc-500 focus:outline-none transition-colors ${
|
||||
isPhoneValid === null
|
||||
? "border-zinc-700 focus:border-lime-400"
|
||||
: isPhoneValid
|
||||
? "border-lime-400"
|
||||
: "border-red-500"
|
||||
}`}
|
||||
placeholder="+91 XXXXX XXXXX"
|
||||
/>
|
||||
{isPhoneValid !== null && (
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
{isPhoneValid ? (
|
||||
<CheckCircle className="w-5 h-5 text-lime-400" />
|
||||
) : (
|
||||
<AlertCircle className="w-5 h-5 text-red-500" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isPhoneValid === false && (
|
||||
<p className="text-red-500 text-sm mt-2">
|
||||
Please enter a valid Indian phone number
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Department & Year */}
|
||||
@@ -282,7 +362,7 @@ export default function RegisterPage() {
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !isEmailValid}
|
||||
disabled={isSubmitting || !isFormValid}
|
||||
className="w-full flex items-center justify-center gap-2 bg-lime-400 text-black px-6 py-4 rounded-xl font-bold tracking-wider hover:bg-lime-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
@@ -309,6 +389,7 @@ export default function RegisterPage() {
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user