dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

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

Browse Source
This commit is contained in:
Karmaa
2025-03-05 22:49:34 -06:00
parent 62262e5bf3
commit 963e54bf15
7 changed files with 137 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
README.md
View File

@@ -16,30 +16,28 @@
<img alt="Termimx Banner" src=./repo-images/TermixLogo.png style="width: 125px; height: auto;"> </a>
</p>
# Description
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.
# Overview
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
- [ ] VNC
- [ ] RDP
- [ ] SMTP (build in file transfer)
- [ ] Split Screen & Tabs
- [ ] ChatGPT/Ollama Integration (for commands)
- [ ] Login Screen
# 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.
- Key Auth for SSH
- VNC
- RDP
- SFTP (build in file transfer)
- ChatGPT/Ollama Integration (for commands)
- Login Screen
- User Management
- Apps (like notes, AI, etc)
# 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).
# 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.
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).
# Show-off

2
docker/Dockerfile
View File

@@ -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"]

BIN
repo-images/DemoImage1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 413 KiB

45
src/App.jsx
View File

@@ -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) =>

5
src/Launchpad.jsx
View File

@@ -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}

138
src/Terminal.jsx
View File

@@ -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
const terminal = new Terminal({
terminalInstance.current = 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
const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
terminalInstance.current.loadAddon(fitAddon.current);
// Open terminal in the container
terminal.open(terminalRef.current);
terminalInstance.current.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
terminal.focus();
terminalInstance.current.write("\r\n*** Connecting to backend ***\r\n");
// Listen for window resize events
window.addEventListener("resize", resizeTerminal);
// Write initial connection message
terminal.write("\r\n*** Connecting to backend ***\r\n");
const socket = io(window.location.hostname === "localhost"
? 'http://localhost:8081'
: '/', {
path: '/socket.io',
transports: ['websocket', 'polling']
});
const socket = io(
window.location.hostname === "localhost"
? "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();
resizeTerminal(); // Ensure proper size on connection
const { cols, rows } = terminal;
fitAddon.current.fit();
resizeTerminal();
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
terminal.onKey(({ key }) => {
terminalInstance.current.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();
window.removeEventListener("resize", resizeTerminal);
terminalInstance.current.dispose();
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,
};

4
src/index.css
View File

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