Merge pull request #586 from NoroffFEU/Vt-logoPlacing

Vt logo and icons placing

index.html

@@ -58,7 +58,9 @@ <h2 class="d-md-none fw-bold">Your direct access to Noroff's best candidates</h2
               />
             </div>
           </div>
+
           <div class="col-12 col-md-6 ms-md-5 row col-xxl-4 mx-auto">
+
             <h2 class="d-none d-md-block fw-bold">
               Your direct access to Noroff's best candidates
             </h2>
@@ -89,6 +91,7 @@ <h2 class="d-none d-md-block fw-bold">
           <div
             class="col-12 col-md-6 col-xxl-4 order-1 me-md-5 order-md-0 row justify-content-end mx-auto"
           >
+
             <h2 class="d-none d-md-block fw-bold">Your direct access to industry</h2>
             <p>
               <span class="fw-semibold">Meet your next employer today.</span> Showcase your unique

pages/listings/index.html

@@ -23,45 +23,70 @@
     <!--Header is created trough JS script-->
     <header></header>
     <!--Main content on page-->
+
     <main class="bg-theme-new-grey py-5">
       <div
         class="container w-75 d-flex flex-column gap-5 bg-theme-light mt-5 mb-3 pb-3 shadow"
         id="container-listings"
       >
+
         <!--Top of listings container-->
-        <section class="search-listig-section">
-          <h1 class="text-center fw-bold">Job Listings</h1>
-          <div class="search-input-flex-group">
-            <label for="searchListing"></label>
-            <div class="search-input-icon-group">
-              <input
-                class="search-listing-input"
-                type="search"
-                id="searchListing"
-                data-search-listings
-              />
-              <img src="../../public/assets/icons/search.svg" alt="Search icon" class="icon-sm" />
-            </div>
-            <div class="dropdown">
-              <button
-                class="btn"
-                type="button"
-                id="dropdownMenuButton1"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                <img src="../../public/assets/icons/filter.svg" alt="Search icon" class="icon-sm" />
-              </button>
-              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-                <li><a class="dropdown-item" href="#">All</a></li>
-                <li><a class="dropdown-item" href="#">Latest</a></li>
-                <li><a class="dropdown-item" href="#">Last 14 days</a></li>
-                <li><a class="dropdown-item" href="#">Last 30 days</a></li>
-              </ul>
+
+        <section class="d-flex justify-content-center">
+          <div class="mt-5 col-6">
+            <h1 class="mt-2 py-1 text-center fw-bold">Job Listings</h1>
+            <div class="container d-flex justify-content-center mt-3 col-12 ms-3">
+              <div class="col-md-5 w-100 col-10 ms-5 search-container">
+                <div class="input-group">
+                  <label for="searchListing"></label>
+
+                  <input
+                    class="form-control"
+                    type="search"
+                    placeholder="Search Listings..."
+                    id="searchListing"
+                    data-search-listings
+                  />
+                  <span class="input-group-append">
+                    <button class="btn ms-n5" type="button">
+                      <img
+                        src="../../public/assets/icons/search.svg"
+                        alt="Search icon"
+                        class="icon-sm"
+                      />
+                    </button>
+                  </span>
+                </div>
+              </div>
+
+              <div class="dropdown">
+                <button
+                  class="btn"
+                  type="button"
+                  id="dropdownMenuButton1"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  <img
+                    src="../../public/assets/icons/filter.svg"
+                    alt="Search icon"
+                    class="icon-sm"
+                  />
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                  <li><a class="dropdown-item" href="#">All</a></li>
+                  <li><a class="dropdown-item" href="#">Latest</a></li>
+                  <li><a class="dropdown-item" href="#">Last 14 days</a></li>
+                  <li><a class="dropdown-item" href="#">Last 30 days</a></li>
+                </ul>
+              </div>
+
+
             </div>
           </div>
         </section>
         <!--Bootstrap grid cards-->
+
         <div class="row g-4 listingContainer justify-content-center px-5">
           <!-- dummy-cards start -->
           <div class="card bg-theme-light shadow col-12 col-md-5 m-2">
