Release 1.0 (#3)

* Nano and timeout error fix #1 * Nano and timeout error fix #2 * Nano and timeout error fix #3 * Nano and timeout error fix #4 * Nano and timeout error fix #5 * Nano and timeout error fix #6 * Nano and timeout error fix #7 (plus css changes for hide buttons) * Nano and timeout error fix #8 (zoom method) * Nano zoom fix #9 * Nano zoom fix #10 * Nano zoom fix #11 * Nano zoom fix #12 * Nano zoom fix #13 * Nano zoom fix #14 * Nano zoom fix #15 * Nano zoom fix #16 (ssh-2-promise) * Nano zoom fix #17 (ssh-2-promise port fix) * Full return back to old code with minor fixes * Terminal size fix #18 (rows & cols fix) * Test ntfy build notification system * Silent resize cmds & Auto resize terminal #1 * Silent resize cmds & Auto resize terminal #2 * Docker build update * Docker build update #2 * Docker build update #3 * Docker build update #4 (cache and cleanup) * Docker build update #5 (cache and cleanup) * Docker build update #6 (cache and cleanup) * Docker build update #7 (final) * Docker build update #8 (nevermind not finanl) * Docker build update #9 (nevermind not finanl) * Docker build update #10 * Docker build update #10 (I hope final) * Docker build update #10 (actual final) * Release 1.0!!!! * Repo clean-up * Remove files ignored by .gitignore * Change project name, create logo, change README.md to be soon updated. * Update README.md #1 (also added MIT License) * Update README.md #2 * Update README.md #3 * Update README.md #4 * Update README.md #5 * Update README.md #6 * Update README.md #7 * Update README.md * Add images * Update image name * Update README.md * Final changes to release-1.0 * Update README.md * Update name (need to fix logo) * Final updates (I hope for real this time) * Fix web-socket timeout. * Fix timeout on close.
2024-12-12 18:46:43 -06:00
parent b6a3f881a8
commit 15e1fd215e
37 changed files with 926 additions and 278 deletions
--- a/frontend/favicon.ico
+++ b/frontend/favicon.ico
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.ico?v=2" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Web site created using @vitejs/plugin-react"
+      content="Sever management software for SSH!"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
@@ -15,7 +15,7 @@
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
-    <title>React App</title>
+    <title>Termix</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,8 @@
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^14.4.3",
+        "@xterm/addon-fit": "^0.10.0",
+        "@xterm/xterm": "^5.5.0",
        "express": "^4.21.1",
        "guacamole-common-js": "^1.5.0",
        "http-proxy-middleware": "^3.0.3",
@@ -1501,6 +1503,19 @@
      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
      "dev": true
    },
+    "node_modules/@xterm/addon-fit": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
+    "node_modules/@xterm/xterm": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A=="
+    },
    "node_modules/abab": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -2288,10 +2303,9 @@
      }
    },
    "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
-      "license": "MIT",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
      "dependencies": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
@@ -2312,7 +2326,7 @@
        "methods": "~1.1.2",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
        "proxy-addr": "~2.0.7",
        "qs": "6.13.0",
        "range-parser": "~1.2.1",
@@ -2327,6 +2341,10 @@
      },
      "engines": {
        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/express/node_modules/debug": {
@@ -3394,9 +3412,9 @@
      "optional": true
    },
    "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
      "dev": true,
      "funding": [
        {
@@ -3404,6 +3422,7 @@
          "url": "https://github.com/sponsors/ai"
        }
      ],
+      "license": "MIT",
      "bin": {
        "nanoid": "bin/nanoid.cjs"
      },
@@ -3539,10 +3558,9 @@
      }
    },
    "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
-      "license": "MIT"
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
    },
    "node_modules/pathe": {
      "version": "1.1.1",
@@ -5773,6 +5791,17 @@
        }
      }
    },
+    "@xterm/addon-fit": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+      "requires": {}
+    },
+    "@xterm/xterm": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A=="
+    },
    "abab": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -6319,9 +6348,9 @@
      }
    },
    "express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
      "requires": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
@@ -6342,7 +6371,7 @@
        "methods": "~1.1.2",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
        "proxy-addr": "~2.0.7",
        "qs": "6.13.0",
        "range-parser": "~1.2.1",
