UI fixes

nodejs/middleware/auth.js

@@ -16,10 +16,8 @@ async function authIO(socket, next){
 	try{
 		let token = await Auth.checkToken(socket.handshake.auth.token || 0);
 		socket.user = await token.getUser();
-		console.log('socket is good!')
 		next();
 	}catch(error){
-		console.log('reject for', socket.handshake.auth.token)
 		next(error);
 	}
 }

nodejs/views/hosts.ejs

@@ -19,19 +19,19 @@
 	}
 	/* my Div class for my search bar */
 	.search-wrapper {
-    	display: flex;
+		display: flex;
-        gap: .5rem;
+		gap: .5rem;
-        align-items: center;
+		align-items: center;
-        margin-top: 10px;
+		margin-top: 10px;
-    }
+	}
-    /* The input bar  */
+	/* The input bar  */
-    input {
+	input {
-    	font-size: 1rem;
+		font-size: 1rem;
-        border-top-left-radius: 5px !important;
+		border-top-left-radius: 5px !important;
-        border-bottom-left-radius: 5px !important;
+		border-bottom-left-radius: 5px !important;
-        border-top-right-radius: 5px !important;
+		border-top-right-radius: 5px !important;
-        border-bottom-right-radius: 5px !important;    
+		border-bottom-right-radius: 5px !important;    
-    }
+	}
 
 </style>
 
@@ -110,22 +110,26 @@
 			});
 		});
 
-		//search bar html event logic stolen from here
+		app.subscribe(/./g, function(data, topic){
-        // https://github.com/WebDevSimplified/js-search-bar/blob/main/script.js
+			console.log('topic', data);
-        $('[host-search]').on("input", function() {
+		});
-        let inputValue = $(this).val().toLowerCase();
 
-        //on each input detected we need to get all host list that was called by the populateHosts function which is store in 
+		//search bar html event logic stolen from here
-        // $.scope.hosts and then we need to loop through each host and check if the host name is equal to the input value
+		// https://github.com/WebDevSimplified/js-search-bar/blob/main/script.js
-        // if it is we will display the host if not we will hide it
+		$('[host-search]').on("input", function() {
-        for(let hostObj of $.scope.hosts){
+			let inputValue = $(this).val().toLowerCase();
-            if (hostObj.host.toLowerCase().includes(inputValue)) {
+
-            	hostObj.__jq_$el.show();
+			// on each input detected we need to get all host list that was called by the populateHosts function which is store in 
-            } else {
+			// $.scope.hosts and then we need to loop through each host and check if the host name is equal to the input value
-            	hostObj.__jq_$el.hide();
+			// if it is we will display the host if not we will hide it
-                }
+			for(let hostObj of $.scope.hosts){
-            }
+				if (hostObj.host.toLowerCase().includes(inputValue)) {
-        });
+					hostObj.__jq_$el.show();
+				} else {
+					hostObj.__jq_$el.hide();
+				}
+			}
+		});
 
 		$('form.addHost').on('submit', function(){
 			event.preventDefault();

nodejs/views/users.ejs

@@ -52,17 +52,19 @@
 <div class="row" style="display:none">
 	<div class="col-md-4">
 		<div class="card shadow-lg">
-			<div class="card-header">
+			
-				<span class="card-header-icon">
+			<div class="card-header text-center">
+				<span class="card-icon float-start">
 					<i class="fa-solid fa-user-plus"></i>
 				</span>
-				<span class="card-title mx-auto p-2">
+				<span class="card-title">
 					Add New User
 				</span>
-				<div class="float-right">
+				<span class="float-end">
 					<i class="fa-solid fa-circle-minus"></i>
-				</div>
+				</span>
 			</div>
+
 			<div class="card-header actionMessage" style="display:none"></div>
 			<div class="card-body">
 				<form action="user/" evalAJAX="
@@ -88,15 +90,19 @@
 	</div>
 	<div class="col-md-8">
 		<div class="card shadow-lg">
-			<div class="card-header">
+
-				<span class="card-title">
+			<div class="card-header text-center">
+				<span class="card-icon float-start">
 					<i class="fa-solid fa-users"></i>
+				</span>
+				<span class="card-title">
 					User List
 				</span>
-				<div class="float-right">
+				<span class="float-end">
 					<i class="fa-solid fa-circle-minus"></i>
-				</div>
+				</span>
 			</div>
+
 			<div class="card-header actionMessage" style="display:none"></div>
 			<table class="card-body table table-striped" style="margin-bottom:0">
 				<thead>