88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Container, Col, Row } from "react-bootstrap";
|
|
import { useParams } from "react-router-dom";
|
|
import axios from "axios";
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
import "react-toastify/dist/ReactToastify.css";
|
|
|
|
function ResetPwPage() {
|
|
const { token } = useParams();
|
|
const [newPassword, setNewPassword] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
|
|
const notifySuccess = (message) => {
|
|
toast.success(message);
|
|
};
|
|
|
|
const notifyError = (error) => {
|
|
toast.error(error.message || "An error occurred");
|
|
};
|
|
|
|
const notifyLoading = () => {
|
|
toast.info("Sending Reset Request...");
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
if (newPassword.length < 8) {
|
|
toast.error("Password must be at least 8 characters long");
|
|
return;
|
|
}
|
|
notifyLoading();
|
|
try {
|
|
const response = await axios.post(
|
|
"http://:8080/password/reset-password",
|
|
{ resetToken: token, newPassword }
|
|
);
|
|
setMessage(response.data.message);
|
|
notifySuccess(response.data.message);
|
|
} catch (error) {
|
|
console.error(
|
|
"Reset password error:",
|
|
error.response ? error.response.data : error
|
|
);
|
|
notifyError(error);
|
|
}
|
|
};
|
|
|
|
const handleGoToLogin = () => {
|
|
window.location.href = "/";
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* <ToastContainer /> */}
|
|
<div className="LoginPage">
|
|
<Container className="LoginPageContainer">
|
|
<Row className="PwPageContainer">
|
|
<Col md={12}>
|
|
<div className="PwPage">
|
|
<h1>Reset Password</h1>
|
|
<p>Enter your new password below</p>
|
|
<form className="form-pw" onSubmit={handleSubmit}>
|
|
<input
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
placeholder="New Password"
|
|
required
|
|
/>
|
|
<button type="submit">Reset Password</button>
|
|
</form>
|
|
{message && (
|
|
<div className="ResponseDiv">
|
|
<p>{message}</p>
|
|
<button onClick={handleGoToLogin}>Back to Login</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ResetPwPage;
|