.

server/api/index.js

@@ -64,11 +64,13 @@ class API {
 			if (!method)
 				return cb({
 					error: "method missed",
+					trace_id: trace_id ?? null,
 					ended: true
 				});
 			if (!trace_id)
 				return cb({
 					error: "trace_id missed",
+					trace_id: null,
 					ended: true
 				});
 			const selmethod = this.methods[method];
@@ -81,7 +83,9 @@ class API {
 			return selmethod(connection, request, cb);
 		} else {
 			return cb({
-				error: "required JSON-object based request"
+				error: "required JSON-object based request",
+				trace_id: null,
+				ended: true
 			});
 		}
     }

server/frontend/connect-router.js

@@ -28,6 +28,7 @@ module.exports = function (req, res) {
             document.getElementById("js-required").innerHTML = "<p>Loading...</p>";
         </script>
 		<script src="/bootstrap/bootstrap.bundle.min.js" defer></script>
+		<script src="/js/jquery-3.7.1.min.js" defer></script>
 		<script src="/js/connect/main.js" type="module" defer></script>
     </body>
 </html>`);

server/frontend/public/css/connect/main.css

@@ -99,6 +99,18 @@
 	background-color: #09638A !important;
 }
 
+.auth-window {
+	background-color: #212529;
+	border-radius : 15px;
+	width: 500px;
+	height: 650px;
+	
+	margin-left: calc(50% - 250px);
+	margin-top: calc(50vh - 325px);
+	
+	padding: 5px;
+}
+
 /* $accordion-color:green; */
 /* $accordion-padding-y:1.3rem; */
 /* $accordion-padding-x:2.5rem; */

server/frontend/public/js/connect/api.js

@@ -67,10 +67,11 @@ class ApiHTML {
 	}
 	
 	async renderAuth (authMode) {
-		switch (authMode) {
-			default:
-				document.getElementById("server.area").innerHTML = '<div class="auth-window"><button>connect</button></div>';
-		}
+		document.body.style.backgroundImage = "url('assets/hello/1.png')"; 
+		
+		document.getElementById("server.area").innerHTML = '';
+		$(document.getElementById("server.area")).append(ServerAuth.authForm);
+		//switch (authMode) {}
 	}
 }
 

server/frontend/public/js/connect/auth.js

@@ -12,8 +12,9 @@ export class ServerAuth {
 		if (!serverdata) return null;
 		
 	}
-	
-	renderAuth (type) {
-		
-	}
 }
+
+ServerAuth.authForm = document.createElement("div");
+["auth-window"].forEach(c =>
+	ServerAuth.authForm.classList.add(c));
+ServerAuth.authForm.innerHTML = `<center><h1>Log-In</h1></center><hr/>`;

server/frontend/public/js/main.js

@@ -18,6 +18,19 @@ function translate (page) {
 	});
 }
 
+// Get random integer number function
+function randint(min, max) {
+	return Math.ceil((Math.random() * (max - min)) + min);
+}
+
+// Get traceId for requests to server
+function getTraceId() {
+	const dict = "1234567890abcdefABCDEF";
+	return [...new Array(16)]
+		.map(() => dict[randint(0, dict.length - 1)])
+		.join("");
+}
+
 // load styles
 document.head.innerHTML += '\\n		<link href="/bootstrap/bootstrap.min.css" rel="stylesheet">';
 document.head.innerHTML += '\\n		<link href="/css/main.css" rel="stylesheet">';
@@ -148,6 +161,7 @@ fl.bindLoad("/connect", () => {
 				const mp = servers.map(async serverItem => {
 					const promise = new Promise((resolve, reject) => {
 						console.log("serverItem:", serverItem);
+						const trace_id = getTraceId();
 						const socket = new WebSocket(`${!serverItem.tls ? "ws" : "wss"}://${serverItem.address}:${serverItem.port}`);
 						let ping = new Date();
 						socket.onopen = () => {
@@ -173,7 +187,8 @@ fl.bindLoad("/connect", () => {
 								</tr>`));
 							};
 							socket.send(JSON.stringify({
-								method: "info"
+								method: "info",
+								trace_id
 							}));
 						};
 						socket.onerror = (err) => {