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

Dev 1.1 (#18)

Browse Source 
* Update server.cjs (#17)

Redact only sensitive info for logging

* Changes to README.md for clear support paths.

* Switched to UTF-8 fixing non-english character bugs, revamped console logging system, fixed misc console errors, and fixed copy/paste. Warning: the terminal sizing in this version is very buggy so be warned.

* Fixed multi-line command issues with switching between split and not split.

* Shifted terminal down and to the right so its not squished up in the top left corner. Fix scroll wheel sizing and looks. Prepared for this bug update release.

---------

Co-authored-by: Dale Driver <firestrife23@users.noreply.github.com>
This commit was merged in pull request #18.
This commit is contained in:
Karmaa
2025-03-09 18:46:09 -05:00
committed by GitHub
parent 09677caa26
commit b0062343c7
7 changed files with 128 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -40,6 +40,9 @@ Termix is an open-source forever free self-hosted SSH (other protocols planned,
# Installation
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).
# Support
If you need help with Termix, you can join the [Discord](https://discord.gg/jVQGdvHDrf) server and visit the support channel. You can also open an issue or open a pull request on the [GitHub](https://github.com/LukeGus/Termix/issues) repo.
# Show-off
![Demo Image](repo-images/DemoImage1.png)

39
src/AddHostModal.jsx
View File

@@ -31,15 +31,22 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
<CssVarsProvider theme={theme}>
<Modal open={!isHidden} onClose={() => setIsAddHostHidden(true)}>
<ModalDialog
layout="center"
sx={{
backgroundColor: theme.palette.general.tertiary,
borderColor: theme.palette.general.secondary,
color: theme.palette.text.primary,
padding: 3,
borderRadius: 10,
overflowX: 'hidden',
overflowY: 'auto',
}}>
width: "auto",
maxWidth: "90vw",
minWidth: "fit-content",
overflow: "hidden",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<DialogTitle>Add Host</DialogTitle>
<DialogContent>
<form
@@ -48,53 +55,48 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
if (isFormValid()) handleAddHost();
}}
>
<Stack spacing={2}>
<Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}>
<FormControl>
<FormLabel>Host Name</FormLabel>
<Input
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
required={false}
sx={{
backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary,
}}
/>
</FormControl>
<FormControl>
<FormControl error={!form.ip}>
<FormLabel>Host IP</FormLabel>
<Input
value={form.ip}
onChange={(e) => setForm({ ...form, ip: e.target.value })}
required
error={!form.ip ? "Please provide an IP address" : ""}
sx={{
backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary,
}}
/>
</FormControl>
<FormControl>
<FormControl error={!form.user}>
<FormLabel>Host User</FormLabel>
<Input
value={form.user}
onChange={(e) => setForm({ ...form, user: e.target.value })}
required
error={form.user ? "" : "Please provide a username"}
sx={{
backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary,
}}
/>
</FormControl>
<FormControl>
<FormControl error={!form.authMethod || form.authMethod === 'Select Auth'}>
<FormLabel>Authentication Method</FormLabel>
<Select
value={form.authMethod}
value={form.authMethod || 'Select Auth'}
onChange={(e, newValue) => setForm({ ...form, authMethod: newValue })}
required
displayEmpty
error={!form.authMethod || form.authMethod === 'Select Auth'}
sx={{
backgroundColor: !form.authMethod || form.authMethod === 'Select Auth' ? theme.palette.general.tertiary : theme.palette.general.primary,
color: theme.palette.text.primary,
@@ -103,7 +105,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
},
}}
>
<Option value="" disabled>
<Option value="Select Auth" disabled>
Select Auth
</Option>
<Option value="password">Password</Option>
@@ -111,14 +113,13 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
</Select>
</FormControl>
{form.authMethod === 'password' && (
<FormControl>
<FormControl error={!form.password}>
<FormLabel>Host Password</FormLabel>
<Input
type="password"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
required
error={form.password ? "" : "Please provide a password"}
sx={{
backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary,
@@ -127,13 +128,12 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
</FormControl>
)}
{form.authMethod === 'rsaKey' && (
<FormControl>
<FormControl error={!form.rsaKey}>
<FormLabel>RSA Key</FormLabel>
<Input
type="file"
onChange={handleFileChange}
required
error={!form.rsaKey ? "Please upload a valid RSA private key file" : ""}
sx={{
backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary,
@@ -146,7 +146,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
/>
</FormControl>
)}
<FormControl>
<FormControl error={form.port < 1 || form.port > 65535}>
<FormLabel>Host Port</FormLabel>
<Input
value={form.port}
@@ -154,7 +154,6 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
min={1}
max={65535}
required
error={form.port < 1 || form.port > 65535 ? "Port must be between 1 and 65535" : ""}
sx={{
backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary,

3
src/App.jsx
View File

@@ -21,6 +21,7 @@ function App() {
user: "",
password: "",
port: 22,
authMethod: "Select Auth",
});
const [isLaunchpadOpen, setIsLaunchpadOpen] = useState(false);
const [splitTabIds, setSplitTabIds] = useState([]);
@@ -90,7 +91,7 @@ function App() {
user: form.user,
password: form.authMethod === 'password' ? form.password : undefined,
rsaKey: form.authMethod === 'rsaKey' ? form.rsaKey : undefined,
port: Number(form.port),
port: String(form.port),
},
terminalRef: null,
};

16
src/TabList.jsx
View File

@@ -5,12 +5,11 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
const isSplitScreenActive = splitTabIds.length > 0;
return (
<div className="inline-flex items-center h-full px-[0.5rem]">
<div className="tablist inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
{terminals.map((terminal, index) => {
const isActive = terminal.id === activeTab;
const isSplit = splitTabIds.includes(terminal.id);
const isSplitButtonDisabled = isActive && !isSplitScreenActive || splitTabIds.length >= 3 && !isSplit;
const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || (splitTabIds.length >= 3 && !isSplit);
return (
<div key={terminal.id} className={index < terminals.length - 1 ? "mr-[0.5rem]" : ""}>
@@ -20,8 +19,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
onClick={() => setActiveTab(terminal.id)}
disabled={isSplit}
sx={{
backgroundColor:
isActive ? theme.palette.general.primary : theme.palette.general.disabled,
backgroundColor: isActive ? theme.palette.general.primary : theme.palette.general.disabled,
color: theme.palette.text.primary,
"&:hover": { backgroundColor: theme.palette.general.secondary },
":disabled": { backgroundColor: theme.palette.general.disabled },
@@ -40,9 +38,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
onClick={() => toggleSplit(terminal.id)}
disabled={isSplitButtonDisabled || isActive}
sx={{
backgroundColor: isSplit
? theme.palette.general.primary
: theme.palette.general.tertiary,
backgroundColor: isSplit ? theme.palette.general.primary : theme.palette.general.tertiary,
color: theme.palette.text.primary,
":disabled": { backgroundColor: theme.palette.general.disabled },
"&:hover": { backgroundColor: theme.palette.general.secondary },
@@ -58,7 +54,7 @@ function TabList({ terminals, activeTab, setActiveTab, closeTab, toggleSplit, sp
{/* Close Tab Button */}
<Button
onClick={() => closeTab(terminal.id)}
disabled={isSplitScreenActive && isActive || isSplit}
disabled={(isSplitScreenActive && isActive) || isSplit}
sx={{
backgroundColor: theme.palette.general.tertiary,
color: theme.palette.text.primary,
@@ -90,4 +86,4 @@ TabList.propTypes = {
theme: PropTypes.object.isRequired,
};
export default TabList;
export default TabList;

90
src/Terminal.jsx
View File

@@ -16,22 +16,21 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
const terminalContainer = terminalRef.current;
const parentContainer = terminalContainer?.parentElement;
if (!parentContainer || !isVisible) return;
if (!parentContainer || parentContainer.clientWidth === 0) return;
void parentContainer.offsetHeight;
const parentWidth = parentContainer.clientWidth;
const parentHeight = parentContainer.clientHeight;
const parentWidth = parentContainer.clientWidth - 10;
const parentHeight = parentContainer.clientHeight - 10;
terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`;
fitAddon.current.fit();
if (socketRef.current && terminalInstance.current) {
const { cols, rows } = terminalInstance.current;
socketRef.current.emit("resize", { cols, rows });
}
requestAnimationFrame(() => {
fitAddon.current.fit();
if (socketRef.current && terminalInstance.current) {
const { cols, rows } = terminalInstance.current;
socketRef.current.emit("resize", { cols, rows });
}
});
};
useImperativeHandle(ref, () => ({
@@ -50,8 +49,7 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
},
fontSize: 14,
scrollback: 1000,
rendererType: "canvas",
allowTransparency: true,
ignoreBracketedPasteMode: true,
});
terminalInstance.current.loadAddon(fitAddon.current);
@@ -63,8 +61,6 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
terminalInstance.current.focus();
}, 50);
terminalInstance.current.write("\r\n*** Connecting to backend ***\r\n");
const socket = io(
window.location.hostname === "localhost"
? "http://localhost:8081"
@@ -81,23 +77,52 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
resizeTerminal();
const { cols, rows } = terminalInstance.current;
socket.emit("connectToHost", cols, rows, hostConfig);
terminalInstance.current.write("\r\n*** Connected to backend ***\r\n");
});
socket.on("data", (data) => {
terminalInstance.current.write(data);
const decoder = new TextDecoder("utf-8");
terminalInstance.current.write(decoder.decode(new Uint8Array(data)));
});
socket.on("disconnect", () => {
terminalInstance.current.write("\r\n*** Disconnected from backend ***\r\n");
let isPasting = false;
terminalInstance.current.onData((data) => {
socketRef.current.emit("data", data);
});
terminalInstance.current.onKey(({ key }) => {
socket.emit("data", key);
terminalInstance.current.attachCustomKeyEventHandler((event) => {
console.log("Event caled");
if (isPasting) return;
isPasting = true;
setTimeout(() => {
isPasting = false;
}, 200);
if ((event.ctrlKey || event.metaKey) && event.key === "v") {
event.preventDefault();
navigator.clipboard.readText().then((text) => {
socketRef.current.emit("data", text);
}).catch((err) => {
console.error("Failed to read clipboard contents:", err);
});
return false;
}
return true;
});
socket.on("connect_error", (err) => {
terminalInstance.current.write(`\r\n*** Error: ${err.message} ***\r\n`);
terminalInstance.current.onKey(({ domEvent }) => {
if (domEvent.key === "c" && (domEvent.ctrlKey || domEvent.metaKey)) {
const selection = terminalInstance.current.getSelection();
if (selection) {
navigator.clipboard.writeText(selection);
}
}
});
socket.on("error", (err) => {
terminalInstance.current.write(`\r\n*** Error: ${err} ***\r\n`);
});
return () => {
@@ -107,20 +132,21 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
}, [hostConfig]);
useEffect(() => {
if (isVisible) {
resizeTerminal();
}
resizeTerminal();
}, [isVisible]);
useEffect(() => {
const terminalContainer = terminalRef.current;
if (!terminalContainer) return;
const parentContainer = terminalContainer.parentElement;
if (!parentContainer) return;
const observer = new ResizeObserver(() => {
resizeTerminal();
});
observer.observe(terminalContainer);
observer.observe(parentContainer);
return () => {
observer.disconnect();
@@ -131,7 +157,13 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
<div
ref={terminalRef}
className="w-full h-full overflow-hidden text-left"
style={{ display: isVisible ? "block" : "none" }}
style={{
visibility: isVisible ? 'visible' : 'hidden',
position: 'absolute',
width: '100%',
height: '100%',
transform: 'translateY(5px) translateX(5px)',
}}
/>
);
});
@@ -146,4 +178,4 @@ NewTerminal.propTypes = {
port: PropTypes.string.isRequired,
}).isRequired,
isVisible: PropTypes.bool.isRequired,
};
};

33
src/backend/server.cjs
View File

@@ -23,32 +23,37 @@ io.on("connection", (socket) => {
return;
}
console.log("Received hostConfig:", hostConfig);
// Redact only sensitive info for logging
const safeHostConfig = {
ip: hostConfig.ip,
port: hostConfig.port,
user: hostConfig.user,
password: hostConfig.password ? '***REDACTED***' : undefined,
rsaKey: hostConfig.rsaKey ? '***REDACTED***' : undefined,
};
console.log("Received hostConfig:", safeHostConfig);
const { ip, port, user, password, rsaKey } = hostConfig;
const conn = new SSHClient();
conn
.on("ready", function () {
console.log("SSH connection established");
socket.emit("data", "\r\n*** SSH CONNECTION ESTABLISHED ***\r\n");
conn.shell({ term: "xterm-256color" }, function (err, newStream) {
if (err) {
console.error("Error opening SSH shell:", err);
return socket.emit(
"data",
"\r\n*** SSH SHELL ERROR: " + err.message + " ***\r\n"
);
console.error("Error:", err.message);
socket.emit("error", err.message);
return;
}
stream = newStream;
// Set initial terminal size
stream.setWindow(rows, cols, rows * 100, cols * 100);
console.log(`Initial terminal size: cols=${cols}, rows=${rows}`);
// Pipe SSH output to client
stream.on("data", function (data) {
socket.emit("data", data.toString("binary"));
socket.emit("data", data);
});
stream.on("close", function () {
@@ -65,7 +70,6 @@ io.on("connection", (socket) => {
socket.on("resize", ({ cols, rows }) => {
if (stream && stream.setWindow) {
stream.setWindow(rows, cols, rows * 100, cols * 100);
console.log(`Terminal resized: cols=${cols}, rows=${rows}`);
}
});
@@ -75,14 +79,11 @@ io.on("connection", (socket) => {
})
.on("close", function () {
console.log("SSH connection closed");
socket.emit("data", "\r\n*** SSH CONNECTION CLOSED ***\r\n");
socket.emit("error", "SSH connection closed");
})
.on("error", function (err) {
console.error("SSH connection error:", err);
socket.emit(
"data",
"\r\n*** SSH CONNECTION ERROR: " + err.message + " ***\r\n"
);
console.error("Error:", err.message);
socket.emit("error", err.message);
})
.connect({
host: ip,

20
src/index.css
View File

@@ -15,4 +15,24 @@
.terminal-container > div {
min-height: 0;
}
.tablist::-webkit-scrollbar {
width: 1px !important;
height: 1px !important;
background: transparent !important;
}
.tablist::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2) !important;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
}