1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { templated } from 'atlibs/component/index.js'
const Base = await templated(new URL('./knotless-repo.html', import.meta.url))
customElements.define('knotless-repo', class extends Base {
connectedCallback() {
super.connectedCallback()
const send = (name, detail) => this.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }))
const fields = (form) => Object.fromEntries(new FormData(form))
this.querySelector('.login').onsubmit = (e) => (e.preventDefault(), send('login', e.target.handle.value))
this.querySelector('.create').onsubmit = (e) => (e.preventDefault(), send('create-repo', fields(e.target)))
this.querySelector('.commit').onsubmit = (e) => (e.preventDefault(), send('commit', fields(e.target)))
this.querySelector('.logout').onclick = () => send('logout')
}
render({ session, did, error, run }) {
this.querySelector('.login').hidden = session !== 'signed-out'
this.querySelector('.signed-in').hidden = session !== 'signed-in'
this.querySelector('.who').textContent = did ? `Signed in as ${did}` : ''
for (const button of this.querySelectorAll('.signed-in form button')) button.ariaBusy = button.disabled = run.status === 'busy'
const out = run.result && JSON.stringify(run.result, null, 2)
this.querySelector('.out').textContent = error ?? run.error ?? out ?? ''
}
})
