From 4ca800bed5f07396e222c11c9ad491fb3ce61526 Mon Sep 17 00:00:00 2001 From: Emmo00 Date: Fri, 21 Nov 2025 20:55:14 +0100 Subject: [PATCH 1/4] feat: enhance terminal UI with responsive sizing and fit button --- src/public/css/global.css | 5 ++ src/public/js/terminal.js | 116 ++++++++++++++++++++++++++++---------- src/views/index.hbs | 1 + 3 files changed, 91 insertions(+), 31 deletions(-) diff --git a/src/public/css/global.css b/src/public/css/global.css index f895b92..6915a36 100644 --- a/src/public/css/global.css +++ b/src/public/css/global.css @@ -56,10 +56,15 @@ iframe { #terminal-container { background-color: #000000 !important; padding: 0 !important; + width: 100%; + min-height: 400px; } #xterm-terminal { padding: 10px; + width: calc(100% - 20px); + height: calc(100% - 20px); + min-height: 380px; } #terminal-status { diff --git a/src/public/js/terminal.js b/src/public/js/terminal.js index 18dccd3..1c79e38 100644 --- a/src/public/js/terminal.js +++ b/src/public/js/terminal.js @@ -15,7 +15,11 @@ function connectTerminal(event) { // Show connecting status statusMessage.textContent = 'Connecting to terminal...'; - // Initialize xterm terminal + // Show terminal container first so we can get proper dimensions + authForm.style.display = 'none'; + terminalContainer.style.display = 'block'; + + // Initialize xterm terminal with proper sizing if (!terminal) { terminal = new Terminal({ cursorBlink: true, @@ -25,37 +29,47 @@ function connectTerminal(event) { } }); terminal.open(document.getElementById('xterm-terminal')); + + // Fit terminal to container size + setTimeout(() => { + fitTerminalToContainer(); + }, 100); } - // Determine protocol + // Determine protocol - get dimensions after terminal is sized const protocol = (location.protocol === 'https:') ? 'wss' : 'ws'; - const cols = terminal.cols; - const rows = terminal.rows; - // Create WebSocket connection with credentials and terminal size - const socketUrl = `${protocol}://${location.host}/?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&cols=${cols}&rows=${rows}`; - - socket = new WebSocket(socketUrl); - socket.binaryType = 'arraybuffer'; - - socket.onopen = () => { - isConnected = true; - statusMessage.textContent = 'Connected to terminal'; - authForm.style.display = 'none'; - terminalContainer.style.display = 'block'; + // Wait a moment for terminal to be properly sized, then connect + setTimeout(() => { + const cols = terminal.cols; + const rows = terminal.rows; - terminal.write('Connected to M3tering Console Terminal.\r\n'); + // Create WebSocket connection with credentials and terminal size + const socketUrl = `${protocol}://${location.host}/?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&cols=${cols}&rows=${rows}`; - // Send initial resize - socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); + console.log(`Connecting with terminal size: ${cols}x${rows}`); - // Send the docker compose logs command after connection is established - setTimeout(() => { - terminal.write('\r\nExecuting: cd Console && docker compose logs\r\n'); - const command = "dir\n" ; 'cd Console && docker compose logs\r'; - socket.send(command); - }, 1500); - }; + socket = new WebSocket(socketUrl); + socket.binaryType = 'arraybuffer'; + + socket.onopen = () => { + isConnected = true; + statusMessage.textContent = `Connected to terminal (${terminal.cols}x${terminal.rows})`; + + terminal.write('Connected to M3tering Console Terminal.\r\n'); + terminal.write(`Terminal size: ${terminal.cols} columns x ${terminal.rows} rows\r\n`); + + // Send initial resize with current dimensions + socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); + + // Send the docker compose logs command after connection is established + setTimeout(() => { + terminal.write('\r\nExecuting: cd Console && docker compose logs\r\n'); + const command = 'cd Console && docker compose logs\r'; + socket.send(command); + }, 1500); + }; + }, 200); socket.onmessage = (event) => { // Handle incoming terminal data @@ -101,12 +115,8 @@ function connectTerminal(event) { }); } - // Handle window resize - window.addEventListener('resize', () => { - if (terminal && socket && socket.readyState === WebSocket.OPEN) { - socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); - } - }); + // Handle window resize - remove the event listener since we'll add it globally + // (This prevents multiple listeners from being added) } function disconnectTerminal() { @@ -129,6 +139,40 @@ function disconnectTerminal() { isConnected = false; } +// Manually fit terminal to container +function fitTerminalToContainer() { + if (terminal) { + const container = document.getElementById('xterm-terminal'); + if (container && container.offsetParent !== null) { + // Use a temporary character measurement + const testElement = document.createElement('div'); + testElement.style.visibility = 'hidden'; + testElement.style.position = 'absolute'; + testElement.style.fontFamily = 'Monaco, Menlo, "Ubuntu Mono", monospace'; + testElement.style.fontSize = '13px'; + testElement.textContent = '0'; + document.body.appendChild(testElement); + + const charWidth = testElement.offsetWidth; + const charHeight = testElement.offsetHeight; + document.body.removeChild(testElement); + + const containerRect = container.getBoundingClientRect(); + const cols = Math.floor((containerRect.width - 20) / charWidth); + const rows = Math.floor((containerRect.height - 20) / charHeight); + + if (cols > 10 && rows > 5) { + console.log(`Fitting terminal to container: ${cols}x${rows} (char: ${charWidth}x${charHeight}px)`); + terminal.resize(cols, rows); + + if (socket && socket.readyState === WebSocket.OPEN) { + socket.send(JSON.stringify({ type: 'resize', cols: cols, rows: rows })); + } + } + } + } +} + // Show terminal authentication form when terminal is opened function showTerminalAuth() { const authForm = document.getElementById('terminal-auth'); @@ -144,6 +188,16 @@ function showTerminalAuth() { document.getElementById('username').focus(); } +// Global resize handler +function handleTerminalResize() { + if (terminal && isConnected) { + fitTerminalToContainer(); + } +} + +// Add global window resize listener +window.addEventListener('resize', handleTerminalResize); + // Clean up when terminal app is closed function cleanupTerminal() { if (socket) { diff --git a/src/views/index.hbs b/src/views/index.hbs index c6ce685..958335c 100644 --- a/src/views/index.hbs +++ b/src/views/index.hbs @@ -204,6 +204,7 @@ + From 9806e6f4ef3315056258b74a49ebb00006ae5ea3 Mon Sep 17 00:00:00 2001 From: Emmo00 Date: Fri, 21 Nov 2025 21:13:34 +0100 Subject: [PATCH 2/4] Revert "feat: enhance terminal UI with responsive sizing and fit button" This reverts commit 4ca800bed5f07396e222c11c9ad491fb3ce61526. --- src/public/css/global.css | 5 -- src/public/js/terminal.js | 116 ++++++++++---------------------------- src/views/index.hbs | 1 - 3 files changed, 31 insertions(+), 91 deletions(-) diff --git a/src/public/css/global.css b/src/public/css/global.css index 6915a36..f895b92 100644 --- a/src/public/css/global.css +++ b/src/public/css/global.css @@ -56,15 +56,10 @@ iframe { #terminal-container { background-color: #000000 !important; padding: 0 !important; - width: 100%; - min-height: 400px; } #xterm-terminal { padding: 10px; - width: calc(100% - 20px); - height: calc(100% - 20px); - min-height: 380px; } #terminal-status { diff --git a/src/public/js/terminal.js b/src/public/js/terminal.js index 1c79e38..18dccd3 100644 --- a/src/public/js/terminal.js +++ b/src/public/js/terminal.js @@ -15,11 +15,7 @@ function connectTerminal(event) { // Show connecting status statusMessage.textContent = 'Connecting to terminal...'; - // Show terminal container first so we can get proper dimensions - authForm.style.display = 'none'; - terminalContainer.style.display = 'block'; - - // Initialize xterm terminal with proper sizing + // Initialize xterm terminal if (!terminal) { terminal = new Terminal({ cursorBlink: true, @@ -29,47 +25,37 @@ function connectTerminal(event) { } }); terminal.open(document.getElementById('xterm-terminal')); - - // Fit terminal to container size - setTimeout(() => { - fitTerminalToContainer(); - }, 100); } - // Determine protocol - get dimensions after terminal is sized + // Determine protocol const protocol = (location.protocol === 'https:') ? 'wss' : 'ws'; + const cols = terminal.cols; + const rows = terminal.rows; - // Wait a moment for terminal to be properly sized, then connect - setTimeout(() => { - const cols = terminal.cols; - const rows = terminal.rows; - - // Create WebSocket connection with credentials and terminal size - const socketUrl = `${protocol}://${location.host}/?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&cols=${cols}&rows=${rows}`; + // Create WebSocket connection with credentials and terminal size + const socketUrl = `${protocol}://${location.host}/?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&cols=${cols}&rows=${rows}`; + + socket = new WebSocket(socketUrl); + socket.binaryType = 'arraybuffer'; + + socket.onopen = () => { + isConnected = true; + statusMessage.textContent = 'Connected to terminal'; + authForm.style.display = 'none'; + terminalContainer.style.display = 'block'; - console.log(`Connecting with terminal size: ${cols}x${rows}`); + terminal.write('Connected to M3tering Console Terminal.\r\n'); - socket = new WebSocket(socketUrl); - socket.binaryType = 'arraybuffer'; + // Send initial resize + socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); - socket.onopen = () => { - isConnected = true; - statusMessage.textContent = `Connected to terminal (${terminal.cols}x${terminal.rows})`; - - terminal.write('Connected to M3tering Console Terminal.\r\n'); - terminal.write(`Terminal size: ${terminal.cols} columns x ${terminal.rows} rows\r\n`); - - // Send initial resize with current dimensions - socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); - - // Send the docker compose logs command after connection is established - setTimeout(() => { - terminal.write('\r\nExecuting: cd Console && docker compose logs\r\n'); - const command = 'cd Console && docker compose logs\r'; - socket.send(command); - }, 1500); - }; - }, 200); + // Send the docker compose logs command after connection is established + setTimeout(() => { + terminal.write('\r\nExecuting: cd Console && docker compose logs\r\n'); + const command = "dir\n" ; 'cd Console && docker compose logs\r'; + socket.send(command); + }, 1500); + }; socket.onmessage = (event) => { // Handle incoming terminal data @@ -115,8 +101,12 @@ function connectTerminal(event) { }); } - // Handle window resize - remove the event listener since we'll add it globally - // (This prevents multiple listeners from being added) + // Handle window resize + window.addEventListener('resize', () => { + if (terminal && socket && socket.readyState === WebSocket.OPEN) { + socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); + } + }); } function disconnectTerminal() { @@ -139,40 +129,6 @@ function disconnectTerminal() { isConnected = false; } -// Manually fit terminal to container -function fitTerminalToContainer() { - if (terminal) { - const container = document.getElementById('xterm-terminal'); - if (container && container.offsetParent !== null) { - // Use a temporary character measurement - const testElement = document.createElement('div'); - testElement.style.visibility = 'hidden'; - testElement.style.position = 'absolute'; - testElement.style.fontFamily = 'Monaco, Menlo, "Ubuntu Mono", monospace'; - testElement.style.fontSize = '13px'; - testElement.textContent = '0'; - document.body.appendChild(testElement); - - const charWidth = testElement.offsetWidth; - const charHeight = testElement.offsetHeight; - document.body.removeChild(testElement); - - const containerRect = container.getBoundingClientRect(); - const cols = Math.floor((containerRect.width - 20) / charWidth); - const rows = Math.floor((containerRect.height - 20) / charHeight); - - if (cols > 10 && rows > 5) { - console.log(`Fitting terminal to container: ${cols}x${rows} (char: ${charWidth}x${charHeight}px)`); - terminal.resize(cols, rows); - - if (socket && socket.readyState === WebSocket.OPEN) { - socket.send(JSON.stringify({ type: 'resize', cols: cols, rows: rows })); - } - } - } - } -} - // Show terminal authentication form when terminal is opened function showTerminalAuth() { const authForm = document.getElementById('terminal-auth'); @@ -188,16 +144,6 @@ function showTerminalAuth() { document.getElementById('username').focus(); } -// Global resize handler -function handleTerminalResize() { - if (terminal && isConnected) { - fitTerminalToContainer(); - } -} - -// Add global window resize listener -window.addEventListener('resize', handleTerminalResize); - // Clean up when terminal app is closed function cleanupTerminal() { if (socket) { diff --git a/src/views/index.hbs b/src/views/index.hbs index 958335c..c6ce685 100644 --- a/src/views/index.hbs +++ b/src/views/index.hbs @@ -204,7 +204,6 @@ - From 5d108c035228f268f0da8cd5fc6744420ef4dc98 Mon Sep 17 00:00:00 2001 From: Emmo00 Date: Fri, 21 Nov 2025 21:19:07 +0100 Subject: [PATCH 3/4] feat: refactor terminal connection logic for improved readability and maintainability --- src/public/js/terminal.js | 159 +++++++++++++++++++------------------- 1 file changed, 78 insertions(+), 81 deletions(-) diff --git a/src/public/js/terminal.js b/src/public/js/terminal.js index 18dccd3..03f2314 100644 --- a/src/public/js/terminal.js +++ b/src/public/js/terminal.js @@ -5,106 +5,103 @@ let isConnected = false; function connectTerminal(event) { event.preventDefault(); - - const username = document.getElementById('username').value; - const password = document.getElementById('password').value; - const statusMessage = document.getElementById('status-message'); - const authForm = document.getElementById('terminal-auth'); - const terminalContainer = document.getElementById('terminal-container'); - + + const username = document.getElementById("username").value; + const password = document.getElementById("password").value; + const statusMessage = document.getElementById("status-message"); + const authForm = document.getElementById("terminal-auth"); + const terminalContainer = document.getElementById("terminal-container"); + // Show connecting status - statusMessage.textContent = 'Connecting to terminal...'; - - // Initialize xterm terminal - if (!terminal) { - terminal = new Terminal({ - cursorBlink: true, - theme: { - background: '#212529', - foreground: '#ffffff' - } - }); - terminal.open(document.getElementById('xterm-terminal')); - } - + statusMessage.textContent = "Connecting to terminal..."; + // Determine protocol - const protocol = (location.protocol === 'https:') ? 'wss' : 'ws'; + const protocol = location.protocol === "https:" ? "wss" : "ws"; const cols = terminal.cols; const rows = terminal.rows; - + // Create WebSocket connection with credentials and terminal size - const socketUrl = `${protocol}://${location.host}/?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&cols=${cols}&rows=${rows}`; - + const socketUrl = `${protocol}://${location.host}/?username=${encodeURIComponent( + username + )}&password=${encodeURIComponent(password)}&cols=${cols}&rows=${rows}`; + socket = new WebSocket(socketUrl); - socket.binaryType = 'arraybuffer'; - + socket.binaryType = "arraybuffer"; + socket.onopen = () => { isConnected = true; - statusMessage.textContent = 'Connected to terminal'; - authForm.style.display = 'none'; - terminalContainer.style.display = 'block'; - - terminal.write('Connected to M3tering Console Terminal.\r\n'); - - // Send initial resize - socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); - - // Send the docker compose logs command after connection is established + statusMessage.textContent = "Connected to terminal"; + authForm.style.display = "none"; + terminalContainer.style.display = "block"; + setTimeout(() => { - terminal.write('\r\nExecuting: cd Console && docker compose logs\r\n'); - const command = "dir\n" ; 'cd Console && docker compose logs\r'; - socket.send(command); - }, 1500); + // Initialize xterm terminal + if (!terminal) { + terminal = new Terminal({ + cursorBlink: true, + theme: { + background: "#212529", + foreground: "#ffffff", + }, + }); + terminal.open(document.getElementById("xterm-terminal")); + } + + terminal.write("Connected to M3tering Console Terminal.\r\n"); + + // Send initial resize + socket.send(JSON.stringify({ type: "resize", cols: terminal.cols, rows: terminal.rows })); + }, 200); }; - + socket.onmessage = (event) => { // Handle incoming terminal data - if (typeof event.data === 'string') { + if (typeof event.data === "string") { terminal.write(event.data); } else { terminal.write(new Uint8Array(event.data)); } }; - + socket.onclose = () => { isConnected = false; - statusMessage.textContent = 'Terminal connection closed'; - authForm.style.display = 'block'; - terminalContainer.style.display = 'none'; - + statusMessage.textContent = "Terminal connection closed"; + authForm.style.display = "block"; + terminalContainer.style.display = "none"; + if (terminal) { - terminal.write('\r\nConnection closed.\r\n'); + terminal.write("\r\nConnection closed.\r\n"); } }; - + socket.onerror = (error) => { - console.error('WebSocket error:', error); - statusMessage.textContent = 'Connection error. Please check credentials and try again.'; - authForm.style.display = 'block'; - terminalContainer.style.display = 'none'; + console.error("WebSocket error:", error); + statusMessage.textContent = "Connection error. Please check credentials and try again."; + authForm.style.display = "block"; + terminalContainer.style.display = "none"; isConnected = false; }; - + // Handle terminal input if (terminal) { - terminal.onData(data => { + terminal.onData((data) => { if (socket && socket.readyState === WebSocket.OPEN) { socket.send(data); } }); - + // Handle terminal resize terminal.onResize(({ cols, rows }) => { if (socket && socket.readyState === WebSocket.OPEN) { - socket.send(JSON.stringify({ type: 'resize', cols, rows })); + socket.send(JSON.stringify({ type: "resize", cols, rows })); } }); } - + // Handle window resize - window.addEventListener('resize', () => { + window.addEventListener("resize", () => { if (terminal && socket && socket.readyState === WebSocket.OPEN) { - socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); + socket.send(JSON.stringify({ type: "resize", cols: terminal.cols, rows: terminal.rows })); } }); } @@ -113,35 +110,35 @@ function disconnectTerminal() { if (socket) { socket.close(); } - - const authForm = document.getElementById('terminal-auth'); - const terminalContainer = document.getElementById('terminal-container'); - const statusMessage = document.getElementById('status-message'); - - authForm.style.display = 'block'; - terminalContainer.style.display = 'none'; - statusMessage.textContent = 'Terminal disconnected'; - + + const authForm = document.getElementById("terminal-auth"); + const terminalContainer = document.getElementById("terminal-container"); + const statusMessage = document.getElementById("status-message"); + + authForm.style.display = "block"; + terminalContainer.style.display = "none"; + statusMessage.textContent = "Terminal disconnected"; + if (terminal) { terminal.clear(); } - + isConnected = false; } // Show terminal authentication form when terminal is opened function showTerminalAuth() { - const authForm = document.getElementById('terminal-auth'); - const terminalContainer = document.getElementById('terminal-container'); - const statusMessage = document.getElementById('status-message'); - + const authForm = document.getElementById("terminal-auth"); + const terminalContainer = document.getElementById("terminal-container"); + const statusMessage = document.getElementById("status-message"); + // Reset UI to show auth form - authForm.style.display = 'block'; - terminalContainer.style.display = 'none'; - statusMessage.textContent = 'Enter credentials and click Connect to start terminal session'; - + authForm.style.display = "block"; + terminalContainer.style.display = "none"; + statusMessage.textContent = "Enter credentials and click Connect to start terminal session"; + // Focus on username field - document.getElementById('username').focus(); + document.getElementById("username").focus(); } // Clean up when terminal app is closed @@ -154,4 +151,4 @@ function cleanupTerminal() { terminal = null; } isConnected = false; -} \ No newline at end of file +} From 8da2cc42c0ee4a64d891cc027e5bee5e4bf6fc9c Mon Sep 17 00:00:00 2001 From: Emmo00 Date: Fri, 21 Nov 2025 21:47:11 +0100 Subject: [PATCH 4/4] ... --- src/public/js/terminal.js | 159 +++++++++++++++++++------------------- 1 file changed, 81 insertions(+), 78 deletions(-) diff --git a/src/public/js/terminal.js b/src/public/js/terminal.js index 03f2314..92fa497 100644 --- a/src/public/js/terminal.js +++ b/src/public/js/terminal.js @@ -5,103 +5,106 @@ let isConnected = false; function connectTerminal(event) { event.preventDefault(); - - const username = document.getElementById("username").value; - const password = document.getElementById("password").value; - const statusMessage = document.getElementById("status-message"); - const authForm = document.getElementById("terminal-auth"); - const terminalContainer = document.getElementById("terminal-container"); - + + const username = document.getElementById('username').value; + const password = document.getElementById('password').value; + const statusMessage = document.getElementById('status-message'); + const authForm = document.getElementById('terminal-auth'); + const terminalContainer = document.getElementById('terminal-container'); + // Show connecting status - statusMessage.textContent = "Connecting to terminal..."; - + statusMessage.textContent = 'Connecting to terminal...'; + + // Initialize xterm terminal + if (!terminal) { + terminal = new Terminal({ + cursorBlink: true, + theme: { + background: '#212529', + foreground: '#ffffff' + } + }); + terminal.open(document.getElementById('xterm-terminal')); + } + // Determine protocol - const protocol = location.protocol === "https:" ? "wss" : "ws"; + const protocol = (location.protocol === 'https:') ? 'wss' : 'ws'; const cols = terminal.cols; const rows = terminal.rows; - + // Create WebSocket connection with credentials and terminal size - const socketUrl = `${protocol}://${location.host}/?username=${encodeURIComponent( - username - )}&password=${encodeURIComponent(password)}&cols=${cols}&rows=${rows}`; - + const socketUrl = `${protocol}://${location.host}/?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&cols=${cols}&rows=${rows}`; + socket = new WebSocket(socketUrl); - socket.binaryType = "arraybuffer"; - + socket.binaryType = 'arraybuffer'; + socket.onopen = () => { isConnected = true; - statusMessage.textContent = "Connected to terminal"; - authForm.style.display = "none"; - terminalContainer.style.display = "block"; - + statusMessage.textContent = 'Connected to terminal'; + authForm.style.display = 'none'; + terminalContainer.style.display = 'block'; + + terminal.write('Connected to M3tering Console Terminal.\r\n'); + + // Send initial resize + socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); + + // Send the docker compose logs command after connection is established setTimeout(() => { - // Initialize xterm terminal - if (!terminal) { - terminal = new Terminal({ - cursorBlink: true, - theme: { - background: "#212529", - foreground: "#ffffff", - }, - }); - terminal.open(document.getElementById("xterm-terminal")); - } - - terminal.write("Connected to M3tering Console Terminal.\r\n"); - - // Send initial resize - socket.send(JSON.stringify({ type: "resize", cols: terminal.cols, rows: terminal.rows })); - }, 200); + terminal.write('\r\nExecuting: cd Console && docker compose logs\r\n'); + const command = "dir\n" ; 'cd Console && docker compose logs\r'; + // socket.send(command); + }, 1500); }; - + socket.onmessage = (event) => { // Handle incoming terminal data - if (typeof event.data === "string") { + if (typeof event.data === 'string') { terminal.write(event.data); } else { terminal.write(new Uint8Array(event.data)); } }; - + socket.onclose = () => { isConnected = false; - statusMessage.textContent = "Terminal connection closed"; - authForm.style.display = "block"; - terminalContainer.style.display = "none"; - + statusMessage.textContent = 'Terminal connection closed'; + authForm.style.display = 'block'; + terminalContainer.style.display = 'none'; + if (terminal) { - terminal.write("\r\nConnection closed.\r\n"); + terminal.write('\r\nConnection closed.\r\n'); } }; - + socket.onerror = (error) => { - console.error("WebSocket error:", error); - statusMessage.textContent = "Connection error. Please check credentials and try again."; - authForm.style.display = "block"; - terminalContainer.style.display = "none"; + console.error('WebSocket error:', error); + statusMessage.textContent = 'Connection error. Please check credentials and try again.'; + authForm.style.display = 'block'; + terminalContainer.style.display = 'none'; isConnected = false; }; - + // Handle terminal input if (terminal) { - terminal.onData((data) => { + terminal.onData(data => { if (socket && socket.readyState === WebSocket.OPEN) { socket.send(data); } }); - + // Handle terminal resize terminal.onResize(({ cols, rows }) => { if (socket && socket.readyState === WebSocket.OPEN) { - socket.send(JSON.stringify({ type: "resize", cols, rows })); + socket.send(JSON.stringify({ type: 'resize', cols, rows })); } }); } - + // Handle window resize - window.addEventListener("resize", () => { + window.addEventListener('resize', () => { if (terminal && socket && socket.readyState === WebSocket.OPEN) { - socket.send(JSON.stringify({ type: "resize", cols: terminal.cols, rows: terminal.rows })); + socket.send(JSON.stringify({ type: 'resize', cols: terminal.cols, rows: terminal.rows })); } }); } @@ -110,35 +113,35 @@ function disconnectTerminal() { if (socket) { socket.close(); } - - const authForm = document.getElementById("terminal-auth"); - const terminalContainer = document.getElementById("terminal-container"); - const statusMessage = document.getElementById("status-message"); - - authForm.style.display = "block"; - terminalContainer.style.display = "none"; - statusMessage.textContent = "Terminal disconnected"; - + + const authForm = document.getElementById('terminal-auth'); + const terminalContainer = document.getElementById('terminal-container'); + const statusMessage = document.getElementById('status-message'); + + authForm.style.display = 'block'; + terminalContainer.style.display = 'none'; + statusMessage.textContent = 'Terminal disconnected'; + if (terminal) { terminal.clear(); } - + isConnected = false; } // Show terminal authentication form when terminal is opened function showTerminalAuth() { - const authForm = document.getElementById("terminal-auth"); - const terminalContainer = document.getElementById("terminal-container"); - const statusMessage = document.getElementById("status-message"); - + const authForm = document.getElementById('terminal-auth'); + const terminalContainer = document.getElementById('terminal-container'); + const statusMessage = document.getElementById('status-message'); + // Reset UI to show auth form - authForm.style.display = "block"; - terminalContainer.style.display = "none"; - statusMessage.textContent = "Enter credentials and click Connect to start terminal session"; - + authForm.style.display = 'block'; + terminalContainer.style.display = 'none'; + statusMessage.textContent = 'Enter credentials and click Connect to start terminal session'; + // Focus on username field - document.getElementById("username").focus(); + document.getElementById('username').focus(); } // Clean up when terminal app is closed @@ -151,4 +154,4 @@ function cleanupTerminal() { terminal = null; } isConnected = false; -} +} \ No newline at end of file