Create admin.html

static/admin.html

@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>InfinityChat Admin</title>
+<style>
+:root {
+  --primary:#6366F1; --primary-hover:#4F46E5; --primary-soft:#312E81;
+  --bg:#0B0B14; --bg2:#171725; --bg3:#262639;
+  --text:#F5F3FF; --text2:#C4B5FD; --text3:#8A8AA0;
+  --border:#373349; --border-light:#23202F;
+  --success:#34D399; --warning:#FBBF24; --danger:#FB7185; --info:#60A5FA;
+}
+* { box-sizing:border-box; margin:0; padding:0; }
+body {
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  background:var(--bg); color:var(--text); min-height:100vh;
+}
+a { color:var(--info); text-decoration:none; }
+a:hover { text-decoration:underline; }
+.topbar {
+  display:flex; align-items:center; gap:.75rem;
+  padding:.9rem 1.25rem; background:var(--bg2);
+  border-bottom:1px solid var(--border-light);
+  position:sticky; top:0; z-index:10;
+}
+.topbar h1 { font-size:1.05rem; font-weight:700; display:flex; gap:.5rem; align-items:center; }
+.topbar .spacer { flex:1; }
+.btn {
+  border:none; border-radius:8px; padding:.55rem .9rem; cursor:pointer;
+  font-weight:600; font-size:.85rem; color:#fff; background:var(--primary);
+  transition:background .15s ease, transform .05s ease;
+}
+.btn:hover { background:var(--primary-hover); }
+.btn:disabled { opacity:.5; cursor:not-allowed; }
+.btn.secondary { background:var(--bg3); color:var(--text); border:1px solid var(--border); }
+.btn.secondary:hover { background:#31314A; }
+.btn.danger { background:transparent; color:var(--danger); border:1px solid rgba(251,113,133,.35); }
+.btn.danger:hover { background:rgba(251,113,133,.12); }
+.container { max-width:1000px; margin:0 auto; padding:1.5rem 1.25rem 4rem; }
+.card {
+  background:var(--bg2); border:1px solid var(--border);
+  border-radius:14px; padding:1.1rem 1.2rem; margin-bottom:1rem;
+}
+.card h2 { font-size:.95rem; margin-bottom:.9rem; display:flex; align-items:center; gap:.45rem; }
+.muted { color:var(--text3); font-size:.82rem; }
+.hidden { display:none !important; }
+
+.login-wrap { max-width:380px; margin:12vh auto 0; }
+.login-wrap .card { padding:1.5rem; }
+.login-wrap h2 { font-size:1.15rem; margin-bottom:.25rem; }
+.login-wrap .muted { display:block; margin-bottom:1rem; }
+label { display:block; font-size:.82rem; color:var(--text2); margin:.8rem 0 .3rem; }
+input {
+  width:100%; background:var(--bg3); color:var(--text);
+  border:1px solid var(--border); border-radius:8px; padding:.65rem .75rem;
+  font-size:.9rem;
+}
+input:focus { outline:none; border-color:var(--primary); }
+.login-err { color:var(--danger); font-size:.82rem; margin-top:.7rem; min-height:1em; }
+
+.status-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.8rem; }
+.stat {
+  background:var(--bg3); border:1px solid var(--border-light);
+  border-radius:10px; padding:.8rem .9rem;
+}
+.stat .label { font-size:.72rem; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; }
+.stat .value { font-size:.9rem; font-weight:600; margin-top:.25rem; word-break:break-all; }
+.toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
+.badge { display:inline-block; padding:.12rem .5rem; border-radius:999px; font-size:.72rem; font-weight:700; }
+.badge.local { background:rgba(96,165,250,.15); color:var(--info); }
+.badge.bucket { background:rgba(52,211,153,.15); color:var(--success); }
+
+.backup-list { display:flex; flex-direction:column; gap:.55rem; }
+.backup-row {
+  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
+  padding:.75rem .9rem; background:var(--bg3);
+  border:1px solid var(--border-light); border-radius:10px;
+}
+.backup-row .info { flex:1; min-width:180px; }
+.backup-row .info .name { font-weight:600; font-size:.88rem; }
+.backup-row .info .meta { font-size:.76rem; color:var(--text3); margin-top:.15rem; }
+.backup-row .actions { display:flex; gap:.4rem; }
+.empty { color:var(--text3); padding:1rem; text-align:center; }
+.toast {
+  position:fixed; bottom:1rem; right:1rem; z-index:1000;
+  background:var(--bg3); border:1px solid var(--border);
+  border-radius:10px; padding:.7rem .9rem; max-width:320px;
+  box-shadow:0 8px 20px rgba(0,0,0,.4); font-size:.85rem;
+}
+.toast.error { border-color:rgba(251,113,133,.5); color:var(--danger); }
+.toast.success { border-color:rgba(52,211,153,.5); color:var(--success); }
+@media (max-width:600px) {
+  .status-grid { grid-template-columns:1fr; }
+  .topbar { flex-wrap:wrap; }
+}
+</style>
+</head>
+<body>
+<div class="topbar">
+  <h1>🛠 InfinityChat Admin</h1>
+  <div class="spacer"></div>
+  <a href="/">← Main app</a>
+  <button id="logoutBtn" class="btn secondary hidden">Log out</button>
+</div>
+
+<div class="container">
+  <div id="loginView" class="login-wrap hidden">
+    <div class="card">
+      <h2>Admin sign in</h2>
+      <span class="muted">Use the admin username/password configured in the host's environment secrets.</span>
+      <label for="username">Username</label>
+      <input id="username" autocomplete="username" autofocus>
+      <label for="password">Password</label>
+      <input id="password" type="password" autocomplete="current-password">
+      <div id="loginErr" class="login-err"></div>
+      <div style="margin-top:1rem"><button id="loginBtn" class="btn" style="width:100%">Sign in</button></div>
+    </div>
+  </div>
+
+  <div id="dashboardView" class="hidden">
+    <div class="card">
+      <h2>System status</h2>
+      <div id="statusGrid" class="status-grid"></div>
+    </div>
+
+    <div class="card">
+      <h2>Backups</h2>
+      <div class="toolbar">
+        <button id="refreshBtn" class="btn secondary">Refresh</button>
+        <button id="createBtn" class="btn">Create backup now</button>
+        <span class="muted">A full point-in-time backup runs automatically every hour.</span>
+      </div>
+      <div id="backupList" class="backup-list" style="margin-top:.9rem"></div>
+    </div>
+  </div>
+</div>
+
+<script>
+(() => {
+  const API = location.origin;
+  const TOKEN_KEY = 'infinitychat-admin-token';
+  const loginView = document.getElementById('loginView');
+  const dashboardView = document.getElementById('dashboardView');
+  const logoutBtn = document.getElementById('logoutBtn');
+  const loginBtn = document.getElementById('loginBtn');
+  const loginErr = document.getElementById('loginErr');
+  const usernameEl = document.getElementById('username');
+  const passwordEl = document.getElementById('password');
+  const statusGrid = document.getElementById('statusGrid');
+  const backupList = document.getElementById('backupList');
+  const refreshBtn = document.getElementById('refreshBtn');
+  const createBtn = document.getElementById('createBtn');
+
+  function esc(s) {
+    return String(s == null ? '' : s)
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+      .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+  }
+  function fmt(n) {
+    if (n == null) return '0 B';
+    const v = Number(n);
+    if (!Number.isFinite(v)) return '0 B';
+    if (v >= 1024*1024*1024) return (v/1024/1024/1024).toFixed(1)+' GB';
+    if (v >= 1024*1024) return (v/1024/1024).toFixed(1)+' MB';
+    if (v >= 1024) return (v/1024).toFixed(1)+' KB';
+    return Math.round(v)+' B';
+  }
+  function toast(msg, ok) {
+    const el = document.createElement('div');
+    el.className = 'toast ' + (ok ? 'success' : 'error');
+    el.textContent = msg;
+    document.body.appendChild(el);
+    setTimeout(() => el.remove(), 4200);
+  }
+  function token() { return sessionStorage.getItem(TOKEN_KEY) || ''; }
+  function setToken(v) { sessionStorage.setItem(TOKEN_KEY, v || ''); }
+  function showDashboard() { loginView.classList.add('hidden'); dashboardView.classList.remove('hidden'); logoutBtn.classList.remove('hidden'); }
+  function showLogin() { loginView.classList.remove('hidden'); dashboardView.classList.add('hidden'); logoutBtn.classList.add('hidden'); }
+
+  async function api(path, opts) {
+    const headers = Object.assign({}, opts && opts.headers);
+    const t = token();
+    if (t) headers['X-Admin-Token'] = t;
+    if (opts && opts.body) headers['Content-Type'] = 'application/json';
+    const res = await fetch(API + path, Object.assign({}, opts, { headers }));
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.detail || ('Request failed (' + res.status + ')'));
+    return data;
+  }
+
+  async function refreshStatus() {
+    try {
+      const s = await api('/api/admin/status');
+      const mode = s.storage_mode === 'local' ? 'local' : 'bucket';
+      const rows = [
+        ['App version', s.app_version],
+        ['Storage mode', mode],
+        ['Backup count', s.backup_count],
+        ['Backup interval', 'every ' + Math.round((s.backup_interval_seconds||3600)/3600) + 'h'],
+        ['Database', s.db_path],
+        ['Temp uploads', s.temp_dir],
+        ['Local storage', s.local_storage_dir],
+      ];
+      statusGrid.innerHTML = rows.map(([label, value]) =>
+        `<div class="stat"><div class="label">${esc(label)}</div><div class="value">${esc(value || '—')}</div></div>`
+      ).join('') +
+      `<div class="stat"><div class="label">Storage</div><div class="value"><span class="badge ${mode==='local'?'local':'bucket'}">${esc(mode)}</span></div></div>`;
+    } catch (e) {
+      if (e.message && /401|expired|authentication/i.test(e.message)) {
+        setToken(''); showLogin(); loginErr.textContent = 'Session expired. Sign in again.';
+      } else {
+        toast(e.message, false);
+      }
+    }
+  }
+
+  async function refreshBackups() {
+    refreshBtn.disabled = true;
+    refreshBtn.textContent = 'Refreshing…';
+    try {
+      const data = await api('/api/admin/backups');
+      const list = data.backups || [];
+      if (!list.length) {
+        backupList.innerHTML = '<div class="empty">No backups yet. The first hourly backup will appear soon.</div>';
+        return;
+      }
+      backupList.innerHTML = list.map(b => `
+        <div class="backup-row">
+          <div class="info">
+            <div class="name">${esc(b.category)} · ${esc(b.timestamp)}</div>
+            <div class="meta">${b.file_count||0} files · ${fmt(b.size||0)}${b.has_database ? ' · with database' : ''}</div>
+          </div>
+          <div class="actions">
+            <button class="btn secondary restore-btn" data-path="${esc(b.path)}">Restore</button>
+            <button class="btn danger delete-btn" data-path="${esc(b.path)}">Delete</button>
+          </div>
+        </div>`).join('');
+    } catch (e) {
+      backupList.innerHTML = `<div class="empty">${esc(e.message)}</div>`;
+    } finally {
+      refreshBtn.disabled = false;
+      refreshBtn.textContent = 'Refresh';
+    }
+  }
+
+  async function login(e) {
+    e.preventDefault();
+    const username = usernameEl.value.trim();
+    const password = passwordEl.value;
+    loginBtn.disabled = true; loginErr.textContent = '';
+    try {
+      const data = await api('/api/admin/login', {
+        method:'POST',
+        body: JSON.stringify({ username, password })
+      });
+      setToken(data.token);
+      passwordEl.value = '';
+      showDashboard();
+      toast('Signed in as ' + data.username, true);
+      await Promise.all([refreshStatus(), refreshBackups()]);
+    } catch (err) {
+      loginErr.textContent = err.message;
+    } finally {
+      loginBtn.disabled = false;
+    }
+  }
+
+  async function logout() {
+    try { await api('/api/admin/logout', { method:'POST' }); } catch (e) {}
+    setToken('');
+    showLogin();
+  }
+
+  async function createBackup() {
+    createBtn.disabled = true;
+    createBtn.textContent = 'Creating…';
+    try {
+      const data = await api('/api/admin/backups/create', { method:'POST' });
+      toast('Backup created at ' + data.path, true);
+      await refreshBackups();
+    } catch (e) { toast(e.message, false); }
+    finally {
+      createBtn.disabled = false;
+      createBtn.textContent = 'Create backup now';
+    }
+  }
+
+  function backupPath(btn) { return btn.dataset.path; }
+
+  async function restore(e) {
+    const btn = e.target.closest('.restore-btn');
+    if (!btn) return;
+    if (!confirm('Restore this backup? This overwrites the live database and all restored files. Restart the server after restoring.')) return;
+    btn.disabled = true;
+    const old = btn.textContent;
+    btn.textContent = 'Restoring…';
+    try {
+      const path = backupPath(btn);
+      const data = await api('/api/admin/backups/' + encodeURIComponent(path).replace(/%2F/g,'/') + '/restore', { method:'POST' });
+      toast('Restored ' + (data.files||0) + ' files. Restart the server to apply.', true);
+    } catch (e) { toast(e.message, false); }
+    finally { btn.disabled = false; btn.textContent = old; }
+  }
+
+  async function deleteBackup(e) {
+    const btn = e.target.closest('.delete-btn');
+    if (!btn) return;
+    if (!confirm('Delete this backup permanently? This cannot be undone.')) return;
+    btn.disabled = true;
+    try {
+      const path = backupPath(btn);
+      await api('/api/admin/backups/' + encodeURIComponent(path).replace(/%2F/g,'/'), { method:'DELETE' });
+      toast('Backup deleted', true);
+      await refreshBackups();
+    } catch (e) { toast(e.message, false); }
+    finally { btn.disabled = false; }
+  }
+
+  loginBtn.addEventListener('click', login);
+  [usernameEl, passwordEl].forEach(el => el.addEventListener('keydown', (e) => { if (e.key === 'Enter') login(e); }));
+  logoutBtn.addEventListener('click', logout);
+  refreshBtn.addEventListener('click', refreshBackups);
+  createBtn.addEventListener('click', createBackup);
+  backupList.addEventListener('click', (e) => {
+    if (e.target.closest('.restore-btn')) restore(e);
+    else if (e.target.closest('.delete-btn')) deleteBackup(e);
+  });
+
+  (async function init() {
+    if (!token()) { showLogin(); return; }
+    try {
+      await refreshStatus();
+      await refreshBackups();
+      showDashboard();
+    } catch (e) {
+      if (e.message && /401|expired|authentication/i.test(e.message)) {
+        setToken(''); showLogin(); loginErr.textContent = 'Session expired. Sign in again.';
+      } else {
+        showLogin(); loginErr.textContent = e.message;
+      }
+    }
+  })();
+})();
+</script>
+</body>
+</html>