UPDATE: Now checks for token on url to extract.

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",

frontend/src/pages/ForgotPasswordPage.tsx

@@ -1,15 +1,37 @@
-import React from 'react';
+import React from "react";
-import PasswordResetForm from '../components/Auth/PasswordResetForm';
+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 (
+    // If the token is missing, handle the error (e.g., redirect or show a message)
-    <div className="flex flex-col items-center justify-center h-screen">
+    if (!token) {
-      <h1 className="text-2xl font-bold mb-4">Forgot Password</h1>
+        return (
-      <PasswordResetForm onSubmit={doNothing} />
+            <div className="flex flex-col items-center justify-center h-screen">
-    </div>
+                <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;