profiletest rc-1

frontend/vanilla/html/testing/userprofile.html

@@ -21,10 +21,10 @@
           <div class="card-body text-center">
             <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3.webp" alt="avatar"
               class="rounded-circle img-fluid" style="width: 150px;">
-            <h5 class="my-3">John Doe</h5>
+            <h5 class="my-3" id="display-name">John Doe</h5>
-            <p class="text-muted mb-2">Full Stack Developer</p>
+            <p class="text-muted mb-2" id="qualification">Full Stack Developer</p>
-            <p class="text-muted mb-4">New York City, United States of America</p>
+            <p class="text-muted mb-4" id="place-of-living">New York City, United States of America</p>
-            <p class="text-muted mb-4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            <p class="text-muted mb-4" id="about-me"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
               esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
@@ -42,7 +42,7 @@
             <ul class="list-group list-group-flush rounded-3">
               <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                 <i class="fa-regular fa-envelope"></i>
-                <p class="mb-0"><a href="#">johndoe@proton.com</a></p>
+                <p class="mb-0"><a href="#" id="email">johndoe@proton.com</a></p>
               </li>
               <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                 <i class="fas fa-globe fa-lg text-warning"></i>
@@ -175,6 +175,55 @@
     </div>
   </div>
 
+  <script src="../../js/constants.js"></script>
+  <script src="../../js/utils.js"></script>
+  <script>
+    window.addEventListener("load", async function () {
+      loadProfile();
+    });
+
+    async function loadProfile() {
+
+      const idToDisplay = new URLSearchParams(window.location.search).get('id');
+      let response;
+
+      // If it is the logged-in person
+      if (!idToDisplay || idToDisplay === 'me') {
+        const token = getCookie('token');
+        // Check whether the token exists
+        if (!token) {
+          window.location.href = 'login.html';
+        }
+        response = await fetch(`${API_URL}/persons/me`, {
+          headers: createHeaders(token)
+        });
+      } else {
+        response = await fetch(`${API_URL}/persons/${idToDisplay}/details`, {
+          headers: createHeaders(null)
+        });
+      }
+
+      const data = await response.json();
+      if (response.ok) {
+        populateFields(data.display_name, data.email, data.about_me, data.qualification, data.place_of_living);
+        document.body.style.display = 'block'; // Show page
+      } else if (response.status == 401) {
+        window.location.href = 'login.html';
+      } else {
+        alert(`Unable to load profile. Error: ${data.error}`);
+      }
+    }
+
+    function populateFields(displayName, email, aboutMe, qualification, placeOfLiving) {
+      document.getElementById('display-name').textContent = displayName;
+      document.title = `${displayName} - Blink`
+      document.getElementById('email').textContent = email;
+      document.getElementById('about-me').textContent = aboutMe;
+      document.getElementById('qualification').textContent = qualification;
+      document.getElementById('place-of-living').textContent = placeOfLiving;
+    }
+  </script>
+
 </body>
 
 </html>