Update

Author: LukeGus

docs/contributing.md

@@ -1,4 +1,4 @@
-# Contributing
+_# Contributing
 
 ## Prerequisites
 
@@ -23,10 +23,10 @@ Run the following commands:
 
 ```sh
 npm run dev
-npx tsc -p tsconfig.node.json
-node ./dist/backend/starter.js
+npm run dev:backend
 ```
 
+a
 This will start the backend and the frontend Vite server. You can access Termix by going to `http://localhost:5174/`.
 
 ## Contributing
@@ -38,23 +38,70 @@ This will start the backend and the frontend Vite server. You can access Termix
     git checkout -b feature/my-new-feature
     ```
 3. **Make your changes**: Implement your feature, fix, or improvement.
-4. **Commit your changes**: 
+4. **Commit your changes**:
     ```sh
-    git commit -m "Add feature: my new feature"
+    git commit -m "Feature request my new feature"
     ```
 5. **Push to your fork**:
     ```sh
-    git push origin feature/my-new-feature
+    git push origin feature/my-feature-request
     ```
 6. **Open a pull request**: Go to the original repository and create a PR with a clear description.
 
 ## 📝 Guidelines
 
 - Follow the existing code style. Use Tailwind CSS with shadcn components.
+- Use the below color scheme with the respective CSS variable placed in the `className` of a div/component.
 - Place all API routes in the `main-axios.ts` file. Updating the `openapi.json` is unneeded.
 - Include meaningful commit messages.
 - Link related issues when applicable.
+- `MobileApp.tsx` renders when the users screen width is less than 768px, otherwise it loads the usual `DesktopApp.tsx`.
+
+## Color Scheme
+
+### Background Colors
+
+| CSS Variable                  | Color Value | Usage                       | Description                              |
+|-------------------------------|-------------|-----------------------------|------------------------------------------|
+| `--color-dark-bg`             | `#18181b`   | Main dark background        | Primary dark background color            |
+| `--color-dark-bg-darker`      | `#0e0e10`   | Darker backgrounds          | Darker variant for panels and containers |
+| `--color-dark-bg-darkest`     | `#09090b`   | Darkest backgrounds         | Darkest background (terminal)            |
+| `--color-dark-bg-light`       | `#141416`   | Light dark backgrounds      | Lighter variant of dark background       |
+| `--color-dark-bg-very-light`  | `#101014`   | Very light dark backgrounds | Very light variant of dark background    |
+| `--color-dark-bg-panel`       | `#1b1b1e`   | Panel backgrounds           | Background for panels and cards          |
+| `--color-dark-bg-panel-hover` | `#232327`   | Panel hover states          | Background for panels on hover           |
+
+### Element-Specific Backgrounds
+
+| CSS Variable             | Color Value | Usage              | Description                                   |
+|--------------------------|-------------|--------------------|-----------------------------------------------|
+| `--color-dark-bg-input`  | `#222225`   | Input fields       | Background for input fields and form elements |
+| `--color-dark-bg-button` | `#23232a`   | Button backgrounds | Background for buttons and clickable elements |
+| `--color-dark-bg-active` | `#1d1d1f`   | Active states      | Background for active/selected elements       |
+| `--color-dark-bg-header` | `#131316`   | Header backgrounds | Background for headers and navigation bars    |
+
+### Border Colors
+
+| CSS Variable                 | Color Value | Usage           | Description                              |
+|------------------------------|-------------|-----------------|------------------------------------------|
+| `--color-dark-border`        | `#303032`   | Default borders | Standard border color                    |
+| `--color-dark-border-active` | `#2d2d30`   | Active borders  | Border color for active elements         |
+| `--color-dark-border-hover`  | `#434345`   | Hover borders   | Border color on hover states             |
+| `--color-dark-border-light`  | `#5a5a5d`   | Light borders   | Lighter border color for subtle elements |
+| `--color-dark-border-medium` | `#373739`   | Medium borders  | Medium weight border color               |
+| `--color-dark-border-panel`  | `#222224`   | Panel borders   | Border color for panels and cards        |
+
+### Interactive States
+
+| CSS Variable             | Color Value | Usage             | Description                                   |
+|--------------------------|-------------|-------------------|-----------------------------------------------|
+| `--color-dark-hover`     | `#2d2d30`   | Hover states      | Background color for hover effects            |
+| `--color-dark-active`    | `#2a2a2c`   | Active states     | Background color for active elements          |
+| `--color-dark-pressed`   | `#1a1a1c`   | Pressed states    | Background color for pressed/clicked elements |
+| `--color-dark-hover-alt` | `#2a2a2d`   | Alternative hover | Alternative hover state color                 |
 
 ## 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.
+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.

docs/install.md

@@ -2,7 +2,7 @@
 
 Termix can be installed using Docker, Docker Compose, or manually. Choose the method that works best for your environment.
 
-### Docker Installation
+## Docker Installation
 
 The simplest way to get Termix up and running is with Docker:
 
