Docker build update

frontend/src/App.jsx

@@ -10,7 +10,7 @@ const App = () => {
   const fitAddon = useRef(null);
   const socket = useRef(null);
   const [host, setHost] = useState('');
-  const [port, setPort] = useState('22');
+  const [port, setPort] = useState(22);
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [isConnected, setIsConnected] = useState(false);
@@ -27,6 +27,8 @@ const App = () => {
       macOptionIsMeta: true,
       allowProposedApi: true,
       scrollback: 5000,
+      // Do not enable local echo
+      disableStdin: false,
     });
 
     // Initialize and attach the fit addon to the terminal
@@ -38,12 +40,6 @@ const App = () => {
     // Resize terminal to fit the container initially
     fitAddon.current.fit();
 
-    terminal.current.onData((data) => {
-      if (socket.current && socket.current.readyState === WebSocket.OPEN) {
-        socket.current.send(data);
-      }
-    });
-
     // Adjust terminal size on window resize
     const handleResize = () => {
       fitAddon.current.fit();
@@ -73,7 +69,7 @@ const App = () => {
       return;
     }
 
-    socket.current = new WebSocket(wsUrl);
+    socket.current = new WebSocket("ws://localhost:8081");
 
     socket.current.onopen = () => {
       terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`);
@@ -91,6 +87,8 @@ const App = () => {
     };
 
     socket.current.onmessage = (event) => {
+      // Write the incoming data from WebSocket to the terminal
+      // This ensures that data coming from the WebSocket server is shown in the terminal
       terminal.current.write(event.data);
     };
 
@@ -102,10 +100,27 @@ const App = () => {
       terminal.current.writeln('Disconnected from WebSocket server.');
       setIsConnected(false);
     };
+
+    // Handle terminal input and send it over WebSocket
+    terminal.current.onData((data) => {
+      // Send input data over WebSocket without echoing it back to the terminal
+      if (socket.current && socket.current.readyState === WebSocket.OPEN) {
+        socket.current.send(data); // Only send to WebSocket, no echo
+      }
+    });
   };
 
-  const handleInputChange = (event, setState) => {
-    setState(event.target.value);
+  const handleInputChange = (event, setState, isNumber = false) => {
+    let value = event.target.value;
+
+    if (isNumber) {
+      value = Number(value); // Convert to number if it's a number field
+      if (isNaN(value)) {
+        value = ''; // Optional: set an empty string if the input is invalid
+      }
+    }
+
+    setState(value); // Set the state with the appropriate value
   };
 
   const handleSideBarHiding = () => {
@@ -114,7 +129,7 @@ const App = () => {
 
   return (
       <div className="app-container">
-        <div className="main-content">
+        <div className={`main-content ${isSideBarHidden ? 'with-sidebar-hidden' : ''}`}>
           <div className={`sidebar ${isSideBarHidden ? 'hidden' : ''}`}>
             <h2>Connection Details</h2>
             <input
@@ -124,10 +139,10 @@ const App = () => {
                 onChange={(e) => handleInputChange(e, setHost)}
             />
             <input
-                type="text"
+                type="number"
                 placeholder="Port"
                 value={port}
-                onChange={(e) => handleInputChange(e, setPort)}
+                onChange={(e) => handleInputChange(e, setPort, true)}
             />
             <input
                 type="text"