207 lines
11 KiB
HTML
207 lines
11 KiB
HTML
{{ define "settings_title" }}Settings{{ end }}
|
|
{{ define "settings_content" }}
|
|
<h1 class="text-2xl font-semibold text-white mb-6">Settings</h1>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
|
|
<h2 class="text-lg font-semibold text-white mb-4">Services</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{{/* Toggle component */}}
|
|
{{ $svc := .Cfg.Services }}
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">HTTP</span>
|
|
<input id="svc-http" type="checkbox" class="h-5 w-5" {{ if $svc.HTTP }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">HTTPS</span>
|
|
<input id="svc-https" type="checkbox" class="h-5 w-5" {{ if $svc.HTTPS }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">SSH</span>
|
|
<input id="svc-ssh" type="checkbox" class="h-5 w-5" {{ if $svc.SSH }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">FTP</span>
|
|
<input id="svc-ftp" type="checkbox" class="h-5 w-5" {{ if $svc.FTP }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">SMTP</span>
|
|
<input id="svc-smtp" type="checkbox" class="h-5 w-5" {{ if $svc.SMTP }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">IMAP</span>
|
|
<input id="svc-imap" type="checkbox" class="h-5 w-5" {{ if $svc.IMAP }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">Telnet</span>
|
|
<input id="svc-telnet" type="checkbox" class="h-5 w-5" {{ if $svc.Telnet }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">MySQL</span>
|
|
<input id="svc-mysql" type="checkbox" class="h-5 w-5" {{ if $svc.MySQL }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">PostgreSQL</span>
|
|
<input id="svc-postgresql" type="checkbox" class="h-5 w-5" {{ if $svc.PostgreSQL }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">MongoDB</span>
|
|
<input id="svc-mongodb" type="checkbox" class="h-5 w-5" {{ if $svc.MongoDB }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">RDP</span>
|
|
<input id="svc-rdp" type="checkbox" class="h-5 w-5" {{ if $svc.RDP }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">SMB</span>
|
|
<input id="svc-smb" type="checkbox" class="h-5 w-5" {{ if $svc.SMB }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">SIP</span>
|
|
<input id="svc-sip" type="checkbox" class="h-5 w-5" {{ if $svc.SIP }}checked{{ end }}>
|
|
</label>
|
|
<label class="flex items-center justify-between bg-gray-900 border border-gray-700 rounded p-3">
|
|
<span class="text-gray-200">VNC</span>
|
|
<input id="svc-vnc" type="checkbox" class="h-5 w-5" {{ if $svc.VNC }}checked{{ end }}>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-800 border border-gray-700 rounded-lg p-6">
|
|
<h2 class="text-lg font-semibold text-white mb-4">Ports</h2>
|
|
{{ $p := .Cfg.Ports }}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<label class="block">
|
|
<span class="text-gray-300">HTTP</span>
|
|
<input id="port-http" type="number" value="{{ $p.HTTP }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">HTTPS</span>
|
|
<input id="port-https" type="number" value="{{ $p.HTTPS }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">SSH</span>
|
|
<input id="port-ssh" type="number" value="{{ $p.SSH }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">FTP</span>
|
|
<input id="port-ftp" type="number" value="{{ $p.FTP }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">SMTP</span>
|
|
<input id="port-smtp" type="number" value="{{ $p.SMTP }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">IMAP</span>
|
|
<input id="port-imap" type="number" value="{{ $p.IMAP }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">Telnet</span>
|
|
<input id="port-telnet" type="number" value="{{ $p.Telnet }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">MySQL</span>
|
|
<input id="port-mysql" type="number" value="{{ $p.MySQL }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">PostgreSQL</span>
|
|
<input id="port-postgresql" type="number" value="{{ $p.PostgreSQL }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">MongoDB</span>
|
|
<input id="port-mongodb" type="number" value="{{ $p.MongoDB }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">RDP</span>
|
|
<input id="port-rdp" type="number" value="{{ $p.RDP }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">SMB</span>
|
|
<input id="port-smb" type="number" value="{{ $p.SMB }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">SIP</span>
|
|
<input id="port-sip" type="number" value="{{ $p.SIP }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
<label class="block">
|
|
<span class="text-gray-300">VNC</span>
|
|
<input id="port-vnc" type="number" value="{{ $p.VNC }}" class="mt-1 w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex items-center gap-3">
|
|
<button id="btn-save" class="px-4 py-2 bg-primary-600 hover:bg-primary-500 rounded text-white">Save Settings</button>
|
|
<button id="btn-restart" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-white">Restart App</button>
|
|
<span id="save-status" class="text-sm text-gray-400"></span>
|
|
</div>
|
|
<script>
|
|
async function saveSettings() {
|
|
const payload = {
|
|
services: {
|
|
http: document.getElementById('svc-http').checked,
|
|
https: document.getElementById('svc-https').checked,
|
|
ssh: document.getElementById('svc-ssh').checked,
|
|
ftp: document.getElementById('svc-ftp').checked,
|
|
smtp: document.getElementById('svc-smtp').checked,
|
|
imap: document.getElementById('svc-imap').checked,
|
|
telnet: document.getElementById('svc-telnet').checked,
|
|
mysql: document.getElementById('svc-mysql').checked,
|
|
postgresql: document.getElementById('svc-postgresql').checked,
|
|
mongodb: document.getElementById('svc-mongodb').checked,
|
|
rdp: document.getElementById('svc-rdp').checked,
|
|
smb: document.getElementById('svc-smb').checked,
|
|
sip: document.getElementById('svc-sip').checked,
|
|
vnc: document.getElementById('svc-vnc').checked,
|
|
},
|
|
ports: {
|
|
http: parseInt(document.getElementById('port-http').value, 10),
|
|
https: parseInt(document.getElementById('port-https').value, 10),
|
|
ssh: parseInt(document.getElementById('port-ssh').value, 10),
|
|
ftp: parseInt(document.getElementById('port-ftp').value, 10),
|
|
smtp: parseInt(document.getElementById('port-smtp').value, 10),
|
|
imap: parseInt(document.getElementById('port-imap').value, 10),
|
|
telnet: parseInt(document.getElementById('port-telnet').value, 10),
|
|
mysql: parseInt(document.getElementById('port-mysql').value, 10),
|
|
postgresql: parseInt(document.getElementById('port-postgresql').value, 10),
|
|
mongodb: parseInt(document.getElementById('port-mongodb').value, 10),
|
|
rdp: parseInt(document.getElementById('port-rdp').value, 10),
|
|
smb: parseInt(document.getElementById('port-smb').value, 10),
|
|
sip: parseInt(document.getElementById('port-sip').value, 10),
|
|
vnc: parseInt(document.getElementById('port-vnc').value, 10),
|
|
}
|
|
};
|
|
const headers = { 'Content-Type': 'application/json' };
|
|
const csrfToken = '{{ .CSRFToken }}';
|
|
if (csrfToken) {
|
|
headers['X-CSRF-Token'] = csrfToken;
|
|
}
|
|
const res = await fetch('/api/settings', { method: 'POST', headers: headers, body: JSON.stringify(payload) });
|
|
const out = await res.json().catch(() => ({}));
|
|
const el = document.getElementById('save-status');
|
|
if (res.ok) {
|
|
el.textContent = 'Saved. You may need to restart to apply port changes.';
|
|
el.className = 'text-sm text-green-400';
|
|
} else {
|
|
el.textContent = out.error || 'Save failed';
|
|
el.className = 'text-sm text-red-400';
|
|
}
|
|
}
|
|
async function restartApp() {
|
|
const headers = {};
|
|
const csrfToken = '{{ .CSRFToken }}';
|
|
if (csrfToken) {
|
|
headers['X-CSRF-Token'] = csrfToken;
|
|
}
|
|
const res = await fetch('/api/restart', { method: 'POST', headers: headers });
|
|
if (res.ok) {
|
|
document.getElementById('save-status').textContent = 'Restarting...';
|
|
setTimeout(() => location.reload(), 1200);
|
|
} else {
|
|
document.getElementById('save-status').textContent = 'Restart failed';
|
|
document.getElementById('save-status').className = 'text-sm text-red-400';
|
|
}
|
|
}
|
|
document.getElementById('btn-save').addEventListener('click', saveSettings);
|
|
document.getElementById('btn-restart').addEventListener('click', restartApp);
|
|
</script>
|
|
{{ end }}
|