Update userprofile.html

frontend/vanilla/css/profile.css

@@ -1,75 +1,98 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f7f7f7;
+#navlist {
+    background-color: #cfddf9;
+    overflow: hidden;
+    padding: 10px 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
 }
 
-.container {
-    max-width: 800px;
-    margin: 20px auto;
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    position: relative;
-}
-
-header {
+#navlist a {
+    color: black;
+    padding: 14px 20px;
+    text-decoration: none;
     text-align: center;
-    margin-bottom: 20px;
 }
 
-h1 {
-    color: #333;
-    margin-bottom: 5px;
+#navlist a:hover {
+    background-color: #95b5f4;
+    color: white;
 }
 
-p {
-    color: #666;
+.search {
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
 }
 
-section {
-    margin-bottom: 20px;
+.search input[type="text"] {
+    padding: 6px;
+    margin-right: 10px;
+    border: none;
+    font-size: 17px;
+    border-radius: 4px;
 }
 
-h2 {
-    color: #333;
-    margin-bottom: 10px;
+.search button {
+    padding: 6px 10px;
+    background: white;
+    color: #95b5f4;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
 }
 
-.job h3,
-.education h3 {
-    color: #444;
-    margin-bottom: 5px;
+.search button i {
+    font-size: 18px;
 }
 
-ul {
-    list-style-type: disc;
-    margin-left: 20px;
+.search button:hover {
+    background: #95b5f4;
+    color: white;
 }
 
-footer {
+/* Logo and tag styling */
+.content {
     text-align: center;
     margin-top: 20px;
-    color: #666;
 }
 
-.profile-picture {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    margin-bottom: 10px;
+.content h1 {
+    color: green;
 }
 
-.edit-badge {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    background-color: #008CFF;
-    color: #fff;
-    padding: 5px 10px;
-    border-radius: 5px;
-    font-weight: bold;
-    cursor: pointer;
+/* Responsive styling */
+@media screen and (max-width: 600px) {
+    #navlist {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .search {
+        justify-content: flex-start;
+        width: 100%;
+        margin-top: 10px;
+        padding-left: 10px;
+    }
+
+    .search input[type="text"] {
+        margin-right: 10px;
+        width: auto;
+    }
+
+    .search button {
+        padding: 4px 8px;
+    }
+
+    .search button i {
+        font-size: 14px;
+    }
+
+    #navlist a {
+        width: 100%;
+        text-align: left;
+        padding: 10px 20px;
+    }
 }

frontend/vanilla/html/activate-account.html

@@ -34,7 +34,7 @@
                 return;
             }
 
-            const response = await fetch(`${API_URL}/persons/me/activation`, {
+            const response = await fetch(`${API_URL}/people/me/activation`, {
                 method: 'POST',
                 headers: createHeaders(null),
                 body: JSON.stringify({

frontend/vanilla/html/login.html

@@ -109,7 +109,7 @@
       const password = document.getElementById("password").value;
 
 
-      const response = await fetch(`${API_URL}/persons/me/token`, {
+      const response = await fetch(`${API_URL}/people/me/token`, {
         method: "POST",
         body: JSON.stringify({
           email: email,

frontend/vanilla/html/register.html

@@ -147,14 +147,12 @@
                 }),
             };
 
-            fetch(`${API_URL}/persons`, options)
+            fetch(`${API_URL}/people`, options)
                 .then(response => {
                     response.json().then(data => {
                         if (response.ok) {
                             clearInputFields();
-                            if (!data
-                                .enabled
-                            ) { // is the user already enabled or do they need email verification?
+                            if (!data.enabled) { // is the user already enabled or do they need email verification?
                                 showSuccessAlert(
                                     "Congratulations! You've successfully registered to Blink. " +
                                     "Please click on the e-mail we sent you to confirm your account"

frontend/vanilla/html/userprofile.html

@@ -9,9 +9,31 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
     integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <link rel="stylesheet" href="../css/profile.css">
 </head>
 
 <body style="background-color: #ecf2fa; display: none;">
+  
+    <!-- Navbar items -->
+    <div id="navlist">
+      <a href="#">Home</a>
+      <a href="#">Your Applications</a>
+      <a href="#">Your organizations</a>
+
+      <!-- search bar right align -->
+      <div class="search">
+          <form action="#">
+              <input type="text" placeholder="Search Blink"
+                     name="search">
+              <button>
+                  <i class="fa fa-search"></i>
+              </button>
+          </form>
+      </div>
+  </div>
+
+
   <div class="container py-5">
 
     <!-- Person's name + profile picture card -->
@@ -24,7 +46,8 @@
             <h5 class="my-3" id="display-name">John Doe</h5>
             <p class="text-muted mb-2" id="qualification">Full Stack Developer</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" id="about-me"> 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
@@ -175,8 +198,8 @@
     </div>
   </div>
 
-  <script src="../../js/constants.js"></script>
-  <script src="../../js/utils.js"></script>
+  <script src="../js/constants.js"></script>
+  <script src="../js/utils.js"></script>
   <script>
     window.addEventListener("load", async function () {
       loadProfile();
@@ -194,18 +217,21 @@
         if (!token) {
           window.location.href = 'login.html';
         }
-        response = await fetch(`${API_URL}/persons/me`, {
+        response = await fetch(`${API_URL}/people/me`, {
           headers: createHeaders(token)
         });
-      } else {
-        response = await fetch(`${API_URL}/persons/${idToDisplay}/details`, {
+      }
+
+      // If it's someone else
+      else {
+        response = await fetch(`${API_URL}/people/${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);
+        populateFields(data.display_name, 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';
@@ -214,10 +240,9 @@
       }
     }
 
-    function populateFields(displayName, email, aboutMe, qualification, placeOfLiving) {
+    function populateFields(displayName, 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;