33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
const CSS = new URL('./logout-button.css', import.meta.url).href
|
|
|
|
const ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>`
|
|
|
|
class LogoutButton extends HTMLElement {
|
|
connectedCallback() {
|
|
this.attachShadow({ mode: 'open' })
|
|
this.shadowRoot.innerHTML = `
|
|
<link rel="stylesheet" href="${CSS}">
|
|
<button type="button" title="Log out">
|
|
<span class="icon">${ICON}</span>
|
|
<span class="label">Log out</span>
|
|
</button>
|
|
`
|
|
this.shadowRoot.querySelector('button')
|
|
.addEventListener('click', () => this.#logout())
|
|
}
|
|
|
|
#gate() {
|
|
return document.querySelector('login-gate, [data-auth-gate]')
|
|
}
|
|
|
|
#logout() {
|
|
const gate = this.#gate()
|
|
if (gate?.logout) {
|
|
gate.logout()
|
|
} else {
|
|
console.warn('logout-button: no auth gate with logout() found in document')
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('logout-button', LogoutButton)
|