@statechange/ssh-tunnel-manager 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app.mjs +43 -16
- package/dist/preload.js +1 -0
- package/package.json +1 -1
- package/renderer/manage.html +252 -0
- package/renderer/manage.js +193 -0
- package/renderer/add-tunnel.html +0 -127
- package/renderer/add-tunnel.js +0 -48
package/dist/app.mjs
CHANGED
|
@@ -292,7 +292,7 @@ function watchConfig(options) {
|
|
|
292
292
|
// src/app/main.ts
|
|
293
293
|
var __dirname = dirname(fileURLToPath(import.meta.url));
|
|
294
294
|
var tray = null;
|
|
295
|
-
var
|
|
295
|
+
var manageWindow = null;
|
|
296
296
|
var configWatcher = null;
|
|
297
297
|
var syncTimer = null;
|
|
298
298
|
var currentStatuses = [];
|
|
@@ -431,8 +431,8 @@ async function buildTrayMenu() {
|
|
|
431
431
|
...tunnelItems,
|
|
432
432
|
{ type: "separator" },
|
|
433
433
|
{
|
|
434
|
-
label: "
|
|
435
|
-
click: () =>
|
|
434
|
+
label: "Manage Tunnels...",
|
|
435
|
+
click: () => openManageWindow()
|
|
436
436
|
},
|
|
437
437
|
{
|
|
438
438
|
label: "Sync Now",
|
|
@@ -464,27 +464,26 @@ async function updateTray() {
|
|
|
464
464
|
const running = enabled.filter((s) => s.alive && s.portOpen);
|
|
465
465
|
tray.setToolTip(`SSH Tunnels: ${running.length}/${enabled.length} running`);
|
|
466
466
|
}
|
|
467
|
-
function
|
|
468
|
-
if (
|
|
469
|
-
|
|
467
|
+
function openManageWindow() {
|
|
468
|
+
if (manageWindow) {
|
|
469
|
+
manageWindow.focus();
|
|
470
470
|
return;
|
|
471
471
|
}
|
|
472
|
-
|
|
473
|
-
width:
|
|
474
|
-
height:
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
title: "Add SSH Tunnel",
|
|
472
|
+
manageWindow = new BrowserWindow({
|
|
473
|
+
width: 560,
|
|
474
|
+
height: 480,
|
|
475
|
+
minWidth: 400,
|
|
476
|
+
minHeight: 360,
|
|
477
|
+
title: "SSH Tunnels",
|
|
479
478
|
webPreferences: {
|
|
480
479
|
preload: join3(__dirname, "preload.js"),
|
|
481
480
|
contextIsolation: true,
|
|
482
481
|
nodeIntegration: false
|
|
483
482
|
}
|
|
484
483
|
});
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
484
|
+
manageWindow.loadFile(join3(__dirname, "..", "renderer", "manage.html"));
|
|
485
|
+
manageWindow.on("closed", () => {
|
|
486
|
+
manageWindow = null;
|
|
488
487
|
});
|
|
489
488
|
}
|
|
490
489
|
ipcMain.handle("get-statuses", async () => {
|
|
@@ -511,6 +510,34 @@ ipcMain.handle("add-tunnel", async (_event, tunnelData) => {
|
|
|
511
510
|
await updateTray();
|
|
512
511
|
return tunnel;
|
|
513
512
|
});
|
|
513
|
+
ipcMain.handle("update-tunnel", async (_event, tunnelData) => {
|
|
514
|
+
const config = await readConfig();
|
|
515
|
+
const idx = config.tunnels.findIndex((t) => t.id === tunnelData.id);
|
|
516
|
+
if (idx === -1) throw new Error(`Tunnel '${tunnelData.id}' not found`);
|
|
517
|
+
const oldTunnel = config.tunnels[idx];
|
|
518
|
+
const newId = slugify(tunnelData.name);
|
|
519
|
+
if (newId !== oldTunnel.id && config.tunnels.some((t) => t.id === newId)) {
|
|
520
|
+
throw new Error(`Tunnel with id '${newId}' already exists`);
|
|
521
|
+
}
|
|
522
|
+
await stopTunnel(oldTunnel.id);
|
|
523
|
+
config.tunnels[idx] = {
|
|
524
|
+
...oldTunnel,
|
|
525
|
+
id: newId,
|
|
526
|
+
name: tunnelData.name,
|
|
527
|
+
host: tunnelData.host,
|
|
528
|
+
user: tunnelData.user,
|
|
529
|
+
localPort: tunnelData.localPort,
|
|
530
|
+
remoteHost: tunnelData.remoteHost,
|
|
531
|
+
remotePort: tunnelData.remotePort,
|
|
532
|
+
enabled: tunnelData.enabled,
|
|
533
|
+
identityFile: tunnelData.identityFile,
|
|
534
|
+
sshPort: tunnelData.sshPort
|
|
535
|
+
};
|
|
536
|
+
await writeConfig(config);
|
|
537
|
+
await sync(config);
|
|
538
|
+
await updateTray();
|
|
539
|
+
return config.tunnels[idx];
|
|
540
|
+
});
|
|
514
541
|
ipcMain.handle("toggle-tunnel", async (_event, id) => {
|
|
515
542
|
const config = await readConfig();
|
|
516
543
|
const tunnel = config.tunnels.find((t) => t.id === id);
|
package/dist/preload.js
CHANGED
|
@@ -5,6 +5,7 @@ var import_electron = require("electron");
|
|
|
5
5
|
import_electron.contextBridge.exposeInMainWorld("tunnelApi", {
|
|
6
6
|
getStatuses: () => import_electron.ipcRenderer.invoke("get-statuses"),
|
|
7
7
|
addTunnel: (data) => import_electron.ipcRenderer.invoke("add-tunnel", data),
|
|
8
|
+
updateTunnel: (data) => import_electron.ipcRenderer.invoke("update-tunnel", data),
|
|
8
9
|
toggleTunnel: (id) => import_electron.ipcRenderer.invoke("toggle-tunnel", id),
|
|
9
10
|
removeTunnel: (id) => import_electron.ipcRenderer.invoke("remove-tunnel", id)
|
|
10
11
|
});
|
package/package.json
CHANGED
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'">
|
|
6
|
+
<title>SSH Tunnels</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
11
|
+
padding: 20px;
|
|
12
|
+
background: #f5f5f7;
|
|
13
|
+
color: #1d1d1f;
|
|
14
|
+
font-size: 13px;
|
|
15
|
+
}
|
|
16
|
+
h2 { font-size: 16px; margin-bottom: 16px; font-weight: 600; }
|
|
17
|
+
|
|
18
|
+
/* ── List View ── */
|
|
19
|
+
.header {
|
|
20
|
+
display: flex;
|
|
21
|
+
justify-content: space-between;
|
|
22
|
+
align-items: center;
|
|
23
|
+
margin-bottom: 16px;
|
|
24
|
+
}
|
|
25
|
+
.header h2 { margin-bottom: 0; }
|
|
26
|
+
.empty-state {
|
|
27
|
+
text-align: center;
|
|
28
|
+
padding: 40px 20px;
|
|
29
|
+
color: #6e6e73;
|
|
30
|
+
}
|
|
31
|
+
.empty-state p { margin-bottom: 12px; }
|
|
32
|
+
.tunnel-list {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
gap: 8px;
|
|
36
|
+
}
|
|
37
|
+
.tunnel-card {
|
|
38
|
+
background: white;
|
|
39
|
+
border: 1px solid #d2d2d7;
|
|
40
|
+
border-radius: 8px;
|
|
41
|
+
padding: 10px 12px;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
gap: 10px;
|
|
45
|
+
}
|
|
46
|
+
.tunnel-status {
|
|
47
|
+
font-size: 10px;
|
|
48
|
+
flex-shrink: 0;
|
|
49
|
+
}
|
|
50
|
+
.tunnel-status.alive { color: #34C759; }
|
|
51
|
+
.tunnel-status.dead { color: #d2d2d7; }
|
|
52
|
+
.tunnel-info {
|
|
53
|
+
flex: 1;
|
|
54
|
+
min-width: 0;
|
|
55
|
+
}
|
|
56
|
+
.tunnel-name {
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
font-size: 13px;
|
|
59
|
+
white-space: nowrap;
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
text-overflow: ellipsis;
|
|
62
|
+
}
|
|
63
|
+
.tunnel-detail {
|
|
64
|
+
color: #6e6e73;
|
|
65
|
+
font-size: 11px;
|
|
66
|
+
margin-top: 2px;
|
|
67
|
+
white-space: nowrap;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
text-overflow: ellipsis;
|
|
70
|
+
}
|
|
71
|
+
.tunnel-actions {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 6px;
|
|
75
|
+
flex-shrink: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Toggle switch */
|
|
79
|
+
.toggle {
|
|
80
|
+
position: relative;
|
|
81
|
+
width: 36px;
|
|
82
|
+
height: 20px;
|
|
83
|
+
flex-shrink: 0;
|
|
84
|
+
}
|
|
85
|
+
.toggle input { opacity: 0; width: 0; height: 0; }
|
|
86
|
+
.toggle .slider {
|
|
87
|
+
position: absolute;
|
|
88
|
+
inset: 0;
|
|
89
|
+
background: #d2d2d7;
|
|
90
|
+
border-radius: 10px;
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
transition: background 0.2s;
|
|
93
|
+
}
|
|
94
|
+
.toggle .slider::before {
|
|
95
|
+
content: "";
|
|
96
|
+
position: absolute;
|
|
97
|
+
width: 16px;
|
|
98
|
+
height: 16px;
|
|
99
|
+
left: 2px;
|
|
100
|
+
top: 2px;
|
|
101
|
+
background: white;
|
|
102
|
+
border-radius: 50%;
|
|
103
|
+
transition: transform 0.2s;
|
|
104
|
+
}
|
|
105
|
+
.toggle input:checked + .slider { background: #34C759; }
|
|
106
|
+
.toggle input:checked + .slider::before { transform: translateX(16px); }
|
|
107
|
+
|
|
108
|
+
/* Icon buttons */
|
|
109
|
+
.icon-btn {
|
|
110
|
+
background: none;
|
|
111
|
+
border: none;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
padding: 4px;
|
|
114
|
+
border-radius: 4px;
|
|
115
|
+
color: #6e6e73;
|
|
116
|
+
font-size: 14px;
|
|
117
|
+
line-height: 1;
|
|
118
|
+
}
|
|
119
|
+
.icon-btn:hover { background: #f0f0f0; color: #1d1d1f; }
|
|
120
|
+
.icon-btn.danger:hover { color: #FF3B30; }
|
|
121
|
+
|
|
122
|
+
/* ── Form View ── */
|
|
123
|
+
.form-group { margin-bottom: 12px; }
|
|
124
|
+
label {
|
|
125
|
+
display: block;
|
|
126
|
+
font-weight: 500;
|
|
127
|
+
margin-bottom: 4px;
|
|
128
|
+
color: #6e6e73;
|
|
129
|
+
}
|
|
130
|
+
input {
|
|
131
|
+
width: 100%;
|
|
132
|
+
padding: 8px 10px;
|
|
133
|
+
border: 1px solid #d2d2d7;
|
|
134
|
+
border-radius: 6px;
|
|
135
|
+
font-size: 13px;
|
|
136
|
+
background: white;
|
|
137
|
+
outline: none;
|
|
138
|
+
transition: border-color 0.2s;
|
|
139
|
+
}
|
|
140
|
+
input:focus { border-color: #0071e3; }
|
|
141
|
+
.row { display: flex; gap: 12px; }
|
|
142
|
+
.row .form-group { flex: 1; }
|
|
143
|
+
.checkbox-group {
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
gap: 8px;
|
|
147
|
+
margin-bottom: 12px;
|
|
148
|
+
}
|
|
149
|
+
.checkbox-group input { width: auto; }
|
|
150
|
+
.actions {
|
|
151
|
+
display: flex;
|
|
152
|
+
justify-content: flex-end;
|
|
153
|
+
gap: 8px;
|
|
154
|
+
margin-top: 16px;
|
|
155
|
+
}
|
|
156
|
+
button {
|
|
157
|
+
padding: 8px 16px;
|
|
158
|
+
border-radius: 6px;
|
|
159
|
+
border: 1px solid #d2d2d7;
|
|
160
|
+
background: white;
|
|
161
|
+
font-size: 13px;
|
|
162
|
+
cursor: pointer;
|
|
163
|
+
}
|
|
164
|
+
button:hover { background: #f0f0f0; }
|
|
165
|
+
button.primary {
|
|
166
|
+
background: #0071e3;
|
|
167
|
+
color: white;
|
|
168
|
+
border-color: #0071e3;
|
|
169
|
+
}
|
|
170
|
+
button.primary:hover { background: #0077ED; }
|
|
171
|
+
.error {
|
|
172
|
+
color: #FF3B30;
|
|
173
|
+
margin-top: 8px;
|
|
174
|
+
display: none;
|
|
175
|
+
}
|
|
176
|
+
.hidden { display: none !important; }
|
|
177
|
+
</style>
|
|
178
|
+
</head>
|
|
179
|
+
<body>
|
|
180
|
+
<!-- ── List View ── -->
|
|
181
|
+
<div id="list-view">
|
|
182
|
+
<div class="header">
|
|
183
|
+
<h2>SSH Tunnels</h2>
|
|
184
|
+
<button class="primary" id="add-btn">+ Add Tunnel</button>
|
|
185
|
+
</div>
|
|
186
|
+
<div id="tunnel-list" class="tunnel-list"></div>
|
|
187
|
+
<div id="empty-state" class="empty-state hidden">
|
|
188
|
+
<p>No tunnels configured</p>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<!-- ── Form View ── -->
|
|
193
|
+
<div id="form-view" class="hidden">
|
|
194
|
+
<div class="header">
|
|
195
|
+
<button id="back-btn" style="padding: 4px 10px;">← Back</button>
|
|
196
|
+
<h2 id="form-title" style="flex:1; text-align: center;">Add Tunnel</h2>
|
|
197
|
+
<div style="width: 70px;"></div>
|
|
198
|
+
</div>
|
|
199
|
+
<form id="tunnel-form">
|
|
200
|
+
<div class="form-group">
|
|
201
|
+
<label for="name">Name</label>
|
|
202
|
+
<input type="text" id="name" placeholder="Production Postgres" required>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="row">
|
|
205
|
+
<div class="form-group">
|
|
206
|
+
<label for="host">SSH Host</label>
|
|
207
|
+
<input type="text" id="host" placeholder="bastion.example.com" required>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="form-group">
|
|
210
|
+
<label for="user">User</label>
|
|
211
|
+
<input type="text" id="user" placeholder="ray">
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="row">
|
|
215
|
+
<div class="form-group">
|
|
216
|
+
<label for="localPort">Local Port</label>
|
|
217
|
+
<input type="number" id="localPort" placeholder="5433" required>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="form-group">
|
|
220
|
+
<label for="remoteHost">Remote Host</label>
|
|
221
|
+
<input type="text" id="remoteHost" placeholder="db.internal" required>
|
|
222
|
+
</div>
|
|
223
|
+
<div class="form-group">
|
|
224
|
+
<label for="remotePort">Remote Port</label>
|
|
225
|
+
<input type="number" id="remotePort" placeholder="5432" required>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="row">
|
|
229
|
+
<div class="form-group">
|
|
230
|
+
<label for="identityFile">Identity File (optional)</label>
|
|
231
|
+
<input type="text" id="identityFile" placeholder="~/.ssh/id_ed25519">
|
|
232
|
+
</div>
|
|
233
|
+
<div class="form-group">
|
|
234
|
+
<label for="sshPort">SSH Port</label>
|
|
235
|
+
<input type="number" id="sshPort" placeholder="22" value="22">
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="checkbox-group">
|
|
239
|
+
<input type="checkbox" id="enabled">
|
|
240
|
+
<label for="enabled" style="margin-bottom: 0; color: #1d1d1f;">Enable immediately</label>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="error" id="error"></div>
|
|
243
|
+
<div class="actions">
|
|
244
|
+
<button type="button" id="cancel-btn">Cancel</button>
|
|
245
|
+
<button type="submit" class="primary" id="submit-btn">Add Tunnel</button>
|
|
246
|
+
</div>
|
|
247
|
+
</form>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
<script src="manage.js"></script>
|
|
251
|
+
</body>
|
|
252
|
+
</html>
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
const listView = document.getElementById("list-view");
|
|
2
|
+
const formView = document.getElementById("form-view");
|
|
3
|
+
const tunnelList = document.getElementById("tunnel-list");
|
|
4
|
+
const emptyState = document.getElementById("empty-state");
|
|
5
|
+
const addBtn = document.getElementById("add-btn");
|
|
6
|
+
const backBtn = document.getElementById("back-btn");
|
|
7
|
+
const cancelBtn = document.getElementById("cancel-btn");
|
|
8
|
+
const form = document.getElementById("tunnel-form");
|
|
9
|
+
const formTitle = document.getElementById("form-title");
|
|
10
|
+
const submitBtn = document.getElementById("submit-btn");
|
|
11
|
+
const errorEl = document.getElementById("error");
|
|
12
|
+
|
|
13
|
+
let editingId = null;
|
|
14
|
+
let refreshTimer = null;
|
|
15
|
+
|
|
16
|
+
// ── View Navigation ──
|
|
17
|
+
|
|
18
|
+
function showList() {
|
|
19
|
+
editingId = null;
|
|
20
|
+
formView.classList.add("hidden");
|
|
21
|
+
listView.classList.remove("hidden");
|
|
22
|
+
loadTunnels();
|
|
23
|
+
startRefresh();
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function showForm(tunnel) {
|
|
27
|
+
stopRefresh();
|
|
28
|
+
listView.classList.add("hidden");
|
|
29
|
+
formView.classList.remove("hidden");
|
|
30
|
+
errorEl.style.display = "none";
|
|
31
|
+
|
|
32
|
+
if (tunnel) {
|
|
33
|
+
editingId = tunnel.id;
|
|
34
|
+
formTitle.textContent = "Edit Tunnel";
|
|
35
|
+
submitBtn.textContent = "Save Changes";
|
|
36
|
+
document.getElementById("name").value = tunnel.name || "";
|
|
37
|
+
document.getElementById("host").value = tunnel.host || "";
|
|
38
|
+
document.getElementById("user").value = tunnel.user || "";
|
|
39
|
+
document.getElementById("localPort").value = tunnel.localPort || "";
|
|
40
|
+
document.getElementById("remoteHost").value = tunnel.remoteHost || "";
|
|
41
|
+
document.getElementById("remotePort").value = tunnel.remotePort || "";
|
|
42
|
+
document.getElementById("identityFile").value = tunnel.identityFile || "";
|
|
43
|
+
document.getElementById("sshPort").value = tunnel.sshPort || 22;
|
|
44
|
+
document.getElementById("enabled").checked = tunnel.enabled;
|
|
45
|
+
} else {
|
|
46
|
+
editingId = null;
|
|
47
|
+
formTitle.textContent = "Add Tunnel";
|
|
48
|
+
submitBtn.textContent = "Add Tunnel";
|
|
49
|
+
form.reset();
|
|
50
|
+
document.getElementById("sshPort").value = "22";
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// ── Render Tunnel List ──
|
|
55
|
+
|
|
56
|
+
function renderTunnels(statuses) {
|
|
57
|
+
tunnelList.innerHTML = "";
|
|
58
|
+
|
|
59
|
+
if (statuses.length === 0) {
|
|
60
|
+
emptyState.classList.remove("hidden");
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
emptyState.classList.add("hidden");
|
|
64
|
+
|
|
65
|
+
for (const s of statuses) {
|
|
66
|
+
const card = document.createElement("div");
|
|
67
|
+
card.className = "tunnel-card";
|
|
68
|
+
|
|
69
|
+
const alive = s.alive && s.portOpen;
|
|
70
|
+
card.innerHTML = `
|
|
71
|
+
<span class="tunnel-status ${alive ? "alive" : "dead"}">●</span>
|
|
72
|
+
<div class="tunnel-info">
|
|
73
|
+
<div class="tunnel-name">${esc(s.name)}</div>
|
|
74
|
+
<div class="tunnel-detail">:${s.localPort} → ${esc(s.remoteHost)}:${s.remotePort}</div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="tunnel-actions">
|
|
77
|
+
<label class="toggle">
|
|
78
|
+
<input type="checkbox" ${s.enabled ? "checked" : ""} data-id="${esc(s.id)}" class="toggle-input">
|
|
79
|
+
<span class="slider"></span>
|
|
80
|
+
</label>
|
|
81
|
+
<button class="icon-btn edit-btn" data-id="${esc(s.id)}" title="Edit">✎</button>
|
|
82
|
+
<button class="icon-btn danger delete-btn" data-id="${esc(s.id)}" title="Delete">✕</button>
|
|
83
|
+
</div>
|
|
84
|
+
`;
|
|
85
|
+
tunnelList.appendChild(card);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Attach toggle handlers
|
|
89
|
+
for (const toggle of tunnelList.querySelectorAll(".toggle-input")) {
|
|
90
|
+
toggle.addEventListener("change", async () => {
|
|
91
|
+
try {
|
|
92
|
+
await window.tunnelApi.toggleTunnel(toggle.dataset.id);
|
|
93
|
+
setTimeout(loadTunnels, 1500);
|
|
94
|
+
} catch (err) {
|
|
95
|
+
console.error("Toggle error:", err);
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Attach edit handlers
|
|
101
|
+
for (const btn of tunnelList.querySelectorAll(".edit-btn")) {
|
|
102
|
+
btn.addEventListener("click", () => {
|
|
103
|
+
const tunnel = statuses.find((s) => s.id === btn.dataset.id);
|
|
104
|
+
if (tunnel) showForm(tunnel);
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Attach delete handlers
|
|
109
|
+
for (const btn of tunnelList.querySelectorAll(".delete-btn")) {
|
|
110
|
+
btn.addEventListener("click", async () => {
|
|
111
|
+
const tunnel = statuses.find((s) => s.id === btn.dataset.id);
|
|
112
|
+
if (!tunnel) return;
|
|
113
|
+
if (!confirm(`Remove tunnel "${tunnel.name}"?`)) return;
|
|
114
|
+
try {
|
|
115
|
+
await window.tunnelApi.removeTunnel(tunnel.id);
|
|
116
|
+
loadTunnels();
|
|
117
|
+
} catch (err) {
|
|
118
|
+
console.error("Delete error:", err);
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// ── Data Loading ──
|
|
125
|
+
|
|
126
|
+
async function loadTunnels() {
|
|
127
|
+
try {
|
|
128
|
+
const statuses = await window.tunnelApi.getStatuses();
|
|
129
|
+
renderTunnels(statuses);
|
|
130
|
+
} catch (err) {
|
|
131
|
+
console.error("Failed to load tunnels:", err);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
function startRefresh() {
|
|
136
|
+
stopRefresh();
|
|
137
|
+
refreshTimer = setInterval(loadTunnels, 3000);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
function stopRefresh() {
|
|
141
|
+
if (refreshTimer) {
|
|
142
|
+
clearInterval(refreshTimer);
|
|
143
|
+
refreshTimer = null;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// ── Form Submission ──
|
|
148
|
+
|
|
149
|
+
form.addEventListener("submit", async (e) => {
|
|
150
|
+
e.preventDefault();
|
|
151
|
+
errorEl.style.display = "none";
|
|
152
|
+
|
|
153
|
+
const data = {
|
|
154
|
+
name: document.getElementById("name").value.trim(),
|
|
155
|
+
host: document.getElementById("host").value.trim(),
|
|
156
|
+
user: document.getElementById("user").value.trim() || undefined,
|
|
157
|
+
localPort: parseInt(document.getElementById("localPort").value, 10),
|
|
158
|
+
remoteHost: document.getElementById("remoteHost").value.trim(),
|
|
159
|
+
remotePort: parseInt(document.getElementById("remotePort").value, 10),
|
|
160
|
+
identityFile: document.getElementById("identityFile").value.trim() || undefined,
|
|
161
|
+
sshPort: parseInt(document.getElementById("sshPort").value, 10) || 22,
|
|
162
|
+
enabled: document.getElementById("enabled").checked,
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
try {
|
|
166
|
+
if (editingId) {
|
|
167
|
+
await window.tunnelApi.updateTunnel({ id: editingId, ...data });
|
|
168
|
+
} else {
|
|
169
|
+
await window.tunnelApi.addTunnel(data);
|
|
170
|
+
}
|
|
171
|
+
showList();
|
|
172
|
+
} catch (err) {
|
|
173
|
+
errorEl.textContent = err.message || "Failed to save tunnel";
|
|
174
|
+
errorEl.style.display = "block";
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
// ── Button Handlers ──
|
|
179
|
+
|
|
180
|
+
addBtn.addEventListener("click", () => showForm(null));
|
|
181
|
+
backBtn.addEventListener("click", () => showList());
|
|
182
|
+
cancelBtn.addEventListener("click", () => showList());
|
|
183
|
+
|
|
184
|
+
// ── Helpers ──
|
|
185
|
+
|
|
186
|
+
function esc(str) {
|
|
187
|
+
const el = document.createElement("span");
|
|
188
|
+
el.textContent = str;
|
|
189
|
+
return el.innerHTML;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// ── Init ──
|
|
193
|
+
showList();
|
package/renderer/add-tunnel.html
DELETED
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'">
|
|
6
|
-
<title>Add SSH Tunnel</title>
|
|
7
|
-
<style>
|
|
8
|
-
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
-
body {
|
|
10
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
11
|
-
padding: 20px;
|
|
12
|
-
background: #f5f5f7;
|
|
13
|
-
color: #1d1d1f;
|
|
14
|
-
font-size: 13px;
|
|
15
|
-
}
|
|
16
|
-
h2 { font-size: 16px; margin-bottom: 16px; font-weight: 600; }
|
|
17
|
-
.form-group {
|
|
18
|
-
margin-bottom: 12px;
|
|
19
|
-
}
|
|
20
|
-
label {
|
|
21
|
-
display: block;
|
|
22
|
-
font-weight: 500;
|
|
23
|
-
margin-bottom: 4px;
|
|
24
|
-
color: #6e6e73;
|
|
25
|
-
}
|
|
26
|
-
input {
|
|
27
|
-
width: 100%;
|
|
28
|
-
padding: 8px 10px;
|
|
29
|
-
border: 1px solid #d2d2d7;
|
|
30
|
-
border-radius: 6px;
|
|
31
|
-
font-size: 13px;
|
|
32
|
-
background: white;
|
|
33
|
-
outline: none;
|
|
34
|
-
transition: border-color 0.2s;
|
|
35
|
-
}
|
|
36
|
-
input:focus { border-color: #0071e3; }
|
|
37
|
-
.row { display: flex; gap: 12px; }
|
|
38
|
-
.row .form-group { flex: 1; }
|
|
39
|
-
.checkbox-group {
|
|
40
|
-
display: flex;
|
|
41
|
-
align-items: center;
|
|
42
|
-
gap: 8px;
|
|
43
|
-
margin-bottom: 12px;
|
|
44
|
-
}
|
|
45
|
-
.checkbox-group input { width: auto; }
|
|
46
|
-
.actions {
|
|
47
|
-
display: flex;
|
|
48
|
-
justify-content: flex-end;
|
|
49
|
-
gap: 8px;
|
|
50
|
-
margin-top: 16px;
|
|
51
|
-
}
|
|
52
|
-
button {
|
|
53
|
-
padding: 8px 16px;
|
|
54
|
-
border-radius: 6px;
|
|
55
|
-
border: 1px solid #d2d2d7;
|
|
56
|
-
background: white;
|
|
57
|
-
font-size: 13px;
|
|
58
|
-
cursor: pointer;
|
|
59
|
-
}
|
|
60
|
-
button:hover { background: #f0f0f0; }
|
|
61
|
-
button.primary {
|
|
62
|
-
background: #0071e3;
|
|
63
|
-
color: white;
|
|
64
|
-
border-color: #0071e3;
|
|
65
|
-
}
|
|
66
|
-
button.primary:hover { background: #0077ED; }
|
|
67
|
-
.error {
|
|
68
|
-
color: #FF3B30;
|
|
69
|
-
margin-top: 8px;
|
|
70
|
-
display: none;
|
|
71
|
-
}
|
|
72
|
-
</style>
|
|
73
|
-
</head>
|
|
74
|
-
<body>
|
|
75
|
-
<h2>Add SSH Tunnel</h2>
|
|
76
|
-
<form id="tunnel-form">
|
|
77
|
-
<div class="form-group">
|
|
78
|
-
<label for="name">Name</label>
|
|
79
|
-
<input type="text" id="name" placeholder="Production Postgres" required>
|
|
80
|
-
</div>
|
|
81
|
-
<div class="row">
|
|
82
|
-
<div class="form-group">
|
|
83
|
-
<label for="host">SSH Host</label>
|
|
84
|
-
<input type="text" id="host" placeholder="bastion.example.com" required>
|
|
85
|
-
</div>
|
|
86
|
-
<div class="form-group">
|
|
87
|
-
<label for="user">User</label>
|
|
88
|
-
<input type="text" id="user" placeholder="ray">
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
<div class="row">
|
|
92
|
-
<div class="form-group">
|
|
93
|
-
<label for="localPort">Local Port</label>
|
|
94
|
-
<input type="number" id="localPort" placeholder="5433" required>
|
|
95
|
-
</div>
|
|
96
|
-
<div class="form-group">
|
|
97
|
-
<label for="remoteHost">Remote Host</label>
|
|
98
|
-
<input type="text" id="remoteHost" placeholder="db.internal" required>
|
|
99
|
-
</div>
|
|
100
|
-
<div class="form-group">
|
|
101
|
-
<label for="remotePort">Remote Port</label>
|
|
102
|
-
<input type="number" id="remotePort" placeholder="5432" required>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
<div class="row">
|
|
106
|
-
<div class="form-group">
|
|
107
|
-
<label for="identityFile">Identity File (optional)</label>
|
|
108
|
-
<input type="text" id="identityFile" placeholder="~/.ssh/id_ed25519">
|
|
109
|
-
</div>
|
|
110
|
-
<div class="form-group">
|
|
111
|
-
<label for="sshPort">SSH Port</label>
|
|
112
|
-
<input type="number" id="sshPort" placeholder="22" value="22">
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
<div class="checkbox-group">
|
|
116
|
-
<input type="checkbox" id="enabled">
|
|
117
|
-
<label for="enabled" style="margin-bottom: 0; color: #1d1d1f;">Enable immediately</label>
|
|
118
|
-
</div>
|
|
119
|
-
<div class="error" id="error"></div>
|
|
120
|
-
<div class="actions">
|
|
121
|
-
<button type="button" id="cancel-btn">Cancel</button>
|
|
122
|
-
<button type="submit" class="primary">Add Tunnel</button>
|
|
123
|
-
</div>
|
|
124
|
-
</form>
|
|
125
|
-
<script src="add-tunnel.js"></script>
|
|
126
|
-
</body>
|
|
127
|
-
</html>
|
package/renderer/add-tunnel.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
const form = document.getElementById("tunnel-form");
|
|
2
|
-
const errorEl = document.getElementById("error");
|
|
3
|
-
const cancelBtn = document.getElementById("cancel-btn");
|
|
4
|
-
|
|
5
|
-
console.log("tunnelApi available:", !!window.tunnelApi);
|
|
6
|
-
if (!window.tunnelApi) {
|
|
7
|
-
errorEl.textContent = "Error: tunnelApi not available (preload script failed to load)";
|
|
8
|
-
errorEl.style.display = "block";
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
cancelBtn.addEventListener("click", () => {
|
|
12
|
-
window.close();
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
form.addEventListener("submit", async (e) => {
|
|
16
|
-
e.preventDefault();
|
|
17
|
-
errorEl.style.display = "none";
|
|
18
|
-
|
|
19
|
-
if (!window.tunnelApi) {
|
|
20
|
-
errorEl.textContent = "Error: tunnelApi not available";
|
|
21
|
-
errorEl.style.display = "block";
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const data = {
|
|
26
|
-
name: document.getElementById("name").value.trim(),
|
|
27
|
-
host: document.getElementById("host").value.trim(),
|
|
28
|
-
user: document.getElementById("user").value.trim() || undefined,
|
|
29
|
-
localPort: parseInt(document.getElementById("localPort").value, 10),
|
|
30
|
-
remoteHost: document.getElementById("remoteHost").value.trim(),
|
|
31
|
-
remotePort: parseInt(document.getElementById("remotePort").value, 10),
|
|
32
|
-
identityFile: document.getElementById("identityFile").value.trim() || undefined,
|
|
33
|
-
sshPort: parseInt(document.getElementById("sshPort").value, 10) || 22,
|
|
34
|
-
enabled: document.getElementById("enabled").checked,
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
console.log("Submitting tunnel data:", JSON.stringify(data));
|
|
38
|
-
|
|
39
|
-
try {
|
|
40
|
-
const result = await window.tunnelApi.addTunnel(data);
|
|
41
|
-
console.log("Add tunnel result:", result);
|
|
42
|
-
window.close();
|
|
43
|
-
} catch (err) {
|
|
44
|
-
console.error("Add tunnel error:", err);
|
|
45
|
-
errorEl.textContent = err.message || "Failed to add tunnel";
|
|
46
|
-
errorEl.style.display = "block";
|
|
47
|
-
}
|
|
48
|
-
});
|