784 lines
40 KiB
HTML
784 lines
40 KiB
HTML
|
{{define "content"}}
|
||
|
|
<h2>Hosting Providers</h2>
|
||
|
|
|
||
|
|
<!-- Provider Cards -->
|
||
|
|
<div class="stats-grid" id="provider-cards">
|
||
|
|
{{if .Data.Providers}}
|
||
|
|
{{range .Data.Providers}}
|
||
|
|
<div class="stat-card provider-card" data-provider="{{.Name}}" onclick="selectProvider('{{.Name}}')">
|
||
|
|
<h3>{{.DisplayName}}</h3>
|
||
|
|
<p>
|
||
|
|
{{if .Connected}}
|
||
|
|
<span class="badge badge-ok">Connected</span>
|
||
|
|
{{else if .HasConfig}}
|
||
|
|
<span class="badge badge-err">Disconnected</span>
|
||
|
|
{{else}}
|
||
|
|
<span class="badge">Not Configured</span>
|
||
|
|
{{end}}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
{{else}}
|
||
|
|
<div class="stat-card">
|
||
|
|
<h3>No Providers</h3>
|
||
|
|
<p style="color: var(--text-muted);">No hosting providers are registered. Providers are loaded at server start.</p>
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tab Navigation -->
|
||
|
|
<div id="hosting-tabs" style="display:none; margin-top:1.5rem;">
|
||
|
|
<div style="display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:1rem;">
|
||
|
|
<button class="btn btn-sm tab-btn active" data-tab="config" onclick="switchTab('config')">Configuration</button>
|
||
|
|
<button class="btn btn-sm tab-btn" data-tab="dns" onclick="switchTab('dns')">DNS</button>
|
||
|
|
<button class="btn btn-sm tab-btn" data-tab="domains" onclick="switchTab('domains')">Domains</button>
|
||
|
|
<button class="btn btn-sm tab-btn" data-tab="vps" onclick="switchTab('vps')">VPS</button>
|
||
|
|
<button class="btn btn-sm tab-btn" data-tab="ssh" onclick="switchTab('ssh')">SSH Keys</button>
|
||
|
|
<button class="btn btn-sm tab-btn" data-tab="billing" onclick="switchTab('billing')">Billing</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ═══════ CONFIG TAB ═══════ -->
|
||
|
|
<div class="tab-panel" id="tab-config">
|
||
|
|
<h3>API Configuration</h3>
|
||
|
|
<div style="max-width:500px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>API Key / Bearer Token</label>
|
||
|
|
<input type="password" id="cfg-api-key" placeholder="Enter API key">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>API Secret (optional)</label>
|
||
|
|
<input type="password" id="cfg-api-secret" placeholder="Enter API secret if required">
|
||
|
|
</div>
|
||
|
|
<div style="display:flex; gap:.5rem;">
|
||
|
|
<button class="btn btn-primary" onclick="saveConfig()">Save Credentials</button>
|
||
|
|
<button class="btn" onclick="testConnection()">Test Connection</button>
|
||
|
|
</div>
|
||
|
|
<div id="config-status" style="margin-top:.75rem;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ═══════ DNS TAB ═══════ -->
|
||
|
|
<div class="tab-panel" id="tab-dns" style="display:none;">
|
||
|
|
<div style="display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;">
|
||
|
|
<h3 style="margin:0;">DNS Records</h3>
|
||
|
|
<div class="form-group" style="margin:0;">
|
||
|
|
<select id="dns-domain-select" onchange="loadDNS()">
|
||
|
|
<option value="">-- select domain --</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-sm" onclick="loadDNS()">Refresh</button>
|
||
|
|
<button class="btn btn-sm" onclick="showAddDNS()" style="margin-left:auto;">Add Record</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Add/Edit DNS form (hidden by default) -->
|
||
|
|
<div id="dns-add-form" style="display:none; margin-bottom:1rem; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);">
|
||
|
|
<div style="display:flex; gap:.75rem; flex-wrap:wrap;">
|
||
|
|
<div class="form-group" style="margin:0; flex:0 0 120px;">
|
||
|
|
<label>Type</label>
|
||
|
|
<select id="dns-type">
|
||
|
|
<option>A</option><option>AAAA</option><option>CNAME</option>
|
||
|
|
<option>MX</option><option>TXT</option><option>NS</option>
|
||
|
|
<option>SRV</option><option>CAA</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin:0; flex:1; min-width:140px;">
|
||
|
|
<label>Name</label>
|
||
|
|
<input type="text" id="dns-name" placeholder="@ or subdomain">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin:0; flex:2; min-width:200px;">
|
||
|
|
<label>Content</label>
|
||
|
|
<input type="text" id="dns-content" placeholder="Value">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin:0; flex:0 0 80px;">
|
||
|
|
<label>TTL</label>
|
||
|
|
<input type="text" id="dns-ttl" value="3600">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin:0; flex:0 0 80px;">
|
||
|
|
<label>Priority</label>
|
||
|
|
<input type="text" id="dns-priority" value="0">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top:.5rem; display:flex; gap:.5rem;">
|
||
|
|
<button class="btn btn-primary btn-sm" onclick="saveDNSRecord()">Save Record</button>
|
||
|
|
<button class="btn btn-sm" onclick="hideAddDNS()">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table class="data-table" id="dns-table">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Type</th><th>Name</th><th>Content</th><th>TTL</th><th>Priority</th><th>Actions</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="dns-body">
|
||
|
|
<tr><td colspan="6" style="color:var(--text-muted); text-align:center;">Select a domain to load DNS records</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div style="margin-top:.75rem;">
|
||
|
|
<button class="btn btn-sm" onclick="resetDNS()" style="color:var(--err);">Reset DNS to Defaults</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ═══════ DOMAINS TAB ═══════ -->
|
||
|
|
<div class="tab-panel" id="tab-domains" style="display:none;">
|
||
|
|
<h3>Registered Domains</h3>
|
||
|
|
<table class="data-table" id="domains-table">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Domain</th><th>Status</th><th>Expires</th><th>Locked</th><th>Privacy</th><th>Actions</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="domains-body">
|
||
|
|
<tr><td colspan="6" style="color:var(--text-muted); text-align:center;">Loading...</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Check Availability</h3>
|
||
|
|
<div style="display:flex; gap:.5rem; max-width:600px; margin-bottom:.5rem;">
|
||
|
|
<div class="form-group" style="margin:0; flex:1;">
|
||
|
|
<input type="text" id="domain-check-input" placeholder="mydomain">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="margin:0; flex:1;">
|
||
|
|
<input type="text" id="domain-check-tlds" placeholder="com,net,org,io" value="com,net,org,io,dev">
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary" onclick="checkDomain()">Check</button>
|
||
|
|
</div>
|
||
|
|
<div id="domain-check-result" style="margin-bottom:1rem;"></div>
|
||
|
|
|
||
|
|
<h3>Purchase Domain</h3>
|
||
|
|
<div style="max-width:500px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Domain (full, e.g. example.com)</label>
|
||
|
|
<input type="text" id="purchase-domain" placeholder="example.com">
|
||
|
|
</div>
|
||
|
|
<div style="display:flex; gap:.75rem;">
|
||
|
|
<div class="form-group" style="flex:1;">
|
||
|
|
<label>Period (years)</label>
|
||
|
|
<select id="purchase-period">
|
||
|
|
<option value="1">1 year</option>
|
||
|
|
<option value="2">2 years</option>
|
||
|
|
<option value="3">3 years</option>
|
||
|
|
<option value="5">5 years</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="flex:1;">
|
||
|
|
<label>Options</label>
|
||
|
|
<div style="display:flex; gap:1rem; padding-top:.35rem;">
|
||
|
|
<label style="font-size:.85rem;"><input type="checkbox" id="purchase-autorenew" checked> Auto-Renew</label>
|
||
|
|
<label style="font-size:.85rem;"><input type="checkbox" id="purchase-privacy" checked> Privacy</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary" onclick="purchaseDomain()">Purchase</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ═══════ VPS TAB ═══════ -->
|
||
|
|
<div class="tab-panel" id="tab-vps" style="display:none;">
|
||
|
|
<div style="display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;">
|
||
|
|
<h3 style="margin:0;">Virtual Machines</h3>
|
||
|
|
<button class="btn btn-sm" onclick="loadVMs()">Refresh</button>
|
||
|
|
<button class="btn btn-sm btn-primary" onclick="showCreateVM()" style="margin-left:auto;">Create VM</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table class="data-table" id="vms-table">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Hostname</th><th>Status</th><th>Plan</th><th>Data Center</th><th>IP Address</th><th>CPU</th><th>RAM</th><th>Disk</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="vms-body">
|
||
|
|
<tr><td colspan="8" style="color:var(--text-muted); text-align:center;">Loading...</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- Create VM form (hidden by default) -->
|
||
|
|
<div id="vm-create-form" style="display:none; margin-top:1rem; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);">
|
||
|
|
<h3>Create New VM</h3>
|
||
|
|
<div style="display:flex; gap:.75rem; flex-wrap:wrap;">
|
||
|
|
<div class="form-group" style="flex:1; min-width:200px;">
|
||
|
|
<label>Hostname</label>
|
||
|
|
<input type="text" id="vm-hostname" placeholder="my-server">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="flex:1; min-width:200px;">
|
||
|
|
<label>Data Center</label>
|
||
|
|
<select id="vm-datacenter"><option value="">Loading...</option></select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="flex:1; min-width:200px;">
|
||
|
|
<label>Plan</label>
|
||
|
|
<input type="text" id="vm-plan" placeholder="Plan ID">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex; gap:.75rem; flex-wrap:wrap;">
|
||
|
|
<div class="form-group" style="flex:1; min-width:200px;">
|
||
|
|
<label>OS Template</label>
|
||
|
|
<input type="text" id="vm-template" placeholder="ubuntu-22.04">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="flex:1; min-width:200px;">
|
||
|
|
<label>Root Password</label>
|
||
|
|
<input type="password" id="vm-password" placeholder="Secure password">
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="flex:1; min-width:200px;">
|
||
|
|
<label>SSH Key (optional)</label>
|
||
|
|
<select id="vm-sshkey"><option value="">None</option></select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex; gap:.5rem;">
|
||
|
|
<button class="btn btn-primary" onclick="createVM()">Create VM</button>
|
||
|
|
<button class="btn" onclick="document.getElementById('vm-create-form').style.display='none'">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ═══════ SSH KEYS TAB ═══════ -->
|
||
|
|
<div class="tab-panel" id="tab-ssh" style="display:none;">
|
||
|
|
<div style="display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;">
|
||
|
|
<h3 style="margin:0;">SSH Keys</h3>
|
||
|
|
<button class="btn btn-sm" onclick="loadSSHKeys()">Refresh</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table class="data-table" id="ssh-table">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Name</th><th>Fingerprint</th><th>Actions</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="ssh-body">
|
||
|
|
<tr><td colspan="3" style="color:var(--text-muted); text-align:center;">Loading...</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Add SSH Key</h3>
|
||
|
|
<div style="max-width:600px;">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Key Name</label>
|
||
|
|
<input type="text" id="ssh-name" placeholder="my-laptop">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Public Key</label>
|
||
|
|
<textarea id="ssh-pubkey" rows="4" placeholder="ssh-rsa AAAA... user@host" style="width:100%;padding:.5rem .75rem;font-size:.9rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:monospace;resize:vertical;"></textarea>
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary" onclick="addSSHKey()">Add Key</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ═══════ BILLING TAB ═══════ -->
|
||
|
|
<div class="tab-panel" id="tab-billing" style="display:none;">
|
||
|
|
<h3>Subscriptions</h3>
|
||
|
|
<table class="data-table" id="subs-table">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Name</th><th>Plan</th><th>Status</th><th>Price</th><th>Renews</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="subs-body">
|
||
|
|
<tr><td colspan="5" style="color:var(--text-muted); text-align:center;">Loading...</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Product Catalog</h3>
|
||
|
|
<table class="data-table" id="catalog-table">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Name</th><th>Category</th><th>Price</th><th>Period</th><th>Description</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="catalog-body">
|
||
|
|
<tr><td colspan="5" style="color:var(--text-muted); text-align:center;">Loading...</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Toast notification -->
|
||
|
|
<div id="toast" style="display:none; position:fixed; bottom:1.5rem; right:1.5rem; padding:.65rem 1.25rem; border-radius:var(--radius); font-size:.875rem; z-index:100; max-width:400px;"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
let _provider = '';
|
||
|
|
|
||
|
|
// ── Toast ────────────────────────────────────────────────────────────────
|
||
|
|
function toast(msg, ok) {
|
||
|
|
const el = document.getElementById('toast');
|
||
|
|
el.textContent = msg;
|
||
|
|
el.style.display = 'block';
|
||
|
|
el.style.background = ok ? 'rgba(34,197,94,.15)' : 'rgba(239,68,68,.15)';
|
||
|
|
el.style.color = ok ? 'var(--ok)' : 'var(--err)';
|
||
|
|
el.style.border = '1px solid ' + (ok ? 'rgba(34,197,94,.3)' : 'rgba(239,68,68,.3)');
|
||
|
|
clearTimeout(el._t);
|
||
|
|
el._t = setTimeout(function() { el.style.display = 'none'; }, 4000);
|
||
|
|
}
|
||
|
|
window._toast = toast;
|
||
|
|
|
||
|
|
// ── API helpers ──────────────────────────────────────────────────────────
|
||
|
|
function api(method, path, body) {
|
||
|
|
const opts = {
|
||
|
|
method: method,
|
||
|
|
headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }
|
||
|
|
};
|
||
|
|
if (body !== undefined) opts.body = JSON.stringify(body);
|
||
|
|
return fetch(path, opts).then(function(r) {
|
||
|
|
return r.json().then(function(d) {
|
||
|
|
if (!r.ok) throw new Error(d.error || 'Request failed');
|
||
|
|
return d;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Provider selection ───────────────────────────────────────────────────
|
||
|
|
window.selectProvider = function(name) {
|
||
|
|
_provider = name;
|
||
|
|
// Highlight card
|
||
|
|
document.querySelectorAll('.provider-card').forEach(function(c) {
|
||
|
|
c.style.borderColor = c.dataset.provider === name ? 'var(--primary)' : 'var(--border)';
|
||
|
|
});
|
||
|
|
document.getElementById('hosting-tabs').style.display = 'block';
|
||
|
|
switchTab('config');
|
||
|
|
// Pre-load domain list for DNS tab
|
||
|
|
loadDomainOptions();
|
||
|
|
};
|
||
|
|
|
||
|
|
// ── Tab switching ────────────────────────────────────────────────────────
|
||
|
|
window.switchTab = function(tab) {
|
||
|
|
document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
|
||
|
|
document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
|
||
|
|
var panel = document.getElementById('tab-' + tab);
|
||
|
|
if (panel) panel.style.display = 'block';
|
||
|
|
document.querySelectorAll('.tab-btn[data-tab="'+tab+'"]').forEach(function(b) { b.classList.add('active'); });
|
||
|
|
|
||
|
|
// Auto-load data when switching tabs
|
||
|
|
if (tab === 'dns') loadDomainOptions();
|
||
|
|
if (tab === 'domains') loadDomains();
|
||
|
|
if (tab === 'vps') { loadVMs(); loadDataCenters(); }
|
||
|
|
if (tab === 'ssh') loadSSHKeys();
|
||
|
|
if (tab === 'billing') { loadSubscriptions(); loadCatalog(); }
|
||
|
|
};
|
||
|
|
|
||
|
|
// ── Config tab ───────────────────────────────────────────────────────────
|
||
|
|
window.saveConfig = function() {
|
||
|
|
var key = document.getElementById('cfg-api-key').value.trim();
|
||
|
|
var secret = document.getElementById('cfg-api-secret').value.trim();
|
||
|
|
if (!key) { toast('API key is required', false); return; }
|
||
|
|
api('POST', '/hosting/' + _provider + '/config', { api_key: key, api_secret: secret })
|
||
|
|
.then(function(d) {
|
||
|
|
toast('Credentials saved' + (d.connected ? ' — connection OK' : ' — connection failed'), d.connected);
|
||
|
|
updateConfigStatus(d.connected);
|
||
|
|
})
|
||
|
|
.catch(function(e) { toast('Save failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
window.testConnection = function() {
|
||
|
|
api('POST', '/hosting/' + _provider + '/test', {})
|
||
|
|
.then(function(d) {
|
||
|
|
if (d.connected) {
|
||
|
|
toast('Connection successful', true);
|
||
|
|
updateConfigStatus(true);
|
||
|
|
} else {
|
||
|
|
toast('Connection failed: ' + (d.error || 'unknown error'), false);
|
||
|
|
updateConfigStatus(false);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(function(e) { toast('Test failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
function updateConfigStatus(ok) {
|
||
|
|
var el = document.getElementById('config-status');
|
||
|
|
if (ok) {
|
||
|
|
el.innerHTML = '<span class="badge badge-ok">Connected</span>';
|
||
|
|
} else {
|
||
|
|
el.innerHTML = '<span class="badge badge-err">Disconnected</span>';
|
||
|
|
}
|
||
|
|
// Update provider card badge
|
||
|
|
var card = document.querySelector('.provider-card[data-provider="'+_provider+'"]');
|
||
|
|
if (card) {
|
||
|
|
var p = card.querySelector('p');
|
||
|
|
if (p) p.innerHTML = ok
|
||
|
|
? '<span class="badge badge-ok">Connected</span>'
|
||
|
|
: '<span class="badge badge-err">Disconnected</span>';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── DNS tab ──────────────────────────────────────────────────────────────
|
||
|
|
function loadDomainOptions() {
|
||
|
|
api('GET', '/hosting/' + _provider + '/domains')
|
||
|
|
.then(function(domains) {
|
||
|
|
var sel = document.getElementById('dns-domain-select');
|
||
|
|
var prev = sel.value;
|
||
|
|
sel.innerHTML = '<option value="">-- select domain --</option>';
|
||
|
|
if (domains && domains.length) {
|
||
|
|
domains.forEach(function(d) {
|
||
|
|
var opt = document.createElement('option');
|
||
|
|
opt.value = d.name;
|
||
|
|
opt.textContent = d.name;
|
||
|
|
sel.appendChild(opt);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (prev) { sel.value = prev; }
|
||
|
|
})
|
||
|
|
.catch(function() {});
|
||
|
|
}
|
||
|
|
|
||
|
|
window.loadDNS = function() {
|
||
|
|
var domain = document.getElementById('dns-domain-select').value;
|
||
|
|
if (!domain) return;
|
||
|
|
var body = document.getElementById('dns-body');
|
||
|
|
body.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-muted)">Loading...</td></tr>';
|
||
|
|
api('GET', '/hosting/' + _provider + '/dns/' + encodeURIComponent(domain))
|
||
|
|
.then(function(records) {
|
||
|
|
if (!records || !records.length) {
|
||
|
|
body.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-muted)">No records found</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
body.innerHTML = '';
|
||
|
|
records.forEach(function(rec) {
|
||
|
|
var tr = document.createElement('tr');
|
||
|
|
tr.innerHTML =
|
||
|
|
'<td><span class="badge">' + esc(rec.type) + '</span></td>' +
|
||
|
|
'<td>' + esc(rec.name) + '</td>' +
|
||
|
|
'<td><code>' + esc(rec.content) + '</code></td>' +
|
||
|
|
'<td>' + rec.ttl + '</td>' +
|
||
|
|
'<td>' + (rec.priority || '') + '</td>' +
|
||
|
|
'<td><button class="btn btn-sm" onclick="deleteDNSRecord(\'' + esc(rec.name) + '\',\'' + esc(rec.type) + '\')" style="color:var(--err);">Delete</button></td>';
|
||
|
|
body.appendChild(tr);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function(e) {
|
||
|
|
body.innerHTML = '<tr><td colspan="6" style="color:var(--err);text-align:center">' + esc(e.message) + '</td></tr>';
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
window.showAddDNS = function() { document.getElementById('dns-add-form').style.display = 'block'; };
|
||
|
|
window.hideAddDNS = function() { document.getElementById('dns-add-form').style.display = 'none'; };
|
||
|
|
|
||
|
|
window.saveDNSRecord = function() {
|
||
|
|
var domain = document.getElementById('dns-domain-select').value;
|
||
|
|
if (!domain) { toast('Select a domain first', false); return; }
|
||
|
|
var record = {
|
||
|
|
type: document.getElementById('dns-type').value,
|
||
|
|
name: document.getElementById('dns-name').value.trim(),
|
||
|
|
content: document.getElementById('dns-content').value.trim(),
|
||
|
|
ttl: parseInt(document.getElementById('dns-ttl').value) || 3600,
|
||
|
|
priority: parseInt(document.getElementById('dns-priority').value) || 0
|
||
|
|
};
|
||
|
|
api('PUT', '/hosting/' + _provider + '/dns/' + encodeURIComponent(domain), { records: [record], overwrite: false })
|
||
|
|
.then(function() { toast('DNS record saved', true); hideAddDNS(); loadDNS(); })
|
||
|
|
.catch(function(e) { toast('Save failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
window.deleteDNSRecord = function(name, type) {
|
||
|
|
var domain = document.getElementById('dns-domain-select').value;
|
||
|
|
if (!confirm('Delete ' + type + ' record for ' + name + '?')) return;
|
||
|
|
api('DELETE', '/hosting/' + _provider + '/dns/' + encodeURIComponent(domain), { name: name, type: type })
|
||
|
|
.then(function() { toast('Record deleted', true); loadDNS(); })
|
||
|
|
.catch(function(e) { toast('Delete failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
window.resetDNS = function() {
|
||
|
|
var domain = document.getElementById('dns-domain-select').value;
|
||
|
|
if (!domain) { toast('Select a domain first', false); return; }
|
||
|
|
if (!confirm('Reset ALL DNS records for ' + domain + ' to defaults? This cannot be undone.')) return;
|
||
|
|
api('POST', '/hosting/' + _provider + '/dns/' + encodeURIComponent(domain) + '/reset', {})
|
||
|
|
.then(function() { toast('DNS reset to defaults', true); loadDNS(); })
|
||
|
|
.catch(function(e) { toast('Reset failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
// ── Domains tab ──────────────────────────────────────────────────────────
|
||
|
|
window.loadDomains = function() {
|
||
|
|
var body = document.getElementById('domains-body');
|
||
|
|
body.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-muted)">Loading...</td></tr>';
|
||
|
|
api('GET', '/hosting/' + _provider + '/domains')
|
||
|
|
.then(function(domains) {
|
||
|
|
if (!domains || !domains.length) {
|
||
|
|
body.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-muted)">No domains found</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
body.innerHTML = '';
|
||
|
|
domains.forEach(function(d) {
|
||
|
|
var tr = document.createElement('tr');
|
||
|
|
var exp = d.expires_at ? new Date(d.expires_at).toLocaleDateString() : '-';
|
||
|
|
tr.innerHTML =
|
||
|
|
'<td><strong>' + esc(d.name) + '</strong></td>' +
|
||
|
|
'<td><span class="badge ' + (d.status === 'active' ? 'badge-ok' : 'badge-err') + '">' + esc(d.status) + '</span></td>' +
|
||
|
|
'<td>' + exp + '</td>' +
|
||
|
|
'<td>' +
|
||
|
|
'<button class="btn btn-sm" onclick="toggleLock(\'' + esc(d.name) + '\',true)">Lock</button> ' +
|
||
|
|
'<button class="btn btn-sm" onclick="toggleLock(\'' + esc(d.name) + '\',false)">Unlock</button>' +
|
||
|
|
'</td>' +
|
||
|
|
'<td>' +
|
||
|
|
'<button class="btn btn-sm" onclick="togglePrivacy(\'' + esc(d.name) + '\',true)">On</button> ' +
|
||
|
|
'<button class="btn btn-sm" onclick="togglePrivacy(\'' + esc(d.name) + '\',false)">Off</button>' +
|
||
|
|
'</td>' +
|
||
|
|
'<td><button class="btn btn-sm" onclick="editNameservers(\'' + esc(d.name) + '\')">NS</button></td>';
|
||
|
|
body.appendChild(tr);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function(e) {
|
||
|
|
body.innerHTML = '<tr><td colspan="6" style="color:var(--err);text-align:center">' + esc(e.message) + '</td></tr>';
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
window.toggleLock = function(domain, lock) {
|
||
|
|
api('PUT', '/hosting/' + _provider + '/domains/' + encodeURIComponent(domain) + '/lock', { locked: lock })
|
||
|
|
.then(function() { toast('Lock ' + (lock ? 'enabled' : 'disabled'), true); loadDomains(); })
|
||
|
|
.catch(function(e) { toast(e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
window.togglePrivacy = function(domain, privacy) {
|
||
|
|
api('PUT', '/hosting/' + _provider + '/domains/' + encodeURIComponent(domain) + '/privacy', { privacy: privacy })
|
||
|
|
.then(function() { toast('Privacy ' + (privacy ? 'enabled' : 'disabled'), true); loadDomains(); })
|
||
|
|
.catch(function(e) { toast(e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
window.editNameservers = function(domain) {
|
||
|
|
var ns = prompt('Enter nameservers (comma-separated):', '');
|
||
|
|
if (ns === null) return;
|
||
|
|
var list = ns.split(',').map(function(s) { return s.trim(); }).filter(Boolean);
|
||
|
|
if (!list.length) { toast('Provide at least one nameserver', false); return; }
|
||
|
|
api('PUT', '/hosting/' + _provider + '/domains/' + encodeURIComponent(domain) + '/nameservers', { nameservers: list })
|
||
|
|
.then(function() { toast('Nameservers updated', true); loadDomains(); })
|
||
|
|
.catch(function(e) { toast(e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
window.checkDomain = function() {
|
||
|
|
var domain = document.getElementById('domain-check-input').value.trim();
|
||
|
|
if (!domain) return;
|
||
|
|
var tldsRaw = document.getElementById('domain-check-tlds').value.trim();
|
||
|
|
var tlds = tldsRaw.split(',').map(function(s) { return s.trim().replace(/^\./, ''); }).filter(Boolean);
|
||
|
|
if (!tlds.length) tlds = ['com','net','org','io','dev'];
|
||
|
|
var el = document.getElementById('domain-check-result');
|
||
|
|
el.innerHTML = '<span style="color:var(--text-muted)">Checking...</span>';
|
||
|
|
api('POST', '/hosting/' + _provider + '/domains/check', { domain: domain, tlds: tlds })
|
||
|
|
.then(function(results) {
|
||
|
|
el.innerHTML = '';
|
||
|
|
if (!results || !results.length) { el.innerHTML = '<span style="color:var(--text-muted)">No results</span>'; return; }
|
||
|
|
results.forEach(function(r) {
|
||
|
|
var badge = r.available
|
||
|
|
? '<span class="badge badge-ok">Available</span>'
|
||
|
|
: '<span class="badge badge-err">Taken</span>';
|
||
|
|
var price = r.available && r.price ? ' — ' + (r.currency||'USD') + ' ' + r.price.toFixed(2) : '';
|
||
|
|
el.innerHTML += '<p>' + esc(r.domain) + '.' + esc(r.tld) + ' ' + badge + price + '</p>';
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function(e) { el.innerHTML = '<span style="color:var(--err)">' + esc(e.message) + '</span>'; });
|
||
|
|
};
|
||
|
|
|
||
|
|
window.purchaseDomain = function() {
|
||
|
|
var domain = document.getElementById('purchase-domain').value.trim();
|
||
|
|
if (!domain) { toast('Enter a domain', false); return; }
|
||
|
|
if (!confirm('Purchase ' + domain + '? This may charge your account.')) return;
|
||
|
|
api('POST', '/hosting/' + _provider + '/domains/purchase', {
|
||
|
|
domain: domain,
|
||
|
|
years: parseInt(document.getElementById('purchase-period').value),
|
||
|
|
auto_renew: document.getElementById('purchase-autorenew').checked,
|
||
|
|
privacy: document.getElementById('purchase-privacy').checked
|
||
|
|
})
|
||
|
|
.then(function() { toast('Domain purchased successfully', true); loadDomains(); })
|
||
|
|
.catch(function(e) { toast('Purchase failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
// ── VPS tab ──────────────────────────────────────────────────────────────
|
||
|
|
window.loadVMs = function() {
|
||
|
|
var body = document.getElementById('vms-body');
|
||
|
|
body.innerHTML = '<tr><td colspan="8" style="text-align:center; color:var(--text-muted)">Loading...</td></tr>';
|
||
|
|
api('GET', '/hosting/' + _provider + '/vms')
|
||
|
|
.then(function(vms) {
|
||
|
|
if (!vms || !vms.length) {
|
||
|
|
body.innerHTML = '<tr><td colspan="8" style="text-align:center; color:var(--text-muted)">No VMs found</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
body.innerHTML = '';
|
||
|
|
vms.forEach(function(vm) {
|
||
|
|
var statusClass = vm.status === 'running' ? 'badge-ok' : (vm.status === 'stopped' ? 'badge-err' : '');
|
||
|
|
var ramGB = vm.ram_bytes ? (vm.ram_bytes / (1024*1024*1024)).toFixed(1) : '0';
|
||
|
|
var diskGB = vm.disk_bytes ? (vm.disk_bytes / (1024*1024*1024)).toFixed(0) : '0';
|
||
|
|
var tr = document.createElement('tr');
|
||
|
|
tr.style.cursor = 'pointer';
|
||
|
|
tr.onclick = function() { viewVM(vm.id); };
|
||
|
|
tr.innerHTML =
|
||
|
|
'<td><strong>' + esc(vm.hostname || vm.id) + '</strong></td>' +
|
||
|
|
'<td><span class="badge ' + statusClass + '">' + esc(vm.status) + '</span></td>' +
|
||
|
|
'<td>' + esc(vm.plan) + '</td>' +
|
||
|
|
'<td>' + esc(vm.data_center) + '</td>' +
|
||
|
|
'<td><code>' + esc(vm.ip_address || '-') + '</code></td>' +
|
||
|
|
'<td>' + vm.cpus + '</td>' +
|
||
|
|
'<td>' + ramGB + ' GB</td>' +
|
||
|
|
'<td>' + diskGB + ' GB</td>';
|
||
|
|
body.appendChild(tr);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function(e) {
|
||
|
|
body.innerHTML = '<tr><td colspan="8" style="color:var(--err);text-align:center">' + esc(e.message) + '</td></tr>';
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
function viewVM(id) {
|
||
|
|
api('GET', '/hosting/' + _provider + '/vms/' + encodeURIComponent(id))
|
||
|
|
.then(function(vm) {
|
||
|
|
alert('VM: ' + vm.hostname + '\nIP: ' + (vm.ip_address || 'N/A') + '\nStatus: ' + vm.status + '\nOS: ' + (vm.os || 'N/A'));
|
||
|
|
})
|
||
|
|
.catch(function(e) { toast(e.message, false); });
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadDataCenters() {
|
||
|
|
api('GET', '/hosting/' + _provider + '/datacenters')
|
||
|
|
.then(function(dcs) {
|
||
|
|
var sel = document.getElementById('vm-datacenter');
|
||
|
|
sel.innerHTML = '<option value="">-- select --</option>';
|
||
|
|
if (dcs && dcs.length) {
|
||
|
|
dcs.forEach(function(dc) {
|
||
|
|
var opt = document.createElement('option');
|
||
|
|
opt.value = dc.id;
|
||
|
|
opt.textContent = dc.name + ' (' + dc.location + ')';
|
||
|
|
sel.appendChild(opt);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(function() {});
|
||
|
|
// Also load SSH keys for the VM form
|
||
|
|
api('GET', '/hosting/' + _provider + '/ssh-keys')
|
||
|
|
.then(function(keys) {
|
||
|
|
var sel = document.getElementById('vm-sshkey');
|
||
|
|
sel.innerHTML = '<option value="">None</option>';
|
||
|
|
if (keys && keys.length) {
|
||
|
|
keys.forEach(function(k) {
|
||
|
|
var opt = document.createElement('option');
|
||
|
|
opt.value = k.id;
|
||
|
|
opt.textContent = k.name;
|
||
|
|
sel.appendChild(opt);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(function() {});
|
||
|
|
}
|
||
|
|
|
||
|
|
window.showCreateVM = function() {
|
||
|
|
document.getElementById('vm-create-form').style.display = 'block';
|
||
|
|
loadDataCenters();
|
||
|
|
};
|
||
|
|
|
||
|
|
window.createVM = function() {
|
||
|
|
var req = {
|
||
|
|
hostname: document.getElementById('vm-hostname').value.trim(),
|
||
|
|
plan: document.getElementById('vm-plan').value.trim(),
|
||
|
|
data_center_id: document.getElementById('vm-datacenter').value,
|
||
|
|
template: document.getElementById('vm-template').value.trim(),
|
||
|
|
password: document.getElementById('vm-password').value
|
||
|
|
};
|
||
|
|
var sshKey = document.getElementById('vm-sshkey').value;
|
||
|
|
if (sshKey) req.ssh_key_id = sshKey;
|
||
|
|
|
||
|
|
if (!req.plan || !req.data_center_id) {
|
||
|
|
toast('Plan and data center are required', false);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
api('POST', '/hosting/' + _provider + '/vms', req)
|
||
|
|
.then(function(vm) {
|
||
|
|
toast('VM created: ' + (vm.name || vm.id), true);
|
||
|
|
document.getElementById('vm-create-form').style.display = 'none';
|
||
|
|
loadVMs();
|
||
|
|
})
|
||
|
|
.catch(function(e) { toast('Create failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
// ── SSH Keys tab ─────────────────────────────────────────────────────────
|
||
|
|
window.loadSSHKeys = function() {
|
||
|
|
var body = document.getElementById('ssh-body');
|
||
|
|
body.innerHTML = '<tr><td colspan="3" style="text-align:center; color:var(--text-muted)">Loading...</td></tr>';
|
||
|
|
api('GET', '/hosting/' + _provider + '/ssh-keys')
|
||
|
|
.then(function(keys) {
|
||
|
|
if (!keys || !keys.length) {
|
||
|
|
body.innerHTML = '<tr><td colspan="3" style="text-align:center; color:var(--text-muted)">No SSH keys found</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
body.innerHTML = '';
|
||
|
|
keys.forEach(function(k) {
|
||
|
|
var tr = document.createElement('tr');
|
||
|
|
tr.innerHTML =
|
||
|
|
'<td><strong>' + esc(k.name) + '</strong></td>' +
|
||
|
|
'<td><code>' + esc(k.fingerprint || '-') + '</code></td>' +
|
||
|
|
'<td><button class="btn btn-sm" onclick="deleteSSHKey(\'' + esc(k.id) + '\',\'' + esc(k.name) + '\')" style="color:var(--err);">Delete</button></td>';
|
||
|
|
body.appendChild(tr);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function(e) {
|
||
|
|
body.innerHTML = '<tr><td colspan="3" style="color:var(--err);text-align:center">' + esc(e.message) + '</td></tr>';
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addSSHKey = function() {
|
||
|
|
var name = document.getElementById('ssh-name').value.trim();
|
||
|
|
var pubkey = document.getElementById('ssh-pubkey').value.trim();
|
||
|
|
if (!name || !pubkey) { toast('Name and public key are required', false); return; }
|
||
|
|
api('POST', '/hosting/' + _provider + '/ssh-keys', { name: name, public_key: pubkey })
|
||
|
|
.then(function() {
|
||
|
|
toast('SSH key added', true);
|
||
|
|
document.getElementById('ssh-name').value = '';
|
||
|
|
document.getElementById('ssh-pubkey').value = '';
|
||
|
|
loadSSHKeys();
|
||
|
|
})
|
||
|
|
.catch(function(e) { toast('Add failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
window.deleteSSHKey = function(id, name) {
|
||
|
|
if (!confirm('Delete SSH key "' + name + '"?')) return;
|
||
|
|
api('DELETE', '/hosting/' + _provider + '/ssh-keys/' + encodeURIComponent(id))
|
||
|
|
.then(function() { toast('Key deleted', true); loadSSHKeys(); })
|
||
|
|
.catch(function(e) { toast('Delete failed: ' + e.message, false); });
|
||
|
|
};
|
||
|
|
|
||
|
|
// ── Billing tab ──────────────────────────────────────────────────────────
|
||
|
|
function loadSubscriptions() {
|
||
|
|
var body = document.getElementById('subs-body');
|
||
|
|
body.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-muted)">Loading...</td></tr>';
|
||
|
|
api('GET', '/hosting/' + _provider + '/subscriptions')
|
||
|
|
.then(function(subs) {
|
||
|
|
if (!subs || !subs.length) {
|
||
|
|
body.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-muted)">No subscriptions found</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
body.innerHTML = '';
|
||
|
|
subs.forEach(function(s) {
|
||
|
|
var statusClass = s.status === 'active' ? 'badge-ok' : (s.status === 'cancelled' ? 'badge-err' : '');
|
||
|
|
var renews = s.renews_at ? new Date(s.renews_at).toLocaleDateString() : '-';
|
||
|
|
var tr = document.createElement('tr');
|
||
|
|
tr.innerHTML =
|
||
|
|
'<td>' + esc(s.name) + '</td>' +
|
||
|
|
'<td>' + esc(s.plan) + '</td>' +
|
||
|
|
'<td><span class="badge ' + statusClass + '">' + esc(s.status) + '</span></td>' +
|
||
|
|
'<td>' + (s.currency || 'USD') + ' ' + (s.price || 0).toFixed(2) + '</td>' +
|
||
|
|
'<td>' + renews + '</td>';
|
||
|
|
body.appendChild(tr);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function(e) {
|
||
|
|
body.innerHTML = '<tr><td colspan="5" style="color:var(--err);text-align:center">' + esc(e.message) + '</td></tr>';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadCatalog() {
|
||
|
|
var body = document.getElementById('catalog-body');
|
||
|
|
body.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-muted)">Loading...</td></tr>';
|
||
|
|
api('GET', '/hosting/' + _provider + '/catalog')
|
||
|
|
.then(function(items) {
|
||
|
|
if (!items || !items.length) {
|
||
|
|
body.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-muted)">No catalog items</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
body.innerHTML = '';
|
||
|
|
items.forEach(function(item) {
|
||
|
|
var price = (item.price_cents / 100).toFixed(2);
|
||
|
|
var tr = document.createElement('tr');
|
||
|
|
tr.innerHTML =
|
||
|
|
'<td><strong>' + esc(item.name) + '</strong></td>' +
|
||
|
|
'<td><span class="badge">' + esc(item.category) + '</span></td>' +
|
||
|
|
'<td>' + (item.currency || 'USD') + ' ' + price + '</td>' +
|
||
|
|
'<td>' + esc(item.period || '-') + '</td>' +
|
||
|
|
'<td style="color:var(--text-muted); font-size:.85rem;">' + esc(item.description || '') + '</td>';
|
||
|
|
body.appendChild(tr);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(function(e) {
|
||
|
|
body.innerHTML = '<tr><td colspan="5" style="color:var(--err);text-align:center">' + esc(e.message) + '</td></tr>';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Utility ──────────────────────────────────────────────────────────────
|
||
|
|
function esc(s) {
|
||
|
|
if (!s) return '';
|
||
|
|
var d = document.createElement('div');
|
||
|
|
d.appendChild(document.createTextNode(s));
|
||
|
|
return d.innerHTML;
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
{{end}}
|