steward/internal/web/static/assets/pages/users.js

// Users and everyone's tokens (administrators).
import { h, mount, table, time, fmtTime, modal, input, field, checkbox, select, errorBox, confirmDialog, toast, badge, copyBox } from "../ui.js";
import { get, api, catalog } from "../api.js";
import { rerender } from "../app.js";

export async function render(el) {
  const [users, tokens, cat] = await Promise.all([get("/users"), get("/tokens"), catalog()]);
  mount(el,
    h("div", { class: "page-head" },
      h("div", { class: "grow" }, h("h1", null, "Users"), h("div", { class: "muted" }, "Administrators may do everything. Others get a role or grants: config, leases and audit, each read or write.")),
      h("div", { class: "actions" }, h("button", { class: "primary", onclick: () => userDialog(null, cat) }, "New user"))),
    h("div", { class: "panel" }, table([
      { label: "User", render: (u) => [h("strong", null, u.username), u.disabled ? [" ", badge("disabled", "off")] : null] },
      { label: "May", render: (u) => u.admin ? badge("administrator", "accent") : h("span", { class: "mono small" }, u.grant_strings.join(" ") || "nothing") },
      { label: "Password", render: (u) => u.has_password ? "yes" : h("span", { class: "muted" }, "tokens only") },
      { label: "Last login", render: (u) => u.last_login_at ? time(u.last_login_at) : "never" },
      { label: "Comment", render: (u) => u.comment },
      { label: "", tdClass: "actions-cell", render: (u) => [
        h("button", { class: "small reveal", onclick: () => userDialog(u, cat) }, "Edit"), " ",
        h("button", { class: "small reveal", onclick: () => del(u) }, "Delete")] },
    ], users)),
    h("h2", null, "API tokens"),
    h("div", { class: "panel" }, table([
      { label: "User", render: (t) => t.username },
      { label: "Name", render: (t) => t.name },
      { label: "May", render: (t) => h("span", { class: "mono small" }, t.grant_strings.join(" ")) },
      { label: "Expires", render: (t) => t.expires_at ? time(t.expires_at) : "never" },
      { label: "Last used", render: (t) => t.last_used_at ? [time(t.last_used_at), h("span", { class: "muted small" }, " from " + t.last_used_ip)] : "never" },
      { label: "", tdClass: "actions-cell", render: (t) => [
        h("button", { class: "small reveal", onclick: () => rotateDialog(t) }, "Rotate"), " ",
        h("button", { class: "small reveal", onclick: () => revoke(t) }, "Revoke")] },
    ], tokens, { empty: "No tokens." })));
}

// rotateDialog gives a token a new secret. It keeps its name, ID and
// permissions; only the programs that use it need the new secret.
export async function rotateDialog(t) {
  const grace = select([["", "stops working now"], ["10m", "keeps working for 10 minutes"], ["1h", "keeps working for 1 hour"], ["1d", "keeps working for 1 day"], ["7d", "keeps working for 7 days"]], "");
  const expOpts = [["", t.expires_at ? "the same lifetime again, from now" : "never expires (as now)"], ["30d", "30 days from now"], ["90d", "90 days from now"], ["365d", "1 year from now"]];
  if (t.expires_at) expOpts.push(["never", "never expires"]);
  const exp = select(expOpts, "");
  const err = h("div");
  const box = h("div");
  const go = h("button", { class: "primary", onclick: async () => {
    mount(err);
    const body = {};
    if (grace.value) body.grace = grace.value;
    if (exp.value === "never") body.no_expiry = true;
    else if (exp.value) body.expires_in = exp.value;
    go.disabled = true;
    try {
      const r = await api("POST", "/tokens/" + t.id + "/rotate", { body });
      mount(box, h("div", { class: "msg ok" },
        h("p", null, "New secret for " + t.name + ". Copy it now: it is not shown again."),
        copyBox(r.secret),
        h("p", { class: "small" }, r.previous_secret_valid_until ? ["The old secret keeps working until ", fmtTime(r.previous_secret_valid_until), "."] : "The old secret no longer works.")));
      rerender();
    } catch (ex) { go.disabled = false; mount(err, errorBox(ex)); }
  } }, "Rotate");
  mount(box,
    h("p", null, "Gives ", h("strong", null, t.name), " a new secret. It keeps its name, ID and permissions, so only the programs that use it need updating."),
    h("div", { class: "form-grid" },
      field("Old secret", grace, "A grace period lets you update the programs without an outage. If the token may have leaked, let it stop now."),
      field("Expires", exp)),
    err, h("div", { class: "actions mt" }, go));
  await modal("Rotate token " + t.name, box, [{ label: "Close", value: null }], { sticky: true });
}

export async function revoke(t) {
  if (!await confirmDialog("Revoke token", "Revoke " + t.username + "'s token “" + t.name + "”? Anything using it is refused from now on.", "Revoke", "danger")) return;
  try {
    await api("DELETE", "/tokens/" + t.id);
    toast("Revoked");
    rerender();
  } catch (e) { toast(e.message, "err", 8000); }
}

async function del(u) {
  if (!await confirmDialog("Delete user", "Delete " + u.username + " and their tokens?", "Delete", "danger")) return;
  try {
    await api("DELETE", "/users/" + u.id);
    rerender();
  } catch (e) { toast(e.message, "err", 8000); }
}

async function userDialog(u, cat) {
  const name = input({ value: u ? u.username : "", autocomplete: "off" });
  const pw = input({ type: "password", autocomplete: "new-password", placeholder: u ? "unchanged" : "at least 8 characters" });
  const admin = checkbox("Administrator", u ? u.admin : false);
  const role = select([["", "custom grants"], ...Object.keys(cat.roles).map((r) => [r, r + ": " + cat.roles[r].join(" ")])], "");
  const grants = input({ value: u ? u.grant_strings.join(" ") : "", placeholder: "config:read leases:write", class: "mono" });
  const disabled = checkbox("Disabled (logs them out)", u ? u.disabled : false);
  const comment = input({ value: u ? u.comment : "" });
  const err = h("div");
  await modal(u ? "Edit " + u.username : "New user", h("div", null, h("div", { class: "form-grid" },
    field("Username", name),
    field("Password", pw, u ? "Leave empty to keep it." : "Leave empty for a service account that only uses API tokens."),
    h("label"), admin,
    field("Role", role),
    field("Grants", grants, "resource:access, separated by spaces; resources config, leases, audit; access read or write."),
    u ? [h("label"), disabled] : null,
    field("Comment", comment)), err), [
    { label: "Cancel", value: null },
    { label: u ? "Save" : "Add user", kind: "primary", onclick: async () => {
      mount(err);
      const body = { username: name.value.trim(), admin: admin.input.checked, comment: comment.value };
      if (role.value) body.role = role.value;
      else body.grants = grants.value.split(/[\s,]+/).filter(Boolean);
      if (pw.value || !u) body.password = pw.value;
      if (u) body.disabled = disabled.input.checked;
      try {
        await api(u ? "PATCH" : "POST", u ? "/users/" + u.id : "/users", { body });
        rerender();
        return true;
      } catch (e) {
        mount(err, errorBox(e));
        return false;
      }
    } },
  ], { sticky: true });
}