chore: Secure routes with auth middleware, update text and fix minor bugs
This commit is contained in:
@@ -12,7 +12,15 @@ export default function SignupPage() {
|
||||
const [step, setStep] = useState(1)
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [showOTP, setShowOTP] = useState(false)
|
||||
const [password, setPassword] = useState("")
|
||||
const [isSubmitted, setIsSubmitted] = useState(false)
|
||||
const [firstName, setFirstName] = useState("")
|
||||
const [lastName, setLastName] = useState("")
|
||||
const [phone, setPhone] = useState("")
|
||||
const [termsAccepted, setTermsAccepted] = useState(false)
|
||||
|
||||
const isStep1Valid = firstName.trim() !== "" && lastName.trim() !== "" && phone.length === 10 && termsAccepted
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleNextStep = () => {
|
||||
@@ -51,8 +59,7 @@ export default function SignupPage() {
|
||||
<CheckCircle2 size={64} className="text-primary mb-4" />
|
||||
<h2 className="text-3xl font-black tracking-tight text-foreground">Thanks for registering!</h2>
|
||||
<p className="text-muted-foreground text-sm font-medium px-4 leading-relaxed">
|
||||
Our team will get back to you shortly. <br/><br/>
|
||||
<span className="font-bold text-foreground">Note:</span> We are not live currently. Please use the demo credentials provided at the login screen to explore the platform.
|
||||
Thank you for the registration. Our team will contact you shortly.
|
||||
</p>
|
||||
<Link href="/login" className="w-full mt-4">
|
||||
<Button className="w-full rounded-xl h-12 font-bold text-base bg-primary text-primary-foreground hover:bg-primary/90 transition-all shadow-[0_0_20px_-5px_var(--color-primary)]">
|
||||
@@ -78,11 +85,11 @@ export default function SignupPage() {
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-foreground">First Name</label>
|
||||
<input type="text" placeholder="John" className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"/>
|
||||
<input type="text" placeholder="John" value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-foreground">Last Name</label>
|
||||
<input type="text" placeholder="Doe" className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"/>
|
||||
<input type="text" placeholder="Doe" value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -96,9 +103,11 @@ export default function SignupPage() {
|
||||
type="tel"
|
||||
maxLength={10}
|
||||
pattern="[0-9]*"
|
||||
value={phone}
|
||||
onInput={(e) => {
|
||||
e.currentTarget.value = e.currentTarget.value.replace(/[^0-9]/g, '');
|
||||
}}
|
||||
onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ''))}
|
||||
placeholder="9876543210"
|
||||
className="flex-1 bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
|
||||
/>
|
||||
@@ -123,40 +132,54 @@ export default function SignupPage() {
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-foreground">Password (Optional if using OTP)</label>
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-bold text-foreground">Password (Optional if using OTP)</label>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input type={showPassword ? "text" : "password"} placeholder="••••••••" className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all pr-10"/>
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all pr-10"
|
||||
/>
|
||||
<button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors">
|
||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-2 pt-2">
|
||||
<input type="checkbox" id="terms" checked={termsAccepted} onChange={(e) => setTermsAccepted(e.target.checked)} className="mt-1 w-4 h-4 rounded border-border bg-background focus:ring-primary focus:ring-2 cursor-pointer" />
|
||||
<label htmlFor="terms" className="text-xs text-muted-foreground leading-relaxed">
|
||||
I agree to the <Link href="/terms-and-conditions" className="text-primary hover:underline">Terms & Conditions</Link> and <Link href="/privacy-policy" className="text-primary hover:underline">Privacy Policy</Link>.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 animate-in fade-in slide-in-from-right-8">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-foreground">Target Exam</label>
|
||||
<select className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all appearance-none cursor-pointer">
|
||||
<option value="jee_main">JEE Main</option>
|
||||
<option value="jee_adv">JEE Advanced</option>
|
||||
<option value="neet">NEET</option>
|
||||
<option value="jee_neet">JEE + NEET</option>
|
||||
<select className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all cursor-pointer">
|
||||
<option value="jee_main" className="bg-background text-foreground font-medium">JEE Main</option>
|
||||
<option value="jee_adv" className="bg-background text-foreground font-medium">JEE Advanced</option>
|
||||
<option value="neet" className="bg-background text-foreground font-medium">NEET</option>
|
||||
<option value="jee_neet" className="bg-background text-foreground font-medium">JEE + NEET</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-foreground">Current Class</label>
|
||||
<select className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all appearance-none cursor-pointer">
|
||||
<option value="11">Class 11th</option>
|
||||
<option value="12">Class 12th</option>
|
||||
<option value="dropper">Dropper</option>
|
||||
<select className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all cursor-pointer">
|
||||
<option value="11" className="bg-background text-foreground font-medium">Class 11th</option>
|
||||
<option value="12" className="bg-background text-foreground font-medium">Class 12th</option>
|
||||
<option value="dropper" className="bg-background text-foreground font-medium">Dropper</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-bold text-foreground">Study Medium</label>
|
||||
<select className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all appearance-none cursor-pointer">
|
||||
<option value="en">English</option>
|
||||
<option value="hi">Hindi (हिंदी)</option>
|
||||
<option value="bi">Bilingual (English + Hindi)</option>
|
||||
<select className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all cursor-pointer">
|
||||
<option value="en" className="bg-background text-foreground font-medium">English</option>
|
||||
<option value="hi" className="bg-background text-foreground font-medium">Hindi (हिंदी)</option>
|
||||
<option value="bi" className="bg-background text-foreground font-medium">Bilingual (English + Hindi)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
@@ -166,7 +189,11 @@ export default function SignupPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button onClick={handleNextStep} className="w-full rounded-xl h-12 font-bold text-base bg-primary text-primary-foreground hover:bg-primary/90 transition-all shadow-[0_0_20px_-5px_var(--color-primary)]">
|
||||
<Button
|
||||
onClick={handleNextStep}
|
||||
disabled={step === 1 && !isStep1Valid}
|
||||
className="w-full rounded-xl h-12 font-bold text-base bg-primary text-primary-foreground hover:bg-primary/90 transition-all shadow-[0_0_20px_-5px_var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
|
||||
>
|
||||
{step === 1 ? "Continue" : "Complete Setup"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user