NEW: Reset Password Page

frontend/src/App.tsx

@@ -42,7 +42,7 @@ function App() {
 
             <Route path="/:streamerName" element={<StreamerRoute />} />
             <Route path="/user/:username" element={<UserPage />} />
-            <Route path="/reset_password/:token" element={<ForgotPasswordPage />}></Route>
+            <Route path="/reset_password" element={<ForgotPasswordPage />}></Route>
             <Route path="/category/:category_name" element={<CategoryPage />}></Route>
 
             <Route path="*" element={<NotFoundPage />} />

frontend/src/components/Auth/PasswordResetForm.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import Input from "../Layout/Input";
+import Button from "../Layout/Button";
+import { useAuth } from "../../context/AuthContext";
+
+interface ResetPasswordData {
+    newPassword: string;
+    confirmNewPassword: string;
+}
+
+interface ResetPasswordErrors {
+    newPasswordError?: string;
+    confirmNewPasswordError?: string;
+}
+
+interface SubmitProps {
+    onSubmit: () => void;
+}
+
+const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit }) => {
+
+    const [errors, setErrors] = useState<ResetPasswordErrors>({});
+
+    const [resetData, setResetData] = useState<ResetPasswordData>({
+        newPassword: "",
+        confirmNewPassword: "",
+    });
+
+    const confirmPasswordReset = () => {
+        alert('Password reset successfully!');
+        // You can replace this with navigation or API success handling logic
+      };
+
+    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setResetData((prev) => ({
+            ...prev,
+            [name]: value,
+        }));
+    };
+
+    const validateResetForm = (): boolean => {
+        const newErrors: ResetPasswordErrors = {};
+
+        Object.keys(resetData).forEach((key) => {
+            if (!resetData[key as keyof ResetPasswordData]) {
+                newErrors[key as keyof ResetPasswordErrors] = "Confirm your password";
+            }
+        });
+
+        if (resetData.newPassword !== resetData.confirmNewPassword) {
+            newErrors.confirmNewPasswordError = "Passwords do not match";
+        }
+
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        onSubmit();
+
+        if (validateResetForm()) {
+            try {
+                const response = await fetch("/user/reset_password/<string:token>/<string:confirmNewPassword>", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    credentials: "include",
+                    body: JSON.stringify(resetData),
+                });
+
+                if (!response.ok) {
+                    const data = await response.json();
+                    throw new Error(data.message || "An error has occurred while resetting");
+                }
+            } catch (error: any) {
+                console.error("Password reset error:", error.message);
+                setErrors((prev) => ({
+                    ...prev,
+                    general: error.message || "An unexpected error occurred.",
+                    
+                }));
+            confirmPasswordReset();
+        }
+    }
+};
+
+    return (
+
+        <form onSubmit={handleSubmit}>
+            <Input
+                name="newPassword"
+                type="password"
+                placeholder='New Password'
+                value={resetData.newPassword}
+                onChange={handlePasswordChange}
+                extraClasses={`${errors.newPasswordError ? "border-red-500" : ""}`}
+            />
+
+            {errors.confirmNewPasswordError && (
+                <p className="text-red-500 mt-3 text-sm">{errors.confirmNewPasswordError}</p>
+            )}
+            <Input
+                name="confirmNewPassword"
+                type="password"
+                placeholder="Confirm Password"
+                value={resetData.confirmNewPassword}
+                onChange={handlePasswordChange}
+                extraClasses={`${errors.confirmNewPasswordError ? "border-red-500" : ""}`}
+            />
+
+            <Button type="submit">Reset Password</Button>
+
+        </form>
+
+    );
+};
+
+export default PasswordResetForm

frontend/src/components/Checkout/CheckoutForm.tsx

@@ -82,7 +82,7 @@ const CheckoutForm: React.FC<CheckoutFormProps> = ({ onClose }) => {
           ✕
         </button>
         <div
-          className="bg-white p-6 rounded-lg w-full max-w-2xl relative h-full rounded-[2rem]"
+          className="bg-white p-6 w-full max-w-2xl relative h-full rounded-[2rem]"
           style={{ width: "clamp(300px, 60vw, 800px)" }}
         >
           <div id="checkout" className="h-full overflow-auto min-w-[30vw]">

frontend/src/pages/ForgotPasswordPage.tsx

@@ -1,9 +1,15 @@
-import React from 'react'
+import React from 'react';
+import PasswordResetForm from '../components/Auth/PasswordResetForm';
+
+const ForgotPasswordPage: React.FC = () => {
+  const doNothing = (): void => {};
 
-const ForgotPasswordPage = () => {
   return (
-    <div>ForgotPasswordPage</div>
+    <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>
+  );
+};
 
-export default ForgotPasswordPage
+export default ForgotPasswordPage;

package-lock.json

@@ -0,0 +1,28 @@
+{
+  "name": "cs3305-team11",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "tailwind-scrollbar-hide": "^2.0.0"
+      }
+    },
+    "node_modules/tailwind-scrollbar-hide": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-2.0.0.tgz",
+      "integrity": "sha512-lqiIutHliEiODwBRHy4G2+Tcayo2U7+3+4frBmoMETD72qtah+XhOk5XcPzC1nJvXhXUdfl2ajlMhUc2qC6CIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.3.tgz",
+      "integrity": "sha512-ImmZF0Lon5RrQpsEAKGxRvHwCvMgSC4XVlFRqmbzTEDb/3wvin9zfEZrMwgsa3yqBbPqahYcVI6lulM2S7IZAA==",
+      "license": "MIT",
+      "peer": true
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "tailwind-scrollbar-hide": "^2.0.0"
+  }
+}