initial commit

client/src/Pages/ResetPw.jsx

@@ -0,0 +1,87 @@
+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;