@@ -146,6 +171,7 @@ <h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
           </div>
           <!-- dummy cards ends -->
         </div>
+
       </div>
     </main>
     <!--Footer is created trough JS script-->

src/js/api/auth/login.js

@@ -1,42 +1,6 @@
 import { Store } from '../../storage/storage.js';
 import { callLoginApi } from './handleAuthServices.js';
 
-/**
- * Function for logging in an existing user in database and storing the returned token in session or localstorage
- * @param {object} profile Values from loginForm
- * @param {string} profile.email Email of the user
- * @param {string} profile.password Plain text password
- * @param {string} [profile.remember] If the user checkbox is checked it will equal to the string 'on'
- * @returns {void}
- */
-export async function login(profile) {
-  const { remember, email, password } = profile;
-
-  const rememberLogin = remember === 'on';
-
-  const errorContainer = document.querySelector('#errorContainer');
-
-  try {
-    const { userData, error } = await callLoginApi(email, password);
-
-    if (error) {
-      return (errorContainer.innerHTML = error?.message);
-    }
-
-    const { role } = userData;
-
-    clearProfileData(Store); // Clear any previous data
-    storeProfileData(userData, rememberLogin, Store);
-
-    const redirectUrl = getRedirectUrl(role);
-    handleLoginRedirect(redirectUrl);
-  } catch (error) {
-    errorContainer.innerHTML =
-      'Unknown error occurred. Please try again later, if the problem persist contact customer support.';
-    console.error(error);
-  }
-}
-
 /**
  * @param {UserData} userData - The user data to store.
  * @param {boolean} rememberLogin - Whether or not to remember the login
@@ -51,6 +15,8 @@ function storeProfileData(userData, rememberLogin, Store) {
   new Store('id', id, rememberLogin);
 }
 
+
+
 /**
  * @param {Store} Store - The store class.
  */
@@ -77,3 +43,62 @@ function getRedirectUrl(role) {
       return '/pages/user/index.html';
   }
 }
+
+
+/**
+ * Function for logging in an existing user in database and storing the returned token in session or localstorage
+ * @param {object} profile Values from loginForm
+ * @param {string} profile.email Email of the user
+ * @param {string} profile.password Plain text password
+ * @param {string} [profile.remember] If the user checkbox is checked it will equal to the string 'on'
+ * @returns {void}
+ */
+export async function login(profile) {
+  const { remember, email, password } = profile;
+
+  const rememberLogin = remember === 'on';
+
+  const errorContainer = document.querySelector('#errorContainer');
+
+  try {
+    const { userData, error } = await callLoginApi(email, password);
+
+    if (error) {
+      return (errorContainer.innerHTML = error?.message);
+    }
+
+    const { role } = userData;
+
+
+        if (id === id) {
+            // spiderman.gif
+          new Store('Role', 'user', Boolean(remember !== 'on'));
+         window.location.replace('../../../pages/user/index.html');
+
+        } else if (profile.admin) {
+          new Store('Role', 'admin', Boolean(remember !== 'on'));
+          window.location.replace('#'); // TODO: Add admin page url
+        } else {
+          window.location.replace('../../../pages/user/index.html');
+        }
+        break;
+      case 403:
+        errorContainer.innerHTML = 'Incorrect username/password';
+        break;
+      default:
+        throw new Error(`${response.status} ${response.statusText}`);
+    }
+
+    clearProfileData(Store); // Clear any previous data
+    storeProfileData(userData, rememberLogin, Store);
+
+    const redirectUrl = getRedirectUrl(role);
+    handleLoginRedirect(redirectUrl);
+
+  } catch (error) {
+    errorContainer.innerHTML =
+      'Unknown error occurred. Please try again later, if the problem persist contact customer support.';
+    console.error(error);
+  }
+}
+

src/js/api/users/editStudent.js

