webssh2_client 0.2.25 → 0.2.27

package/README.md

@@ -2,35 +2,21 @@
 
 ![Orthrus Mascot](images/orthrus.png)
 
-WebSSH2 Client is an HTML5 web-based terminal emulator and SSH client. It uses WebSockets to communicate with a WebSSH2 server, which in turn uses SSH2 to connect to SSH servers.
+WebSSH2 Client is an HTML5 web-based terminal emulator and SSH client component. It uses WebSockets to communicate with a WebSSH2 server, which in turn uses SSH2 to connect to SSH servers.
 
 ![WebSSH2 demo](https://user-images.githubusercontent.com/1668075/182425293-acc8741e-cc92-4105-afdc-9538e1685d4b.gif)
 
-# EXPERIMENTAL
-The current status is experimental, and this first version is a refactor of webssh2 v0.2.x to be compatible with a refactor of the same version of webssh2 as a stand-alone server-side component  running Node.js v6.9.1.
+# Important Notice
+This package contains only the browser-side client component of WebSSH2. It requires a compatible WebSSH2 server to function. The server component is available at [webssh2 server](https://github.com/billchurch/webssh2/tree/bigip-server). This package is intended for advanced users who want to customize or integrate the client component independently.
 
-The intention is to harmonize the latest release of webssh2 by splitting out the client and server as separate repos (webssh2-client and webssh2-server) but joining them both together as modules in a parent webssh2 in an attempt to provide backward compatibility.
-
-The main idea behind bifurcating the client/server is to make it easier to customize the client to work in other frameworks and use cases.
-
-## Table of Contents
-
-- [Requirements](#requirements)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Configuration](#configuration)
-- [Features](#features)
-- [Routes](#routes)
-- [Development](#development)
-- [Advanced Configuration](#advanced-configuration)
-- [Support](#support)
-- [License](#license)
-- [Acknowledgments](#acknowledgments)
+# Status
+This is an experimental refactor of the WebSSH2 v0.2.x client to function as a standalone component. It has been separated from the server-side code to facilitate customization and integration with different frameworks.
 
 ## Requirements
 
 - Modern web browser with JavaScript enabled
-- WebSSH2 server (see server README for setup instructions)
+- Compatible WebSSH2 server instance (v0.2.x or compatible)
+- Socket.IO v2.2.0 compatibility (due to server requirements)
 
 ## Installation
 
@@ -52,172 +38,91 @@ The main idea behind bifurcating the client/server is to make it easier to custo
 
 4. The built client files will be in the `client/public` directory.
 
-## Usage
-
-1. Set up and start the WebSSH2 server (see server README for instructions).
-
-2. Access the web client by navigating to the server's URL, typically:
-   ```
-   http://localhost:2222/ssh
-   ```
-
-3. You'll be prompted for host details and SSH credentials.
+## Server Requirements
 
-## Configuration
+The WebSSH2 client requires a compatible server that provides:
 
-The client can be configured using URL parameters or through the config file on the server. Some configurable options include:
+- WebSocket endpoint for SSH communication
+- Authentication handling
+- SSH connection management
+- Socket.IO v2.2.0 compatibility
 
-- `port` - SSH server port (default: 22)
-- `header` - Optional header text
-- `headerBackground` - Optional header background color
-- `sshterm` - Terminal type for pty (default: xterm-color)
+For server setup instructions, refer to the [WebSSH2 server documentation](https://github.com/billchurch/webssh2/tree/bigip-server).
 
-For a full list of configuration options, refer to the server README.
-
-## Features
+## Client Features
 
 - Web-based SSH client with xterm.js terminal emulation
-- Supports various SSH authentication methods (password and keyboard-interactive)
-- Customizable terminal settings (font size, font family, colors, etc.)
-- Session logging with download option
-- Support for reauthentication and credential replay
-- Responsive design for various screen sizes
-- Keyboard shortcuts support
-- Terminal Mouse support
+- Customizable terminal settings:
+  - Font size and family
+  - Color schemes
+  - Cursor behavior
+  - Scrollback buffer size
+- Session logging with download capability
 - Copy and paste functionality
-- Multi-factor authentication support
-- CORS support for flexible server setups
-
-## Routes
-
-The WebSSH2 Server (not provided by this package) provides two main routes:
-
-### 1. `/ssh`
-
-- Interactive login form
-- Terminal configuration options
-
-### 2. `/ssh/host/:host`
+- Terminal mouse support
+- Keyboard shortcuts
+- Responsive design
+- Multi-factor authentication support (when supported by server)
+- Support for credential replay and reauthentication
 
-- Quick connections to specific hosts
-- Optional `port` parameter (e.g., `?port=2222`)
-- HTTP Basic Authentication for credentials
+## Configuration
 
-## Development
+The client can be configured through:
 
-- To add custom JavaScript, modify `./src/client.htm`, `./src/index.js`, or add your file to `webpack.*.js`.
-- For security, use HTTPS when transmitting credentials via HTTP Basic Auth.
-- Terminal settings can be customized after login via `Menu | Settings` and persist across sessions.
-- Debug mode can be enabled by setting the `DEBUG` environment variable.
+1. URL parameters
+2. Configuration object
+3. User interface settings
 
-## Advanced Configuration 
+### URL Parameters
 
-In the client HTML file, you'll find this script tag:
+Supported URL parameters include:
 
-```html
-<script>
-window.webssh2Config = null;
-</script>
-```
-
-The WebSSH2 server replaces this null value with a configuration object. However, you can also set this manually to override server-provided settings or to configure the client when using it standalone.
+- `host` - SSH server hostname
+- `port` - SSH server port (default: 22)
+- `header` - Optional header text
+- `headerBackground` - Optional header background color
+- `sshterm` - Terminal type (default: xterm-color)
 
-### Configuration Options
+### Configuration Object
 
-Here's a comprehensive list of parameters that can be injected using `window.webssh2Config`:
+You can configure the client by setting `window.webssh2Config`:
 
 ```javascript
 window.webssh2Config = {
   socket: {
-    url: null,  // WebSocket URL. If null, it will be automatically determined
-    path: '/ssh/socket.io',  // Socket.IO path
+    url: null,  // WebSocket URL (auto-detected if null)
+    path: '/ssh/socket.io'  // Socket.IO path
   },
   ssh: {
-    host: null,  // SSH server hostname (required for autoConnect)
-    port: 22,  // SSH server port
-    username: null,  // SSH username (required for autoConnect)
-    password: null,  // SSH password (required for autoConnect)
-    sshterm: 'xterm-color',  // Terminal type
-    readyTimeout: 20000,  // SSH connection timeout (ms)
+    host: null,  // SSH server hostname
+    port: 22,    // SSH server port
+    username: null,
+    sshterm: 'xterm-color'
   },
   header: {
-    text: null,  // Custom header text
-    background: 'green',  // Header background color
-  },
-  autoConnect: false  // Whether to connect automatically
-};
-```
-
-### Auto-Connect Functionality
-
-The `autoConnect` option is used to create pre-configured connections:
-
-- When set to `true`, the client will attempt to connect immediately using the provided SSH configuration, bypassing the login form.
-- For `autoConnect` to work, you must provide at least the `host` in the SSH configuration.
-- `autoConnect` requires a username and password. If these are not provided, the server may use other methods (like basic auth or session data) to authenticate the connection.
-- If the host is missing when `autoConnect` is `true,` the login form will be shown instead.
-
-Example usage:
-
-```javascript
-window.webssh2Config = {
-  ssh: {
-    host: 'example.com',
-    port: 22,
-    username: 'user',  // Optional
-    password: 'password'  // Optional
+    text: null,
+    background: 'green'
   },
-  autoConnect: true
+  autoConnect: false
 };
 ```
 
-This configuration will attempt to connect to `example.com` as soon as the page loads, using any provided credentials or relying on server-side authentication methods.
-
-### Security Considerations
-
-The `autoConnect` feature only requires the host to be specified. The server handles authentication, which may use various methods, including basic auth or session data.
-- If you do include a username and password in the client-side configuration, be cautious, as this may pose security risks, especially in production environments.
-- For production use, consider using secure server-side authentication methods rather than including credentials in the client-side configuration.
-When `autoConnect` is not used, ensure your server is configured to prompt for or securely handle credentials as needed.
-
-### Customization Examples
-
-1. Setting a custom header:
-   ```javascript
-   window.webssh2Config = {
-     header: {
-       text: 'My Custom SSH Client',
-       background: '#007acc'
-     }
-   };
-   ```
-
-2. Configuring for a specific SSH server with auto-connect:
-   ```javascript
-   window.webssh2Config = {
-     ssh: {
-       host: 'myserver.example.com',
-       port: 2222
-     },
-     autoConnect: true
-   };
-   ```
+## Development
 
-By leveraging these configuration options, you can customize the WebSSH2 client to suit your needs or integrate it seamlessly into your existing systems. Remember that the server handles authentication, providing flexibility in managing and securing credentials.
+- For development information see [DEVELOPMENT.md](./DEVELOPMENT.md).
 
 ## Support
 
-If you find this project helpful, you can support the developer:
+If you find this project helpful, consider supporting the developer:
 
 [![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/billchurch)
 
-
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
 
 ## Acknowledgments
 
-- [Xterm.js](https://xtermjs.org/) for providing the terminal emulator
-- [Socket.IO](https://socket.io/) for real-time, bidirectional communication
-- [Webpack](https://webpack.js.org/) for module bundling
+- [Xterm.js](https://xtermjs.org/) for terminal emulation
+- [Socket.IO](https://socket.io/) for WebSocket communication
+- [Webpack](https://webpack.js.org/) for module bundling

package/client/public/client.htm

@@ -1,4 +1,4 @@
-<!-- Version Version 0.2.25 - 2024-08-22T17:16:39.057Z - 3bb6482 -->
+<!-- Version Version 0.2.27 - 2024-12-02T21:03:28.371Z - 1989d45 -->
 <!-- webssh2-client -->
 <!-- /client/src/client.htm -->
 <!DOCTYPE html>
@@ -14,20 +14,44 @@
     <dialog id="loginDialog" class="modal">
       <div class="modal-content"> 
         <h2>WebSSH2 Login</h2>
-        <form id="loginForm" class="pure-form pure-form-stacked">
-          <fieldset>
-            <input type="text" id="hostInput" placeholder="Hostname" required>
-            <input type="text" id="portInput" placeholder="Port" required>
-            <input type="text" id="usernameInput" placeholder="Username" required autocomplete="username">
-            <div class="password-wrapper">
-              <input type="password" id="passwordInput" placeholder="Password" required autocomplete="current-password">
-              <i id="capsLockIcon" class="fas fa-circle-up fa-fw"></i>
-            </div>
-            <div class="login-buttons">
-              <button type="submit" class="pure-button pure-button-primary">Connect</button>
-              <button type="button" id="loginSettingsBtn" class="pure-button"><i class="fas fa-cog"></i></button>
+        <form id="loginForm" class="pure-form">
+          <input type="text" id="hostInput" name="host" placeholder="Host" required>
+          <input type="text" id="portInput" name="port" placeholder="Port" value="22">
+          <input type="text" id="usernameInput" name="username" placeholder="Username" required>
+          
+          <!-- Password section - always visible -->
+          <div class="password-wrapper">
+            <input type="password" id="passwordInput" name="password" placeholder="Password">
+            <span id="capsLockIcon">⇪</span>
+          </div>
+        
+          <!-- Private key toggle button -->
+          <div class="private-key-toggle">
+            <button type="button" id="privateKeyToggle" class="pure-button">
+              <i class="fa fa-key"></i> Add SSH Key
+            </button>
+          </div>
+        
+          <!-- Private key section (initially hidden) -->
+          <div id="privateKeySection" class="hidden">
+            <div class="private-key-input">
+              <textarea id="privateKeyText" name="privateKey" 
+                placeholder="Paste your private key here" rows="3"></textarea>
+              <div class="file-upload">
+                <input type="file" id="privateKeyFile" accept=".pem,.key">
+                <label for="privateKeyFile" class="pure-button">
+                  <i class="fa fa-upload"></i> Upload Key File
+                </label>
+              </div>
+              <input type="password" id="passphraseInput" name="passphrase" 
+                placeholder="Key password (if encrypted)" class="optional">
             </div>
-          </fieldset>
+          </div>
+        
+          <div class="login-buttons">
+            <button type="submit" class="pure-button pure-button-primary">Connect</button>
+            <button type="button" id="loginSettingsBtn" class="pure-button">⚙️</button>
+          </div>
         </form>
       </div>
     </dialog>