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

import { h, mount, table, field, input, select, textarea, toast, errorBox, confirmDialog, modal, lines, checkbox, time, fmtTime, copyBox, badge } from "../ui.js";
import { api, get, state } from "../api.js";
import { rerender } from "../app.js";

export async function render(el) {
  if (!state.me.admin) {
    mount(el, h("h1", null, "Users"), h("div", { class: "msg warn" }, "Only administrators can manage users."));
    return;
  }
  const [users, grants] = await Promise.all([get("/users"), get("/catalog/grants")]);
  mount(el,
    h("div", { class: "page-head" },
      h("div", { class: "grow" }, h("h1", null, "Users"),
        h("div", { class: "muted" }, "People log in to the web UI with a password; scripts and the CLI use API tokens. Each token belongs to a user and can be restricted to a subset of that user's permissions.")),
      h("div", { class: "actions" }, h("button", { class: "primary", onclick: () => userDialog(null, grants) }, "New user"))),
    h("div", { class: "panel" }, table([
      { label: "User", render: (u) => h("strong", null, u.username) },
      { label: "Role", render: (u) => [u.admin ? badge("admin", "accent") : null, u.disabled ? badge("disabled", "err") : null, !u.has_password ? badge("tokens only") : null] },
      { label: "Permissions", render: (u) => u.admin ? h("span", { class: "muted" }, "everything") : h("div", { class: "grants" }, (u.grant_strings || []).map((g) => h("div", null, g))), tdClass: "small" },
      { label: "Last login", render: (u) => u.last_login_at ? time(u.last_login_at) : h("span", { class: "muted" }, "never") },
      { label: "", render: (u) => h("span", null,
        h("button", { class: "small", onclick: () => tokensDialog(u, grants) }, "Tokens"), " ",
        h("button", { class: "small", onclick: () => userDialog(u, grants) }, "Edit"), " ",
        h("button", { class: "small danger", disabled: u.id === state.me.user.id, onclick: () => del(u) }, "Delete")), tdClass: "actions-cell" },
    ], users)),
    grantHelp(grants));
}

export function grantHelp(grants) {
  return h("div", { class: "panel" },
    h("h2", null, "Permissions"),
    h("p", { class: "small" }, "A grant is ", h("code", null, grants.syntax), ". Write includes read. Filters are patterns where * matches anything, e.g. ", h("code", null, "names=_acme-challenge.*"), ". Zone names without the trailing dot; zones outside views are in view _default."),
    h("p", { class: "small" }, "Resources: ", grants.resources.join(", "), ", or * for all. Users management is for administrators only."),
    h("h3", null, "Templates"),
    h("div", { class: "grants" }, Object.entries(grants.roles).map(([name, gs]) => h("div", null, h("strong", null, name + ": "), gs.join("; ")))),
    h("h3", null, "Examples"),
    h("pre", null, "records:write zones=adbraun.lol names=_acme-challenge.* types=TXT   # ACME DNS-01 only\nzones:write zones=*.lab.adbraun.lol                                  # lab subzones\nrecords:write views=internal                                         # internal view only\n*:read                                                               # read-only"));
}

async function userDialog(u, grants) {
  const err = h("div");
  const name = input({ value: u ? u.username : "", autocomplete: "off" });
  const pw = input({ type: "password", autocomplete: "new-password", placeholder: u ? "leave empty to keep" : "at least 8 characters" });
  const admin = checkbox("Administrator (can do everything, including managing users)", u ? u.admin : false);
  const disabled = checkbox("Disabled (can't log in, tokens stop working)", u ? u.disabled : false);
  const service = checkbox("Service account: no password, API tokens only", u ? !u.has_password : false);
  const gr = textarea(u ? (u.grant_strings || []).join("\n") : "", { class: "mono", rows: 5, placeholder: "records:write zones=example.com\n*:read" });
  const tmpl = select([["", "Insert a template…"], ...Object.keys(grants.roles).map((r) => [r, r])], "");
  tmpl.addEventListener("change", () => {
    if (!tmpl.value) return;
    gr.value = (gr.value.trim() ? gr.value.trim() + "\n" : "") + grants.roles[tmpl.value].join("\n");
    tmpl.value = "";
  });
  const comment = input({ value: u ? u.comment : "" });
  await modal(u ? "Edit " + u.username : "New user", h("div", null, h("div", { class: "form-grid" },
    field("Username", name),
    field("Password", pw),
    h("span"), service,
    h("span"), admin,
    u ? h("span") : null, u ? disabled : null,
    field("Permissions", gr, "One grant per line (ignored for administrators)."),
    h("span"), tmpl,
    field("Comment", comment)), err), [
    { label: "Cancel", value: null },
    { label: u ? "Save" : "Create user", kind: "primary", onclick: async () => {
      const data = { username: name.value.trim(), admin: admin.input.checked, grant_strings: lines(gr.value), comment: comment.value };
      if (service.input.checked) data.password = "";
      else if (pw.value) data.password = pw.value;
      if (u) data.disabled = disabled.input.checked;
      try {
        if (u) await api("PATCH", "/users/" + u.id, { body: data });
        else await api("POST", "/users", { body: data });
        toast(u ? "User updated" : "User created");
        rerender();
        return true;
      } catch (e) { mount(err, errorBox(e)); return false; }
    } },
  ], { wide: true, sticky: true });
}

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

