Fixed up some UI issues and auto-sizing for the terminal. Finished up preparations for full release.

README.md

@@ -16,30 +16,28 @@
     <img alt="Termimx Banner" src=./repo-images/TermixLogo.png style="width: 125px; height: auto;">  </a>
 </p>
 
-# Description
+# Overview
-Termix is an open-source forever free self-hosted SSH (other protocols planned, see [Planned Features](#planned-features)) management panel inspired by [Nexterm](https://github.com/gnmyt/Nexterm). Its purpose is to provide an all-in-one docker-hosted web solution to manage your servers in one easy place. I'm using this project to help me learn [React](https://github.com/facebook/react), [Vite](https://github.com/vitejs/vite-plugin-react), and [Docker](https://www.docker.com) but also because I could never settle on a server management software that I enjoyed to use.
+Termix is an open-source forever free self-hosted SSH (other protocols planned, see [Planned Features](#planned-features)) server management panel inspired by [Nexterm](https://github.com/gnmyt/Nexterm). Its purpose is to provide an all-in-one docker-hosted web solution to manage your servers in one easy place. I'm using this project to help me learn [React](https://github.com/facebook/react), [Vite](https://github.com/vitejs/vite-plugin-react), and [Docker](https://www.docker.com) but also because I could never settle on a server management software that I enjoyed to use.
 
 > [!WARNING]  
-> This app is in the VERY early stages of development. Expect bugs, data loss, and possibly even security issues!
+> This app is in the VERY early stages of development. Expect bugs, data loss, and unexplainable issues! For that reason, I recommend you securely tunnel your connection through a VPN.
+
+# Features
+- SSH (password auth only)
+- Split Screen (Up to 4) & Tab System
 
 # Planned Features
-- [x] SSH
+- Key Auth for SSH
-- [ ] VNC
+- VNC
-- [ ] RDP
+- RDP
-- [ ] SMTP (build in file transfer)
+- SFTP (build in file transfer)
-- [ ] Split Screen & Tabs
+- ChatGPT/Ollama Integration (for commands)
-- [ ] ChatGPT/Ollama Integration (for commands)
+- Login Screen
-- [ ] Login Screen
+- User Management
-
+- Apps (like notes, AI, etc)
-# How Termix is Different
-Before developing Termix, I faced the issue of a server management panel that did not have every feature I liked. [Guacamole](https://guacamole.apache.org/) had poor copy/paste abilities and a poor UI. [Shellngn](https://shellngn.com/) was too expensive and all other alternatives had one major problem with them. I plan to develop the management panel of my dreams with even an AI integration for those pesky commands I always forget the syntax of.
 
 # Installation
-View the Termix [Wiki](https://github.com/LukeGus/Termix/wiki) for information on how to install Termix. You can also use these links to go directly to guide. [Docker](https://github.com/LukeGus/Termix/wiki/Docker) or [Manual](https://github.com/LukeGus/Termix/wiki/Manual).
+Visit the Termix [Wiki](https://github.com/LukeGus/Termix/wiki) for information on how to install Termix. You can also use these links to go directly to guide. [Docker](https://github.com/LukeGus/Termix/wiki/Docker) or [Manual](https://github.com/LukeGus/Termix/wiki/Manual).
-
-# Known Bugs
-### Please create an [Issue](https://github.com/LukeGus/Termix/issues) if you find any problems!
-Start session button stays connected even if SSH fails to connect.
 
 # Show-off
 

docker/Dockerfile

@@ -33,7 +33,7 @@ RUN mkdir -p /var/log/nginx && \
 # Expose ports
 EXPOSE 8080 8081
 
-# Use a start script to run both services
+# Use a entrypoint script to run all services
 COPY docker/entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 CMD ["/entrypoint.sh"]

src/App.jsx

@@ -38,6 +38,47 @@ function App() {
         };
     }, []);
 
+    useEffect(() => {
+        terminals.forEach((terminal) => {
+            if (
+                (terminal.id === activeTab || splitTabIds.includes(terminal.id)) &&
+                terminal.terminalRef?.resizeTerminal
+            ) {
+                terminal.terminalRef.resizeTerminal();
+            }
+        });
+    }, [splitTabIds, activeTab, terminals]);
+
+    useEffect(() => {
+        const handleResize = () => {
+            terminals.forEach((terminal) => {
+                if (
+                    (terminal.id === activeTab || splitTabIds.includes(terminal.id)) &&
+                    terminal.terminalRef?.resizeTerminal
+                ) {
+                    terminal.terminalRef.resizeTerminal();
+                }
+            });
+        };
+
+        window.addEventListener("resize", handleResize);
+
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [splitTabIds, activeTab, terminals]);
+
+    useEffect(() => {
+        terminals.forEach((terminal) => {
+            if (
+                (terminal.id === activeTab || splitTabIds.includes(terminal.id)) &&
+                terminal.terminalRef?.resizeTerminal
+            ) {
+                terminal.terminalRef.resizeTerminal();
+            }
+        });
+    }, [splitTabIds]);
+
     const handleAddHost = () => {
         if (form.ip && form.user && form.password && form.port) {
             const newTerminal = {
@@ -88,13 +129,10 @@ function App() {
 
     const getLayoutStyle = () => {
         if (splitTabIds.length === 1) {
-            // Horizontal split (2 tabs: left-right)
             return "flex flex-row h-full gap-4";
         } else if (splitTabIds.length > 1) {
-            // 2x2 Grid layout (4 tabs max), with evenly spaced rows
             return "grid grid-cols-2 grid-rows-2 gap-4 h-full overflow-hidden";
         }
-        // No split, main tab takes the entire screen
         return "flex flex-col h-full";
     };
 
@@ -177,6 +215,7 @@ function App() {
                                 <NewTerminal
                                     key={terminal.id}
                                     hostConfig={terminal.hostConfig}
+                                    isVisible={activeTab === terminal.id || splitTabIds.includes(terminal.id)}
                                     ref={(ref) => {
                                         if (ref && !terminal.terminalRef) {
                                             setTerminals((prev) =>

src/Launchpad.jsx

@@ -56,7 +56,10 @@ function Launchpad({ onClose }) {
                 >
                     <div className="text-center">
                         <h2 className="text-2xl font-bold mb-4">Launchpad</h2>
-                        <p className="mb-4">W.I.P. Feature</p>
+                        <p className="mb-4">A one-stop shop for adding hosts, apps (AI, notes, etc.), and all new features to come! Coming to you in a future update. Stay tuned!</p>
+                        <p className="mb-4">
+                            Can also be opened using <code className="bg-gray-500 px-1 rounded">Ctrl + L</code>
+                        </p>
                         <Button
                             type="submit"
                             onClick={onClose}

src/Terminal.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { forwardRef, useImperativeHandle, useEffect, useRef } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import "@xterm/xterm/css/xterm.css";
@@ -6,15 +6,48 @@ import io from "socket.io-client";
 import PropTypes from "prop-types";
 import theme from "./theme";
 
-export function NewTerminal({ hostConfig }) {
+export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
     const terminalRef = useRef(null);
     const socketRef = useRef(null);
+    const fitAddon = useRef(new FitAddon());
+    const terminalInstance = useRef(null);
+
+    const resizeTerminal = () => {
+        const terminalContainer = terminalRef.current;
+        const parentContainer = terminalContainer?.parentElement;
+
+        if (!parentContainer || !isVisible) return;
+
+        // Force a reflow to ensure the container's dimensions are up-to-date
+        void parentContainer.offsetHeight;
+
+        // Use a small delay to ensure the DOM has fully updated
+        setTimeout(() => {
+            const parentWidth = parentContainer.clientWidth;
+            const parentHeight = parentContainer.clientHeight;
+
+            terminalContainer.style.width = `${parentWidth}px`;
+            terminalContainer.style.height = `${parentHeight}px`;
+
+            // Fit the terminal to the container
+            fitAddon.current.fit();
+
+            // Notify the backend of the new terminal size
+            if (socketRef.current && terminalInstance.current) {
+                const { cols, rows } = terminalInstance.current;
+                socketRef.current.emit("resize", { cols, rows });
+            }
+        }, 10); // Small delay to ensure proper DOM updates
+    };
+
+    useImperativeHandle(ref, () => ({
+        resizeTerminal: resizeTerminal,
+    }));
 
     useEffect(() => {
         if (!hostConfig || !terminalRef.current) return;
 
-        // Initialize terminal
+        terminalInstance.current = new Terminal({
-        const terminal = new Terminal({
             cursorBlink: true,
             theme: {
                 background: theme.palette.background.terminal,
@@ -27,104 +60,76 @@ export function NewTerminal({ hostConfig }) {
             allowTransparency: true,
         });
 
-        // Initialize FitAddon for auto-sizing
+        terminalInstance.current.loadAddon(fitAddon.current);
-        const fitAddon = new FitAddon();
-        terminal.loadAddon(fitAddon);
 
-        // Open terminal in the container
+        terminalInstance.current.open(terminalRef.current);
-        terminal.open(terminalRef.current);
 
-        // Resize function
-        const resizeTerminal = () => {
-            const terminalContainer = terminalRef.current;
-            const parentContainer = terminalContainer?.parentElement;
-
-            if (!parentContainer) return;
-
-            const parentWidth = parentContainer.clientWidth;
-            const parentHeight = parentContainer.clientHeight;
-
-            terminalContainer.style.width = `${parentWidth}px`;
-            terminalContainer.style.height = `${parentHeight}px`;
-
-            fitAddon.fit();
-            const { cols, rows } = terminal;
-
-            if (socketRef.current) {
-                socketRef.current.emit("resize", { cols, rows });
-            }
-        };
-
-        // Ensure correct sizing on start
         setTimeout(() => {
-            fitAddon.fit();
+            fitAddon.current.fit();
             resizeTerminal();
-        }, 50); // Small delay to ensure proper initialization
+            terminalInstance.current.focus();
+        }, 50);
 
-        // Focus on terminal after initialization
+        terminalInstance.current.write("\r\n*** Connecting to backend ***\r\n");
-        terminal.focus();
 
-        // Listen for window resize events
+        const socket = io(
-        window.addEventListener("resize", resizeTerminal);
+            window.location.hostname === "localhost"
-
+                ? "http://localhost:8081"
-        // Write initial connection message
+                : "/",
-        terminal.write("\r\n*** Connecting to backend ***\r\n");
+            {
-
+                path: "/socket.io",
-        const socket = io(window.location.hostname === "localhost"
+                transports: ["websocket", "polling"],
-            ? 'http://localhost:8081'
+            }
-            : '/', {
+        );
-            path: '/socket.io',
-            transports: ['websocket', 'polling']
-        });
         socketRef.current = socket;
 
-        socket.off("connect");
-        socket.off("data");
-        socket.off("disconnect");
-
         socket.on("connect", () => {
-            fitAddon.fit();
+            fitAddon.current.fit();
-            resizeTerminal(); // Ensure proper size on connection
+            resizeTerminal();
-            const { cols, rows } = terminal;
+            const { cols, rows } = terminalInstance.current;
             socket.emit("connectToHost", cols, rows, hostConfig);
-            terminal.write("\r\n*** Connected to backend ***\r\n");
+            terminalInstance.current.write("\r\n*** Connected to backend ***\r\n");
         });
 
         socket.on("data", (data) => {
-            terminal.write(data);
+            terminalInstance.current.write(data);
         });
 
         socket.on("disconnect", () => {
-            terminal.write("\r\n*** Disconnected from backend ***\r\n");
+            terminalInstance.current.write("\r\n*** Disconnected from backend ***\r\n");
         });
 
-        // Capture and send keystrokes
+        terminalInstance.current.onKey(({ key }) => {
-        terminal.onKey(({ key }) => {
             socket.emit("data", key);
         });
 
-        // Handle socket errors
         socket.on("connect_error", (err) => {
-            terminal.write(`\r\n*** Error: ${err.message} ***\r\n`);
+            terminalInstance.current.write(`\r\n*** Error: ${err.message} ***\r\n`);
         });
 
-        // Cleanup on component unmount
         return () => {
-            terminal.dispose();
+            terminalInstance.current.dispose();
-            window.removeEventListener("resize", resizeTerminal);
             socket.disconnect();
         };
     }, [hostConfig]);
 
+    useEffect(() => {
+        if (isVisible) {
+            resizeTerminal();
+        }
+    }, [isVisible]);
+
     return (
         <div
             ref={terminalRef}
             className="w-full h-full overflow-hidden text-left"
+            style={{ display: isVisible ? "block" : "none" }}
         />
     );
-}
+});
+
+NewTerminal.displayName = "NewTerminal";
 
-// Prop validation using PropTypes
 NewTerminal.propTypes = {
     hostConfig: PropTypes.shape({
         ip: PropTypes.string.isRequired,
@@ -132,4 +137,5 @@ NewTerminal.propTypes = {
         password: PropTypes.string.isRequired,
         port: PropTypes.string.isRequired,
     }).isRequired,
+    isVisible: PropTypes.bool.isRequired,
 };

src/index.css

@@ -5,6 +5,6 @@
   content: '';
   width: 1px;
   height: 24px;
-  background-color: #4a5568; /* gray-600 */
+  background-color: #4a5568;
-  margin: 0 8px; /* Adjust spacing as needed */
+  margin: 0 8px;
 }