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