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;