fix: editTeam endpoint + leaderboard live name resolution + domains in team set + apt-insecure.conf in all service dirs
This commit is contained in:
root
+113
-29
@@ -143,8 +143,14 @@
|
||||
|
||||
<!-- Topology view -->
|
||||
<div class="view" id="view-topo">
|
||||
<div class="topo-toolbar" style="display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap">
|
||||
<button onclick="topoZoom(1.25)">🔍 + Zoom In</button>
|
||||
<button onclick="topoZoom(0.8)">🔎 Zoom Out</button>
|
||||
<button onclick="topoReset()">⟳ Reset</button>
|
||||
<span id="topoZoomLabel" style="font-size:12px;color:var(--dim);min-width:40px">100%</span>
|
||||
</div>
|
||||
<div class="topo-wrap"><svg id="topoSvg" class="topo-svg" height="520"></svg></div>
|
||||
<div class="topo-hint">💡 Geser node untuk mengatur layout • ⚔️ garis merah = serangan (panah attacker → target) • garis <b>putus-putus</b> = serangan baru (60 detik terakhir)</div>
|
||||
<div class="topo-hint">💡 <b>Geser node</b> untuk atur layout • <b>scroll / ctrl+scroll</b> untuk zoom in-out • <b>drag area kosong</b> untuk geser canvas • ⚔️ garis merah = serangan (panah attacker → target) • garis <b>putus-putus</b> = serangan baru (60 detik terakhir)</div>
|
||||
</div>
|
||||
|
||||
<!-- Teams view -->
|
||||
@@ -482,44 +488,99 @@ function renderTopo(nodes, edges) {
|
||||
${status ? `<circle cx="${p.x + r - 8}" cy="${p.y - r + 8}" r="5" fill="#34d399"/>` : ''}
|
||||
</g>`;
|
||||
});
|
||||
svg.innerHTML = `<defs><marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#2a4a6f"/></marker></defs>` + html;
|
||||
svg.innerHTML = `<defs><marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#2a4a6f"/></marker></defs><g data-root>${html}</g>`;
|
||||
enableTopoDrag(svg, pos);
|
||||
applyTopoView();
|
||||
}
|
||||
|
||||
// ---- draggable topology ----
|
||||
// ---- draggable topology + zoom/pan ----
|
||||
let topoScale = 1;
|
||||
let topoPanX = 0, topoPanY = 0;
|
||||
function enableTopoDrag(svg, pos) {
|
||||
const gMain = svg.querySelector('g[data-root]') || svg;
|
||||
let dragEl = null, dx = 0, dy = 0;
|
||||
const onMove = (ev) => {
|
||||
if (!dragEl) return;
|
||||
let panning = false, px = 0, py = 0;
|
||||
|
||||
const toLocal = (ev) => {
|
||||
const ctm = svg.getScreenCTM();
|
||||
if (!ctm) return;
|
||||
if (!ctm) return {x: 0, y: 0};
|
||||
const pt = svg.createSVGPoint();
|
||||
pt.x = ev.clientX; pt.y = ev.clientY;
|
||||
const p = pt.matrixTransform(ctm.inverse());
|
||||
dragEl.setAttribute('transform', `translate(${p.x - dx}, ${p.y - dy})`);
|
||||
return pt.matrixTransform(ctm.inverse());
|
||||
};
|
||||
const onUp = () => { dragEl = null; svg.style.cursor = ''; };
|
||||
|
||||
const onMove = (ev) => {
|
||||
if (dragEl) {
|
||||
const p = toLocal(ev);
|
||||
dragEl.setAttribute('transform', `translate(${p.x - dx}, ${p.y - dy})`);
|
||||
} else if (panning) {
|
||||
topoPanX += ev.clientX - px;
|
||||
topoPanY += ev.clientY - py;
|
||||
px = ev.clientX; py = ev.clientY;
|
||||
applyTopoView();
|
||||
}
|
||||
};
|
||||
const onUp = () => { dragEl = null; panning = false; svg.style.cursor = ''; };
|
||||
|
||||
svg.addEventListener('mousedown', (ev) => {
|
||||
const g = ev.target.closest('g[data-node]');
|
||||
if (!g) return;
|
||||
ev.preventDefault();
|
||||
const ctm = svg.getScreenCTM();
|
||||
const pt = svg.createSVGPoint();
|
||||
pt.x = ev.clientX; pt.y = ev.clientY;
|
||||
const p = pt.matrixTransform(ctm.inverse());
|
||||
const c = g.querySelector('circle');
|
||||
const cx = parseFloat(c.getAttribute('cx'));
|
||||
const cy = parseFloat(c.getAttribute('cy'));
|
||||
dx = p.x - cx; dy = p.y - cy;
|
||||
dragEl = g;
|
||||
svg.style.cursor = 'grabbing';
|
||||
g.setPointerCapture && g.setPointerCapture(ev.pointerId);
|
||||
if (g) {
|
||||
ev.preventDefault();
|
||||
const p = toLocal(ev);
|
||||
const c = g.querySelector('circle');
|
||||
dx = p.x - parseFloat(c.getAttribute('cx'));
|
||||
dy = p.y - parseFloat(c.getAttribute('cy'));
|
||||
dragEl = g;
|
||||
svg.style.cursor = 'grabbing';
|
||||
g.setPointerCapture && g.setPointerCapture(ev.pointerId);
|
||||
} else {
|
||||
// empty area -> pan the canvas
|
||||
panning = true;
|
||||
px = ev.clientX; py = ev.clientY;
|
||||
svg.style.cursor = 'move';
|
||||
}
|
||||
});
|
||||
svg.addEventListener('pointermove', onMove);
|
||||
svg.addEventListener('pointerup', onUp);
|
||||
svg.addEventListener('pointercancel', onUp);
|
||||
|
||||
// wheel zoom (ctrl+wheel or plain wheel on empty area)
|
||||
svg.addEventListener('wheel', (ev) => {
|
||||
ev.preventDefault();
|
||||
const factor = ev.deltaY < 0 ? 1.12 : 1 / 1.12;
|
||||
const ns = Math.min(3, Math.max(0.3, topoScale * factor));
|
||||
// zoom around cursor
|
||||
const rect = svg.getBoundingClientRect();
|
||||
const mx = ev.clientX - rect.left, my = ev.clientY - rect.top;
|
||||
const W = svg.clientWidth, H = svg.clientHeight;
|
||||
topoPanX = mx - (mx - topoPanX) * (ns / topoScale);
|
||||
topoPanY = my - (my - topoPanY) * (ns / topoScale);
|
||||
topoScale = ns;
|
||||
applyTopoView();
|
||||
}, {passive: false});
|
||||
}
|
||||
|
||||
function applyTopoView() {
|
||||
const svg = document.getElementById('topoSvg');
|
||||
const g = svg.querySelector('g[data-root]');
|
||||
if (!g) return;
|
||||
g.setAttribute('transform', `translate(${topoPanX}, ${topoPanY}) scale(${topoScale})`);
|
||||
// update hint + zoom % label
|
||||
const zl = document.getElementById('topoZoomLabel');
|
||||
if (zl) zl.textContent = Math.round(topoScale * 100) + '%';
|
||||
}
|
||||
|
||||
function topoZoom(factor) {
|
||||
const svg = document.getElementById('topoSvg');
|
||||
const rect = svg.getBoundingClientRect();
|
||||
const ns = Math.min(3, Math.max(0.3, topoScale * factor));
|
||||
topoPanX = rect.width / 2 - (rect.width / 2 - topoPanX) * (ns / topoScale);
|
||||
topoPanY = rect.height / 2 - (rect.height / 2 - topoPanY) * (ns / topoScale);
|
||||
topoScale = ns;
|
||||
applyTopoView();
|
||||
}
|
||||
function topoReset() { topoScale = 1; topoPanX = 0; topoPanY = 0; applyTopoView(); }
|
||||
|
||||
// ---------- Teams ----------
|
||||
async function loadTeams() {
|
||||
try {
|
||||
@@ -547,6 +608,7 @@ async function loadTeams() {
|
||||
<button class="primary" onclick="startTeam(${t.index})">▶ Start</button>
|
||||
<button class="danger" onclick="stopTeam(${t.index})">⏹ Stop</button>
|
||||
<button onclick="viewTeamCred(${t.index})">🔑 SSH & Pass</button>
|
||||
<button onclick="editTeam(${t.index})">✏️ Edit Nama/Domain</button>
|
||||
<button onclick="openTeamLogs(${t.index})">📜 Logs</button>
|
||||
<button onclick="randomizeTeam(${t.index})">🎲 Randomize Flag</button>
|
||||
</div>
|
||||
@@ -558,14 +620,16 @@ async function loadTeams() {
|
||||
|
||||
async function setTeams() {
|
||||
const n = parseInt(document.getElementById('teamCount').value || '0', 10);
|
||||
const labels = {};
|
||||
const labels = {}, domains = {};
|
||||
for (let i = 1; i <= n; i++) {
|
||||
const inp = document.getElementById('teamNameInputs')?.querySelector(`input[data-idx="${i}"]`);
|
||||
if (inp && inp.value.trim()) labels[i] = inp.value.trim();
|
||||
const inpN = document.getElementById('teamNameInputs')?.querySelector(`input[data-idx="${i}"][data-field="name"]`);
|
||||
if (inpN && inpN.value.trim()) labels[i] = inpN.value.trim();
|
||||
const inpD = document.getElementById('teamNameInputs')?.querySelector(`input[data-idx="${i}"][data-field="domain"]`);
|
||||
if (inpD && inpD.value.trim()) domains[i] = inpD.value.trim();
|
||||
}
|
||||
try {
|
||||
showLoading(`Membuat ${n} team…<br>Generate compose, flags, domain, Traefik config`);
|
||||
const d = await api('/api/teams/set', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({count: n, labels})});
|
||||
const d = await api('/api/teams/set', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({count: n, labels, domains})});
|
||||
toast(`Team dibuat: ${d.created.join(', ') || 'tidak ada yang baru'} · total ${d.total}`, false);
|
||||
loadTeams();
|
||||
} catch (e) { toast(e.message, true); }
|
||||
@@ -575,16 +639,36 @@ async function setTeams() {
|
||||
function teamCountChanged() {
|
||||
const n = parseInt(document.getElementById('teamCount').value || '0', 10);
|
||||
const box = document.getElementById('teamNameInputs');
|
||||
let html = '';
|
||||
let html = '<div style="font-size:11px;color:#718096;margin-bottom:4px">Nama team & domain custom (opsional — kosongkan untuk auto dari nama)</div>';
|
||||
for (let i = 1; i <= n; i++) {
|
||||
html += `<div style="display:flex;align-items:center;gap:8px">
|
||||
html += `<div style="display:flex;align-items:center;gap:6px">
|
||||
<span style="color:#718096;font-size:12px;width:60px">Team ${i}</span>
|
||||
<input data-idx="${i}" placeholder="Nama team (jd domain: nama.gemastik.imrnes.team)" style="flex:1">
|
||||
<input data-idx="${i}" data-field="name" placeholder="Nama team (contoh: Cyber Warriors)" style="flex:1;min-width:120px">
|
||||
<input data-idx="${i}" data-field="domain" placeholder="domain custom (contoh: team-cyber)" style="flex:1;min-width:120px">
|
||||
<span style="color:#3b4a63;font-size:11px">.gemastik.imrnes.team</span>
|
||||
</div>`;
|
||||
}
|
||||
box.innerHTML = html;
|
||||
}
|
||||
|
||||
async function editTeam(idx) {
|
||||
// fetch current team info
|
||||
let t = null;
|
||||
try { t = (await api(`/api/team/${idx}/creds`)).team; } catch (e) { toast('Gagal ambil data team', true); return; }
|
||||
const newLabel = prompt(`✏️ Nama team ${idx} (sekarang: ${t.label || ('Team ' + idx)}):`, t.label || '');
|
||||
if (newLabel === null) return;
|
||||
const newDomain = prompt(`🌐 Domain custom team ${idx} (sekarang: ${t.domain || ''} — ketik subdomain saja, contoh: team-cyber):`, (t.domain || '').split('.')[0]);
|
||||
if (newDomain === null) return;
|
||||
try {
|
||||
showLoading('Update nama/domain team…');
|
||||
const d = await api(`/api/teams/${idx}`, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify({label: newLabel.trim(), domain: newDomain.trim()})});
|
||||
toast(`Team ${idx} diupdate: ${d.team.label} @ ${d.team.domain}`, false);
|
||||
loadTeams();
|
||||
if (document.getElementById('view-topo').classList.contains('active')) loadTopo();
|
||||
} catch (e) { toast(e.message, true); }
|
||||
finally { hideLoading(); }
|
||||
}
|
||||
|
||||
async function startTeam(idx) {
|
||||
const ov = showLoading(`Menyiapkan Team ${idx}…<br>Membangun & start container (bisa butuh 1-3 menit)`);
|
||||
try { await api('/api/teams/start', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({index: idx})}); toast(`Team ${idx} start`, false); }
|
||||
|
||||
Reference in New Issue
Block a user