From 00d627a1e2c9a52c62a9f93ab9041be87106024c Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Thu, 6 Feb 2025 15:44:20 +0000
Subject: [PATCH] UPDATE: Now checks for token on url to extract.

---
 .../src/components/Auth/PasswordResetForm.tsx |  5 ++-
 frontend/src/pages/ForgotPasswordPage.tsx     | 40 ++++++++++++++-----
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Auth/PasswordResetForm.tsx b/frontend/src/components/Auth/PasswordResetForm.tsx
index 39c9d42..9931abc 100644
--- a/frontend/src/components/Auth/PasswordResetForm.tsx
+++ b/frontend/src/components/Auth/PasswordResetForm.tsx
@@ -15,9 +15,10 @@ interface ResetPasswordErrors {
 
 interface SubmitProps {
     onSubmit: () => void;
+    token: string;
 }
 
-const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit }) => {
+const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
 
     const [errors, setErrors] = useState<ResetPasswordErrors>({});
 
@@ -63,7 +64,7 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit }) => {
 
         if (validateResetForm()) {
             try {
-                const response = await fetch("/user/reset_password/<string:token>/<string:confirmNewPassword>", {
+                const response = await fetch("/user/reset_password/<string:${token}", {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",
diff --git a/frontend/src/pages/ForgotPasswordPage.tsx b/frontend/src/pages/ForgotPasswordPage.tsx
index f61348d..f3f5695 100644
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -1,15 +1,37 @@
-import React from 'react';
-import PasswordResetForm from '../components/Auth/PasswordResetForm';
+import React from "react";
+import PasswordResetForm from "../components/Auth/PasswordResetForm";
+import { useParams, useNavigate } from "react-router-dom";
 
 const ForgotPasswordPage: React.FC = () => {
-  const doNothing = (): void => {};
+    const { token } = useParams<{ token: string }>();
+    const navigate = useNavigate();
 
-  return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      <h1 className="text-2xl font-bold mb-4">Forgot Password</h1>
-      <PasswordResetForm onSubmit={doNothing} />
-    </div>
-  );
+    // If the token is missing, handle the error (e.g., redirect or show a message)
+    if (!token) {
+        return (
+            <div className="flex flex-col items-center justify-center h-screen">
+                <h1 className="text-2xl font-bold mb-4">Invalid Token</h1>
+                <p className="text-red-500">The reset token is missing or invalid.</p>
+                <button
+                    onClick={() => navigate("/login")}
+                    className="text-blue-500 underline mt-4"
+                >
+                    Go back to Login
+                </button>
+            </div>
+        );
+    }
+
+    const handlePasswordReset = () => {
+
+    };
+
+    return (
+        <div className="flex flex-col items-center justify-center h-screen">
+            <h1 className="text-2xl font-bold mb-4">Forgot Password</h1>
+            <PasswordResetForm onSubmit={handlePasswordReset} token={token} />
+        </div>
+    );
 };
 
 export default ForgotPasswordPage;