@@ -20,7 +20,7 @@ docker run -d \
   ghcr.io/lukegus/termix:latest
 ```
 
-### Docker Compose Installation
+## Docker Compose Installation
 
 For a more comprehensive setup, you can use Docker Compose:
 
@@ -48,20 +48,20 @@ To start the container, run:
 docker-compose up -d
 ```
 
-### Environment Variables
+## Environment Variables
 | Config Name | Variable Name | Default/Note                                                               |
 |-------------|---------------|----------------------------------------------------------------------------|
 | Port        | PORT          | 8080 / Port for the frontend application (no other ports should be opened) |
 
-### Manual Installation
+## Manual Installation
 
 If you prefer a manual installation, follow these steps:
 
-#### Required Packages
+### Required Packages
 - NPM
 - NodeJS
 
-#### Installation Steps
+### Installation Steps
 
 1. Clone the repository:
 ```bash
@@ -86,10 +86,13 @@ For production environments, we recommend running the website via Nginx. See the
 
 4. Start the backend services.
 ```bash
-npx tsc -p tsconfig.node.json 
-node ./dist/backend/starter.js
+npm run dev:backend
 ```
 
+## Pre-built Binaries
+
+You can download a Windows installer/portable and a Linux portable within the latest release at <https://github.com/LukeGus/Termix/releases>. However, this is under development.
+
 ## Usage
 
 Once installed, Termix will be available at `http://localhost:8080` (or whichever port you configured).

docs/json-import.md

@@ -7,14 +7,16 @@ Use this guide to create JSON files for bulk importing SSH hosts. All examples a
 - **`ip`** - Host IP address (string)
 - **`port`** - SSH port (number, 1-65535)
 - **`username`** - SSH username (string)
-- **`authType`** - "password" or "key"
+- **`authType`** - Authentication type: `"password"`, `"key"`, or `"credential"`
 
 ## Authentication Fields
 
 - **`password`** - Required if authType is "password"
 - **`key`** - SSH private key content (string) if authType is "key"
 - **`keyPassword`** - Optional key passphrase
-- **`keyType`** - Key type (auto, ssh-rsa, ssh-ed25519, etc.)
+- **`keyType`** - Key type: `"auto"`, `"ssh-rsa"`, `"ssh-ed25519"`, `"ecdsa-sha2-nistp256"`, `"ecdsa-sha2-nistp384"`, `"ecdsa-sha2-nistp521"`, `"ssh-dss"`, `"ssh-rsa-sha2-256"`, `"ssh-rsa-sha2-512"`
+- **`credentialId`** - ID of existing credential (number) if `authType` is `"credential"`
+
 
 ## Optional Fields
 
@@ -43,19 +45,60 @@ Use this guide to create JSON files for bulk importing SSH hosts. All examples a
 {
   "hosts": [
     {
-      "name": "Web Server",
+      "name": "Web Server - Production",
       "ip": "192.168.1.100",
       "port": 22,
       "username": "admin",
       "authType": "password",
-      "password": "your_password",
+      "password": "your_secure_password_here",
       "folder": "Production",
-      "tags": ["web", "production"],
+      "tags": ["web", "production", "nginx"],
       "pin": true,
       "enableTerminal": true,
       "enableTunnel": false,
       "enableFileManager": true,
       "defaultPath": "/var/www"
+    },
+    {
+      "name": "Database Server",
+      "ip": "192.168.1.101",
+      "port": 22,
+      "username": "dbadmin",
+      "authType": "key",
+      "key": "-----BEGIN OPENSSH PRIVATE KEY-----\nYour SSH private key content here\n-----END OPENSSH PRIVATE KEY-----",
+      "keyPassword": "optional_key_passphrase",
+      "keyType": "ssh-ed25519",
+      "folder": "Production",
+      "tags": ["database", "production", "postgresql"],
+      "pin": false,
+      "enableTerminal": true,
+      "enableTunnel": true,
+      "enableFileManager": false,
+      "tunnelConnections": [
+        {
+          "sourcePort": 5432,
+          "endpointPort": 5432,
+          "endpointHost": "Web Server - Production",
+          "maxRetries": 3,
+          "retryInterval": 10,
+          "autoStart": true
+        }
+      ]
+    },
+    {
+      "name": "Development Server",
+      "ip": "192.168.1.102",
+      "port": 2222,
+      "username": "developer",
+      "authType": "credential",
+      "credentialId": 1,
+      "folder": "Development",
+      "tags": ["dev", "testing"],
+      "pin": false,
+      "enableTerminal": true,
+      "enableTunnel": false,
+      "enableFileManager": true,
+      "defaultPath": "/home/developer"
     }
   ]
 }
@@ -64,8 +107,10 @@ Use this guide to create JSON files for bulk importing SSH hosts. All examples a
 ## Notes
 
 - Maximum 100 hosts per import
-- File should contain a "hosts" array or be an array of host objects
+- File must contain a "hosts" array or be an array of host objects
 - Use the Download Sample button in the Host Manager to get a complete example file
+- Credential authentication requires existing credentials to be created first before importing
+- Sensitive data (passwords/keys) is excluded from exports
 
 ## Support