Initial version 1.1
This commit is contained in:
Karmaa
80
.github/workflows/docker-image.yml
vendored
Normal file
80
.github/workflows/docker-image.yml
vendored
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
name: Build and Push Docker Image
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- development
|
||||||
|
workflow_dispatch:
|
||||||
|
inputs:
|
||||||
|
tag_name:
|
||||||
|
description: "Custom tag name for the Docker image"
|
||||||
|
required: false
|
||||||
|
default: ""
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout repository
|
||||||
|
uses: actions/checkout@v2
|
||||||
|
|
||||||
|
- name: Setup Node.js
|
||||||
|
uses: actions/setup-node@v2
|
||||||
|
with:
|
||||||
|
node-version: '18'
|
||||||
|
|
||||||
|
- name: Install Dependencies and Build Frontend
|
||||||
|
run: |
|
||||||
|
cd frontend
|
||||||
|
npm ci
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
- name: Setup Docker Buildx
|
||||||
|
uses: docker/setup-buildx-action@v1
|
||||||
|
|
||||||
|
- name: Set up QEMU
|
||||||
|
uses: docker/setup-qemu-action@v1
|
||||||
|
|
||||||
|
- name: Login to Docker Registry
|
||||||
|
uses: docker/login-action@v1
|
||||||
|
with:
|
||||||
|
registry: ghcr.io
|
||||||
|
username: ${{ github.actor }}
|
||||||
|
password: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|
||||||
|
- name: Determine Docker image tag
|
||||||
|
run: |
|
||||||
|
echo "REPO_OWNER=$(echo ${{ github.repository_owner }} | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV
|
||||||
|
if [ "${{ github.event.inputs.tag_name }}" == "" ]; then
|
||||||
|
IMAGE_TAG="${{ github.ref_name }}-development-latest"
|
||||||
|
else
|
||||||
|
IMAGE_TAG="${{ github.event.inputs.tag_name }}"
|
||||||
|
fi
|
||||||
|
echo "IMAGE_TAG=$IMAGE_TAG" >> $GITHUB_ENV
|
||||||
|
|
||||||
|
- name: Build and Push Docker Image
|
||||||
|
uses: docker/build-push-action@v2
|
||||||
|
with:
|
||||||
|
context: .
|
||||||
|
file: ./docker/Dockerfile
|
||||||
|
push: true
|
||||||
|
tags: ghcr.io/${{ env.REPO_OWNER }}/termix:${{ env.IMAGE_TAG }}
|
||||||
|
labels: org.opencontainers.image.source=https://github.com/${{ github.repository }}
|
||||||
|
|
||||||
|
- name: Notify via ntfy
|
||||||
|
run: |
|
||||||
|
curl -d "Docker image build and push completed successfully for tag: ${{ env.IMAGE_TAG }}" \
|
||||||
|
https://ntfy.karmaashomepage.online/termix-build
|
||||||
|
|
||||||
|
- name: Delete all untagged image versions
|
||||||
|
uses: quartx-analytics/ghcr-cleaner@v1
|
||||||
|
with:
|
||||||
|
owner-type: user
|
||||||
|
token: ${{ secrets.GHCR_TOKEN }}
|
||||||
|
repository-owner: ${{ github.repository_owner }}
|
||||||
|
delete-untagged: true
|
||||||
|
|
||||||
|
- name: Cleanup Docker Images Locally
|
||||||
|
run: |
|
||||||
|
docker image prune -af
|
||||||
|
docker system prune -af --volumes
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
49
README.md
Normal file
49
README.md
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
# Repo Stats
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### Top Technologies
|
||||||
|
[](#)
|
||||||
|
[](#)
|
||||||
|
[](#)
|
||||||
|
[](#)
|
||||||
|
[](#)
|
||||||
|
[](#)
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/LukeGus/Termix">
|
||||||
|
<img alt="Termimx Banner" src=./repo-images/TermixLogo.png style="width: 125px; height: auto;"> </a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
# Description
|
||||||
|
Termix is an open-source forever free self-hosted SSH (other protocols planned, see [Planned Features](#planned-features)) management panel inspired by [Nexterm](https://github.com/gnmyt/Nexterm). Its purpose is to provide an all-in-one docker-hosted web solution to manage your servers in one easy place. I'm using this project to help me learn [React](https://github.com/facebook/react), [Vite](https://github.com/vitejs/vite-plugin-react), and [Docker](https://www.docker.com) but also because I could never settle on a server management software that I enjoyed to use.
|
||||||
|
|
||||||
|
> [!WARNING]
|
||||||
|
> This app is in the VERY early stages of development. Expect bugs, data loss, and possibly even security issues!
|
||||||
|
|
||||||
|
# Planned Features
|
||||||
|
- [x] SSH
|
||||||
|
- [ ] VNC
|
||||||
|
- [ ] RDP
|
||||||
|
- [ ] SMTP (build in file transfer)
|
||||||
|
- [ ] Split Screen & Tabs
|
||||||
|
- [ ] ChatGPT/Ollama Integration (for commands)
|
||||||
|
- [ ] Login Screen
|
||||||
|
|
||||||
|
# How Termix is Different
|
||||||
|
Before developing Termix, I faced the issue of a server management panel that did not have every feature I liked. [Guacamole](https://guacamole.apache.org/) had poor copy/paste abilities and a poor UI. [Shellngn](https://shellngn.com/) was too expensive and all other alternatives had one major problem with them. I plan to develop the management panel of my dreams with even an AI integration for those pesky commands I always forget the syntax of.
|
||||||
|
|
||||||
|
# Installation
|
||||||
|
View 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).
|
||||||
|
|
||||||
|
# Known Bugs
|
||||||
|
### Please create an [Issue](https://github.com/LukeGus/Termix/issues) if you find any problems!
|
||||||
|
Start session button stays connected even if SSH fails to connect.
|
||||||
|
|
||||||
|
# Show-off
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# License
|
||||||
|
Distributed under the MIT license. See LICENSE for more information.
|
||||||
30
docker/Dockerfile
Normal file
30
docker/Dockerfile
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# Build frontend
|
||||||
|
FROM node:18-alpine AS frontend-build
|
||||||
|
WORKDIR /app
|
||||||
|
COPY frontend/package*.json ./frontend/
|
||||||
|
RUN npm --prefix frontend install
|
||||||
|
COPY frontend/ ./frontend/
|
||||||
|
RUN npm --prefix frontend run build
|
||||||
|
|
||||||
|
# Build backend
|
||||||
|
FROM node:18-alpine AS backend-build
|
||||||
|
WORKDIR /backend
|
||||||
|
COPY backend/package*.json ./
|
||||||
|
RUN npm install
|
||||||
|
COPY backend/ .
|
||||||
|
|
||||||
|
# Configure nginx
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
RUN apk add --no-cache nodejs npm
|
||||||
|
COPY docker/nginx.conf /etc/nginx/nginx.conf
|
||||||
|
COPY --from=frontend-build /app/frontend/dist /usr/share/nginx/html
|
||||||
|
COPY --from=backend-build /backend /backend
|
||||||
|
COPY --from=backend-build /backend/entrypoint.sh /backend/entrypoint.sh
|
||||||
|
|
||||||
|
# Configure start-up
|
||||||
|
RUN chmod +x /backend/entrypoint.sh
|
||||||
|
ENTRYPOINT ["/src/backend/entrypoint.sh"]
|
||||||
|
|
||||||
|
EXPOSE 8080
|
||||||
|
EXPOSE 8081
|
||||||
38
docker/nginx.conf
Normal file
38
docker/nginx.conf
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
events {
|
||||||
|
worker_connections 1024;
|
||||||
|
}
|
||||||
|
|
||||||
|
http {
|
||||||
|
include mime.types;
|
||||||
|
default_type application/octet-stream;
|
||||||
|
|
||||||
|
sendfile on;
|
||||||
|
keepalive_timeout 65;
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 8080;
|
||||||
|
server_name localhost;
|
||||||
|
|
||||||
|
# Serve the React app
|
||||||
|
location / {
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html index.htm;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Proxy WebSocket requests
|
||||||
|
location /ws/ {
|
||||||
|
proxy_pass http://localhost:8081; # Backend WebSocket server
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Error pages
|
||||||
|
error_page 500 502 503 504 /50x.html;
|
||||||
|
location = /50x.html {
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
38
eslint.config.js
Normal file
38
eslint.config.js
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
react,
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...js.configs.recommended.rules,
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Termix</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5676
package-lock.json
generated
Normal file
5676
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
package.json
Normal file
42
package.json
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "termix",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@xterm/addon-fit": "^0.10.0",
|
||||||
|
"@xterm/xterm": "^5.5.0",
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"express": "^4.21.2",
|
||||||
|
"is-stream": "^4.0.1",
|
||||||
|
"make-dir": "^5.0.0",
|
||||||
|
"node-ssh": "^13.2.0",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"sb-promise-queue": "^2.1.1",
|
||||||
|
"sb-scandir": "^3.1.0",
|
||||||
|
"shell-escape": "^0.2.0",
|
||||||
|
"socket.io": "^4.8.1",
|
||||||
|
"socket.io-client": "^4.8.1",
|
||||||
|
"ssh2": "^1.16.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.17.0",
|
||||||
|
"@types/react": "^18.3.18",
|
||||||
|
"@types/react-dom": "^18.3.5",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"eslint": "^9.17.0",
|
||||||
|
"eslint-plugin-react": "^7.37.2",
|
||||||
|
"eslint-plugin-react-hooks": "^5.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.16",
|
||||||
|
"globals": "^15.14.0",
|
||||||
|
"vite": "^6.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/logo192.png
Normal file
BIN
public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/logo512.png
Normal file
BIN
public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
repo-images/DemoImage1.png
Normal file
BIN
repo-images/DemoImage1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
repo-images/TermixLogo.png
Normal file
BIN
repo-images/TermixLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
149
src/.gitignore
vendored
Normal file
149
src/.gitignore
vendored
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# TypeScript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
.env.test
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and *not* Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
.bash_history
|
||||||
|
.bashrc
|
||||||
|
.init_done
|
||||||
|
.profile
|
||||||
|
.sudo_as_admin_successful
|
||||||
|
.wget-hsts
|
||||||
|
.git-credentials
|
||||||
|
.docker/
|
||||||
|
.bash_logout
|
||||||
|
|
||||||
|
# VSCode Files
|
||||||
|
.vscode-server/
|
||||||
|
|
||||||
|
# Configs
|
||||||
|
.config/
|
||||||
|
|
||||||
|
# .dotnet
|
||||||
|
.dotnet/
|
||||||
|
|
||||||
|
# .local
|
||||||
|
.local/
|
||||||
144
src/App.css
Normal file
144
src/App.css
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
#root {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5em;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 2em;
|
||||||
|
width: 10em;
|
||||||
|
background-color: #323232;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
position: fixed;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px;
|
||||||
|
background-color: #323232;
|
||||||
|
top: 0;
|
||||||
|
left: 14em;
|
||||||
|
right: 0;
|
||||||
|
width: calc(100% - 14em);
|
||||||
|
min-height: 36px;
|
||||||
|
height: auto;
|
||||||
|
font-size: 16px;
|
||||||
|
gap: 0.5em;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar button {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
background-color: #444;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar button.active-tab {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-tab {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-tab.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-host {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 200px;
|
||||||
|
height: 375px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
gap: 0.5em;
|
||||||
|
padding: 1em;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #323232;
|
||||||
|
box-shadow: #1a1a1a 0 0 1em;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-host-close {
|
||||||
|
position: absolute;
|
||||||
|
top: -7px;
|
||||||
|
right: 5px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-host h2 {
|
||||||
|
margin: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-host input {
|
||||||
|
margin-top: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-host button {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-host.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 96px;
|
||||||
|
left: 14em;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #1c1c1c;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
102
src/App.jsx
Normal file
102
src/App.jsx
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import "./App.css";
|
||||||
|
import { NewTerminal } from "./Terminal.jsx";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [isAddHostHidden, setIsAddHostHidden] = useState(true);
|
||||||
|
const [terminals, setTerminals] = useState([]);
|
||||||
|
const [activeTab, setActiveTab] = useState(null);
|
||||||
|
const [nextId, setNextId] = useState(1);
|
||||||
|
const [form, setForm] = useState({ name: "", ip: "", user: "", password: "", port: "22" });
|
||||||
|
|
||||||
|
const handleAddHost = () => {
|
||||||
|
if (form.ip && form.user && form.password && form.port) {
|
||||||
|
const newTerminal = {
|
||||||
|
id: nextId,
|
||||||
|
title: form.name || form.ip,
|
||||||
|
hostConfig: {
|
||||||
|
ip: form.ip,
|
||||||
|
user: form.user,
|
||||||
|
password: form.password,
|
||||||
|
port: form.port,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
setTerminals([...terminals, newTerminal]);
|
||||||
|
setActiveTab(nextId);
|
||||||
|
setNextId(nextId + 1);
|
||||||
|
setIsAddHostHidden(true);
|
||||||
|
setForm({ name: "", ip: "", user: "", password: "", port: "22" });
|
||||||
|
} else {
|
||||||
|
alert("Please fill out all fields.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="sidebar">
|
||||||
|
<h2>Termix</h2>
|
||||||
|
<button onClick={() => setIsAddHostHidden(!isAddHostHidden)}>Create Host</button>
|
||||||
|
</div>
|
||||||
|
<div className="topbar">
|
||||||
|
{terminals.map((terminal) => (
|
||||||
|
<button
|
||||||
|
key={terminal.id}
|
||||||
|
onClick={() => setActiveTab(terminal.id)}
|
||||||
|
className={activeTab === terminal.id ? "active-tab" : ""}
|
||||||
|
>
|
||||||
|
{terminal.title}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="terminal-wrapper">
|
||||||
|
{terminals.map((terminal) => (
|
||||||
|
<div
|
||||||
|
key={terminal.id}
|
||||||
|
className={`terminal-tab ${terminal.id === activeTab ? "active" : ""}`}
|
||||||
|
>
|
||||||
|
{terminal.hostConfig && <NewTerminal hostConfig={terminal.hostConfig} />}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className={`add-host ${isAddHostHidden ? "hidden" : ""}`}>
|
||||||
|
<h2>Add Host</h2>
|
||||||
|
<button onClick={() => setIsAddHostHidden(true)} className="add-host-close">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Host Name"
|
||||||
|
value={form.name}
|
||||||
|
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Host IP"
|
||||||
|
value={form.ip}
|
||||||
|
onChange={(e) => setForm({ ...form, ip: e.target.value })}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Host User"
|
||||||
|
value={form.user}
|
||||||
|
onChange={(e) => setForm({ ...form, user: e.target.value })}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Host Password"
|
||||||
|
value={form.password}
|
||||||
|
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="Host Port"
|
||||||
|
value={form.port}
|
||||||
|
onChange={(e) => setForm({ ...form, port: e.target.value })}
|
||||||
|
/>
|
||||||
|
<button onClick={handleAddHost}>Add</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
125
src/Terminal.jsx
Normal file
125
src/Terminal.jsx
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
// Terminal.jsx
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import { Terminal } from "@xterm/xterm";
|
||||||
|
import { FitAddon } from "@xterm/addon-fit";
|
||||||
|
import "@xterm/xterm/css/xterm.css";
|
||||||
|
import io from "socket.io-client";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
|
export function NewTerminal({ hostConfig }) {
|
||||||
|
const terminalRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!hostConfig || !terminalRef.current) return;
|
||||||
|
|
||||||
|
// Initialize terminal
|
||||||
|
const terminal = new Terminal({
|
||||||
|
cursorBlink: true,
|
||||||
|
cursorStyle: "block",
|
||||||
|
theme: { background: "#1a1a1a", foreground: "#ffffff", cursor: "#ffffff" },
|
||||||
|
fontSize: 14,
|
||||||
|
scrollback: 1000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize FitAddon for auto-sizing
|
||||||
|
const fitAddon = new FitAddon();
|
||||||
|
terminal.loadAddon(fitAddon);
|
||||||
|
|
||||||
|
// Open terminal in the container
|
||||||
|
terminal.open(terminalRef.current);
|
||||||
|
|
||||||
|
// Apply fit after terminal is fully initialized
|
||||||
|
setTimeout(() => {
|
||||||
|
fitAddon.fit();
|
||||||
|
resizeTerminal();
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
// Focus on terminal and reset layout
|
||||||
|
terminal.focus();
|
||||||
|
|
||||||
|
// Resize terminal to fit the container
|
||||||
|
const resizeTerminal = () => {
|
||||||
|
const terminalContainer = terminalRef.current;
|
||||||
|
const sidebarWidth = 14 * 16; // Sidebar width in pixels
|
||||||
|
const topbarHeight = 96; // Topbar height in pixels
|
||||||
|
const availableWidth = window.innerWidth - sidebarWidth;
|
||||||
|
const availableHeight = window.innerHeight - topbarHeight;
|
||||||
|
|
||||||
|
terminalContainer.style.width = `${availableWidth}px`;
|
||||||
|
terminalContainer.style.height = `${availableHeight}px`;
|
||||||
|
|
||||||
|
fitAddon.fit();
|
||||||
|
const { cols, rows } = terminal;
|
||||||
|
|
||||||
|
// Emit new terminal size to the backend
|
||||||
|
if (socket) {
|
||||||
|
socket.emit("resize", { cols, rows });
|
||||||
|
console.log(`Terminal resized: cols=${cols}, rows=${rows}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle window resize events
|
||||||
|
window.addEventListener("resize", resizeTerminal);
|
||||||
|
|
||||||
|
// Write initial connection message
|
||||||
|
terminal.write("\r\n*** Connecting to backend ***\r\n");
|
||||||
|
|
||||||
|
// Create the socket connection with the provided hostConfig
|
||||||
|
const socket = io("http://localhost:8081");
|
||||||
|
|
||||||
|
// Emit the hostConfig to the server to start SSH connection
|
||||||
|
fitAddon.fit();
|
||||||
|
const { cols, rows } = terminal;
|
||||||
|
socket.emit("connectToHost", cols, rows, hostConfig);
|
||||||
|
|
||||||
|
// Handle socket connection events
|
||||||
|
socket.on("connect", () => {
|
||||||
|
terminal.write("\r\n*** Connected to backend ***\r\n");
|
||||||
|
|
||||||
|
// Send keystrokes to the backend
|
||||||
|
terminal.onKey((key) => {
|
||||||
|
socket.emit("data", key.key);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Display output from the backend
|
||||||
|
socket.on("data", (data) => {
|
||||||
|
terminal.write(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle disconnection
|
||||||
|
socket.on("disconnect", () => {
|
||||||
|
terminal.write("\r\n*** Disconnected from backend ***\r\n");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cleanup on component unmount
|
||||||
|
return () => {
|
||||||
|
terminal.dispose();
|
||||||
|
window.removeEventListener("resize", resizeTerminal);
|
||||||
|
socket.disconnect();
|
||||||
|
};
|
||||||
|
}, [hostConfig]); // Re-run effect when hostConfig changes
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={terminalRef}
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
minHeight: "400px",
|
||||||
|
overflow: "hidden",
|
||||||
|
textAlign: "left",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prop validation using PropTypes
|
||||||
|
NewTerminal.propTypes = {
|
||||||
|
hostConfig: PropTypes.shape({
|
||||||
|
ip: PropTypes.string.isRequired,
|
||||||
|
user: PropTypes.string.isRequired,
|
||||||
|
password: PropTypes.string.isRequired,
|
||||||
|
port: PropTypes.string.isRequired,
|
||||||
|
}).isRequired,
|
||||||
|
};
|
||||||
7
src/backend/entrypoint.sh
Normal file
7
src/backend/entrypoint.sh
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
# Start the backend server
|
||||||
|
node /src/backend/server.cjs &
|
||||||
|
|
||||||
|
# Start nginx in the foreground
|
||||||
|
exec nginx -g 'daemon off;'
|
||||||
103
src/backend/server.cjs
Normal file
103
src/backend/server.cjs
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
const http = require("http");
|
||||||
|
const socketIo = require("socket.io");
|
||||||
|
const SSHClient = require("ssh2").Client;
|
||||||
|
|
||||||
|
const server = http.createServer();
|
||||||
|
const io = socketIo(server, {
|
||||||
|
cors: {
|
||||||
|
origin: "*",
|
||||||
|
methods: ["GET", "POST"],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
io.on("connection", (socket) => {
|
||||||
|
console.log("New socket connection established");
|
||||||
|
|
||||||
|
let currentCols = 80;
|
||||||
|
let currentRows = 24;
|
||||||
|
let stream = null;
|
||||||
|
|
||||||
|
socket.on("resize", ({ cols, rows }) => {
|
||||||
|
console.log(`Terminal resized: cols=${cols}, rows=${rows}`);
|
||||||
|
currentCols = cols;
|
||||||
|
currentRows = rows;
|
||||||
|
if (stream && stream.setWindow) {
|
||||||
|
stream.setWindow(rows, cols, rows * 100, cols * 100);
|
||||||
|
console.log(`SSH terminal resized to: cols=${cols}, rows=${rows}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on("connectToHost", (cols, rows, hostConfig) => {
|
||||||
|
if (!hostConfig || !hostConfig.ip || !hostConfig.user || !hostConfig.password || !hostConfig.port) {
|
||||||
|
console.error("Invalid hostConfig received:", hostConfig);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Received hostConfig:", hostConfig);
|
||||||
|
const { ip, port, user, password } = hostConfig;
|
||||||
|
|
||||||
|
if (!ip || !port || !user || !password) {
|
||||||
|
socket.emit("data", "\r\n*** Missing required connection data ***\r\n");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Preparing to connect to host:", 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(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"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
stream = newStream;
|
||||||
|
|
||||||
|
stream.setWindow(currentRows, currentCols, currentRows * 100, currentCols * 100);
|
||||||
|
|
||||||
|
socket.on("data", function (data) {
|
||||||
|
stream.write(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
stream
|
||||||
|
.on("data", function (d) {
|
||||||
|
socket.emit("data", d.toString("binary"));
|
||||||
|
})
|
||||||
|
.on("close", function () {
|
||||||
|
console.log("SSH stream closed");
|
||||||
|
conn.end();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.on("close", function () {
|
||||||
|
console.log("SSH connection closed");
|
||||||
|
socket.emit("data", "\r\n*** SSH CONNECTION CLOSED ***\r\n");
|
||||||
|
})
|
||||||
|
.on("error", function (err) {
|
||||||
|
console.error("SSH connection error:", err);
|
||||||
|
socket.emit(
|
||||||
|
"data",
|
||||||
|
"\r\n*** SSH CONNECTION ERROR: " + err.message + " ***\r\n"
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.connect({
|
||||||
|
host: ip,
|
||||||
|
port: port,
|
||||||
|
username: user,
|
||||||
|
password: password,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on("disconnect", () => {
|
||||||
|
console.log("Client disconnected");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
server.listen(8081, () => {
|
||||||
|
console.log("Server is running on port 8081");
|
||||||
|
});
|
||||||
79
src/index.css
Normal file
79
src/index.css
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #1a1a1a;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.jsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user