From b0062343c75ed60a38c1dd80365d7cd12c935cd7 Mon Sep 17 00:00:00 2001
From: Karmaa <88517757+LukeGus@users.noreply.github.com>
Date: Sun, 9 Mar 2025 18:46:09 -0500
Subject: [PATCH] Dev 1.1 (#18)

* 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>
---
 README.md              |  3 ++
 src/AddHostModal.jsx   | 39 +++++++++---------
 src/App.jsx            |  3 +-
 src/TabList.jsx        | 16 +++-----
 src/Terminal.jsx       | 90 ++++++++++++++++++++++++++++--------------
 src/backend/server.cjs | 33 ++++++++--------
 src/index.css          | 20 ++++++++++
 7 files changed, 128 insertions(+), 76 deletions(-)

diff --git a/README.md b/README.md
index c57af3eb..713474c1 100644
--- a/README.md
+++ b/README.md
@@ -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)
diff --git a/src/AddHostModal.jsx b/src/AddHostModal.jsx
index b7c65dc6..d73b78a3 100644
--- a/src/AddHostModal.jsx
+++ b/src/AddHostModal.jsx
@@ -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,
diff --git a/src/App.jsx b/src/App.jsx
index 2a943d96..6c1a6474 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -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,
             };
diff --git a/src/TabList.jsx b/src/TabList.jsx
index cb4ebf26..59b4a486 100644
--- a/src/TabList.jsx
+++ b/src/TabList.jsx
@@ -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;
\ No newline at end of file
diff --git a/src/Terminal.jsx b/src/Terminal.jsx
index e0e677a4..11a259e4 100644
--- a/src/Terminal.jsx
+++ b/src/Terminal.jsx
@@ -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,
-};
\ No newline at end of file
+};
diff --git a/src/backend/server.cjs b/src/backend/server.cjs
index 94d9ab55..49fef97c 100644
--- a/src/backend/server.cjs
+++ b/src/backend/server.cjs
@@ -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,
diff --git a/src/index.css b/src/index.css
index daee9449..d084731e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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);
 }
\ No newline at end of file