141 lines
4.3 KiB
JavaScript
141 lines
4.3 KiB
JavaScript
import { useState } from "react";
|
|
import axios from "axios";
|
|
import Navbar from "./Navbar";
|
|
import Footer from "./Footer";
|
|
import { NavLink } from "react-router-dom";
|
|
|
|
|
|
|
|
const ForgotPassword = () => {
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
|
|
const BASE_URL = import.meta.env.VITE_REACT_APP_SECRET;
|
|
|
|
const handleResetPassword = async () => {
|
|
try {
|
|
const response = await axios.post(`${BASE_URL}/users/forgotpassword`, {
|
|
email,
|
|
});
|
|
|
|
setMessage(response.data.message);
|
|
|
|
} catch (error) {
|
|
console.error("Forgot Password Error:", error);
|
|
setMessage(error.response.data.message);
|
|
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<br />
|
|
<br /><br /><br /><br />
|
|
|
|
|
|
<section
|
|
className="card"
|
|
style={{ minHeight: "100vh", backgroundColor: "#FFFFFF" }}
|
|
>
|
|
<div className="container-fluid px-0">
|
|
<div className="row gy-4 align-items-center justify-content-center">
|
|
<div className="col-12 col-md-0 col-xl-20 text-center text-md-start">
|
|
|
|
</div>
|
|
|
|
<div className="col-12 col-md-6 col-xl-5">
|
|
<div
|
|
className="card border-0 rounded-4 shadow-lg"
|
|
style={{ width: "100%" }}
|
|
>
|
|
<div className="card-body p-3 p-md-4 p-xl-5">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="mb-4">
|
|
<h2 className="h3">Forgot Password</h2>
|
|
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row gy-3 overflow-hidden">
|
|
|
|
|
|
<div className="col-12">
|
|
<div className="form-floating mb-3">
|
|
<input
|
|
type="email"
|
|
className="form-control"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
|
|
placeholder="name@example.com"
|
|
required="required"
|
|
/>
|
|
<label htmlFor="email" className="form-label">
|
|
Enter your email address to receive a password reset link
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12">
|
|
<div className="d-grid">
|
|
<button
|
|
className="btn btn-primary btn-lg"
|
|
type="submit"
|
|
style={{
|
|
backgroundColor: "#fda417",
|
|
border: "#fda417",
|
|
}}
|
|
onClick={handleResetPassword}
|
|
|
|
>
|
|
|
|
Reset Password
|
|
</button>
|
|
</div>
|
|
<p
|
|
style={{ color: "#067ADC" }}
|
|
className="card-title text-center"
|
|
>
|
|
{message}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="d-flex gap-2 gap-md-4 flex-column flex-md-row justify-content-md-end mt-4">
|
|
<p className="m-0 text-secondary text-center">
|
|
Already have an account?{" "}
|
|
|
|
<NavLink to="/login" className="link-primary text-decoration-none">
|
|
Sign In
|
|
</NavLink>
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</section>
|
|
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ForgotPassword;
|