felt/static/admin.js

let adminToken = null;
const adminWrapper = document.getElementById("adminWrapper");
const adminZone = document.getElementById("adminZone");
const createTableForm = document.getElementById("createTableForm");
const newTableName = document.getElementById("newTableName");
const newTablePass = document.getElementById("newTablePass");

async function getTable(name, pass) {
  try {
    const headers = new Headers();
    headers.set('Authorization', 'Bearer ' + adminToken.access_token);
    const res = await fetch(`/admin/api/table/${name}?passcode=${pass}`, {
      method: 'GET',
      headers: headers,
    });
  
    if (res.ok) {
      infoHtml = "<a href='#' onclick='getTables()'>&larr; table list</a><br><pre>";
      infoHtml += await res.text();
      infoHtml += "</pre>"
      adminZone.innerHTML = infoHtml;
    }
    else {
      console.log(res.status);
    }
  } catch (err) {
    console.dir(err)
  }
}

async function getTables() {
  try {
    const headers = new Headers();
    headers.set('Authorization', 'Bearer ' + adminToken.access_token);
    const res = await fetch('/admin/api/table/', {
      method: 'GET',
      headers: headers
    });
    if (res.ok) {
      const tableList = await res.json();
      let tableListHTML = "<ul>\n";
      for (const t of tableList) {
        tableListHTML +=  `<li><a href="#" onclick="getTable('${t.name}','${t.passcode}');return false;">${t.name}</a></li>\n`
      }
      tableListHTML += "</ul>"
      adminZone.innerHTML = tableListHTML;
    } else {
      if (res.status == 404) {
        return;
      }
      setErr(await res.headers.get("Quartzgun-Error"));
    }
  } catch {
  }
}

async function doLogin() {
  const adminUsrInput = document.getElementById("name_entry");
  const adminPassInput = document.getElementById("input_admin_pass");
  
  if (adminUsrInput && adminPassInput) {
    adminToken = await getAdminToken(adminUsrInput.value, adminPassInput.value);
    if (adminToken) {
      adminWrapper.style.display="block";
      getTables();
    } else {
      setErr("Incorrect credentials");
    }
  }
}

function showAdminModal(show) {
  const modal = document.getElementById("admin_modal")
  if (modal) {
    modal.style.display = show ? "block" : "none";
  }
}

async function getAdminToken(user, pass) {
  const headers = new Headers();
  headers.set('Authorization', 'Basic ' + btoa(user + ":" + pass));
  try {
    const res = await fetch('/admin/api/auth/', {
      method: 'POST',
      headers: headers
    });
    
    if (res.ok) {
      return await res.json();
    }
    return null;
  } catch (err) {
    return null;
  }
}

function setTableCreateFormVisible(v) {
  if (createTableForm) {
    createTableForm.style.display = v ? "block" : "none";
  }
  if (!v) {
    if (newTableName) {
      newTableName.value = "";
    }
    if (newTablePass) {
      newTablePass.value = "";
    }
  }
}

async function createTable() {
  const headers = new Headers();
  headers.set('Authorization', 'Bearer ' + adminToken.access_token);
    
  const formData = new FormData();
  formData.set("name", newTableName.value);
  formData.set("passcode", newTablePass.value);
  
  let bodyStr = "{";
  for (const pair of formData.entries()) {
    bodyStr += `"${pair[0]}": "${pair[1]}",`;
  }
  bodyStr = bodyStr.slice(0, -1);
  bodyStr += "}";
  const res = await fetch('/admin/api/table/', {
    method: 'POST',
    headers: headers,
    body: bodyStr,
  });
  if (res.ok) {
    getTables();
    setTableCreateFormVisible(false);
  }
}