62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { sendPasswordResetEmail } from "firebase/auth";
|
|
import { auth } from "@/lib/firebase";
|
|
import Navbar from "@/components/Navbar";
|
|
import Link from "next/link";
|
|
|
|
export default function ForgotPasswordPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
const [error, setError] = useState("");
|
|
|
|
const handleReset = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setMessage("");
|
|
setError("");
|
|
|
|
try {
|
|
await sendPasswordResetEmail(auth, email);
|
|
setMessage("Password reset link sent to your email!");
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<div className="flex min-h-screen items-center justify-center">
|
|
<form
|
|
className="p-6 bg-white rounded shadow-md w-full max-w-md"
|
|
onSubmit={handleReset}
|
|
>
|
|
<h2 className="text-2xl font-bold mb-4 text-center">
|
|
Forgot Password
|
|
</h2>
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
className="border p-2 w-full mb-2 rounded"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
<button
|
|
className="w-full bg-blue-600 text-white p-2 rounded mt-2"
|
|
type="submit"
|
|
>
|
|
Send Reset Link
|
|
</button>
|
|
<Link
|
|
className="py-1 mt-3 bg-amber-400 text-white flex justify-center items-center"
|
|
href={"/login"}
|
|
>
|
|
back to login
|
|
</Link>
|
|
{message && <p className="text-green-600 mt-2">{message}</p>}
|
|
{error && <p className="text-red-600 mt-2">{error}</p>}
|
|
</form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|