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

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.

Browse Source
This commit is contained in:
LukeGus
2025-03-09 01:44:53 -06:00
committed by Karmaa
parent 6e71cc8070
commit 0a81bea075
4 changed files with 56 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AddHostModal.jsx
+9 -17
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { CssVarsProvider } from '@mui/joy/styles'; import { CssVarsProvider } from '@mui/joy/styles';
import { Modal, Button, FormControl, FormLabel, Input, Stack, DialogTitle, DialogContent, ModalDialog, Select, Option } from '@mui/joy'; import { Modal, Button, FormControl, FormLabel, Input, Stack, DialogTitle, DialogContent, ModalDialog, Select, Option, FormHelperText } from '@mui/joy';
import theme from './theme'; import theme from './theme';
const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidden }) => { const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidden }) => {
@@ -54,47 +54,42 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
<Input <Input
value={form.name} value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
required={false}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
/> />
</FormControl> </FormControl>
<FormControl> <FormControl error={!form.ip}>
<FormLabel>Host IP</FormLabel> <FormLabel>Host IP</FormLabel>
<Input <Input
value={form.ip} value={form.ip}
onChange={(e) => setForm({ ...form, ip: e.target.value })} onChange={(e) => setForm({ ...form, ip: e.target.value })}
required required
error={!form.ip ? "Please provide an IP address" : ""}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
/> />
</FormControl> </FormControl>
<FormControl> <FormControl error={!form.user}>
<FormLabel>Host User</FormLabel> <FormLabel>Host User</FormLabel>
<Input <Input
value={form.user} value={form.user}
onChange={(e) => setForm({ ...form, user: e.target.value })} onChange={(e) => setForm({ ...form, user: e.target.value })}
required required
error={form.user ? "" : "Please provide a username"}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
}} }}
/> />
</FormControl> </FormControl>
<FormControl> <FormControl error={!form.authMethod || form.authMethod === 'Select Auth'}>
<FormLabel>Authentication Method</FormLabel> <FormLabel>Authentication Method</FormLabel>
<Select <Select
value={form.authMethod} value={form.authMethod || 'Select Auth'}
onChange={(e, newValue) => setForm({ ...form, authMethod: newValue })} onChange={(e, newValue) => setForm({ ...form, authMethod: newValue })}
required required
displayEmpty
error={!form.authMethod || form.authMethod === 'Select Auth'}
sx={{ sx={{
backgroundColor: !form.authMethod || form.authMethod === 'Select Auth' ? theme.palette.general.tertiary : theme.palette.general.primary, backgroundColor: !form.authMethod || form.authMethod === 'Select Auth' ? theme.palette.general.tertiary : theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
@@ -103,7 +98,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
}, },
}} }}
> >
<Option value="" disabled> <Option value="Select Auth" disabled>
Select Auth Select Auth
</Option> </Option>
<Option value="password">Password</Option> <Option value="password">Password</Option>
@@ -111,14 +106,13 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
</Select> </Select>
</FormControl> </FormControl>
{form.authMethod === 'password' && ( {form.authMethod === 'password' && (
<FormControl> <FormControl error={!form.password}>
<FormLabel>Host Password</FormLabel> <FormLabel>Host Password</FormLabel>
<Input <Input
type="password" type="password"
value={form.password} value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })} onChange={(e) => setForm({ ...form, password: e.target.value })}
required required
error={form.password ? "" : "Please provide a password"}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
@@ -127,13 +121,12 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
</FormControl> </FormControl>
)} )}
{form.authMethod === 'rsaKey' && ( {form.authMethod === 'rsaKey' && (
<FormControl> <FormControl error={!form.rsaKey}>
<FormLabel>RSA Key</FormLabel> <FormLabel>RSA Key</FormLabel>
<Input <Input
type="file" type="file"
onChange={handleFileChange} onChange={handleFileChange}
required required
error={!form.rsaKey ? "Please upload a valid RSA private key file" : ""}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
@@ -146,7 +139,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
/> />
</FormControl> </FormControl>
)} )}
<FormControl> <FormControl error={form.port < 1 || form.port > 65535}>
<FormLabel>Host Port</FormLabel> <FormLabel>Host Port</FormLabel>
<Input <Input
value={form.port} value={form.port}
@@ -154,7 +147,6 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
min={1} min={1}
max={65535} max={65535}
required required
error={form.port < 1 || form.port > 65535 ? "Port must be between 1 and 65535" : ""}
sx={{ sx={{
backgroundColor: theme.palette.general.primary, backgroundColor: theme.palette.general.primary,
color: theme.palette.text.primary, color: theme.palette.text.primary,
src/App.jsx
+2 -1
View File
@@ -21,6 +21,7 @@ function App() {
user: "", user: "",
password: "", password: "",
port: 22, port: 22,
authMethod: "Select Auth",
}); });
const [isLaunchpadOpen, setIsLaunchpadOpen] = useState(false); const [isLaunchpadOpen, setIsLaunchpadOpen] = useState(false);
const [splitTabIds, setSplitTabIds] = useState([]); const [splitTabIds, setSplitTabIds] = useState([]);
@@ -90,7 +91,7 @@ function App() {
user: form.user, user: form.user,
password: form.authMethod === 'password' ? form.password : undefined, password: form.authMethod === 'password' ? form.password : undefined,
rsaKey: form.authMethod === 'rsaKey' ? form.rsaKey : undefined, rsaKey: form.authMethod === 'rsaKey' ? form.rsaKey : undefined,
port: Number(form.port), port: String(form.port),
}, },
terminalRef: null, terminalRef: null,
}; };
src/Terminal.jsx
+34 -12
View File
@@ -50,8 +50,8 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
}, },
fontSize: 14, fontSize: 14,
scrollback: 1000, scrollback: 1000,
rendererType: "canvas", fontFamily: 'monospace',
allowTransparency: true, ignoreBracketedPasteMode: true,
}); });
terminalInstance.current.loadAddon(fitAddon.current); terminalInstance.current.loadAddon(fitAddon.current);
@@ -63,8 +63,6 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
terminalInstance.current.focus(); terminalInstance.current.focus();
}, 50); }, 50);
terminalInstance.current.write("\r\n*** Connecting to backend ***\r\n");
const socket = io( const socket = io(
window.location.hostname === "localhost" window.location.hostname === "localhost"
? "http://localhost:8081" ? "http://localhost:8081"
@@ -81,23 +79,47 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
resizeTerminal(); resizeTerminal();
const { cols, rows } = terminalInstance.current; const { cols, rows } = terminalInstance.current;
socket.emit("connectToHost", cols, rows, hostConfig); socket.emit("connectToHost", cols, rows, hostConfig);
terminalInstance.current.write("\r\n*** Connected to backend ***\r\n");
}); });
socket.on("data", (data) => { 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.onData((data) => {
terminalInstance.current.write("\r\n*** Disconnected from backend ***\r\n"); socketRef.current.emit("data", data);
}); });
terminalInstance.current.onKey(({ key }) => { terminalInstance.current.attachCustomKeyEventHandler((event) => {
socket.emit("data", key); if (
(event.ctrlKey && event.key === "v") ||
(event.metaKey && event.key === "v") ||
(event.shiftKey && event.key === "Insert")
) {
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.onKey(({ domEvent }) => {
terminalInstance.current.write(`\r\n*** Error: ${err.message} ***\r\n`); 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 () => { return () => {
src/backend/server.cjs
+8 -14
View File
@@ -39,25 +39,22 @@ io.on("connection", (socket) => {
conn conn
.on("ready", function () { .on("ready", function () {
console.log("SSH connection established"); console.log("SSH connection established");
socket.emit("data", "\r\n*** SSH CONNECTION ESTABLISHED ***\r\n");
conn.shell({ term: "xterm-256color" }, function (err, newStream) { conn.shell({ term: "xterm-256color" }, function (err, newStream) {
if (err) { if (err) {
console.error("Error opening SSH shell:", err); console.error("Error:", err.message);
return socket.emit( socket.emit("error", err.message);
"data", return;
"\r\n*** SSH SHELL ERROR: " + err.message + " ***\r\n"
);
} }
stream = newStream;
stream = newStream;
// Set initial terminal size // Set initial terminal size
stream.setWindow(rows, cols, rows * 100, cols * 100); stream.setWindow(rows, cols, rows * 100, cols * 100);
console.log(`Initial terminal size: cols=${cols}, rows=${rows}`); console.log(`Initial terminal size: cols=${cols}, rows=${rows}`);
// Pipe SSH output to client // Pipe SSH output to client
stream.on("data", function (data) { stream.on("data", function (data) {
socket.emit("data", data.toString("binary")); socket.emit("data", data);
}); });
stream.on("close", function () { stream.on("close", function () {
@@ -84,14 +81,11 @@ io.on("connection", (socket) => {
}) })
.on("close", function () { .on("close", function () {
console.log("SSH connection closed"); 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) { .on("error", function (err) {
console.error("SSH connection error:", err); console.error("Error:", err.message);
socket.emit( socket.emit("error", err.message);
"data",
"\r\n*** SSH CONNECTION ERROR: " + err.message + " ***\r\n"
);
}) })
.connect({ .connect({
host: ip, host: ip,