1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { templated } from 'atlibs/component/index.js'
const Base = await templated(new URL('./hello-status.html', import.meta.url))
customElements.define('hello-status', class extends Base {
connectedCallback() {
super.connectedCallback()
const send = (name, detail) => this.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }))
this.querySelector('.login').onsubmit = (e) => {
e.preventDefault()
send('login', e.target.handle.value)
}
this.querySelector('.status').onsubmit = (e) => {
e.preventDefault()
send('status', e.target.status.value)
}
this.querySelector('.logout').onclick = () => send('logout')
}
render({ session, did, error, status }) {
this.querySelector('.login').hidden = session !== 'signed-out'
this.querySelector('.status').hidden = session !== 'signed-in'
this.querySelector('.status button').disabled = status.status === 'busy'
const out = status.result && (status.result.unchanged ? `already ${status.result.status}` : `set ${status.result.status}: ${status.result.uri}`)
this.querySelector('.out').textContent = error ?? status.error ?? out ?? (did ? `signed in as ${did}` : '')
}
})
