heyquilt 0.3.90 → 0.3.106

package/src/ui/secrets.js

@@ -0,0 +1,283 @@
+// The Secrets card in the app (Session settings → Secrets, and a workspace's page), and the bar
+// that asks a person to allow a people-only secret for one run. The HTML is secrets-view.js's;
+// this file loads, binds and saves. A typed value lives in its input and in `typed` here until it
+// goes to the app's server, which sends it straight to the vault; it is never put in markup.
+import { api, toast } from './common.js'
+import { secretsCardHtml, levelTabs, parseCustomFormat, asksBarHtml } from './secrets-view.js'
+import { cleanSecretName, FORMAT_IDS, formatId } from './secret-rules.js'
+
+const views = new Map() // `${type}:${id}` -> the last view, so a redraw shows it at once
+const urlOf = (type, id, rest = '') => `/api/secrets/${type}/${encodeURIComponent(id)}${rest}`
+
+/**
+ * Draws the card into `root` for one scope ({ type, id }: a session's room, a workspace's id, a
+ * team's slug). `importFrom` says where .env files may be read from ({ sessionId } or
+ * { workspaceId }); without it there is no Import .env. Answers { refresh, destroy }.
+ */
+export function mountSecrets (root, { type, id, importFrom = null }) {
+  const ui = { tabs: [], cur: { type, id }, form: { format: 'bearer' }, mode: null, choose: false, chooseSel: 'all', import: null, msg: null, busy: false, confirmDelete: null, canImport: !!importFrom, error: '', flash: '' }
+  let view = views.get(`${type}:${id}`) || null
+  if (view) ui.tabs = levelTabs(view)
+  let typed = ''
+  let alive = true
+  let fresh = false
+
+  /** What the add row holds now (the value only in memory). */
+  function capture () {
+    const f = root.querySelector('[data-add]')
+    if (!f) return
+    ui.form = { ...ui.form, name: f.elements.name.value, upstream: f.elements.upstream.value, format: f.elements.format.value, custom: f.elements.custom ? f.elements.custom.value : ui.form.custom }
+    typed = f.elements.value.value
+  }
+
+  function draw ({ focus } = {}) {
+    if (!alive) return
+    const had = root.contains(document.activeElement) ? document.activeElement.getAttribute('name') : null
+    // Keep what was typed, unless the form was just cleared on purpose.
+    if (fresh) fresh = false
+    else capture()
+    root.innerHTML = secretsCardHtml(view, { ...ui, now: Date.now() })
+    const f = root.querySelector('[data-add]')
+    if (f) f.elements.value.value = typed
+    const want = focus || had
+    if (want && f && f.elements[want]) f.elements[want].focus()
+  }
+
+  async function load () {
+    try {
+      view = await api('GET', urlOf(ui.cur.type, ui.cur.id))
+      views.set(`${ui.cur.type}:${ui.cur.id}`, view)
+      if (!ui.tabs.length) ui.tabs = levelTabs(view)
+      ui.error = ''
+    } catch (err) {
+      ui.error = err.status === 503 ? 'Secrets are not switched on for your account\'s server yet.' : err.message
+      view = null
+    }
+    draw()
+  }
+
+  const say = (text, kind = '') => { ui.msg = text ? { text, kind } : null }
+  const resetForm = () => { ui.form = { format: 'bearer' }; ui.mode = null; typed = ''; fresh = true }
+  const scopeUrl = (rest) => urlOf(ui.cur.type, ui.cur.id, rest)
+
+  async function act (fn) {
+    if (ui.busy) return
+    ui.busy = true
+    try { await fn() } catch (err) { say(err.message, 'bad') } finally { ui.busy = false; draw() }
+  }
+
+  const setSettings = (patch) => act(async () => { view = await api('POST', scopeUrl('/settings'), patch); views.set(`${ui.cur.type}:${ui.cur.id}`, view); say('') })
+
+  function formatOf (f) {
+    if (f.format === 'custom') {
+      const c = parseCustomFormat(f.custom)
+      if (!c) throw new Error('Write your header like X-Token: Token {value}')
+      return c
+    }
+    return FORMAT_IDS.includes(f.format) ? f.format : 'bearer'
+  }
+
+  async function save () {
+    capture()
+    const f = ui.form
+    let name
+    try { name = cleanSecretName(f.name) } catch (err) { say(err.message, 'bad'); return draw({ focus: 'name' }) }
+    if (!typed) { say(`Type ${name}'s value.`, 'bad'); return draw({ focus: 'value' }) }
+    let format
+    try { format = formatOf(f) } catch (err) { say(err.message, 'bad'); return draw({ focus: 'custom' }) }
+    const had = view.secrets.find((s) => s.name === name)
+    await act(async () => {
+      const r = await api('POST', scopeUrl('/save'), { entries: [{ name, upstream: f.upstream, format, who: had ? had.who : 'agents' }], values: { [name]: typed } })
+      typed = ''
+      resetForm()
+      const d = r.saved && r.saved[0]
+      say(`${had ? 'Replaced' : 'Saved'} ${name}${d ? ` (${d.digest})` : ''}. Nobody can see its value again, you included.`, 'ok')
+      ui.flash = name
+      view = await api('GET', urlOf(ui.cur.type, ui.cur.id))
+      views.set(`${ui.cur.type}:${ui.cur.id}`, view)
+    })
+  }
+
+  // --------------------------------------------------------------- Import .env --
+  async function openImport () {
+    ui.import = { loading: true, files: [], rows: [], fileIdx: 0 }
+    draw()
+    try {
+      const r = await api('POST', '/api/secrets/env-scan', importFrom)
+      ui.import = { files: r.files, fileIdx: 0, rows: [], empty: r.empty || '' }
+      pickFile(0)
+    } catch (err) { ui.import = null; say(err.message, 'bad') }
+    draw()
+  }
+  function pickFile (i) {
+    const f = ui.import.files[i]
+    ui.import.fileIdx = i
+    ui.import.rows = f ? f.entries.map((e) => ({ name: e.name, upstream: e.upstream || '', format: e.format || 'bearer', who: 'agents', skip: e.skip || '', pick: !e.skip && !!e.upstream })) : []
+  }
+  function captureImport () {
+    if (!ui.import) return
+    root.querySelectorAll('[data-import-host]').forEach((el) => { ui.import.rows[+el.dataset.importHost].upstream = el.value })
+    root.querySelectorAll('[data-import-format]').forEach((el) => { ui.import.rows[+el.dataset.importFormat].format = el.value })
+  }
+  async function importSave () {
+    captureImport()
+    const im = ui.import
+    const rows = im.rows.filter((r) => r.pick && !r.skip)
+    if (rows.some((r) => r.format === 'custom')) { say('An imported secret uses one of the listed formats; add a header of your own one at a time.', 'bad'); return draw() }
+    const file = im.files[im.fileIdx]
+    await act(async () => {
+      const r = await api('POST', '/api/secrets/env-import', { ...importFrom, scope: ui.cur.type, id: ui.cur.id, file: file.path, entries: rows.map((x) => ({ name: x.name, upstream: x.upstream, format: x.format, who: x.who })) })
+      ui.import = { ...im, done: { rel: file.rel, path: file.path, saved: r.saved, deleted: false } }
+      say('')
+      view = await api('GET', urlOf(ui.cur.type, ui.cur.id))
+      views.set(`${ui.cur.type}:${ui.cur.id}`, view)
+    })
+  }
+
+  // --------------------------------------------------------------- events --
+  async function onClick (e) {
+    const t = (sel) => e.target.closest(sel)
+    let b
+    if ((b = t('[data-level]'))) {
+      if (b.classList.contains('on')) return
+      capture(); resetForm(); ui.choose = false; ui.import = null; ui.confirmDelete = null; say('')
+      ui.cur = { type: b.dataset.level, id: b.dataset.levelId }
+      view = views.get(`${ui.cur.type}:${ui.cur.id}`) || null
+      draw()
+      return load()
+    }
+    if (!view) return
+    if ((b = t('[data-inherit]')) && !b.disabled) return setSettings({ inheritOff: !view.settings.inheritOff })
+    if (t('[data-inherit-on]')) return setSettings({ inheritOff: false })
+    if ((b = t('[data-agents-on]')) && !b.disabled) { ui.choose = false; return setSettings({ agentsOn: !view.settings.agentsOn }) }
+    if (t('[data-choose]')) { ui.choose = !ui.choose; ui.chooseSel = view.settings.agents === 'all' ? 'all' : [...view.settings.agents]; return draw() }
+    if (t('[data-choose-cancel]')) { ui.choose = false; return draw() }
+    if (t('[data-choose-save]')) { ui.choose = false; return setSettings({ agents: ui.chooseSel }) }
+    if ((b = t('[data-who]')) && !b.disabled) {
+      const r = view.secrets.find((s) => s.name === b.dataset.who)
+      return act(async () => { view = await api('POST', scopeUrl('/who'), { name: r.name, who: r.who === 'people' ? 'agents' : 'people' }); say('') })
+    }
+    if ((b = t('[data-replace]')) || (b = t('[data-override]'))) {
+      const replace = !!b.dataset.replace
+      const name = replace ? b.dataset.replace : b.dataset.override
+      const r = (replace ? view.secrets : view.inherited).find((s) => s.name === name)
+      ui.mode = { kind: replace ? 'replace' : 'override', name }
+      const fid = formatId(r.format)
+      ui.form = { name, upstream: r.upstream, format: fid || 'custom', custom: fid ? '' : `${r.format.name}: ${r.format.template}` }
+      typed = ''
+      fresh = true
+      say(replace ? `A new value for ${name}. Where it goes and how can change with it.` : `${name} for this ${ui.cur.type === 'org' ? 'team' : ui.cur.type} only: it overrides the ${r.level === 'org' ? 'team' : r.level}'s.`)
+      return draw({ focus: 'value' })
+    }
+    if (t('[data-add-cancel]')) { resetForm(); say(''); return draw() }
+    if ((b = t('[data-delete]'))) { ui.confirmDelete = b.dataset.delete; return draw() }
+    if (t('[data-delete-no]')) { ui.confirmDelete = null; return draw() }
+    if ((b = t('[data-delete-yes]'))) {
+      const name = b.dataset.deleteYes
+      ui.confirmDelete = null
+      return act(async () => { view = await api('POST', scopeUrl('/delete'), { name }); say(`Deleted ${name}.`, 'ok') })
+    }
+    if (t('[data-import]')) return openImport()
+    if (t('[data-import-close]')) { ui.import = null; return draw() }
+    if ((b = t('[data-import-who]'))) { captureImport(); const r = ui.import.rows[+b.dataset.importWho]; r.who = r.who === 'people' ? 'agents' : 'people'; return draw() }
+    if (t('[data-import-save]')) return importSave()
+    if (t('[data-import-delete]')) {
+      const d = ui.import.done
+      return act(async () => { await api('POST', '/api/secrets/env-delete', { ...importFrom, file: d.path }); d.deleted = true; toast(`Deleted ${d.rel}`) })
+    }
+  }
+
+  function onChange (e) {
+    const el = e.target
+    if (el.matches('[data-choose-all]')) { ui.chooseSel = 'all'; return draw() }
+    if (el.matches('[data-choose-some]')) { ui.chooseSel = view.agentChoices.map((a) => a.id); return draw() }
+    if (el.matches('[data-choose-agent]')) {
+      const set = new Set(ui.chooseSel === 'all' ? [] : ui.chooseSel)
+      if (el.checked) set.add(el.dataset.chooseAgent); else set.delete(el.dataset.chooseAgent)
+      ui.chooseSel = [...set]
+      return
+    }
+    if (el.matches('[data-add] [name=format]')) { capture(); return draw({ focus: el.value === 'custom' ? 'custom' : 'format' }) }
+    if (el.matches('[data-import-file]')) { pickFile(+el.value); return draw() }
+    if (el.matches('[data-import-pick]')) { captureImport(); ui.import.rows[+el.dataset.importPick].pick = el.checked; return draw() }
+  }
+
+  function onInput (e) {
+    // Names are capitals: typed as such.
+    if (e.target.matches('[data-add] [name=name]')) {
+      const s = e.target.selectionStart
+      e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, '_')
+      e.target.setSelectionRange(s, s)
+    }
+  }
+
+  function onSubmit (e) {
+    if (!e.target.matches('[data-add]')) return
+    e.preventDefault()
+    save()
+  }
+
+  root.addEventListener('click', onClick)
+  root.addEventListener('change', onChange)
+  root.addEventListener('input', onInput)
+  root.addEventListener('submit', onSubmit)
+  draw()
+  load()
+  return {
+    refresh: load,
+    destroy () { alive = false; typed = ''; root.removeEventListener('click', onClick); root.removeEventListener('change', onChange); root.removeEventListener('input', onInput); root.removeEventListener('submit', onSubmit) }
+  }
+}
+
+// ------------------------------------------------- people-only asks, app-wide --
+let asking = false
+let asks = []
+
+function drawAsks () {
+  let bar = document.getElementById('ask-bar')
+  const show = asks.length > 0
+  document.body.classList.toggle('has-asks', show)
+  if (!show) { bar?.remove(); return }
+  if (!bar) {
+    bar = document.createElement('div')
+    bar.id = 'ask-bar'
+    bar.addEventListener('click', async (e) => {
+      const b = e.target.closest('[data-ask-allow],[data-ask-deny]')
+      if (!b) return
+      const allow = !!b.dataset.askAllow
+      const runId = allow ? b.dataset.askAllow : b.dataset.askDeny
+      b.disabled = true
+      try {
+        await api('POST', `/api/secret-asks/${encodeURIComponent(runId)}`, { allow })
+        asks = asks.filter((a) => a.runId !== runId)
+        toast(allow ? 'Allowed for that run' : 'Denied')
+      } catch (err) { toast(err.message) }
+      drawAsks()
+    })
+    document.body.prepend(bar)
+  }
+  bar.innerHTML = asksBarHtml(asks)
+}
+
+/**
+ * Watches for runs of yours waiting for you to allow a people-only secret (a held request that
+ * the API answers when one comes, or after 25 seconds), and shows them in the bar. Once per page.
+ */
+export function watchSecretAsks () {
+  if (asking) return
+  asking = true
+  const loop = async () => {
+    let wait = 2000
+    try {
+      const r = await api('GET', '/api/secret-asks?wait=1')
+      asks = r.asks || []
+      drawAsks()
+      wait = asks.length ? 3000 : 250
+    } catch (err) {
+      // Secrets off on the server, or signed out: look again much later.
+      wait = err.status === 503 || err.status === 404 ? 10 * 60 * 1000 : 15000
+    }
+    setTimeout(loop, wait)
+  }
+  loop()
+}