109 lines
4.7 KiB
TypeScript
109 lines
4.7 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { ArrowLeft, CheckCircle2 } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useState } from "react"
|
|
import { Logo } from "@/components/Logo"
|
|
|
|
export default function ForgotPasswordPage() {
|
|
const [email, setEmail] = useState("")
|
|
const [error, setError] = useState("")
|
|
const [isSubmitted, setIsSubmitted] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const handleReset = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError("")
|
|
setLoading(true)
|
|
|
|
try {
|
|
// Calling the backend proxy endpoint
|
|
const res = await fetch("/api/auth/forgot-password", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email })
|
|
})
|
|
|
|
const data = await res.json()
|
|
|
|
if (data.success) {
|
|
setIsSubmitted(true)
|
|
} else {
|
|
setError(data.error || "Failed to process request.")
|
|
}
|
|
} catch (err) {
|
|
setError("An error occurred. Please try again.")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 selection:bg-[var(--cyan-ai-20)]">
|
|
<Link href="/login" className="absolute top-8 left-8 text-muted-foreground hover:text-foreground flex items-center gap-2 transition-colors font-medium">
|
|
<ArrowLeft size={16} /> Back to Login
|
|
</Link>
|
|
|
|
<div className="w-full max-w-md space-y-8">
|
|
<div className="flex justify-center mb-8">
|
|
<Logo href="/" className="w-72" imageClassName="object-contain" height={80} />
|
|
</div>
|
|
|
|
{isSubmitted ? (
|
|
<Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-10)] rounded-[2rem] overflow-hidden text-center py-8">
|
|
<CardContent className="space-y-6 pt-4 flex flex-col items-center">
|
|
<CheckCircle2 size={64} className="text-[var(--cyan-ai)] mb-4" />
|
|
<h2 className="text-3xl font-black tracking-tight text-foreground">Check your email</h2>
|
|
<p className="text-muted-foreground text-sm font-medium px-4 leading-relaxed">
|
|
We've sent password reset instructions to <strong>{email}</strong>.
|
|
</p>
|
|
<Link href="/login" className="w-full mt-4">
|
|
<Button className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_var(--cyan-ai)]">
|
|
Return to Login
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Card className="border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-10)] rounded-[2rem] overflow-hidden">
|
|
<CardHeader className="text-center pb-2">
|
|
<CardTitle className="text-2xl font-bold tracking-tight">Reset Password</CardTitle>
|
|
<CardDescription className="text-muted-foreground">Enter your email and we'll send you instructions.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6 pt-4">
|
|
<form onSubmit={handleReset} className="space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-bold text-foreground">Email</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="student@example.com"
|
|
required
|
|
suppressHydrationWarning
|
|
className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)] focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500 text-sm font-medium text-center">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<Button type="submit" disabled={loading || !email} className="w-full rounded-xl h-12 font-bold text-base bg-foreground text-background hover:bg-foreground/90 transition-all shadow-[0_0_15px_-5px_var(--cyan-ai)]">
|
|
{loading ? "Sending..." : "Send Reset Link"}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|