UPDATE: Almost fully implemented forget email feature

frontend/src/App.tsx

@@ -6,7 +6,7 @@ import HomePage from "./pages/HomePage";
 import StreamerRoute from "./components/Stream/StreamerRoute";
 import NotFoundPage from "./pages/NotFoundPage";
 import UserPage from "./pages/UserPage";
-import ForgotPasswordPage from "./pages/ForgotPasswordPage";
+import ResetPasswordPage from "./pages/ResetPasswordPage";
 import CategoryPage from "./pages/CategoryPage";
 
 function App() {
@@ -42,7 +42,7 @@ function App() {
 
             <Route path="/:streamerName" element={<StreamerRoute />} />
             <Route path="/user/:username" element={<UserPage />} />
-            <Route path="/reset_password" element={<ForgotPasswordPage />}></Route>
+            <Route path="/reset_password/:token" element={<ResetPasswordPage />}></Route>
             <Route path="/category/:category_name" element={<CategoryPage />}></Route>
 
             <Route path="*" element={<NotFoundPage />} />

frontend/src/components/Auth/PasswordResetForm.tsx

@@ -28,7 +28,7 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
     });
 
     const confirmPasswordReset = () => {
-        alert('Password reset successfully!');
+        alert(`${resetData.newPassword} - ${token}`);
         // You can replace this with navigation or API success handling logic
       };
 
@@ -64,7 +64,7 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
 
         if (validateResetForm()) {
             try {
-                const response = await fetch("/user/reset_password/<string:${token}", {
+                const response = await fetch(`/api/user/reset_password/${token}/${resetData.newPassword}`, {
                     method: "POST",
                     headers: {
                         "Content-Type": "application/json",

frontend/src/pages/ForgotPasswordPage.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import PasswordResetForm from "../components/Auth/PasswordResetForm";
-import { useParams, useNavigate } from "react-router-dom";
-
-const ForgotPasswordPage: React.FC = () => {
-    const { token } = useParams<{ token: string }>();
-    const navigate = useNavigate();
-
-    // 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;

frontend/src/pages/ResetPasswordPage.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import PasswordResetForm from "../components/Auth/PasswordResetForm";
+import { useParams, useNavigate } from "react-router-dom";
+
+const ResetPasswordPage: React.FC = () => {
+    const { token } = useParams<{ token: string }>();
+    const navigate = useNavigate();
+
+    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 ResetPasswordPage;