MrTerm: SSH/SFTP/RDP-Client im Termius-Stil (Electron)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
dist/
|
||||
@@ -0,0 +1,27 @@
|
||||
# MrTerm
|
||||
|
||||
SSH-, SFTP- und RDP-Client im Stil von Termius – Electron + xterm.js + ssh2. Läuft auf Windows und Arch/CachyOS.
|
||||
|
||||
## Funktionen
|
||||
- **Hosts**: Gruppen (verschachtelt), Tags, Farben, Suche, Quick Connect (`user@host:port`, `rdp://host`)
|
||||
- **SSH-Terminal** in Tabs: Passwort, Schlüssel, SSH-Agent (Windows OpenSSH / `SSH_AUTH_SOCK`), Keyboard-Interactive/2FA, Jump-Hosts (ProxyJump-Ketten), Startbefehl, Env-Variablen, Suche, Zoom, 7 Farbschemata
|
||||
- **SFTP**: Dual-Pane (lokal ↔ remote), Drag & Drop, Ordner rekursiv, Umbenennen, Löschen, chmod, Fortschrittsanzeige
|
||||
- **RDP**: Windows → `mstsc` (Anmeldedaten temporär via `cmdkey`), Linux → FreeRDP (`xfreerdp3`/`sdl-freerdp3`/`wlfreerdp3`, Passwort über stdin)
|
||||
- **Keychain**: Ed25519/ECDSA/RSA generieren, importieren, Public Key kopieren
|
||||
- **Port-Forwarding**: lokal (-L), remote (-R), dynamisch/SOCKS5 (-D)
|
||||
- **Snippets**, **Known Hosts** (TOFU, Warnung bei geändertem Schlüssel), **Verlauf**, `~/.ssh/config`-Import, Backup Export/Import
|
||||
- **Vault verschlüsselt** über das OS (Windows DPAPI, Linux libsecret/KWallet)
|
||||
- Befehlspalette `Strg+K`, `Strg+W`, `Strg+Tab`, `Strg+1..9`, `Strg+Shift+C/V/F`
|
||||
|
||||
## Entwicklung
|
||||
```bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
> In VS Code-Terminals ggf. vorher `ELECTRON_RUN_AS_NODE` entfernen.
|
||||
|
||||
## Pakete bauen
|
||||
- Windows (auf Windows): `npm run dist:win` → Installer + Portable in `dist/`
|
||||
- Arch/CachyOS (auf Linux): `npm run dist:linux` → AppImage + `.pacman`-Paket; installieren mit `sudo pacman -U dist/mrterm-*.pacman`
|
||||
|
||||
Abhängigkeiten unter Arch/CachyOS: `sudo pacman -S freerdp gnome-keyring` (oder `kwallet` unter KDE) für RDP bzw. Vault-Verschlüsselung.
|
||||
Generated
+3712
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "mrterm",
|
||||
"productName": "MrTerm",
|
||||
"version": "0.1.0",
|
||||
"description": "Moderner SSH-, SFTP- und RDP-Client",
|
||||
"main": "src/main/main.js",
|
||||
"author": "MrBlake",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"dist:win": "electron-builder --win",
|
||||
"dist:linux": "electron-builder --linux"
|
||||
},
|
||||
"build": {
|
||||
"appId": "de.mrterm.app",
|
||||
"productName": "MrTerm",
|
||||
"files": [
|
||||
"src/**/*",
|
||||
"node_modules/**/*",
|
||||
"package.json"
|
||||
],
|
||||
"win": {
|
||||
"target": [
|
||||
"nsis",
|
||||
"portable"
|
||||
]
|
||||
},
|
||||
"linux": {
|
||||
"target": [
|
||||
"AppImage",
|
||||
"pacman"
|
||||
],
|
||||
"category": "Network",
|
||||
"maintainer": "Louis"
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@xterm/addon-fit": "^0.11.0",
|
||||
"@xterm/addon-search": "^0.16.0",
|
||||
"@xterm/addon-web-links": "^0.12.0",
|
||||
"@xterm/xterm": "^6.0.0",
|
||||
"ssh2": "^1.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron": "^44.4.5",
|
||||
"electron-builder": "^26.15.3"
|
||||
},
|
||||
"allowScripts": {
|
||||
"electron@44.4.5": true,
|
||||
"electron-winstaller@5.4.0": true,
|
||||
"ssh2@1.17.0": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
const { app, BrowserWindow, ipcMain, dialog, shell, clipboard, Menu } = require('electron');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const os = require('os');
|
||||
const crypto = require('crypto');
|
||||
const { utils: sshUtils } = require('ssh2');
|
||||
const { Store } = require('./store');
|
||||
const { SshManager } = require('./ssh');
|
||||
const rdp = require('./rdp');
|
||||
|
||||
let win;
|
||||
const store = new Store();
|
||||
const pendingSecrets = new Map();
|
||||
|
||||
function send(channel, ...args) {
|
||||
if (win && !win.isDestroyed()) win.webContents.send(channel, ...args);
|
||||
}
|
||||
|
||||
async function confirmHostKey(target, fingerprint, known) {
|
||||
if (process.env.MRTERM_SMOKE) return true;
|
||||
const changed = !!known;
|
||||
const r = await dialog.showMessageBox(win, {
|
||||
type: changed ? 'warning' : 'question',
|
||||
title: changed ? 'Host-Schlüssel hat sich geändert!' : 'Unbekannter Host',
|
||||
message: changed
|
||||
? `WARNUNG: Der Host-Schlüssel von ${target.host}:${target.port} hat sich geändert. Das kann auf einen Man-in-the-Middle-Angriff hindeuten.`
|
||||
: `Die Echtheit von ${target.host}:${target.port} kann nicht bestätigt werden.`,
|
||||
detail: `Fingerprint:\n${fingerprint}${changed ? `\n\nBisher gespeichert:\n${known.fingerprint}` : ''}`,
|
||||
buttons: [changed ? 'Trotzdem verbinden & ersetzen' : 'Vertrauen & verbinden', 'Abbrechen'],
|
||||
defaultId: changed ? 1 : 0,
|
||||
cancelId: 1,
|
||||
});
|
||||
return r.response === 0;
|
||||
}
|
||||
|
||||
function askSecret(sessionId, req) {
|
||||
return new Promise((resolve) => {
|
||||
const reqId = crypto.randomUUID();
|
||||
pendingSecrets.set(reqId, resolve);
|
||||
send('secret:request', { reqId, sessionId, ...req });
|
||||
});
|
||||
}
|
||||
|
||||
const ssh = new SshManager(store, confirmHostKey, askSecret);
|
||||
|
||||
function createWindow() {
|
||||
win = new BrowserWindow({
|
||||
width: 1360,
|
||||
height: 860,
|
||||
minWidth: 900,
|
||||
minHeight: 560,
|
||||
backgroundColor: '#14161d',
|
||||
frame: false,
|
||||
titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'hidden',
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, '..', 'preload.js'),
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
sandbox: true,
|
||||
},
|
||||
});
|
||||
Menu.setApplicationMenu(null);
|
||||
win.loadFile(path.join(__dirname, '..', 'renderer', 'index.html'));
|
||||
win.on('maximize', () => send('win:state', true));
|
||||
win.on('unmaximize', () => send('win:state', false));
|
||||
win.webContents.setWindowOpenHandler(({ url }) => { shell.openExternal(url); return { action: 'deny' }; });
|
||||
}
|
||||
|
||||
function handle(channel, fn) {
|
||||
ipcMain.handle(channel, async (_e, ...args) => {
|
||||
try { return { ok: true, value: await fn(...args) }; }
|
||||
catch (e) { return { ok: false, error: e.message || String(e) }; }
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Fenster ----------
|
||||
ipcMain.on('win:min', () => win.minimize());
|
||||
ipcMain.on('win:max', () => (win.isMaximized() ? win.unmaximize() : win.maximize()));
|
||||
ipcMain.on('win:close', () => win.close());
|
||||
|
||||
// ---------- Vault ----------
|
||||
handle('vault:get', () => ({ ...store.get(), encrypted: store.encrypted, platform: process.platform }));
|
||||
handle('vault:upsert', (col, item) => store.upsert(col, item));
|
||||
handle('vault:remove', (col, id) => store.remove(col, id));
|
||||
handle('vault:settings', (s) => store.setSettings(s));
|
||||
handle('vault:forgetHost', (id) => { delete store.get().knownHosts[id]; store.save(); });
|
||||
handle('vault:export', async () => {
|
||||
const r = await dialog.showSaveDialog(win, { defaultPath: 'mrterm-backup.json', filters: [{ name: 'JSON', extensions: ['json'] }] });
|
||||
if (r.canceled) return false;
|
||||
fs.writeFileSync(r.filePath, JSON.stringify(store.get(), null, 2), { mode: 0o600 });
|
||||
return r.filePath;
|
||||
});
|
||||
handle('vault:import', async () => {
|
||||
const r = await dialog.showOpenDialog(win, { filters: [{ name: 'JSON', extensions: ['json'] }], properties: ['openFile'] });
|
||||
if (r.canceled) return false;
|
||||
const data = JSON.parse(fs.readFileSync(r.filePaths[0], 'utf8'));
|
||||
for (const col of ['groups', 'hosts', 'keys', 'snippets', 'forwards'])
|
||||
for (const item of data[col] || []) store.upsert(col, item);
|
||||
return true;
|
||||
});
|
||||
|
||||
// Import aus ~/.ssh/config
|
||||
handle('vault:importSshConfig', () => {
|
||||
const file = path.join(os.homedir(), '.ssh', 'config');
|
||||
if (!fs.existsSync(file)) throw new Error('~/.ssh/config nicht gefunden');
|
||||
const entries = [];
|
||||
let cur = null;
|
||||
for (const raw of fs.readFileSync(file, 'utf8').split(/\r?\n/)) {
|
||||
const line = raw.trim();
|
||||
if (!line || line.startsWith('#')) continue;
|
||||
const [k, ...rest] = line.split(/\s+/);
|
||||
const v = rest.join(' ');
|
||||
if (k.toLowerCase() === 'host') {
|
||||
cur = v.includes('*') ? null : { label: v, address: v, port: 22, protocol: 'ssh' };
|
||||
if (cur) entries.push(cur);
|
||||
} else if (cur) {
|
||||
const key = k.toLowerCase();
|
||||
if (key === 'hostname') cur.address = v;
|
||||
else if (key === 'user') cur.username = v;
|
||||
else if (key === 'port') cur.port = Number(v);
|
||||
else if (key === 'identityfile') cur._identity = v.replace(/^~/, os.homedir());
|
||||
}
|
||||
}
|
||||
let n = 0;
|
||||
for (const e of entries) {
|
||||
if (store.get().hosts.some((h) => h.address === e.address && h.username === e.username && Number(h.port) === e.port)) continue;
|
||||
if (e._identity && fs.existsSync(e._identity)) {
|
||||
const pk = fs.readFileSync(e._identity, 'utf8');
|
||||
let key = store.get().keys.find((k) => k.privateKey === pk);
|
||||
if (!key) key = store.upsert('keys', { label: path.basename(e._identity), privateKey: pk, publicKey: readPub(e._identity) });
|
||||
e.keyId = key.id;
|
||||
}
|
||||
delete e._identity;
|
||||
store.upsert('hosts', e);
|
||||
n++;
|
||||
}
|
||||
return n;
|
||||
});
|
||||
|
||||
function readPub(p) {
|
||||
try { return fs.readFileSync(p + '.pub', 'utf8').trim(); } catch { return ''; }
|
||||
}
|
||||
|
||||
// ---------- Schlüssel ----------
|
||||
handle('key:generate', ({ type, bits, comment, passphrase }) => {
|
||||
const opts = { comment: comment || `${os.userInfo().username}@mrterm` };
|
||||
if (type === 'rsa') opts.bits = Number(bits) || 4096;
|
||||
if (passphrase) { opts.passphrase = passphrase; opts.cipher = 'aes256-cbc'; }
|
||||
const k = sshUtils.generateKeyPairSync(type === 'rsa' ? 'rsa' : type === 'ecdsa' ? 'ecdsa' : 'ed25519', opts);
|
||||
return { privateKey: k.private, publicKey: k.public };
|
||||
});
|
||||
handle('key:parse', ({ privateKey, passphrase }) => {
|
||||
const k = sshUtils.parseKey(privateKey, passphrase || undefined);
|
||||
if (k instanceof Error) throw k;
|
||||
const key = Array.isArray(k) ? k[0] : k;
|
||||
return { type: key.type, publicKey: `${key.type} ${key.getPublicSSH().toString('base64')} ${key.comment || ''}`.trim() };
|
||||
});
|
||||
handle('key:pickFile', async () => {
|
||||
const r = await dialog.showOpenDialog(win, { defaultPath: path.join(os.homedir(), '.ssh'), properties: ['openFile', 'showHiddenFiles'] });
|
||||
if (r.canceled) return null;
|
||||
return { name: path.basename(r.filePaths[0]), content: fs.readFileSync(r.filePaths[0], 'utf8'), publicKey: readPub(r.filePaths[0]) };
|
||||
});
|
||||
|
||||
// ---------- SSH-Terminal ----------
|
||||
function hostWithOverrides(hostOrId) {
|
||||
if (typeof hostOrId === 'string') {
|
||||
const h = store.resolveHost(hostOrId);
|
||||
if (!h) throw new Error('Host nicht gefunden');
|
||||
return h;
|
||||
}
|
||||
return hostOrId; // Quick-Connect: temporärer Host
|
||||
}
|
||||
|
||||
handle('ssh:open', async (sessionId, hostRef, size) => {
|
||||
const host = hostWithOverrides(hostRef);
|
||||
if (host.id) store.addHistory({ hostId: host.id, at: Date.now() });
|
||||
await ssh.openShell(sessionId, host, size, (type, payload) => send('ssh:event', sessionId, type, payload));
|
||||
return true;
|
||||
});
|
||||
ipcMain.on('ssh:write', (_e, id, data) => ssh.write(id, data));
|
||||
ipcMain.on('ssh:resize', (_e, id, cols, rows) => ssh.resize(id, cols, rows));
|
||||
ipcMain.on('ssh:close', (_e, id) => ssh.close(id));
|
||||
ipcMain.on('secret:reply', (_e, reqId, value) => {
|
||||
pendingSecrets.get(reqId)?.(value);
|
||||
pendingSecrets.delete(reqId);
|
||||
});
|
||||
|
||||
// ---------- SFTP ----------
|
||||
handle('sftp:open', (sessionId, hostRef) => ssh.openSftp(sessionId, hostWithOverrides(hostRef)));
|
||||
handle('sftp:list', (id, dir) => ssh.sftpList(id, dir));
|
||||
handle('sftp:op', (id, op, a, b) => ssh.sftpOp(id, op, a, b));
|
||||
handle('sftp:transfer', async (id, dir, localPath, remotePath, transferId) => {
|
||||
let last = 0;
|
||||
await ssh.transfer(id, dir, localPath, remotePath, (done, total) => {
|
||||
const now = Date.now();
|
||||
if (now - last > 100 || done === total) { last = now; send('sftp:progress', transferId, done, total, dir === 'download' ? remotePath : localPath); }
|
||||
});
|
||||
return true;
|
||||
});
|
||||
handle('sftp:close', (id) => ssh.close(id));
|
||||
|
||||
// Lokales Dateisystem (für den Dual-Pane-SFTP-Browser)
|
||||
handle('local:home', () => os.homedir());
|
||||
handle('local:list', (dir) => fs.readdirSync(dir, { withFileTypes: true }).map((d) => {
|
||||
let st = {};
|
||||
try { st = fs.statSync(path.join(dir, d.name)); } catch {}
|
||||
return { name: d.name, isDir: d.isDirectory() || (d.isSymbolicLink() && st.isDirectory?.()), size: st.size || 0, mtime: st.mtimeMs || 0 };
|
||||
}));
|
||||
handle('local:join', (...p) => path.join(...p));
|
||||
handle('local:parent', (p) => path.dirname(p));
|
||||
handle('local:roots', () => {
|
||||
if (process.platform !== 'win32') return ['/'];
|
||||
return 'CDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map((l) => `${l}:\\`).filter((d) => fs.existsSync(d));
|
||||
});
|
||||
handle('local:op', (op, a, b) => {
|
||||
if (op === 'mkdir') return fs.mkdirSync(a, { recursive: true });
|
||||
if (op === 'rename') return fs.renameSync(a, b);
|
||||
if (op === 'delete') return shell.trashItem(a);
|
||||
if (op === 'open') return shell.openPath(a);
|
||||
});
|
||||
|
||||
// ---------- Port-Forwarding ----------
|
||||
handle('fw:start', (id) => {
|
||||
const fw = store.get().forwards.find((f) => f.id === id);
|
||||
if (!fw) throw new Error('Regel nicht gefunden');
|
||||
return ssh.startForward(fw, (ev) => send('fw:event', id, ev));
|
||||
});
|
||||
handle('fw:stop', (id) => ssh.stopForward(id));
|
||||
handle('fw:active', () => ssh.activeForwards());
|
||||
|
||||
// ---------- RDP ----------
|
||||
handle('rdp:detect', () => rdp.detect(store.get().settings));
|
||||
handle('rdp:launch', (hostId) => {
|
||||
const host = hostWithOverrides(hostId);
|
||||
if (host.id) store.addHistory({ hostId: host.id, at: Date.now() });
|
||||
const r = rdp.launch(host, store.get().settings);
|
||||
if (r.process) {
|
||||
r.process.on('exit', (code) => { if (code && code !== 0 && code !== 12) send('toast', `RDP beendet (Code ${code}): ${r.getErr().split('\n').filter(Boolean).slice(-1)[0] || ''}`, 'error'); });
|
||||
r.process.on('error', (e) => send('toast', 'RDP-Start fehlgeschlagen: ' + e.message, 'error'));
|
||||
}
|
||||
return r.client;
|
||||
});
|
||||
|
||||
handle('clipboard:write', (t) => clipboard.writeText(t));
|
||||
handle('clipboard:read', () => clipboard.readText());
|
||||
handle('shell:open', (url) => shell.openExternal(url));
|
||||
|
||||
app.whenReady().then(() => {
|
||||
store.load();
|
||||
createWindow();
|
||||
});
|
||||
app.on('window-all-closed', () => { ssh.closeAll(); app.quit(); });
|
||||
|
||||
// Smoke-Test: MRTERM_SMOKE=<pfad.png> startet, loggt Renderer-Meldungen, speichert einen Screenshot und beendet.
|
||||
if (process.env.MRTERM_SMOKE) {
|
||||
app.whenReady().then(() => {
|
||||
win.webContents.on('console-message', (e) => console.log('[renderer]', e.level, e.message));
|
||||
setTimeout(async () => {
|
||||
if (process.env.MRTERM_SMOKE_JS) await win.webContents.executeJavaScript(process.env.MRTERM_SMOKE_JS).catch((e) => console.log('js error', e));
|
||||
setTimeout(async () => {
|
||||
fs.writeFileSync(process.env.MRTERM_SMOKE, (await win.webContents.capturePage()).toPNG());
|
||||
app.quit();
|
||||
}, 1500);
|
||||
}, 2500);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
// RDP: Windows nutzt das eingebaute mstsc.exe, Linux (Arch/CachyOS) FreeRDP (xfreerdp3 / xfreerdp / wlfreerdp).
|
||||
const { spawn, execFile, execFileSync } = require('child_process');
|
||||
const fs = require('fs');
|
||||
const os = require('os');
|
||||
const path = require('path');
|
||||
|
||||
function which(bin) {
|
||||
try {
|
||||
execFileSync(process.platform === 'win32' ? 'where' : 'which', [bin], { stdio: 'ignore' });
|
||||
return true;
|
||||
} catch { return false; }
|
||||
}
|
||||
|
||||
function linuxClient(pref) {
|
||||
const candidates = pref && pref !== 'auto'
|
||||
? [pref]
|
||||
: process.env.WAYLAND_DISPLAY
|
||||
? ['sdl-freerdp3', 'wlfreerdp3', 'xfreerdp3', 'wlfreerdp', 'xfreerdp']
|
||||
: ['xfreerdp3', 'sdl-freerdp3', 'xfreerdp'];
|
||||
return candidates.find(which);
|
||||
}
|
||||
|
||||
function detect(settings) {
|
||||
if (process.platform === 'win32') return { available: true, client: 'mstsc' };
|
||||
const c = linuxClient(settings.rdpClientLinux);
|
||||
return c ? { available: true, client: c } : { available: false, hint: 'sudo pacman -S freerdp' };
|
||||
}
|
||||
|
||||
function launch(host, settings) {
|
||||
const port = Number(host.port) || 3389;
|
||||
const user = host.domain ? `${host.domain}\\${host.username || ''}` : host.username || '';
|
||||
|
||||
if (process.platform === 'win32') {
|
||||
const target = port === 3389 ? host.address : `${host.address}:${port}`;
|
||||
const lines = [
|
||||
`full address:s:${target}`,
|
||||
user && `username:s:${user}`,
|
||||
`screen mode id:i:${host.rdpFullscreen ? 2 : 1}`,
|
||||
host.rdpWidth && `desktopwidth:i:${host.rdpWidth}`,
|
||||
host.rdpHeight && `desktopheight:i:${host.rdpHeight}`,
|
||||
'dynamic resolution:i:1',
|
||||
'smart sizing:i:1',
|
||||
`redirectclipboard:i:${host.rdpClipboard === false ? 0 : 1}`,
|
||||
`redirectdrives:i:${host.rdpDrives ? 1 : 0}`,
|
||||
`audiomode:i:${host.rdpAudio === false ? 2 : 0}`,
|
||||
'prompt for credentials:i:0',
|
||||
'authentication level:i:2',
|
||||
].filter(Boolean);
|
||||
const file = path.join(os.tmpdir(), `mrterm-${host.id}.rdp`);
|
||||
fs.writeFileSync(file, lines.join('\r\n'), 'utf16le');
|
||||
const run = () => {
|
||||
const p = spawn('mstsc.exe', [file], { detached: true, stdio: 'ignore' });
|
||||
p.unref();
|
||||
};
|
||||
if (host.password && user) {
|
||||
// Anmeldedaten temporär im Windows-Anmeldeinformationsspeicher ablegen, danach wieder entfernen.
|
||||
execFile('cmdkey', [`/generic:TERMSRV/${host.address}`, `/user:${user}`, `/pass:${host.password}`], () => {
|
||||
run();
|
||||
setTimeout(() => execFile('cmdkey', [`/delete:TERMSRV/${host.address}`], () => {}), 20000);
|
||||
});
|
||||
} else run();
|
||||
return { client: 'mstsc' };
|
||||
}
|
||||
|
||||
const client = linuxClient(settings.rdpClientLinux);
|
||||
if (!client) throw new Error('Kein FreeRDP gefunden. Installieren mit: sudo pacman -S freerdp');
|
||||
const args = [`/v:${host.address}:${port}`, '/cert:tofu', '+auto-reconnect'];
|
||||
if (host.username) args.push(`/u:${host.username}`);
|
||||
if (host.domain) args.push(`/d:${host.domain}`);
|
||||
if (host.rdpFullscreen) args.push('/f');
|
||||
else if (host.rdpWidth && host.rdpHeight) args.push(`/size:${host.rdpWidth}x${host.rdpHeight}`);
|
||||
else args.push('/dynamic-resolution');
|
||||
if (host.rdpClipboard !== false) args.push('+clipboard');
|
||||
if (host.rdpDrives) args.push(`/drive:home,${os.homedir()}`);
|
||||
if (host.rdpAudio !== false) args.push('/sound');
|
||||
args.push(`/title:${host.label || host.address}`);
|
||||
// Passwort über stdin statt Kommandozeile (nicht in `ps` sichtbar)
|
||||
if (host.password) args.push('/from-stdin');
|
||||
const p = spawn(client, args, { detached: true, stdio: [host.password ? 'pipe' : 'ignore', 'ignore', 'pipe'] });
|
||||
if (host.password) { p.stdin.write(host.password + '\n'); p.stdin.end(); }
|
||||
let err = '';
|
||||
p.stderr.on('data', (d) => { err += d; });
|
||||
p.unref();
|
||||
return { client, process: p, getErr: () => err };
|
||||
}
|
||||
|
||||
module.exports = { detect, launch };
|
||||
+324
@@ -0,0 +1,324 @@
|
||||
// SSH-Verbindungen: Terminal-Shells, SFTP, Port-Forwarding (L/R/D), Jump-Hosts.
|
||||
const { Client } = require('ssh2');
|
||||
const net = require('net');
|
||||
const fs = require('fs');
|
||||
const os = require('os');
|
||||
const path = require('path');
|
||||
const crypto = require('crypto');
|
||||
|
||||
function defaultAgent() {
|
||||
if (process.env.SSH_AUTH_SOCK) return process.env.SSH_AUTH_SOCK;
|
||||
if (process.platform === 'win32') return '\\\\.\\pipe\\openssh-ssh-agent';
|
||||
return undefined;
|
||||
}
|
||||
|
||||
class SshManager {
|
||||
/**
|
||||
* @param {import('./store').Store} store
|
||||
* @param {(host, fingerprint, known) => Promise<boolean>} confirmHostKey
|
||||
* @param {(sessionId, prompt) => Promise<string|null>} askSecret
|
||||
*/
|
||||
constructor(store, confirmHostKey, askSecret) {
|
||||
this.store = store;
|
||||
this.confirmHostKey = confirmHostKey;
|
||||
this.askSecret = askSecret;
|
||||
this.sessions = new Map(); // id -> { conn, stream, sftp, jumps[] }
|
||||
this.forwards = new Map(); // forwardId -> { conn, server, jumps }
|
||||
}
|
||||
|
||||
buildAuth(host, sessionId) {
|
||||
const cfg = {
|
||||
host: host.address,
|
||||
port: Number(host.port) || 22,
|
||||
username: host.username || os.userInfo().username,
|
||||
readyTimeout: 20000,
|
||||
keepaliveInterval: (this.store.get().settings.keepAlive || 0) * 1000,
|
||||
tryKeyboard: true,
|
||||
};
|
||||
if (host.keyId) {
|
||||
const key = this.store.resolveKey(host.keyId);
|
||||
if (key) {
|
||||
cfg.privateKey = key.privateKey;
|
||||
if (key.passphrase) cfg.passphrase = key.passphrase;
|
||||
}
|
||||
}
|
||||
if (host.password) cfg.password = host.password;
|
||||
if (host.useAgent !== false) cfg.agent = defaultAgent();
|
||||
|
||||
cfg.hostVerifier = (keyBuf, verify) => {
|
||||
const fp = 'SHA256:' + crypto.createHash('sha256').update(keyBuf).digest('base64').replace(/=+$/, '');
|
||||
const id = `[${cfg.host}]:${cfg.port}`;
|
||||
const known = this.store.get().knownHosts[id];
|
||||
if (known && known.fingerprint === fp) return verify(true);
|
||||
this.confirmHostKey({ id, host: cfg.host, port: cfg.port }, fp, known).then((ok) => {
|
||||
if (ok) {
|
||||
this.store.get().knownHosts[id] = { fingerprint: fp, addedAt: Date.now() };
|
||||
this.store.save();
|
||||
}
|
||||
verify(ok);
|
||||
});
|
||||
};
|
||||
return cfg;
|
||||
}
|
||||
|
||||
// Baut eine Verbindung auf, optional über eine Kette von Jump-Hosts.
|
||||
async connect(host, sessionId, onStatus = () => {}) {
|
||||
const chain = [];
|
||||
let jumpId = host.jumpHostId;
|
||||
const seen = new Set([host.id]);
|
||||
while (jumpId && !seen.has(jumpId)) {
|
||||
seen.add(jumpId);
|
||||
const j = this.store.resolveHost(jumpId);
|
||||
if (!j) break;
|
||||
chain.unshift(j);
|
||||
jumpId = j.jumpHostId;
|
||||
}
|
||||
const opened = [];
|
||||
let sock;
|
||||
try {
|
||||
for (const hop of [...chain, host]) {
|
||||
onStatus(`Verbinde mit ${hop.label || hop.address} (${hop.address}:${hop.port || 22}) …`);
|
||||
const conn = await this.openClient(hop, sessionId, sock);
|
||||
opened.push(conn);
|
||||
if (hop !== host) {
|
||||
const next = hop === chain[chain.length - 1] ? host : chain[chain.indexOf(hop) + 1];
|
||||
sock = await new Promise((res, rej) =>
|
||||
conn.forwardOut('127.0.0.1', 0, next.address, Number(next.port) || 22, (err, s) => (err ? rej(err) : res(s))));
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
opened.forEach((c) => c.end());
|
||||
throw e;
|
||||
}
|
||||
const conn = opened.pop();
|
||||
return { conn, jumps: opened };
|
||||
}
|
||||
|
||||
openClient(host, sessionId, sock) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const conn = new Client();
|
||||
const cfg = this.buildAuth(host, sessionId);
|
||||
if (sock) { cfg.sock = sock; delete cfg.host; }
|
||||
let askedPassword = false;
|
||||
conn.on('keyboard-interactive', async (name, instr, lang, prompts, finish) => {
|
||||
const answers = [];
|
||||
for (const p of prompts) {
|
||||
if (!p.echo && host.password && !askedPassword) { answers.push(host.password); askedPassword = true; continue; }
|
||||
const a = await this.askSecret(sessionId, { title: name || 'Anmeldung', prompt: p.prompt, echo: p.echo, host: host.label || host.address });
|
||||
if (a == null) return finish([]);
|
||||
answers.push(a);
|
||||
}
|
||||
finish(answers);
|
||||
});
|
||||
conn.once('ready', () => resolve(conn));
|
||||
conn.once('error', async (err) => {
|
||||
// Kein Passwort hinterlegt und alle Methoden schlugen fehl -> nach Passwort fragen und neu versuchen
|
||||
if (err.level === 'client-authentication' && !host.password && !host._retried) {
|
||||
const pw = await this.askSecret(sessionId, { title: 'Passwort', prompt: `Passwort für ${cfg.username}@${host.address}`, echo: false, host: host.label || host.address });
|
||||
if (pw != null) {
|
||||
this.openClient({ ...host, password: pw, _retried: true }, sessionId, sock).then(resolve, reject);
|
||||
return;
|
||||
}
|
||||
}
|
||||
reject(err);
|
||||
});
|
||||
try { conn.connect(cfg); } catch (e) { reject(e); }
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Terminal ----------
|
||||
async openShell(sessionId, host, { cols, rows }, send) {
|
||||
const { conn, jumps } = await this.connect(host, sessionId, (m) => send('status', m));
|
||||
const sess = { conn, jumps, host };
|
||||
this.sessions.set(sessionId, sess);
|
||||
conn.on('close', () => { send('closed'); this.cleanup(sessionId); });
|
||||
conn.on('error', (e) => send('error', e.message));
|
||||
|
||||
const env = host.env ? Object.fromEntries(host.env.split('\n').filter(Boolean).map((l) => l.split('=').map((s) => s.trim()))) : undefined;
|
||||
await new Promise((res, rej) => {
|
||||
conn.shell({ term: 'xterm-256color', cols, rows }, { env }, (err, stream) => {
|
||||
if (err) return rej(err);
|
||||
sess.stream = stream;
|
||||
stream.on('data', (d) => send('data', d.toString('utf8')));
|
||||
stream.stderr.on('data', (d) => send('data', d.toString('utf8')));
|
||||
stream.on('close', () => conn.end());
|
||||
if (host.startupCommand) stream.write(host.startupCommand + '\n');
|
||||
res();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
write(id, data) { this.sessions.get(id)?.stream?.write(data); }
|
||||
resize(id, cols, rows) { this.sessions.get(id)?.stream?.setWindow(rows, cols, 0, 0); }
|
||||
|
||||
close(id) {
|
||||
const s = this.sessions.get(id);
|
||||
if (!s) return;
|
||||
try { s.stream?.end(); } catch {}
|
||||
try { s.conn.end(); } catch {}
|
||||
this.cleanup(id);
|
||||
}
|
||||
|
||||
cleanup(id) {
|
||||
const s = this.sessions.get(id);
|
||||
if (!s) return;
|
||||
s.jumps?.forEach((c) => { try { c.end(); } catch {} });
|
||||
this.sessions.delete(id);
|
||||
}
|
||||
|
||||
// ---------- SFTP ----------
|
||||
async openSftp(sessionId, host) {
|
||||
const { conn, jumps } = await this.connect(host, sessionId);
|
||||
const sftp = await new Promise((res, rej) => conn.sftp((e, s) => (e ? rej(e) : res(s))));
|
||||
this.sessions.set(sessionId, { conn, jumps, sftp, host });
|
||||
conn.on('close', () => this.cleanup(sessionId));
|
||||
const home = await new Promise((res) => sftp.realpath('.', (e, p) => res(e ? '/' : p)));
|
||||
return { home };
|
||||
}
|
||||
|
||||
sftpOf(id) {
|
||||
const s = this.sessions.get(id);
|
||||
if (!s?.sftp) throw new Error('SFTP-Sitzung nicht gefunden');
|
||||
return s.sftp;
|
||||
}
|
||||
|
||||
sftpList(id, dir) {
|
||||
const sftp = this.sftpOf(id);
|
||||
return new Promise((res, rej) => sftp.readdir(dir, (err, list) => {
|
||||
if (err) return rej(err);
|
||||
res(list.map((f) => ({
|
||||
name: f.filename,
|
||||
size: f.attrs.size,
|
||||
mtime: f.attrs.mtime * 1000,
|
||||
isDir: (f.attrs.mode & 0o170000) === 0o040000,
|
||||
isLink: (f.attrs.mode & 0o170000) === 0o120000,
|
||||
mode: f.attrs.mode,
|
||||
})));
|
||||
}));
|
||||
}
|
||||
|
||||
sftpOp(id, op, a, b) {
|
||||
const sftp = this.sftpOf(id);
|
||||
const cb = (res, rej) => (err, v) => (err ? rej(err) : res(v));
|
||||
return new Promise((res, rej) => {
|
||||
switch (op) {
|
||||
case 'mkdir': return sftp.mkdir(a, cb(res, rej));
|
||||
case 'rename': return sftp.rename(a, b, cb(res, rej));
|
||||
case 'unlink': return sftp.unlink(a, cb(res, rej));
|
||||
case 'rmdir': return this.sftpRmRf(sftp, a).then(res, rej);
|
||||
case 'realpath': return sftp.realpath(a, cb(res, rej));
|
||||
case 'chmod': return sftp.chmod(a, b, cb(res, rej));
|
||||
default: rej(new Error('Unbekannte Operation ' + op));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async sftpRmRf(sftp, dir) {
|
||||
const list = await new Promise((res, rej) => sftp.readdir(dir, (e, l) => (e ? rej(e) : res(l))));
|
||||
for (const f of list) {
|
||||
const p = path.posix.join(dir, f.filename);
|
||||
if ((f.attrs.mode & 0o170000) === 0o040000) await this.sftpRmRf(sftp, p);
|
||||
else await new Promise((res, rej) => sftp.unlink(p, (e) => (e ? rej(e) : res())));
|
||||
}
|
||||
await new Promise((res, rej) => sftp.rmdir(dir, (e) => (e ? rej(e) : res())));
|
||||
}
|
||||
|
||||
async transfer(id, direction, localPath, remotePath, progress) {
|
||||
const sftp = this.sftpOf(id);
|
||||
const step = (done, _chunk, total) => progress(done, total);
|
||||
if (direction === 'download') {
|
||||
const st = await new Promise((res, rej) => sftp.stat(remotePath, (e, s) => (e ? rej(e) : res(s))));
|
||||
if ((st.mode & 0o170000) === 0o040000) {
|
||||
fs.mkdirSync(localPath, { recursive: true });
|
||||
for (const f of await this.sftpList(id, remotePath))
|
||||
await this.transfer(id, direction, path.join(localPath, f.name), path.posix.join(remotePath, f.name), progress);
|
||||
return;
|
||||
}
|
||||
await new Promise((res, rej) => sftp.fastGet(remotePath, localPath, { step }, (e) => (e ? rej(e) : res())));
|
||||
} else {
|
||||
const st = fs.statSync(localPath);
|
||||
if (st.isDirectory()) {
|
||||
await new Promise((res) => sftp.mkdir(remotePath, () => res()));
|
||||
for (const name of fs.readdirSync(localPath))
|
||||
await this.transfer(id, direction, path.join(localPath, name), path.posix.join(remotePath, name), progress);
|
||||
return;
|
||||
}
|
||||
await new Promise((res, rej) => sftp.fastPut(localPath, remotePath, { step }, (e) => (e ? rej(e) : res())));
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Port-Forwarding ----------
|
||||
async startForward(fw, onEvent) {
|
||||
const host = this.store.resolveHost(fw.hostId);
|
||||
if (!host) throw new Error('Host nicht gefunden');
|
||||
const { conn, jumps } = await this.connect(host, 'fw-' + fw.id);
|
||||
const entry = { conn, jumps };
|
||||
this.forwards.set(fw.id, entry);
|
||||
conn.on('close', () => { this.stopForward(fw.id); onEvent('stopped'); });
|
||||
const bindHost = fw.bindAddress || '127.0.0.1';
|
||||
|
||||
if (fw.type === 'remote') {
|
||||
await new Promise((res, rej) => conn.forwardIn(bindHost, Number(fw.bindPort), (e) => (e ? rej(e) : res())));
|
||||
conn.on('tcp connection', (info, accept) => {
|
||||
const ch = accept();
|
||||
const sock = net.connect(Number(fw.destPort), fw.destHost || '127.0.0.1');
|
||||
ch.pipe(sock).pipe(ch);
|
||||
sock.on('error', () => ch.close());
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const server = net.createServer((sock) => {
|
||||
if (fw.type === 'dynamic') return this.socks5(conn, sock);
|
||||
conn.forwardOut(sock.remoteAddress || '127.0.0.1', sock.remotePort || 0, fw.destHost, Number(fw.destPort), (err, ch) => {
|
||||
if (err) return sock.destroy();
|
||||
sock.pipe(ch).pipe(sock);
|
||||
sock.on('error', () => ch.close());
|
||||
});
|
||||
});
|
||||
entry.server = server;
|
||||
await new Promise((res, rej) => { server.once('error', rej); server.listen(Number(fw.bindPort), bindHost, res); });
|
||||
}
|
||||
|
||||
// Minimaler SOCKS5-Server (CONNECT, ohne Auth) für dynamisches Forwarding
|
||||
socks5(conn, sock) {
|
||||
sock.once('data', (hello) => {
|
||||
if (hello[0] !== 5) return sock.destroy();
|
||||
sock.write(Buffer.from([5, 0]));
|
||||
sock.once('data', (req) => {
|
||||
if (req[1] !== 1) { sock.end(Buffer.from([5, 7, 0, 1, 0, 0, 0, 0, 0, 0])); return; }
|
||||
let host, off;
|
||||
if (req[3] === 1) { host = [...req.slice(4, 8)].join('.'); off = 8; }
|
||||
else if (req[3] === 3) { const l = req[4]; host = req.slice(5, 5 + l).toString(); off = 5 + l; }
|
||||
else if (req[3] === 4) { host = req.slice(4, 20).toString('hex').match(/.{4}/g).join(':'); off = 20; }
|
||||
else return sock.destroy();
|
||||
const port = req.readUInt16BE(off);
|
||||
conn.forwardOut('127.0.0.1', 0, host, port, (err, ch) => {
|
||||
if (err) { sock.end(Buffer.from([5, 5, 0, 1, 0, 0, 0, 0, 0, 0])); return; }
|
||||
sock.write(Buffer.from([5, 0, 0, 1, 0, 0, 0, 0, 0, 0]));
|
||||
sock.pipe(ch).pipe(sock);
|
||||
sock.on('error', () => ch.close());
|
||||
});
|
||||
});
|
||||
});
|
||||
sock.on('error', () => {});
|
||||
}
|
||||
|
||||
stopForward(id) {
|
||||
const f = this.forwards.get(id);
|
||||
if (!f) return;
|
||||
this.forwards.delete(id);
|
||||
try { f.server?.close(); } catch {}
|
||||
try { f.conn.end(); } catch {}
|
||||
f.jumps?.forEach((c) => { try { c.end(); } catch {} });
|
||||
}
|
||||
|
||||
activeForwards() { return [...this.forwards.keys()]; }
|
||||
|
||||
closeAll() {
|
||||
for (const id of [...this.sessions.keys()]) this.close(id);
|
||||
for (const id of [...this.forwards.keys()]) this.stopForward(id);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = { SshManager };
|
||||
@@ -0,0 +1,107 @@
|
||||
// Persistenter Vault: Hosts, Keys, Snippets, Forwards, Settings.
|
||||
// Wird mit Electron safeStorage (DPAPI unter Windows, libsecret/kwallet unter Linux) verschlüsselt.
|
||||
const { app, safeStorage } = require('electron');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const crypto = require('crypto');
|
||||
|
||||
const DEFAULTS = {
|
||||
version: 1,
|
||||
groups: [],
|
||||
hosts: [],
|
||||
keys: [],
|
||||
snippets: [],
|
||||
forwards: [],
|
||||
knownHosts: {},
|
||||
history: [],
|
||||
settings: {
|
||||
terminalTheme: 'mrterm',
|
||||
fontFamily: 'Cascadia Code, JetBrains Mono, Fira Code, Consolas, monospace',
|
||||
fontSize: 14,
|
||||
cursorStyle: 'block',
|
||||
cursorBlink: true,
|
||||
scrollback: 10000,
|
||||
copyOnSelect: true,
|
||||
keepAlive: 30,
|
||||
rdpClientLinux: 'auto',
|
||||
},
|
||||
};
|
||||
|
||||
class Store {
|
||||
constructor() {
|
||||
this.dir = app.getPath('userData');
|
||||
this.file = path.join(this.dir, 'vault.dat');
|
||||
this.data = structuredClone(DEFAULTS);
|
||||
this.encrypted = false;
|
||||
}
|
||||
|
||||
canEncrypt() {
|
||||
try {
|
||||
if (!safeStorage.isEncryptionAvailable()) return false;
|
||||
// Unter Linux ohne Keyring fällt Electron auf "basic_text" zurück – das ist keine echte Verschlüsselung.
|
||||
if (process.platform === 'linux' && safeStorage.getSelectedStorageBackend?.() === 'basic_text') return false;
|
||||
return true;
|
||||
} catch { return false; }
|
||||
}
|
||||
|
||||
load() {
|
||||
fs.mkdirSync(this.dir, { recursive: true });
|
||||
if (!fs.existsSync(this.file)) { this.save(); return this.data; }
|
||||
const raw = fs.readFileSync(this.file);
|
||||
let json;
|
||||
if (raw.slice(0, 4).toString() === 'ENC1') {
|
||||
json = safeStorage.decryptString(raw.slice(4));
|
||||
this.encrypted = true;
|
||||
} else {
|
||||
json = raw.toString('utf8');
|
||||
}
|
||||
const parsed = JSON.parse(json);
|
||||
this.data = { ...structuredClone(DEFAULTS), ...parsed, settings: { ...DEFAULTS.settings, ...(parsed.settings || {}) } };
|
||||
return this.data;
|
||||
}
|
||||
|
||||
save() {
|
||||
const json = JSON.stringify(this.data, null, 2);
|
||||
const tmp = this.file + '.tmp';
|
||||
if (this.canEncrypt()) {
|
||||
fs.writeFileSync(tmp, Buffer.concat([Buffer.from('ENC1'), safeStorage.encryptString(json)]));
|
||||
this.encrypted = true;
|
||||
} else {
|
||||
fs.writeFileSync(tmp, json, { mode: 0o600 });
|
||||
this.encrypted = false;
|
||||
}
|
||||
fs.renameSync(tmp, this.file);
|
||||
}
|
||||
|
||||
get() { return this.data; }
|
||||
|
||||
// Generisches Upsert für Collections (hosts, groups, keys, snippets, forwards)
|
||||
upsert(collection, item) {
|
||||
const list = this.data[collection];
|
||||
if (!Array.isArray(list)) throw new Error('Unbekannte Collection: ' + collection);
|
||||
if (!item.id) item.id = crypto.randomUUID();
|
||||
const i = list.findIndex((x) => x.id === item.id);
|
||||
if (i >= 0) list[i] = { ...list[i], ...item, updatedAt: Date.now() };
|
||||
else list.push({ ...item, createdAt: Date.now(), updatedAt: Date.now() });
|
||||
this.save();
|
||||
return item;
|
||||
}
|
||||
|
||||
remove(collection, id) {
|
||||
this.data[collection] = this.data[collection].filter((x) => x.id !== id);
|
||||
if (collection === 'groups') this.data.hosts.forEach((h) => { if (h.groupId === id) h.groupId = null; });
|
||||
this.save();
|
||||
}
|
||||
|
||||
setSettings(s) { this.data.settings = { ...this.data.settings, ...s }; this.save(); }
|
||||
|
||||
addHistory(entry) {
|
||||
this.data.history = [entry, ...this.data.history.filter((h) => h.hostId !== entry.hostId)].slice(0, 30);
|
||||
this.save();
|
||||
}
|
||||
|
||||
resolveHost(id) { return this.data.hosts.find((h) => h.id === id); }
|
||||
resolveKey(id) { return this.data.keys.find((k) => k.id === id); }
|
||||
}
|
||||
|
||||
module.exports = { Store };
|
||||
@@ -0,0 +1,30 @@
|
||||
const { contextBridge, ipcRenderer } = require('electron');
|
||||
|
||||
async function call(channel, ...args) {
|
||||
const r = await ipcRenderer.invoke(channel, ...args);
|
||||
if (!r.ok) throw new Error(r.error);
|
||||
return r.value;
|
||||
}
|
||||
|
||||
function on(channel, fn) {
|
||||
const h = (_e, ...a) => fn(...a);
|
||||
ipcRenderer.on(channel, h);
|
||||
return () => ipcRenderer.removeListener(channel, h);
|
||||
}
|
||||
|
||||
contextBridge.exposeInMainWorld('api', {
|
||||
platform: process.platform,
|
||||
call,
|
||||
on,
|
||||
win: {
|
||||
min: () => ipcRenderer.send('win:min'),
|
||||
max: () => ipcRenderer.send('win:max'),
|
||||
close: () => ipcRenderer.send('win:close'),
|
||||
},
|
||||
ssh: {
|
||||
write: (id, d) => ipcRenderer.send('ssh:write', id, d),
|
||||
resize: (id, c, r) => ipcRenderer.send('ssh:resize', id, c, r),
|
||||
close: (id) => ipcRenderer.send('ssh:close', id),
|
||||
},
|
||||
replySecret: (reqId, v) => ipcRenderer.send('secret:reply', reqId, v),
|
||||
});
|
||||
+1184
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:" />
|
||||
<title>MrTerm</title>
|
||||
<link rel="stylesheet" href="../../node_modules/@xterm/xterm/css/xterm.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header id="titlebar">
|
||||
<div class="brand"><span class="logo">>_</span>MrTerm</div>
|
||||
<div id="tabs">
|
||||
<button class="tab home active" data-tab="home" title="Vault">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z M4 9h16" /></svg><span>Vault</span>
|
||||
</button>
|
||||
</div>
|
||||
<button id="newTabBtn" class="icon-btn" title="Quick Connect (Strg+K)">+</button>
|
||||
<div class="drag-fill"></div>
|
||||
<div class="win-ctrls">
|
||||
<button id="winMin" title="Minimieren"><svg viewBox="0 0 12 12"><path d="M2 6h8"/></svg></button>
|
||||
<button id="winMax" title="Maximieren"><svg viewBox="0 0 12 12"><rect x="2" y="2" width="8" height="8"/></svg></button>
|
||||
<button id="winClose" class="close" title="Schließen"><svg viewBox="0 0 12 12"><path d="M2 2l8 8M10 2l-8 8"/></svg></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="body">
|
||||
<nav id="sidebar">
|
||||
<button class="nav active" data-view="hosts"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="2"/><rect x="3" y="13" width="18" height="7" rx="2"/><circle cx="7" cy="7.5" r="1"/><circle cx="7" cy="16.5" r="1"/></svg><span>Hosts</span></button>
|
||||
<button class="nav" data-view="sftp"><svg viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span>SFTP</span></button>
|
||||
<button class="nav" data-view="keys"><svg viewBox="0 0 24 24"><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M16 7l3 3M14 9l2 2"/></svg><span>Keychain</span></button>
|
||||
<button class="nav" data-view="forwards"><svg viewBox="0 0 24 24"><path d="M4 8h13l-3-3M20 16H7l3 3"/></svg><span>Port Forwarding</span></button>
|
||||
<button class="nav" data-view="snippets"><svg viewBox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg><span>Snippets</span></button>
|
||||
<button class="nav" data-view="known"><svg viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg><span>Known Hosts</span></button>
|
||||
<button class="nav" data-view="history"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>Verlauf</span></button>
|
||||
<div class="spacer"></div>
|
||||
<div id="vaultBadge" class="vault-badge"></div>
|
||||
<button class="nav" data-view="settings"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg><span>Einstellungen</span></button>
|
||||
</nav>
|
||||
|
||||
<main id="main">
|
||||
<section id="homeView" class="page active"></section>
|
||||
<div id="sessions"></div>
|
||||
</main>
|
||||
|
||||
<aside id="drawer" class="drawer"></aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modalRoot"></div>
|
||||
<div id="toasts"></div>
|
||||
|
||||
<script src="../../node_modules/@xterm/xterm/lib/xterm.js"></script>
|
||||
<script src="../../node_modules/@xterm/addon-fit/lib/addon-fit.js"></script>
|
||||
<script src="../../node_modules/@xterm/addon-web-links/lib/addon-web-links.js"></script>
|
||||
<script src="../../node_modules/@xterm/addon-search/lib/addon-search.js"></script>
|
||||
<script src="themes.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,252 @@
|
||||
:root {
|
||||
--bg: #13151c;
|
||||
--bg-2: #181b24;
|
||||
--panel: #1c1f2a;
|
||||
--card: #212533;
|
||||
--card-hover: #282d3d;
|
||||
--border: #2b3040;
|
||||
--text: #e6e8ef;
|
||||
--muted: #8b91a5;
|
||||
--faint: #5d6377;
|
||||
--accent: #6e7bff;
|
||||
--accent-2: #8b95ff;
|
||||
--green: #3ecf8e;
|
||||
--red: #ff5f6d;
|
||||
--orange: #ffb454;
|
||||
--radius: 10px;
|
||||
--titlebar: 42px;
|
||||
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
|
||||
button { font: inherit; color: inherit; cursor: pointer; }
|
||||
input, select, textarea { font: inherit; color: var(--text); }
|
||||
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-thumb { background: #2f3445; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
#app { display: flex; flex-direction: column; height: 100vh; }
|
||||
|
||||
/* ---------- Titlebar & Tabs ---------- */
|
||||
#titlebar { height: var(--titlebar); display: flex; align-items: center; background: #0f1117; -webkit-app-region: drag; border-bottom: 1px solid #1f2330; flex: none; }
|
||||
.brand { width: 212px; padding-left: 16px; font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; gap: 10px; flex: none; }
|
||||
.logo { background: linear-gradient(135deg, var(--accent), #b36bff); color: white; font-family: monospace; font-size: 11px; padding: 3px 6px; border-radius: 6px; }
|
||||
#tabs { display: flex; gap: 4px; height: 100%; align-items: flex-end; overflow-x: auto; min-width: 0; -webkit-app-region: no-drag; }
|
||||
#tabs::-webkit-scrollbar { height: 0; }
|
||||
.tab { -webkit-app-region: no-drag; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; border: none; background: transparent; border-radius: 8px 8px 0 0; color: var(--muted); max-width: 220px; min-width: 110px; white-space: nowrap; position: relative; }
|
||||
.tab.home { min-width: 0; }
|
||||
.tab span { overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
|
||||
.tab:hover { background: #1a1d27; color: var(--text); }
|
||||
.tab.active { background: var(--bg); color: var(--text); }
|
||||
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
|
||||
.tab .dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
|
||||
.tab .dot.err { background: var(--red); }
|
||||
.tab .dot.wait { background: var(--orange); animation: pulse 1s infinite; }
|
||||
.tab .x { opacity: 0; border: none; background: none; padding: 2px; border-radius: 4px; color: var(--muted); display: flex; }
|
||||
.tab:hover .x, .tab.active .x { opacity: 1; }
|
||||
.tab .x:hover { background: #ffffff18; color: var(--text); }
|
||||
.tab .x svg { width: 12px; height: 12px; }
|
||||
@keyframes pulse { 50% { opacity: .35; } }
|
||||
.icon-btn { -webkit-app-region: no-drag; border: none; background: transparent; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; font-size: 18px; margin-left: 4px; flex: none; }
|
||||
.icon-btn:hover { background: #1f2330; color: var(--text); }
|
||||
.drag-fill { flex: 1; min-width: 40px; height: 100%; }
|
||||
.win-ctrls { display: flex; height: 100%; -webkit-app-region: no-drag; }
|
||||
.win-ctrls button { width: 46px; border: none; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; }
|
||||
.win-ctrls button svg { width: 12px; height: 12px; stroke-width: 1.2; }
|
||||
.win-ctrls button:hover { background: #ffffff12; color: var(--text); }
|
||||
.win-ctrls button.close:hover { background: #e81123; color: white; }
|
||||
|
||||
/* ---------- Layout ---------- */
|
||||
#body { flex: 1; display: flex; min-height: 0; position: relative; }
|
||||
#sidebar { width: 212px; background: #0f1117; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid #1f2330; flex: none; }
|
||||
#sidebar .spacer { flex: 1; }
|
||||
.nav { display: flex; align-items: center; gap: 12px; border: none; background: none; padding: 9px 12px; border-radius: 8px; color: var(--muted); text-align: left; font-weight: 500; }
|
||||
.nav:hover { background: #1a1d27; color: var(--text); }
|
||||
.nav.active { background: #1f2233; color: var(--text); }
|
||||
.nav.active svg { color: var(--accent-2); }
|
||||
.vault-badge { font-size: 11px; color: var(--faint); padding: 8px 12px; display: flex; gap: 6px; align-items: center; }
|
||||
.vault-badge svg { width: 13px; height: 13px; }
|
||||
body.in-session #sidebar { display: none; }
|
||||
#main { flex: 1; min-width: 0; position: relative; background: var(--bg); }
|
||||
.page { position: absolute; inset: 0; overflow: auto; display: none; }
|
||||
.page.active { display: block; }
|
||||
#sessions > .session { position: absolute; inset: 0; display: none; flex-direction: column; }
|
||||
#sessions > .session.active { display: flex; }
|
||||
|
||||
/* ---------- Header / Toolbar ---------- */
|
||||
.toolbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 18px 28px 14px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid transparent; }
|
||||
.search { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; height: 40px; }
|
||||
.search:focus-within { border-color: var(--accent); }
|
||||
.search input { flex: 1; background: none; border: none; outline: none; height: 100%; font-size: 14px; }
|
||||
.search svg { color: var(--faint); }
|
||||
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); font-weight: 600; white-space: nowrap; }
|
||||
.btn:hover { background: var(--card-hover); }
|
||||
.btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
|
||||
.btn.primary:hover { background: var(--accent-2); }
|
||||
.btn.danger { color: var(--red); }
|
||||
.btn.danger:hover { background: #ff5f6d1a; }
|
||||
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
|
||||
.btn.ghost:hover { background: var(--card); color: var(--text); }
|
||||
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
|
||||
.btn svg { width: 16px; height: 16px; }
|
||||
.content { padding: 4px 28px 40px; }
|
||||
.section-title { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin: 18px 0 10px; }
|
||||
.section-title .count { background: var(--card); padding: 1px 7px; border-radius: 10px; font-size: 11px; }
|
||||
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.chip { border: 1px solid var(--border); background: transparent; color: var(--muted); padding: 4px 10px; border-radius: 20px; font-size: 12px; }
|
||||
.chip.active, .chip:hover { background: #6e7bff22; border-color: var(--accent); color: var(--text); }
|
||||
|
||||
/* ---------- Cards ---------- */
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
|
||||
.card { background: var(--card); border: 1px solid transparent; border-radius: var(--radius); padding: 14px; display: flex; gap: 12px; align-items: center; cursor: pointer; position: relative; transition: background .12s, border-color .12s, transform .12s; user-select: none; min-width: 0; }
|
||||
.card:hover { background: var(--card-hover); border-color: var(--border); }
|
||||
.card.selected { border-color: var(--accent); }
|
||||
.card .meta { min-width: 0; flex: 1; }
|
||||
.card .title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.card .sub { color: var(--muted); font-size: 12px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.card .actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
|
||||
.card:hover .actions { opacity: 1; }
|
||||
.card .actions button { border: none; background: none; color: var(--muted); padding: 6px; border-radius: 6px; display: flex; }
|
||||
.card .actions button:hover { background: #ffffff14; color: var(--text); }
|
||||
.card .actions svg { width: 16px; height: 16px; }
|
||||
.avatar { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: white; flex: none; position: relative; }
|
||||
.avatar svg { width: 20px; height: 20px; }
|
||||
.avatar .proto { position: absolute; right: -4px; bottom: -4px; font-size: 8px; background: #0f1117; color: var(--muted); padding: 1px 3px; border-radius: 4px; border: 1px solid var(--border); font-weight: 700; }
|
||||
.group-card .avatar { background: #2a2f45; color: var(--accent-2); }
|
||||
.tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
|
||||
.tag { font-size: 10px; background: #ffffff0f; color: var(--muted); padding: 1px 6px; border-radius: 4px; }
|
||||
.empty { text-align: center; color: var(--muted); padding: 70px 20px; }
|
||||
.empty .big { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; background: var(--card); display: flex; align-items: center; justify-content: center; color: var(--accent-2); }
|
||||
.empty .big svg { width: 30px; height: 30px; }
|
||||
.empty h3 { color: var(--text); margin: 0 0 6px; font-size: 16px; }
|
||||
.empty p { margin: 0 0 18px; }
|
||||
.breadcrumb { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-top: 8px; }
|
||||
.breadcrumb a { color: var(--accent-2); cursor: pointer; }
|
||||
.list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.list .card { padding: 11px 14px; }
|
||||
.mono { font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace; font-size: 12px; }
|
||||
.status-pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #ffffff10; color: var(--muted); }
|
||||
.status-pill.on { background: #3ecf8e22; color: var(--green); }
|
||||
|
||||
/* ---------- Drawer (Editor) ---------- */
|
||||
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 400px; background: var(--bg-2); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .18s ease; z-index: 20; display: flex; flex-direction: column; box-shadow: -20px 0 40px #0006; }
|
||||
.drawer.open { transform: translateX(0); }
|
||||
.drawer header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
|
||||
.drawer header h2 { margin: 0; font-size: 15px; }
|
||||
.drawer .form { flex: 1; overflow: auto; padding: 16px 20px 20px; }
|
||||
.drawer footer { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
|
||||
.drawer footer .grow { flex: 1; }
|
||||
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
|
||||
.field label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
|
||||
.field input, .field select, .field textarea { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; outline: none; width: 100%; }
|
||||
.field textarea { resize: vertical; min-height: 80px; font-family: 'Cascadia Code', Consolas, monospace; font-size: 12px; }
|
||||
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
|
||||
.field .hint { font-size: 11px; color: var(--faint); }
|
||||
.row { display: flex; gap: 10px; }
|
||||
.row > .field { flex: 1; }
|
||||
.row > .field.small { flex: 0 0 90px; }
|
||||
.form h4 { margin: 20px 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent-2); }
|
||||
.seg { display: flex; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 3px; margin-bottom: 14px; }
|
||||
.seg button { flex: 1; border: none; background: none; padding: 7px; border-radius: 6px; color: var(--muted); font-weight: 600; }
|
||||
.seg button.active { background: var(--accent); color: white; }
|
||||
.check { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }
|
||||
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
|
||||
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.colors button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; }
|
||||
.colors button.active { border-color: white; }
|
||||
.pw-wrap { position: relative; }
|
||||
.pw-wrap input { padding-right: 36px; }
|
||||
.pw-wrap button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--muted); display: flex; padding: 4px; }
|
||||
|
||||
/* ---------- Terminal-Session ---------- */
|
||||
.session .sbar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--bg-2); border-bottom: 1px solid var(--border); flex: none; }
|
||||
.session .sbar .info { color: var(--muted); font-size: 12px; margin-right: auto; display: flex; gap: 8px; align-items: center; overflow: hidden; white-space: nowrap; }
|
||||
.session .term-wrap { flex: 1; position: relative; min-height: 0; display: flex; }
|
||||
.session .term { flex: 1; padding: 8px 0 4px 10px; min-width: 0; }
|
||||
.session .term .xterm { height: 100%; }
|
||||
.session .overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: #13151ce6; z-index: 3; }
|
||||
.session .overlay .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
|
||||
.session .overlay .msg { color: var(--muted); max-width: 520px; text-align: center; }
|
||||
.session .overlay .msg.err { color: var(--red); }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.snip-panel { width: 260px; border-left: 1px solid var(--border); background: var(--bg-2); display: none; flex-direction: column; flex: none; }
|
||||
.snip-panel.open { display: flex; }
|
||||
.snip-panel .head { padding: 12px; font-weight: 600; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
|
||||
.snip-panel .items { overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
|
||||
.snip-panel .it { background: var(--card); border-radius: 8px; padding: 9px 10px; cursor: pointer; }
|
||||
.snip-panel .it:hover { background: var(--card-hover); }
|
||||
.snip-panel .it .mono { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
|
||||
.findbar { position: absolute; top: 8px; right: 24px; z-index: 4; display: none; gap: 4px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px #0008; }
|
||||
.findbar.open { display: flex; }
|
||||
.findbar input { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; outline: none; width: 200px; }
|
||||
|
||||
/* ---------- SFTP ---------- */
|
||||
.sftp { display: flex; flex: 1; min-height: 0; gap: 1px; background: var(--border); }
|
||||
.pane { flex: 1; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
|
||||
.pane .phead { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
|
||||
.pane .phead .title { font-weight: 600; margin-right: 6px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
|
||||
.pane .phead input { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; outline: none; min-width: 60px; font-family: 'Cascadia Code', Consolas, monospace; font-size: 12px; }
|
||||
.pane .phead select { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 4px; }
|
||||
.pane .files { flex: 1; overflow: auto; }
|
||||
.pane.dragover .files { outline: 2px dashed var(--accent); outline-offset: -6px; background: #6e7bff0d; }
|
||||
.pane table { width: 100%; border-collapse: collapse; }
|
||||
.pane th { position: sticky; top: 0; background: var(--bg); text-align: left; font-size: 11px; color: var(--faint); font-weight: 600; padding: 7px 10px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border); cursor: pointer; }
|
||||
.pane td { padding: 6px 10px; white-space: nowrap; border-bottom: 1px solid #1c1f29; }
|
||||
.pane td.name { display: flex; align-items: center; gap: 8px; max-width: 0; width: 100%; }
|
||||
.pane td.name span { overflow: hidden; text-overflow: ellipsis; }
|
||||
.pane td.num { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.pane td.date { color: var(--muted); }
|
||||
.pane tr:hover td { background: #ffffff06; }
|
||||
.pane tr.sel td { background: #6e7bff26; }
|
||||
.pane .ico-dir { color: #6ea8ff; }
|
||||
.pane .ico-file { color: var(--faint); }
|
||||
.pane-empty { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: var(--muted); }
|
||||
.host-picker { width: min(520px, 90%); max-height: 60%; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
|
||||
.transfers { max-height: 150px; overflow: auto; border-top: 1px solid var(--border); background: var(--bg-2); flex: none; }
|
||||
.transfers:empty { display: none; }
|
||||
.transfer { display: flex; gap: 10px; align-items: center; padding: 6px 12px; font-size: 12px; }
|
||||
.transfer .bar { flex: 0 0 180px; height: 5px; background: var(--card); border-radius: 4px; overflow: hidden; }
|
||||
.transfer .bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .1s; }
|
||||
.transfer.done .bar i { background: var(--green); }
|
||||
.transfer.fail .bar i { background: var(--red); }
|
||||
.transfer .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ---------- Modals, Palette, Menüs, Toasts ---------- */
|
||||
.modal-bg { position: fixed; inset: 0; background: #0009; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 100; animation: fade .12s; }
|
||||
@keyframes fade { from { opacity: 0; } }
|
||||
.modal { width: min(460px, 92vw); background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 30px 80px #000a; overflow: hidden; }
|
||||
.modal .mbody { padding: 20px; }
|
||||
.modal h3 { margin: 0 0 6px; font-size: 16px; }
|
||||
.modal p { color: var(--muted); margin: 0 0 16px; }
|
||||
.modal .mfoot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--bg); }
|
||||
.palette { width: min(620px, 92vw); }
|
||||
.palette .pin { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
|
||||
.palette .pin input { flex: 1; background: none; border: none; outline: none; height: 54px; font-size: 16px; }
|
||||
.palette .res { max-height: 50vh; overflow: auto; padding: 8px; }
|
||||
.palette .item { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
|
||||
.palette .item .avatar { width: 32px; height: 32px; font-size: 13px; border-radius: 8px; }
|
||||
.palette .item.active { background: #6e7bff26; }
|
||||
.palette .item .k { margin-left: auto; color: var(--faint); font-size: 11px; }
|
||||
.palette .grp { font-size: 11px; color: var(--faint); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: .5px; }
|
||||
.ctx { position: fixed; z-index: 200; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 5px; min-width: 190px; box-shadow: 0 14px 40px #000a; }
|
||||
.ctx button { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; padding: 7px 10px; border-radius: 6px; text-align: left; }
|
||||
.ctx button:hover { background: #6e7bff33; }
|
||||
.ctx button.danger { color: var(--red); }
|
||||
.ctx hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
|
||||
.ctx svg { width: 15px; height: 15px; color: var(--muted); }
|
||||
#toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 300; }
|
||||
.toast { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 8px; box-shadow: 0 10px 30px #0008; max-width: 380px; animation: slide .18s; }
|
||||
.toast.error { border-left-color: var(--red); }
|
||||
.toast.ok { border-left-color: var(--green); }
|
||||
@keyframes slide { from { transform: translateY(10px); opacity: 0; } }
|
||||
.settings-grid { max-width: 720px; }
|
||||
.settings-card { background: var(--card); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
|
||||
.settings-card h3 { margin: 0 0 14px; font-size: 14px; }
|
||||
.theme-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
|
||||
.theme-prev { border-radius: 8px; padding: 10px; font-family: 'Cascadia Code', Consolas, monospace; font-size: 11px; cursor: pointer; border: 2px solid transparent; line-height: 1.5; }
|
||||
.theme-prev.active { border-color: var(--accent); }
|
||||
.theme-prev .nm { font-family: 'Segoe UI', sans-serif; font-weight: 600; margin-bottom: 4px; }
|
||||
kbd { background: var(--card); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: inherit; }
|
||||
@@ -0,0 +1,24 @@
|
||||
// Terminal-Farbschemata
|
||||
window.TERM_THEMES = {
|
||||
mrterm: { name: 'MrTerm', background: '#13151c', foreground: '#e6e8ef', cursor: '#8b95ff', cursorAccent: '#13151c', selectionBackground: '#6e7bff55',
|
||||
black: '#1c1f2a', red: '#ff5f6d', green: '#3ecf8e', yellow: '#ffcb6b', blue: '#6e9bff', magenta: '#c792ea', cyan: '#56d6d6', white: '#d0d4e0',
|
||||
brightBlack: '#5d6377', brightRed: '#ff7a86', brightGreen: '#5fe0a5', brightYellow: '#ffd98a', brightBlue: '#8fb3ff', brightMagenta: '#d7aef2', brightCyan: '#7fe6e6', brightWhite: '#ffffff' },
|
||||
dracula: { name: 'Dracula', background: '#282a36', foreground: '#f8f8f2', cursor: '#f8f8f2', selectionBackground: '#44475a',
|
||||
black: '#21222c', red: '#ff5555', green: '#50fa7b', yellow: '#f1fa8c', blue: '#bd93f9', magenta: '#ff79c6', cyan: '#8be9fd', white: '#f8f8f2',
|
||||
brightBlack: '#6272a4', brightRed: '#ff6e6e', brightGreen: '#69ff94', brightYellow: '#ffffa5', brightBlue: '#d6acff', brightMagenta: '#ff92df', brightCyan: '#a4ffff', brightWhite: '#ffffff' },
|
||||
nord: { name: 'Nord', background: '#2e3440', foreground: '#d8dee9', cursor: '#d8dee9', selectionBackground: '#434c5e',
|
||||
black: '#3b4252', red: '#bf616a', green: '#a3be8c', yellow: '#ebcb8b', blue: '#81a1c1', magenta: '#b48ead', cyan: '#88c0d0', white: '#e5e9f0',
|
||||
brightBlack: '#4c566a', brightRed: '#bf616a', brightGreen: '#a3be8c', brightYellow: '#ebcb8b', brightBlue: '#81a1c1', brightMagenta: '#b48ead', brightCyan: '#8fbcbb', brightWhite: '#eceff4' },
|
||||
monokai: { name: 'Monokai', background: '#272822', foreground: '#f8f8f2', cursor: '#f8f8f0', selectionBackground: '#49483e',
|
||||
black: '#272822', red: '#f92672', green: '#a6e22e', yellow: '#f4bf75', blue: '#66d9ef', magenta: '#ae81ff', cyan: '#a1efe4', white: '#f8f8f2',
|
||||
brightBlack: '#75715e', brightRed: '#f92672', brightGreen: '#a6e22e', brightYellow: '#f4bf75', brightBlue: '#66d9ef', brightMagenta: '#ae81ff', brightCyan: '#a1efe4', brightWhite: '#f9f8f5' },
|
||||
solarized: { name: 'Solarized Dark', background: '#002b36', foreground: '#839496', cursor: '#93a1a1', selectionBackground: '#073642',
|
||||
black: '#073642', red: '#dc322f', green: '#859900', yellow: '#b58900', blue: '#268bd2', magenta: '#d33682', cyan: '#2aa198', white: '#eee8d5',
|
||||
brightBlack: '#586e75', brightRed: '#cb4b16', brightGreen: '#586e75', brightYellow: '#657b83', brightBlue: '#839496', brightMagenta: '#6c71c4', brightCyan: '#93a1a1', brightWhite: '#fdf6e3' },
|
||||
hacker: { name: 'Hacker Green', background: '#0a0f0a', foreground: '#33ff66', cursor: '#33ff66', selectionBackground: '#1f4d2a',
|
||||
black: '#0a0f0a', red: '#ff4d4d', green: '#33ff66', yellow: '#e6ff4d', blue: '#4dd2ff', magenta: '#d24dff', cyan: '#4dffd2', white: '#ccffcc',
|
||||
brightBlack: '#336633', brightRed: '#ff8080', brightGreen: '#80ff9f', brightYellow: '#f0ff80', brightBlue: '#80e0ff', brightMagenta: '#e080ff', brightCyan: '#80ffe0', brightWhite: '#ffffff' },
|
||||
light: { name: 'Paper Light', background: '#fbfbfd', foreground: '#2b2f3a', cursor: '#6e7bff', selectionBackground: '#6e7bff33',
|
||||
black: '#2b2f3a', red: '#d63a4a', green: '#1f9d63', yellow: '#b68600', blue: '#3d63dd', magenta: '#9d45c9', cyan: '#138a9a', white: '#c9ccd6',
|
||||
brightBlack: '#6b7080', brightRed: '#e8505f', brightGreen: '#27b474', brightYellow: '#cc9a00', brightBlue: '#5a7cf0', brightMagenta: '#b25bdd', brightCyan: '#1ca3b5', brightWhite: '#ffffff' },
|
||||
};
|
||||
Reference in New Issue
Block a user