feat: add Gemastik A/D control panel (web UI for receiver)

- FastAPI app at panel/ proxying receiver API server-side (admin creds stay server-side)
- Login-protected dashboard: SLA status, rotate flag, restart/rollback/activate/deactivate, SSH creds, command history
- Runs as systemd service gemastik-panel.service on :18081
- Published at https://panel.gemastik.imrnes.team via Traefik

panel/static/index.html

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Gemastik A/D Panel</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body {
+    font-family: 'JetBrains Mono','Fira Code',monospace;
+    background: radial-gradient(ellipse at top, #0d1b2a 0%, #0a0f1c 55%, #05070d 100%);
+    color: #c9d4e3; min-height:100vh; padding:24px;
+  }
+  header {
+    display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;
+    border-bottom:1px solid #1e3a5f; padding-bottom:16px; flex-wrap:wrap; gap:12px;
+  }
+  h1 { font-size:22px; color:#5ad1ff; letter-spacing:1px; }
+  .actions { display:flex; gap:10px; align-items:center; }
+  .pill {
+    background:#0e1526; border:1px solid #1e3a5f; color:#8aa0b8; font-size:12px;
+    padding:7px 13px; border-radius:20px;
+  }
+  .pill.green { color:#34d399; border-color:#34d39955; background:#34d39911; }
+  .pill.red { color:#f87171; border-color:#f8717155; background:#f8717111; }
+  button {
+    background:#0e1526; border:1px solid #1e3a5f; color:#a8c3e0; font-family:inherit;
+    font-size:12px; padding:8px 14px; border-radius:8px; cursor:pointer; transition:all .2s;
+  }
+  button:hover { border-color:#3b82f6; color:#fff; }
+  button.primary {
+    background:linear-gradient(135deg,#0ea5e9,#2563eb); border:none; color:#fff; font-weight:700;
+  }
+  button.danger { border-color:#f8717155; color:#f87171; }
+  button.danger:hover { background:#f8717122; }
+  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
+  .card {
+    background:#0e1526cc; border:1px solid #1e3a5f; border-radius:12px; padding:18px;
+    display:flex; flex-direction:column; gap:10px; position:relative;
+  }
+  .card.dead { border-color:#f8717155; background:#1a0f16cc; }
+  .card-top { display:flex; justify-content:space-between; align-items:center; }
+  .ch-name { font-size:16px; font-weight:700; color:#e2ecfa; }
+  .ch-cat {
+    font-size:10px; text-transform:uppercase; letter-spacing:1px; padding:3px 8px;
+    border-radius:10px; background:#1e3a5f44; color:#8aa0b8;
+  }
+  .status { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
+  .status.up { color:#34d399; }
+  .status.down { color:#f87171; }
+  .flag {
+    background:#0a101f; border:1px dashed #2a4a6f; border-radius:8px; padding:10px 12px;
+    font-size:12px; color:#7dd3fc; word-break:break-all; min-height:18px;
+  }
+  .creds { font-size:11px; color:#718096; }
+  .creds b { color:#a8c3e0; font-weight:600; }
+  .btn-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
+  .btn-row button { font-size:11px; padding:6px 10px; }
+  textarea, input[type=text] {
+    width:100%; background:#0a101f; border:1px solid #1e3a5f; color:#dbe6f4;
+    border-radius:8px; padding:10px; font-size:13px; font-family:inherit; outline:none; resize:vertical;
+  }
+  textarea:focus, input:focus { border-color:#3b82f6; }
+  .modal-back {
+    position:fixed; inset:0; background:#000a; display:none; align-items:center; justify-content:center; z-index:50;
+  }
+  .modal-back.open { display:flex; }
+  .modal {
+    background:#0d1526; border:1px solid #2a4a6f; border-radius:14px; padding:26px; width:440px; max-width:92vw;
+  }
+  .modal h2 { font-size:16px; color:#5ad1ff; margin-bottom:16px; }
+  .toast {
+    position:fixed; bottom:24px; right:24px; background:#0e1526; border:1px solid #3b82f6;
+    color:#dbe6f4; padding:13px 18px; border-radius:10px; font-size:13px; z-index:80;
+    opacity:0; transform:translateY(10px); transition:all .3s;
+  }
+  .toast.show { opacity:1; transform:translateY(0); }
+  .toast.err { border-color:#f87171; color:#fca5a5; }
+  .history-box {
+    background:#0a101f; border:1px solid #1e3a5f; border-radius:10px; padding:14px;
+    font-size:11px; color:#7dd3fc; max-height:300px; overflow-y:auto; white-space:pre-wrap;
+  }
+  .footer-note { color:#4a5a70; font-size:11px; margin-top:20px; text-align:center; }
+  .spin { display:inline-block; width:12px; height:12px; border:2px solid #2a4a6f; border-top-color:#5ad1ff; border-radius:50%; animation:sp .7s linear infinite; }
+  @keyframes sp { to { transform:rotate(360deg); } }
+</style>
+</head>
+<body>
+<header>
+  <h1>⚔️ GEMASTIK A/D — NODE CONTROL</h1>
+  <div class="actions">
+    <span class="pill" id="clock">--:--:--</span>
+    <button onclick="refresh()">🔄 Refresh</button>
+    <button onclick="logout()">Keluar</button>
+  </div>
+</header>
+
+<div class="grid" id="grid"></div>
+
+<div class="footer-note">Receiver: https://gemastik.imrnes.team · Auto-refresh tiap 15 detik · Flags dirotate lewat panel ini</div>
+
+<!-- modal flag -->
+<div class="modal-back" id="modalFlag">
+  <div class="modal">
+    <h2 id="mfTitle">Rotate Flag</h2>
+    <input type="text" id="mfFlag" placeholder="GEMASTIK18{...}" style="margin-bottom:12px">
+    <div class="btn-row" style="justify-content:flex-end">
+      <button onclick="closeModal('modalFlag')">Batal</button>
+      <button class="primary" onclick="submitFlag()">Submit Flag</button>
+    </div>
+  </div>
+</div>
+
+<!-- modal creds -->
+<div class="modal-back" id="modalCred">
+  <div class="modal">
+    <h2 id="mcTitle">SSH Credentials</h2>
+    <div id="mcBody" style="font-size:13px;color:#dbe6f4;line-height:1.8"></div>
+    <div class="btn-row" style="justify-content:flex-end;margin-top:14px">
+      <button onclick="closeModal('modalCred')">Tutup</button>
+    </div>
+  </div>
+</div>
+
+<!-- modal history -->
+<div class="modal-back" id="modalHist">
+  <div class="modal" style="width:560px">
+    <h2>Command History (preexec)</h2>
+    <div class="history-box" id="mhBody">loading...</div>
+    <div class="btn-row" style="justify-content:flex-end;margin-top:14px">
+      <button onclick="closeModal('modalHist')">Tutup</button>
+    </div>
+  </div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+let CURRENT = null;
+let REFRESH_MS = 15000;
+
+async function api(path, opts={}) {
+  const r = await fetch(path, opts);
+  if (r.status === 401) { location.href = '/login'; throw new Error('unauth'); }
+  const data = await r.json().catch(() => ({}));
+  if (!r.ok) throw new Error(data.detail || data.receiver_body || r.statusText);
+  return data;
+}
+
+function toast(msg, err=false) {
+  const t = document.getElementById('toast');
+  t.textContent = msg; t.className = 'toast show' + (err ? ' err' : '');
+  setTimeout(() => t.className = 'toast', 3000);
+}
+
+function esc(s) {
+  return (s||'').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+
+async function refresh() {
+  const grid = document.getElementById('grid');
+  try {
+    const d = await api('/api/status');
+    const chs = await api('/api/challenges');
+    const name2cat = Object.fromEntries((chs.challenges||[]).map(c => [c.name, c]));
+    let html = '';
+    for (const ch of d.results) {
+      const meta = name2cat[ch.name] || {};
+      const alive = ch.alive;
+      html += `<div class="card ${alive ? '' : 'dead'}">
+        <div class="card-top">
+          <span class="ch-name">${esc(ch.name)}</span>
+          <span class="ch-cat">${esc(meta.category || ch.category || '')}</span>
+        </div>
+        <div><span class="status ${alive ? 'up' : 'down'}">${alive ? '● SLA OK' : '● SLA DOWN'}</span>
+        <span style="font-size:11px;color:#718096;margin-left:8px">
+          ${esc(ch.port)} / ssh ${esc(ch.ssh)}</span></div>
+        <div class="flag" title="Flag saat ini">🏳️ ${esc(ch.flag || '(kosong — belum di-set)')}</div>
+        <div class="creds" id="creds-${esc(ch.name)}"><span class="spin"></span> ambil kredensial…</div>
+        <div class="btn-row">
+          <button class="primary" onclick="openFlag('${esc(ch.name)}')">Rotate Flag</button>
+          <button onclick="act('restart','${esc(ch.name)}')">Restart</button>
+          <button onclick="act('rollback','${esc(ch.name)}')">Rollback</button>
+          <button onclick="act('activate','${esc(ch.name)}')">Activate</button>
+          <button class="danger" onclick="act('deactivate','${esc(ch.name)}')">Deactivate</button>
+          <button onclick="viewCred('${esc(ch.name)}')">SSH</button>
+        </div>
+      </div>`;
+      // fetch creds lazily
+      fetch(`/api/credential/${ch.name}`).then(r=>r.json()).then(c => {
+        const el = document.getElementById('creds-' + ch.name);
+        if (el && c.username) el.innerHTML = `<b>ctfuser</b> / <b>${esc(c.password)}</b>`;
+      }).catch(()=>{});
+    }
+    grid.innerHTML = html;
+  } catch (e) {
+    toast('Gagal refresh: ' + e.message, true);
+  }
+}
+
+async function act(action, challenge) {
+  try {
+    const d = await api(`/api/${action}/${challenge}`, {method:'POST'});
+    toast(`${action} ${challenge} → receiver ${d.receiver_status}`, false);
+    setTimeout(refresh, 2500);
+  } catch (e) { toast(e.message, true); }
+}
+
+let flagChallenge = null;
+function openFlag(ch) {
+  flagChallenge = ch;
+  document.getElementById('mfTitle').textContent = 'Rotate Flag — ' + ch;
+  document.getElementById('mfFlag').value = '';
+  document.getElementById('modalFlag').classList.add('open');
+  document.getElementById('mfFlag').focus();
+}
+
+async function submitFlag() {
+  const flag = document.getElementById('mfFlag').value.trim();
+  if (!flag) return toast('Flag kosong', true);
+  try {
+    const d = await api('/api/flag', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({challenge: flagChallenge, flag})});
+    toast(`Flag ${flagChallenge} di-rotate → receiver ${d.receiver_status}`, false);
+    closeModal('modalFlag');
+    setTimeout(refresh, 1500);
+  } catch (e) { toast(e.message, true); }
+}
+
+async function viewCred(ch) {
+  try {
+    const c = await api(`/api/credential/${ch}`);
+    document.getElementById('mcTitle').textContent = 'SSH Credentials — ' + ch;
+    let cmd = `ssh ctfuser@warmup.gemastik.imrnes.team -p 10022`.replace('warmup.gemastik.imrnes.team', ch + '.gemastik.imrnes.team').replace('10022', String(ch==='blogpost'?10022:ch==='carbeat'?11022:ch==='cdn'?12022:ch==='phew'?13022:ch==='sheesh'?14022:15022));
+    document.getElementById('mcBody').innerHTML =
+      `<div>User: <b>ctfuser</b></div>
+       <div>Pass: <b>${esc(c.password)}</b></div>
+       <div style="margin-top:10px">SSH:</div>
+       <div class="flag" style="margin-top:6px">${esc(cmd)}</div>`;
+    document.getElementById('modalCred').classList.add('open');
+  } catch (e) { toast(e.message, true); }
+}
+
+async function openHist() {
+  try {
+    const d = await api('/api/history');
+    document.getElementById('mhBody').textContent = d.lines.join('\n') || '(belum ada log)';
+    document.getElementById('modalHist').classList.add('open');
+  } catch (e) { toast(e.message, true); }
+}
+
+function closeModal(id) { document.getElementById(id).classList.remove('open'); }
+async function logout() {
+  await fetch('/api/logout', {method:'POST'});
+  location.href = '/login';
+}
+
+document.getElementById('modalFlag').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal('modalFlag'); });
+document.getElementById('modalCred').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal('modalCred'); });
+document.getElementById('modalHist').addEventListener('click', e => { if (e.target === e.currentTarget) closeModal('modalHist'); });
+
+function tick() {
+  document.getElementById('clock').textContent = new Date().toLocaleTimeString('id-ID');
+}
+setInterval(tick, 1000); tick();
+refresh();
+setInterval(refresh, REFRESH_MS);
+</script>
+</body>
+</html>

panel/static/login.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Gemastik A/D Panel — Login</title>
+<style>
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body {
+    font-family: 'JetBrains Mono','Fira Code',monospace;
+    background: radial-gradient(ellipse at top, #0d1b2a 0%, #0a0f1c 60%, #05070d 100%);
+    color: #c9d4e3; height:100vh; display:flex; align-items:center; justify-content:center;
+  }
+  .card {
+    background:#0e1526cc; border:1px solid #1e3a5f; border-radius:14px;
+    padding:42px 46px; width:360px; box-shadow:0 0 60px #0a3d6b55;
+  }
+  h1 { font-size:20px; color:#5ad1ff; letter-spacing:1px; margin-bottom:6px; }
+  .sub { color:#718096; font-size:12px; margin-bottom:28px; }
+  label { display:block; font-size:11px; color:#7d8ba1; margin:14px 0 6px; text-transform:uppercase; letter-spacing:1px; }
+  input {
+    width:100%; background:#0a101f; border:1px solid #1e3a5f; color:#dbe6f4;
+    border-radius:8px; padding:11px 13px; font-size:14px; font-family:inherit; outline:none;
+  }
+  input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px #3b82f633; }
+  button {
+    width:100%; margin-top:24px; background:linear-gradient(135deg,#0ea5e9,#2563eb);
+    border:none; color:#fff; font-family:inherit; font-weight:700; font-size:14px;
+    padding:12px; border-radius:8px; cursor:pointer; letter-spacing:.5px; transition:filter .2s;
+  }
+  button:hover { filter:brightness(1.15); }
+  .err { color:#f87171; font-size:12px; margin-top:14px; min-height:16px; }
+</style>
+</head>
+<body>
+<div class="card">
+  <h1>⚔️ GEMASTIK A/D</h1>
+  <div class="sub">Node Control Panel — imrnes</div>
+  <form id="f">
+    <label>Username</label>
+    <input id="u" autocomplete="username" required>
+    <label>Password</label>
+    <input id="p" type="password" autocomplete="current-password" required>
+    <button type="submit">MASUK</button>
+    <div class="err" id="err"></div>
+  </form>
+</div>
+<script>
+const f = document.getElementById('f');
+f.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const err = document.getElementById('err');
+  err.textContent = '';
+  const r = await fetch('/api/login', {
+    method: 'POST',
+    headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({user: u.value, pass: p.value})
+  });
+  if (r.ok) location.href = '/';
+  else err.textContent = 'Kredensial salah!';
+});
+</script>
+</body>
+</html>