adding a moddleware to verify token when retreiving users

kennyg37 · Apr 25, 2024 · ac85cd7 · ac85cd7
1 parent b2615eb
commit ac85cd7
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 6 deletions.
diff --git a/backend/src/routes/authRoutes.ts b/backend/src/routes/authRoutes.ts
@@ -2,12 +2,13 @@ import express, { Request, Response } from 'express';
 import bcrypt, { hash } from 'bcrypt';
 import jwt from 'jsonwebtoken';
 import User from '../models/auth';
+import { verifyToken } from '../middleware/authBlog';
 
 
 const router = express.Router();
 
 
-router.get('/data', async (req: Request, res: Response) => {
+router.get('/data', verifyToken, async (req: Request, res: Response) => {
     const info = await User.find();
     res.send(info);
 });

diff --git a/src/js/admin.js b/src/js/admin.js
@@ -290,6 +290,72 @@ document.addEventListener('click', function(event) {
   }
 });
 
+document.getElementById('show-users').addEventListener('click', function() {
+  document.querySelector('.users').style.display = 'flex';
+  setTimeout(() => {
+    document.querySelector('.users').style.opacity = '1';   
+  }, 300);
+
+  try {
+    const token = localStorage.getItem('token');
+    fetch('https://my-brand-ken-ganza-1.onrender.com/v1/auth/data', {
+      method: 'GET',
+      headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+      }
+    })
+    .then(response => {
+      if (!response.ok) {
+          throw new Error('User fetch failed');
+      } else {
+          return response.json();
+      }
+    })
+    .then(data => {
+      console.log(data);
+      const users = data;
+      const usersList = document.querySelector('.user-card');
+      usersList.innerHTML = '';
+      users.forEach(user => {
+        const userCard = document.createElement('div');
+        userCard.classList.add('user-card');
+
+        const userDetails = document.createElement('div');
+        userDetails.classList.add('user-details');
+
+        const userName = document.createElement('p');
+        userName.textContent = user.username;
+
+        const userEmail = document.createElement('p');
+        userEmail.textContent = user.email;
+
+        const accountType = document.createElement('p');
+        accountType.textContent = user.account;
+
+        const profileIcon = document.createElement('i');
+        profileIcon.classList.add('fa-solid', 'fa-user');
+
+        const threeDots = document.createElement('i');
+        threeDots.classList.add('fa-solid', 'fa-ellipsis-vertical');
+        threeDots.setAttribute('onclick', 'openoverlay()');
+
+        userDetails.appendChild(userName);
+        userDetails.appendChild(userEmail);
+        userDetails.appendChild(accountType);
+
+        usersList.appendChild(profileIcon);
+        usersList.appendChild(userDetails);
+        usersList.appendChild(threeDots);
+      });
+    })
+
+  }
+  catch(error) {
+    console.log(error);
+  }
+})
+
 document.querySelector('.userdelete').addEventListener('click', function() {
     document.querySelector('.delete-user-confirmation').style.display = 'block';
     document.getElementById('no').addEventListener('click', function() {
@@ -387,11 +453,9 @@ document.querySelector('.messageUser').addEventListener('click', function() {
 
 document.getElementById('show-messages').addEventListener('click', function() {
     document.querySelector('.contacts').style.display = 'flex';
-
     setTimeout(() => {
       document.querySelector('.contacts').style.opacity = '1';   
-    }, 300);
-
+    }, 300);   
 });
 
 document.getElementById('show-subs').addEventListener('click', function() {

diff --git a/src/pages/admin.html b/src/pages/admin.html
@@ -500,14 +500,14 @@ <h2>Danger Zone</h2>
             </div>
             <div class="admin-main" id="users">
                 <div class="users-container">
-                    <button id="show-users">Show Users</button>
+                    <button id="show-users">Retrieve Users</button>
                     <div class="users">
                         <div class="user-card">
                             <i class="fa-solid fa-user"></i>
                             <div class="user-details">
                                 <p>Ken</p>
                                 <p>Admin</p>
-                                <p>Id: 2403001</p>
+                                <p>Email</p>
                             </div>
                             <i class="fa-solid fa-ellipsis-vertical" onclick="openoverlay()"></i>
                         </div>

diff --git a/src/styles/admin.css b/src/styles/admin.css
@@ -904,6 +904,11 @@ nav ul li::after {
     gap: 50px;
     padding: 20px;
 }
+.users {
+    display: none;
+    transition: opacity 0.5s;
+    opacity: 0;
+}
 .user-card, .contact-card {
     display: flex;
     flex-direction: column;