Merge pull request #489 from NoroffFEU/470-fix-profile-and-listings-p…

…age-authentication

470 Fix profile page authentication

src/js/ui/header/index.js

@@ -33,12 +33,6 @@ export const header = () => {
 </div>`);
 };
 
-// For testing states
-const stateValue = 'null';
-localStorage.setItem('Role', stateValue);
-let pageTitle = document.querySelector('title');
-pageTitle.innerText = 'Standard';
-
 /**
  *
  * This function is adding the navigation to the header element based on the state of thus user.
@@ -50,9 +44,13 @@ pageTitle.innerText = 'Standard';
  *
  */
 export const checkState = () => {
-  const role = localStorage.getItem('Role');
+  const getRole = () => {
+    return localStorage.getItem('role') || sessionStorage.getItem('role');
+  };
+
   const navBarNav = document.getElementById('navbarNav');
-  if (role == 'user') {
+
+  if (getRole() == 'user') {
     return (navBarNav.innerHTML = `<ul class="navbar-nav gap-2" id="navUl">
 
     <li class="nav-item">
@@ -65,12 +63,12 @@ export const checkState = () => {
       <a class="nav-link text-white fw-semibold" href="/pages/listings/index.html" id="navItems">Listings</a>
     </li>
     <li class="nav-item">
-      <a class="btn btn-outline-light text-white fw-semibold" href="#" id="signOut">Log out</a>
+      <a class="btn btn-outline-light text-white fw-semibold" href="#" id="logOutUser">Log out</a>
     </li>
   </ul>`);
   }
 
-  if (role == 'admin') {
+  if (getRole == 'admin') {
     return (navBarNav.innerHTML = `<ul class="navbar-nav gap-2" id="navUl">
 
     <li class="nav-item">
@@ -88,16 +86,37 @@ export const checkState = () => {
   </ul>`);
   }
 
-  // The profile button on here is for development reasons
-  if (role == 'null') {
-    return (navBarNav.innerHTML = `<ul class="navbar-nav gap-5 me-0 me-xl-5" id="navUl">
-  
+  if (getRole() == '"Applicant"') {
+    if (location.pathname === '/pages/auth/login/index.html' || location.pathname === '/pages/auth/register/applicant/index.html') {
+      location.href = '/pages/user/index.html';
+    }
+
+    return (navBarNav.innerHTML = `<ul class="navbar-nav gap-2" id="navUl">
 
     <li class="nav-item">
       <a class="nav-link text-white fw-semibold" aria-current="page" href="/index.html" id="navItems">Home</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link text-white fw-semibold" href="/pages/user/index.html" id="navItems">Profile</a>
+      <a class="nav-link text-white fw-semibold" aria-current="page" href="/pages/user/index.html" id="navItems">Profile</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link text-white fw-semibold" href="/pages/listings/index.html" id="navItems">Listings</a>
+    </li>
+    <li class="nav-item">
+      <a class="btn btn-outline-light text-white fw-semibold" href="#" id="logOutUser">Log out</a>
+    </li>
+  </ul>`);
+  }
+
+  if (!getRole()) {
+    if (location.pathname === '/pages/user/index.html') {
+      location.href = '/';
+    }
+
+    return (navBarNav.innerHTML = `<ul class="navbar-nav gap-5 me-0 me-xl-5" id="navUl">
+
+    <li class="nav-item">
+      <a class="nav-link text-white fw-semibold" aria-current="page" href="/index.html" id="navItems">Home</a>
     </li>
     <li class="nav-item">
       <a class="nav-link text-white fw-semibold" href="/pages/listings/index.html" id="navItems">Listings</a>