@@ -13,15 +13,13 @@ const action = 'users/';
  */
 
 export async function editStudent(profile) {
-  // const { id } = profile;
-  const id = localStorage.getItem('id');
-  const newId = id.replace(/^"|"$/g, '');
-
-  const profileURL = apiPath + action + newId;
 
+
+  const id = JSON.parse(localStorage.getItem('id'));
+  console.log(id);
+  const profileURL = apiPath + action + `${id}`;
   const accessToken = getToken('token');
   const newAccessToken = accessToken.replace(/^"|"$/g, '');
-
   const body = JSON.stringify(profile);
   const options = {
     method,

src/js/listeners/auth/logoutListener.js

@@ -1,5 +1,5 @@
 import { logout } from '../../api/auth/index.js';
 
 // The element id  is temporary. need to replace it with the right one.
-
-// document.quaryselector('[data-auth=logout]').addEventListener('click', logout);
+const logoutButton = document.querySelector('#signOut');
+console.log(logoutButton);

src/js/ui/footer/index.js

@@ -24,6 +24,7 @@ export const footer = () => {
           <li class="list-group-item text-white">Tordenskjoldsgate 9</li>
           <li class="list-group-item text-white">4612 Kristiansand S</li>
         </ul>
+
         <div class="d-flex flex-column gap-1 mt-5">
           <a href="tel:38000000" class="nav-link text-white" id="navlink-footer-id"><img src="../../../public/assets/icons/phone.svg" class="footerIcon me-3 ms-2 ms-md-0" alt="phone icon for footer navigation"/> 38000000</a>
           <a href="mailto:utdanning@noroff.no" class="nav-link text-white" id="navlink-footer-id"><img src="../../../public/assets/icons/mail.svg" class="footerIcon me-3 ms-2 ms-md-0" alt="email icon for footer navigation" id="navlink-footer-id"/> utdanning@noroff.no</a>

src/js/ui/header/index.js

@@ -1,3 +1,5 @@
+// import { checkLoginStatus } from '../../ui/header/logoutRender.js';
+
 /**
  *
  * This function is creating the content inside the header tag on each page
@@ -15,7 +17,9 @@ export const header = () => {
       <div id="nav-elements" class="mx-0 mx-md-5 px-0 px-md-3 container-fluid">
         <a class="navbar-brand ms-5 me-0 p-0" href="/">
         <div class="d-flex gap-2">
-          <img src="/assets/icons/noroff-logo.svg" class="logo-noroff my-auto" />
+
+          <img src="../../../../public/assets/icons/noroff-logo.svg" class="Logo-noroff my-auto" style="width: 40px;height: 56px" />
+
           <div class="d-flex flex-column">
             <span class="company_name fs-4 fw-semibold text-white" style="height: 28px">Noroff</span>
             <span class="company_branch fs-6 text-white">Job Agency</span>
@@ -50,9 +54,12 @@ pageTitle.innerText = 'Standard';
  *
  */
 export const checkState = () => {
-  const role = localStorage.getItem('Role');
+  const role = JSON.parse(localStorage.getItem('role'));
+  console.log(role);
   const navBarNav = document.getElementById('navbarNav');
-  if (role == 'user') {
+
+  if (role === 'Applicant') {
+    // checkLoginStatus();
     return (navBarNav.innerHTML = `<ul class="navbar-nav gap-2" id="navUl">
 
     <li class="nav-item">
@@ -91,8 +98,6 @@ export const checkState = () => {
   // The profile button on here is for development reasons
   if (!role || role === 'null') {
     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>

src/js/ui/header/logoutRender.js

@@ -1,16 +1,14 @@
 import { getToken } from '../../api/getToken.js';
 
-const checkLoginStatus = function () {
-  const loggedIn = document.querySelectorAll(`data-visible="loggedIn"`);
-  const loggedOut = document.querySelectorAll(`data-visible="loggedOut"`);
-
+export const checkLoginStatus = function () {
+  const loggedIn = document.querySelector(`data-visible="loggedIn"`);
+  const loggedOut = document.querySelector(`data-visible="loggedOut"`);
+  console.log(loggedOut);
   const token = getToken();
 
   if (token) {
-    loggedOut.forEach((item) => item.classList.add('d-none'));
+    loggedOut.forEach((item) => item.classList.add('d-block'));
   } else {
-    loggedIn.forEach((item) => item.classList.add('d-none'));
+    loggedIn.forEach((item) => item.classList.add('d-block'));
   }
 };
-
-checkLoginStatus();