Refactored code

Author: lakshayman

identity-service-logs/index.html

@@ -19,6 +19,10 @@
       <h1>Identity Service Logs</h1>
     </nav>
 
+    <div class="toast">
+      <div class="toast__message"></div>
+    </div>
+
     <div class="stats">
       <div>Verified Users: <span id="verified" class="stats-value"></span></div>
       <div>Blocked Users: <span id="blocked" class="stats-value"></span></div>

identity-service-logs/script.js

@@ -2,14 +2,14 @@ import { SUPER_USER } from './constants.js';
 
 import {
   getIdentityLogs,
-  getSelfUser,
+  getIsSuperUser,
   fillData,
   getUserCount,
 } from './utils.js';
 
-const self_user = await getSelfUser();
+const { isSuperUser } = await getIsSuperUser();
 
-if (self_user?.roles[SUPER_USER]) {
+if (isSuperUser) {
   const {
     verifiedUsersCount,
     blockedUsersCount,

identity-service-logs/style.css

@@ -172,6 +172,53 @@ nav h1::before {
   transition-delay: 400ms;
 }
 
+/*
+    FOR Message toaster box
+*/
+
+.toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 300px;
+}
+
+.toast__message {
+  padding: 15px;
+  background-color: #9c3838;
+  color: white;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  display: none;
+}
+
+.toast--show {
+  display: block;
+  animation: slideInFromRight 3s forwards;
+}
+
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 1;
+  }
+
+  30% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  70% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(0) translateY(-100%);
+    opacity: 0;
+  }
+}
+
 .dateContainer {
   position: relative;
 }

identity-service-logs/utils.js

@@ -203,7 +203,17 @@ async function getUserCount() {
   }
 }
 
-async function getSelfUser() {
+function showToaster(message) {
+  const toaster = document.querySelector('.toast__message');
+  toaster.innerText = message;
+  toaster.classList.add('toast--show');
+
+  setTimeout(() => {
+    toaster.classList.remove('toast--show');
+  }, 3000);
+}
+
+async function getIsSuperUser() {
   try {
     const res = await fetch(`${API_BASE_URL}/users/self`, {
       method: 'GET',
@@ -213,15 +223,27 @@ async function getSelfUser() {
       },
     });
 
-    const self_user = await res.json();
-    if (self_user?.statusCode !== 200) {
-      alert('You are not loggedin. Please login!');
-      window.location.href = '/index.html';
+    if (res.status === 500) {
+      showToaster('Something went wrong. Internal Server Error!');
+      setTimeout(() => {
+        window.location.href = '/index.html';
+      }, 3000);
+      return;
     }
-    return self_user;
+
+    if (res.status === 401) {
+      showToaster('You are not logged-in. Please login!');
+      setTimeout(() => {
+        window.location.href = '/index.html';
+      }, 3000);
+      return;
+    }
+
+    const self_user = await res.json();
+    return { isSuperUser: self_user?.roles[SUPER_USER] };
   } catch (err) {
     console.error('Error in fetching self user ' + err);
-    return {};
+    return { error: err, isSuperUser: false };
   }
 }
 
@@ -323,4 +345,4 @@ async function fillData(identityLogs, next, prev) {
   }
 }
 
-export { getIdentityLogs, getSelfUser, fillData, getUserCount };
+export { getIdentityLogs, getIsSuperUser, fillData, getUserCount };