// tokensDialog manages a user's tokens (also used by the account page).
export async function tokensDialog(u, grants, own) {
  const box = h("div");
  const base = own ? "/me/tokens" : "/users/" + u.id + "/tokens";
  const draw = async () => {
    const tokens = await get(base);
    mount(box, tokenTable(tokens, draw), newTokenForm(base, grants, draw));
  };
  await draw();
  await modal("API tokens of " + u.username, box, [{ label: "Close", value: null }], { wide: true });
}

export function tokenTable(tokens, redraw) {
  return table([
    { label: "Name", render: (t) => [h("strong", null, t.name), rotationNote(t)] },
    { label: "ID", render: (t) => "jarl_" + t.public_id + "_…", tdClass: "mono small" },
    { label: "Restricted to", render: (t) => t.grant_strings && t.grant_strings.length ? h("div", { class: "grants" }, t.grant_strings.map((g) => h("div", null, g))) : h("span", { class: "muted" }, "all of the user's permissions"), tdClass: "small" },
    { label: "Expires", render: (t) => t.expires_at ? [time(t.expires_at), expiryBadge(t)] : h("span", { class: "muted" }, "never") },
    { label: "Last used", render: (t) => t.last_used_at ? [time(t.last_used_at), " ", h("span", { class: "muted small" }, t.last_used_ip || "")] : h("span", { class: "muted" }, "never") },
    { label: "", render: (t) => [
      h("button", { class: "small", onclick: () => rotateDialog(t, redraw) }, "Rotate"), " ",
      h("button", { class: "small danger", onclick: async () => {
        if (!(await confirmDialog("Revoke token", "Revoke " + t.name + "? Anything using it stops working immediately.", "Revoke", "danger"))) return;
        await api("DELETE", "/tokens/" + t.id);
        toast("Token revoked");
        redraw();
      } }, "Revoke")], tdClass: "actions-cell nowrap" },
  ], tokens, { empty: "No tokens." });
}

// expiryBadge flags a token that expires within 14 days (the server's
// TokenExpiryWarning) or has expired.
function expiryBadge(t) {
  if (t.revoked_at) return null;
  const left = new Date(t.expires_at) - Date.now();
  if (left < 0) return [" ", badge("expired", "err")];
  if (left < 14 * 86400 * 1000) return [" ", badge("soon", "warn")];
  return null;
}

// rotationNote says when a token last got a new secret, and whether its
// old secret still works.
function rotationNote(t) {
  const parts = [];
  if (t.previous_secret_valid_until && new Date(t.previous_secret_valid_until) > new Date()) {
    parts.push(h("div", { class: "small warn-text" }, "old secret stops ", time(t.previous_secret_valid_until)));
  } else if (t.rotated_at) {
    parts.push(h("div", { class: "muted small" }, "rotated ", time(t.rotated_at)));
  }
  return parts;
}

// rotateDialog gives a token a new secret. The token keeps its name,
// grants and ID; only the programs using it need the new secret.
async function rotateDialog(t, redraw) {
  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 form = h("div", null,
    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 clients without an outage. If the token may have leaked, let it stop now."),
      field("Expires", exp)),
    err,
    h("div", { class: "actions", style: { marginTop: "8px" } }, h("button", { class: "primary", onclick: async (e) => {
      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;
      e.target.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.token),
          h("p", { class: "small" }, r.previous_secret_valid_until ? ["The old secret keeps working until ", fmtTime(r.previous_secret_valid_until), " (", time(r.previous_secret_valid_until), ")."] : "The old secret no longer works.")));
        if (redraw) redraw();
      } catch (ex) { e.target.disabled = false; mount(err, errorBox(ex)); }
    } }, "Rotate")));
  mount(box, form);
  await modal("Rotate token " + t.name, box, [{ label: "Close", value: null }], { sticky: true });
}

export function newTokenForm(base, grants, redraw) {
  const err = h("div");
  const out = h("div");
  const name = input({ placeholder: "e.g. certbot on web01" });
  const exp = select([["", "never expires"], ["30d", "30 days"], ["90d", "90 days"], ["365d", "1 year"]], "90d");
  const gr = textarea("", { class: "mono", rows: 3, placeholder: "optional restriction, e.g.\nrecords:write zones=example.com names=_acme-challenge.* types=TXT" });
  const tmpl = select([["", "Insert a template…"], ...Object.keys(grants.roles).map((r) => [r, r])], "");
  tmpl.addEventListener("change", () => {
    if (!tmpl.value) return;
    gr.value = (gr.value.trim() ? gr.value.trim() + "\n" : "") + grants.roles[tmpl.value].join("\n");
    tmpl.value = "";
  });
  return h("div", { class: "panel", style: { marginTop: "12px" } },
    h("h3", null, "New token"),
    h("div", { class: "form-grid" },
      field("Name", name),
      field("Expires", exp),
      field("Restrict to", gr, "Leave empty for all of the user's permissions. A token can never do more than its user."),
      h("span"), tmpl),
    err,
    h("div", { class: "actions", style: { marginTop: "8px" } }, h("button", { class: "primary", onclick: async () => {
      mount(err); mount(out);
      const body = { name: name.value.trim(), expires_in: exp.value || undefined };
      const g = lines(gr.value);
      if (g.length) body.grant_strings = g;
      try {
        const t = await api("POST", base, { body });
        mount(out, h("div", { class: "msg ok" }, h("p", null, "Token created. Copy it now: it is not shown again."), copyBox(t.token)));
        name.value = ""; gr.value = "";
        if (redraw) setTimeout(redraw, 15000);
      } catch (e) { mount(err, errorBox(e)); }
    } }, "Create token")),
    out);
}