From 75a486251d689f819dde5f20f248edf20e4e0fa9 Mon Sep 17 00:00:00 2001
From: William Mantly <wmantly@gmail.com>
Date: Wed, 31 Jul 2024 19:43:01 -0400
Subject: [PATCH] UI fixes

---
 nodejs/middleware/auth.js |  2 --
 nodejs/views/hosts.ejs    | 60 +++++++++++++++++++++------------------
 nodejs/views/users.ejs    | 24 ++++++++++------
 3 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/nodejs/middleware/auth.js b/nodejs/middleware/auth.js
index 09ea20b..4ac413b 100755
--- a/nodejs/middleware/auth.js
+++ b/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);
 	}
 }
diff --git a/nodejs/views/hosts.ejs b/nodejs/views/hosts.ejs
index 98860cd..66f7cdc 100755
--- a/nodejs/views/hosts.ejs
+++ b/nodejs/views/hosts.ejs
@@ -19,19 +19,19 @@
 	}
 	/* my Div class for my search bar */
 	.search-wrapper {
-    	display: flex;
-        gap: .5rem;
-        align-items: center;
-        margin-top: 10px;
-    }
-    /* The input bar  */
-    input {
-    	font-size: 1rem;
-        border-top-left-radius: 5px !important;
-        border-bottom-left-radius: 5px !important;
-        border-top-right-radius: 5px !important;
-        border-bottom-right-radius: 5px !important;    
-    }
+		display: flex;
+		gap: .5rem;
+		align-items: center;
+		margin-top: 10px;
+	}
+	/* The input bar  */
+	input {
+		font-size: 1rem;
+		border-top-left-radius: 5px !important;
+		border-bottom-left-radius: 5px !important;
+		border-top-right-radius: 5px !important;
+		border-bottom-right-radius: 5px !important;    
+	}
 
 </style>
 
@@ -110,22 +110,26 @@
 			});
 		});
 
-		//search bar html event logic stolen from here
-        // https://github.com/WebDevSimplified/js-search-bar/blob/main/script.js
-        $('[host-search]').on("input", function() {
-        let inputValue = $(this).val().toLowerCase();
+		app.subscribe(/./g, function(data, topic){
+			console.log('topic', data);
+		});
 
-        //on each input detected we need to get all host list that was called by the populateHosts function which is store in 
-        // $.scope.hosts and then we need to loop through each host and check if the host name is equal to the input value
-        // 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();
-                }
-            }
-        });
+		//search bar html event logic stolen from here
+		// https://github.com/WebDevSimplified/js-search-bar/blob/main/script.js
+		$('[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 
+			// $.scope.hosts and then we need to loop through each host and check if the host name is equal to the input value
+			// 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();
diff --git a/nodejs/views/users.ejs b/nodejs/views/users.ejs
index 1bd003f..f59eb35 100755
--- a/nodejs/views/users.ejs
+++ b/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>