feature(Hide pages based on who is logged in):Hide pages based on log…

…ged in user Hide pages based on who is logged in [Deliver #165664730]
Cavdy · Apr 28, 2019 · 2f8680a · 2f8680a
1 parent f71ac7d
commit 2f8680a
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 87 deletions.
diff --git a/frontend-app/accounts.html b/frontend-app/accounts.html
@@ -22,31 +22,31 @@ <h1 class="logo">Banka</h1>
         </div>
         <div class="sidebar-menu">
           <ul class="sidebar-list">
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./createaccount.html" class="sidebar-link">Create an account</a>
             </li>
-            <li class="sidebar-item sidebar-item-active">
+            <li class="sidebar-item staff admin sidebar-item-active">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="staffs.html" class="sidebar-link">Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
             </li>
           </ul>

diff --git a/frontend-app/activate.html b/frontend-app/activate.html
@@ -22,31 +22,31 @@ <h1 class="logo">Banka</h1>
         </div>
         <div class="sidebar-menu">
           <ul class="sidebar-list">
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./createaccount.html" class="sidebar-link">Create an account</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="staffs.html" class="sidebar-link">Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
             </li>
-            <li class="sidebar-item  sidebar-item-active">
+            <li class="sidebar-item staff admin sidebar-item-active">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
             </li>
           </ul>
@@ -66,7 +66,7 @@ <h1 class="logo">Banka</h1>
             </svg>
           </button>
           <form class="search-form">
-            <input type="text" class="search-input" placeholder="Search...">
+            <input type="text" id="search" class="search-input" placeholder="Search...">
             <button class="search-form-button">
               <svg class="search-form-icon">
                 <use xlink:href="./svg/sprite.svg#icon-magnifying-glass"></use>
@@ -141,16 +141,6 @@ <h1 class="logo">Banka</h1>
                   <input type="submit" id="go" class="btn-go" value="Go">
                 </form>
               </div>
-
-              <div class="card">
-                <form action="" class="accounts-form">
-                  <div class="form-group">
-                    <input type="number" class="accounts-input" placeholder="account number">
-                  </div>
-
-                  <input type="submit" id="ac-go" class="btn-go" value="Go">
-                </form>
-              </div>
             </div>
           </div>
           <div class="card">

diff --git a/frontend-app/adduser.html b/frontend-app/adduser.html
@@ -22,31 +22,31 @@ <h1 class="logo">Banka</h1>
         </div>
         <div class="sidebar-menu">
           <ul class="sidebar-list">
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./createaccount.html" class="sidebar-link">Create an account</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="staffs.html" class="sidebar-link">Staffs</a>
             </li>
-            <li class="sidebar-item sidebar-item-active">
+            <li class="sidebar-item admin sidebar-item-active">
               <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
             </li>
           </ul>

diff --git a/frontend-app/dashboard.html b/frontend-app/dashboard.html
@@ -22,31 +22,31 @@ <h1 class="logo">Banka</h1>
         </div>
         <div class="sidebar-menu">
           <ul class="sidebar-list">
-            <li class="sidebar-item  sidebar-item-active">
+            <li class="sidebar-item user sidebar-item-active">
               <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./createaccount.html" class="sidebar-link">Create an account</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="staffs.html" class="sidebar-link">Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
             </li>
           </ul>

diff --git a/frontend-app/js/activate.js b/frontend-app/js/activate.js
@@ -329,15 +329,14 @@ go.addEventListener('click', (e) => {
   getAccountsApi(`${api}/v1/accounts?limit=${limitSelect.value}`);
 });
 
-const acBtn = document.querySelector('#ac-go');
+const search = document.querySelector('#search');
 
-acBtn.addEventListener('click', (e) => {
+search.addEventListener('keyup', (e) => {
   e.preventDefault();
-  const acInput = document.querySelector('.accounts-input');
   const tableBodies = document.querySelectorAll('.table-body');
   tableBodies.forEach((tableBody) => {
     tableBody.remove();
   });
 
-  getSpecficAccountApi(`${api}/v1/accounts/${acInput.value}`);
+  getSpecficAccountApi(`${api}/v1/accounts/${search.value}`);
 });
diff --git a/frontend-app/js/app.js b/frontend-app/js/app.js
@@ -77,3 +77,53 @@ logout.addEventListener('click', (e) => {
   sessionStorage.clear();
   location.replace('./index.html');
 });
+
+const apiUrl = 'https://bankaapp-api.herokuapp.com/api/v1';
+const tokenId = sessionStorage.getItem('token');
+const idU = sessionStorage.getItem('id');
+const sidebarItems = document.querySelectorAll('.sidebar-item');
+const userItems = document.querySelectorAll('.user');
+const staffItems = document.querySelectorAll('.staff');
+const adminItems = document.querySelectorAll('.admin');
+const userFname = document.querySelector('.user-nav-username');
+
+sidebarItems.forEach((sidebarItem) => {
+  sidebarItem.style.display = 'none';
+});
+
+// GET FETCH API REQUEST TO GET A PARTICULAR ACCOUNT INFO
+const getUApi = (url) => {
+  fetch(url, {
+    method: 'GET',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      Authorization: `Bearer ${tokenId}`,
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrer: 'no-referrer',
+  })
+    .then(response => response.json())
+    .then((data1) => {
+      const i = data1.data;
+      userFname.innerHTML = i.firstname;
+      userFname.style.textTransform = 'capitalize';
+      if (i.type === 'staff') {
+        staffItems.forEach((staffItem) => {
+          staffItem.style.display = 'block';
+        });
+      } else if (i.isadmin === true) {
+        adminItems.forEach((adminItem) => {
+          adminItem.style.display = 'block';
+        });
+      } else {
+        userItems.forEach((userItem) => {
+          userItem.style.display = 'block';
+        });
+      }
+    });
+};
+
+getUApi(`${apiUrl}/users/${idU}`);
diff --git a/frontend-app/staffs.html b/frontend-app/staffs.html
@@ -22,31 +22,31 @@ <h1 class="logo">Banka</h1>
         </div>
         <div class="sidebar-menu">
           <ul class="sidebar-list">
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./createaccount.html" class="sidebar-link">Create an account</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
-            <li class="sidebar-item sidebar-item-active">
+            <li class="sidebar-item admin sidebar-item-active">
               <a href="staffs.html" class="sidebar-link">Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
             </li>
           </ul>

diff --git a/frontend-app/transactions.html b/frontend-app/transactions.html
@@ -22,31 +22,31 @@ <h1 class="logo">Banka</h1>
         </div>
         <div class="sidebar-menu">
           <ul class="sidebar-list">
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./createaccount.html" class="sidebar-link">Create an account</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
             </li>
-            <li class="sidebar-item sidebar-item-active">
+            <li class="sidebar-item user sidebar-item-active">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="staffs.html" class="sidebar-link">Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
             </li>
           </ul>

diff --git a/frontend-app/users.html b/frontend-app/users.html
@@ -22,31 +22,31 @@ <h1 class="logo">Banka</h1>
         </div>
         <div class="sidebar-menu">
           <ul class="sidebar-list">
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./dashboard.html" class="sidebar-link">Dashboard</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./createaccount.html" class="sidebar-link">Create an account</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./accounts.html" class="sidebar-link">Credit / Debit</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./viewaccounts.html" class="sidebar-link">All Accounts</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item user">
               <a href="./transactions.html" class="sidebar-link">Transactions</a>
             </li>
-            <li class="sidebar-item  sidebar-item-active">
+            <li class="sidebar-item staff admin sidebar-item-active">
               <a href="./users.html" class="sidebar-link">Users</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="staffs.html" class="sidebar-link">Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item admin">
               <a href="./adduser.html" class="sidebar-link">Create Staffs</a>
             </li>
-            <li class="sidebar-item">
+            <li class="sidebar-item staff admin">
               <a href="./activate.html" class="sidebar-link">Activate / Deactivate</a>
             </li>
           </ul>