puerta/internal/server/static/admin.js

267 lines
7.6 KiB
JavaScript
Raw Normal View History

2023-01-04 04:51:35 +00:00
// SPDX-License-Identifier: Apache-2.0
// Copyright © 2022 Roberto Hidalgo <nidito@un.rob.mx>
2023-01-03 07:40:38 +00:00
import * as webauthn from "./webauthn.js"
2023-01-04 04:21:49 +00:00
const host = document.location.protocol + "//" + document.location.host
// const host = "http://localhost:8081"
function localDate(src) {
const exp = new Date(src)
return new Date(exp - exp.getTimezoneOffset() * 60000).toISOString().replace("Z", "").replace(/\.\d+$/, '')
}
2023-01-02 07:44:34 +00:00
class UserInfoPanel extends HTMLElement {
constructor(user) {
super()
2023-01-04 04:21:49 +00:00
}
connectedCallback() {
2023-01-02 07:44:34 +00:00
let template = document.getElementById("user-info-panel")
const shadowRoot = this.attachShadow({ mode: "open" })
const panel = template.content.cloneNode(true)
2023-01-04 04:21:49 +00:00
let handle = this.getAttribute("handle")
panel.querySelector('h3').innerHTML = this.getAttribute("name")
panel.querySelector('input[name=name]').value = this.getAttribute("name")
2023-01-04 04:21:49 +00:00
const form = panel.querySelector('form')
form.action = panel.querySelector('form').action.replace(":id", handle)
panel.querySelector('code').textContent = handle
2023-01-04 04:21:49 +00:00
panel.querySelector('input[name=greeting]').value = this.getAttribute("greeting")
if (this.hasAttribute('schedule')){
panel.querySelector('input[name=schedule]').value = this.getAttribute("schedule")
}
if (this.hasAttribute('expires')){
panel.querySelector('input[name=expires]').value = localDate(this.getAttribute("expires"))
}
if (this.hasAttribute("is_admin")) {
const adminSpan = document.createElement("span")
adminSpan.innerText = "🔑"
panel.querySelector(".user-info-meta").prepend(adminSpan)
}
panel.querySelector('input[name=max_ttl]').value = this.getAttribute("max_ttl")
panel.querySelector('input[name=is_admin]').checked = this.hasAttribute("is_admin")
panel.querySelector('input[name=second_factor]').checked = this.hasAttribute("second_factor")
panel.querySelector("button.user-edit").addEventListener('click', evt => {
form.classList.toggle("hidden")
this.classList.toggle("editing")
})
form.addEventListener("submit", async (evt) => {
evt.preventDefault()
await UpdateUser(form)
})
panel.querySelector("button.user-delete").addEventListener('click', async evt => {
evt.preventDefault()
if (confirm(`Seguro que borramos a ${handle}?`)) {
let response = await webauthn.withAuth(`${host}/api/user/${handle}`, {
credentials: "include",
method: "DELETE"
})
if (!response.ok) {
throw new Error("Could not delete user:", response)
}
window.location.reload()
}
})
2023-01-02 07:44:34 +00:00
shadowRoot.appendChild(panel)
}
2023-01-02 07:44:34 +00:00
}
2023-01-03 07:40:38 +00:00
customElements.define("user-info-panel", UserInfoPanel)
2023-01-02 07:44:34 +00:00
2023-01-03 07:40:38 +00:00
class REXRow extends HTMLElement {
constructor(rex) {
super()
let template = document.getElementById("rex-record")
const shadowRoot = this.attachShadow({ mode: "open" })
const row = template.content.cloneNode(true)
2023-01-04 04:21:49 +00:00
row.querySelector('.log-record-timestamp').innerText = localDate(rex.timestamp)
2023-01-03 07:40:38 +00:00
row.querySelector('.log-record-user').innerText = rex.user
row.querySelector('.log-record-status').innerHTML = !rex.error ? "ok" : `<strong>${rex.error}</strong> ${rex.failure}`
row.querySelector('.log-record-second_factor').innerText = rex.second_factor ? "✓" : ""
row.querySelector('.log-record-ip_address').innerText = rex.ip_address
row.querySelector('.log-record-user_agent').innerText = rex.user_agent
shadowRoot.appendChild(row)
}
}
2023-01-04 04:21:49 +00:00
customElements.define("rex-record", REXRow, {extends: "tr"})
async function fetchUsers() {
console.debug("fetching users")
2023-01-03 07:40:38 +00:00
let response = await window.fetch(`${host}/api/user`, {credentials: "include"})
if (!response.ok) {
alert("Could not load users")
return
}
let json = {}
try {
json = await response.json()
} catch (err) {
alert(err)
return
}
2023-01-04 04:21:49 +00:00
document.querySelector("#user-list").replaceChildren(...json.map(u => {
const ul = new UserInfoPanel()
Object.keys(u).forEach(k => {
let val = u[k]
if (!val) { return }
if(typeof(val) == "boolean") { val = k; }
ul.setAttribute(k, u[k])
})
return ul
}))
2023-01-03 07:40:38 +00:00
}
async function fetchLog() {
console.debug("fetching log")
let response = await window.fetch(`${host}/api/log?last=20`, {credentials: "include"})
if (!response.ok) {
alert("Could not load log")
return
}
2023-01-03 07:40:38 +00:00
let json = {}
try {
json = await response.json()
} catch (err) {
alert(err)
return
}
document.querySelector("#rex-records").replaceChildren(...json.map(rex => {
const tr = document.createElement("tr")
tr.classList.add("rex-staus-" + (!rex.error ? "ok" : "failure"))
2023-01-04 04:21:49 +00:00
tr.classList.add("rex-record")
2023-01-03 07:40:38 +00:00
const status = !rex.error ? "ok" : `<strong>${rex.error}</strong> ${rex.failure}`
2023-01-04 04:21:49 +00:00
tr.innerHTML = `<th class="log-record-timestamp">${localDate(rex.timestamp)}</th>
2023-01-03 07:40:38 +00:00
<td class="log-record-user">${rex.user}</td>
<td class="log-record-status">${status}</td>
<td class="log-record-second_factor">${rex.second_factor ? "✓" : ""}</td>
<td class="log-record-ip_address">${rex.ip_address}</td>
<td class="log-record-user_agent">${rex.user_agent}</td>`
2023-01-04 04:21:49 +00:00
// table rows and shadow dom don't really play along
// also, the `is` attribute is not supported by safari :/
2023-01-03 07:40:38 +00:00
// tr.appendChild(new REXRow(record))
return tr
}))
}
2023-01-04 04:21:49 +00:00
function userFromForm(form) {
const user = Object.fromEntries(new FormData(form))
2023-01-03 07:40:38 +00:00
delete(user.id)
if (user.expires != "") {
user.expires = (new Date(user.expires)).toISOString()
} else {
delete(user.expires)
}
if (user.max_ttl == "") {
delete(user.max_ttl)
}
if (user.schedule == "") {
delete(user.schedule)
}
2023-01-04 04:21:49 +00:00
user.is_admin = user.is_admin == "on"
user.second_factor = user.second_factor == "on"
return user
}
2023-01-03 07:40:38 +00:00
2023-01-04 04:21:49 +00:00
async function UpdateUser(form) {
const user = userFromForm(form)
2023-01-03 07:40:38 +00:00
2023-01-04 06:11:17 +00:00
let response = await webauthn.withAuth(form.getAttribute("action"), {
2023-01-03 07:40:38 +00:00
credentials: "include",
method: "POST",
body: JSON.stringify(user),
headers: {
'Content-Type': 'application/json'
}
2023-01-02 07:44:34 +00:00
})
2023-01-03 07:40:38 +00:00
if (!response.ok) {
2023-01-04 04:21:49 +00:00
throw new Error("Could not update user:", response)
2023-01-03 07:40:38 +00:00
}
window.location.reload()
}
2023-01-04 04:21:49 +00:00
async function CreateUser(form) {
const user = userFromForm(form)
2023-01-04 06:11:17 +00:00
let response = await webauthn.withAuth(form.getAttribute("action"), {
2023-01-04 04:21:49 +00:00
credentials: "include",
method: "POST",
body: JSON.stringify(user),
headers: {
'Content-Type': 'application/json'
}
})
if (!response.ok) {
throw new Error("Could not create user:", response)
}
form.reset()
window.location.hash = "#invitades"
}
2023-01-03 07:40:38 +00:00
async function switchTab() {
let tabName = window.location.hash.toLowerCase().replace("#", "")
let activate = async () => true
console.log(`switching to tab ${tabName}`)
switch (tabName) {
case "crear":
break;
case "registro":
activate = fetchLog
break;
case "":
tabName = "invitades"
case "invitades":
activate = fetchUsers
break;
default:
throw new Error(`unknown tab ${tabName}`)
}
console.log(`activating tab ${tabName}`)
let open = document.querySelector(".tab-open")
if (open) {
open.classList.remove("tab-open")
open.classList.add("hidden")
}
let tab = document.querySelector(`#${tabName}`)
tab.classList.add("tab-open")
tab.classList.remove("hidden")
await activate(tab)
}
2023-01-02 07:44:34 +00:00
window.addEventListener("load", async function() {
2023-01-03 07:40:38 +00:00
const form = document.querySelector("#create-user")
form.addEventListener("submit", async (evt) => {
evt.preventDefault()
await CreateUser(form)
})
switchTab()
2023-01-02 07:44:34 +00:00
})
2023-01-03 07:40:38 +00:00
window.addEventListener('hashchange', () => {
switchTab()
})