Proper Profile Page (Dynamic)

profile.html

@@ -167,7 +167,7 @@ <h2>Change Password</h2>
 
         });
     </script>
-
+    <script src="profile.js"></script>
  main
 </body>
 </html>

profile.js

@@ -0,0 +1,26 @@
+// profile.js
+document.addEventListener("DOMContentLoaded", async () => {
+    try {
+        // Fetch user profile data from backend
+        const response = await fetch("http://localhost:5000/api/users/profile", {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${localStorage.getItem("authToken")}`, // Use your auth token here
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error("Failed to fetch profile data.");
+        }
+
+        // Parse the JSON data
+        const profileData = await response.json();
+
+        // Populate profile data in HTML
+        document.querySelector(".profile-name").textContent = profileData.username;
+        document.querySelector(".profile-email").textContent = `Email: ${profileData.email}`;
+    } catch (error) {
+        console.error("Error fetching profile data:", error);
+    }
+});