@@ -7095,9 +7124,9 @@
      "optional": true
    },
    "nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
      "dev": true
    },
    "negotiator": {
@@ -7184,9 +7213,9 @@
      "dev": true
    },
    "path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
    },
    "pathe": {
      "version": "1.1.1",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,6 +6,8 @@
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
    "express": "^4.21.1",
    "guacamole-common-js": "^1.5.0",
    "http-proxy-middleware": "^3.0.3",
@@ -24,7 +26,7 @@
  },
  "scripts": {
    "start-vite": "cross-env BROWSER=none WDS_SOCKET_PORT=0 vite --port 8080",
-    "start-server": "node 'D:/Programming Projects/SSH-Project/ssh-project/backend/server.js'",
+    "start-server": "node ./start.js",
    "start": "npm run start-vite && npm run start-server",
    "build": "vite build",
    "preview": "vite preview",
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -22,7 +22,6 @@
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
-  border-radius: 5px;
  position: relative;
 }

@@ -63,7 +62,7 @@
 .hide-sidebar-button {
  position: fixed;
  bottom: 10px;
-  right: 10px;
+  right: 23px;
  background-color: rgb(108, 108, 108);
  color: white;
  border: none;
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 import 'xterm/css/xterm.css';
-import { FitAddon } from 'xterm-addon-fit';
+import { FitAddon } from '@xterm/addon-fit';
 import './App.css';

 const App = () => {
@@ -10,13 +10,13 @@ const App = () => {
  const fitAddon = useRef(null);
  const socket = useRef(null);
  const [host, setHost] = useState('');
+  const [port, setPort] = useState('22');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isConnected, setIsConnected] = useState(false);
  const [isSideBarHidden, setIsSideBarHidden] = useState(false);

  useEffect(() => {
-    // Initialize the terminal and the fit addon
    terminal.current = new Terminal({
      cursorBlink: true,
      theme: {
@@ -25,23 +25,37 @@ const App = () => {
      },
      macOptionIsMeta: true,
      allowProposedApi: true,
-      scrollback: 1000,  // Allow scrollback so the terminal doesn't lose state
+      scrollback: 5000,
    });

-    // Initialize and attach the fit addon to the terminal
    fitAddon.current = new FitAddon();
    terminal.current.loadAddon(fitAddon.current);

    terminal.current.open(terminalRef.current);
-
-    // Resize terminal to fit the container initially
    fitAddon.current.fit();

-    // Adjust terminal size on window resize
-    const resizeListener = () => {
+    // Fit the terminal and send the size when needed
+    const fitAndNotifyResize = () => {
      fitAddon.current.fit();
+      if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+        socket.current.send(JSON.stringify({
+          cols: terminal.current.cols,
+          rows: terminal.current.rows,
+        }));
+      }
    };
-    window.addEventListener('resize', resizeListener);
+    window.addEventListener('resize', fitAndNotifyResize);
+
+    terminal.current.onResize(({ cols, rows }) => {
+      console.log(`Terminal resized to cols:${cols}, rows:${rows}`);
+      fitAndNotifyResize();
+    });
+
+    const handleConnectionEstablished = () => {
+      fitAndNotifyResize();
+    };
+
+    window.addEventListener('connection-established', handleConnectionEstablished);

    // Monitor terminal data (activity)
    terminal.current.onData((data) => {
@@ -50,50 +64,54 @@ const App = () => {
      }
    });

-    // Add specific resize call for certain programs like nano or vim
-    const resizeTerminalOnStart = () => {
-      // Resize immediately after starting vim/nano or other programs
-      fitAddon.current.fit();
-      terminal.current.clear();
-    };
-
-    terminal.current.onData((data) => {
-      if (data.includes('nano') || data.includes('vim')) {
-        // Trigger resize immediately when these programs start
-        resizeTerminalOnStart();
-      }
-    });
-
-    // Cleanup on component unmount
    return () => {
      terminal.current.dispose();
      if (socket.current) {
        socket.current.close();
      }
-      window.removeEventListener('resize', resizeListener);
+      window.removeEventListener('resize', fitAndNotifyResize);
    };
  }, []);

  const handleConnect = () => {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = `${protocol}//${window.location.host}/ws/`; // Use current host and "/ws/" endpoint
-  
-    socket.current = new WebSocket(wsUrl);
-  
+
+    if (!host || !username || !password) {
+      terminal.current.writeln('Please fill in all fields.');
+      return;
+    }
+
+    socket.current = new WebSocket("ws://localhost:8081");
+
    socket.current.onopen = () => {
      terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`);
-      socket.current.send(JSON.stringify({ host, username, password }));
+      socket.current.send(
+          JSON.stringify({
+            host,
+            port,
+            username,
+            password,
+            rows: terminal.current.rows,
+            cols: terminal.current.cols
+          })
+      );
+
+      // Dispatch a custom event when connection is open
+      const event = new Event('connection-established');
+      window.dispatchEvent(event);
+
      setIsConnected(true);
    };
-  
+
    socket.current.onmessage = (event) => {
      terminal.current.write(event.data);
    };
-  
+
    socket.current.onerror = (error) => {
      terminal.current.writeln(`WebSocket error: ${error.message}`);
    };
-  
+
    socket.current.onclose = () => {
      terminal.current.writeln('Disconnected from WebSocket server.');
      setIsConnected(false);
@@ -105,48 +123,80 @@ const App = () => {
  };

  const handleSideBarHiding = () => {
-    setIsSideBarHidden((prevState) => !prevState);
+    setIsSideBarHidden((prevState) => {
+      const newState = !prevState;
+      if (newState) {
+        setTimeout(() => {
+          // Add a delay to ensure layout settles before resize action
+          fitAddon.current.fit();
+          if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+            socket.current.send(JSON.stringify({
+              cols: terminal.current.cols,
+              rows: terminal.current.rows,
+            }));
+          }
+        }, 100); // Delay of 100 milliseconds
+      } else {
+        setTimeout(() => {
+          // Refit terminal when showing sidebar as well
+          fitAddon.current.fit();
+          if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+            socket.current.send(JSON.stringify({
+              cols: terminal.current.cols,
+              rows: terminal.current.rows,
+            }));
+          }
+        }, 100); // Delay of 100 milliseconds
+      }
+      return newState;
+    });
  };

  return (
-    <div className="app-container">
-      <div className="main-content">
-        <div className={`sidebar ${isSideBarHidden ? 'hidden' : ''}`}>
-          <h2>Connection Details</h2>
-          <input
-            type="text"
-            placeholder="Host"
-            value={host}
-            onChange={(e) => handleInputChange(e, setHost)}
-          />
-          <input
-            type="text"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => handleInputChange(e, setUsername)}
-          />
-          <input
-            type="password"
-            placeholder="Password"
-            value={password}
-            onChange={(e) => handleInputChange(e, setPassword)}
-          />
-          <button onClick={handleConnect} disabled={isConnected}>
-            {isConnected ? 'Connected' : 'Start Session'}
-          </button>
+      <div className="app-container">
+        <div className="main-content">
+          <div className={`sidebar ${isSideBarHidden ? 'hidden' : ''}`}>
+            <h2>Connection Details</h2>
+            <input
+                type="text"
+                placeholder="Host"
+                value={host}
+                onChange={(e) => handleInputChange(e, setHost)}
+            />
+            <input
+                type="text"
+                placeholder="Port"
+                value={port}
+                onChange={(e) => handleInputChange(e, setPort)}
+            />
+            <input
+                type="text"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => handleInputChange(e, setUsername)}
+            />
+            <input
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => handleInputChange(e, setPassword)}
+            />
+            <button onClick={handleConnect} disabled={isConnected}>
+              {isConnected ? 'Connected' : 'Start Session'}
+            </button>
+          </div>
+
+          <div ref={terminalRef} className="terminal-container"></div>
        </div>

-        <div ref={terminalRef} className="terminal-container"></div>
+        {/* Hide button always positioned in the bottom-right corner */}
+        <button
+            className="hide-sidebar-button"
+            onClick={handleSideBarHiding}
+        >
+          {isSideBarHidden ? '+' : '-'}
+        </button>
      </div>
-
-      {/* Hide button always positioned in the bottom-right corner */}
-      <button
-        className="hide-sidebar-button"
-        onClick={handleSideBarHiding}
-      >
-        {isSideBarHidden ? '+' : '-'}
-      </button>
-    </div>
  );
 };

--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -5,7 +5,7 @@ body {
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  overflow: hidden; /* Prevent scrolling */
+  overflow: hidden;
 }

 code {
--- a/frontend/src/logo.svg
+++ b/frontend/src/logo.svg
--- a/frontend/start.js
+++ b/frontend/start.js
@@ -0,0 +1,12 @@
+// start.js
+const { spawn } = require('child_process');
+
+const child = spawn('node', ["\"D:/Programming Projects/Termix/backend/server.js\""], {
+    stdio: 'inherit', // this is key for interactivity
+    shell: true, // use system shell
+});
+
+child.on('exit', function (code, signal) {
+    console.log('child process exited with ' +
+        `code ${code} and signal ${signal}`);
+});