Basic frontend

I'm sorry for the big commit

- Added yarte templating engine
- Wrote frontend: all HTML except file input area, basic CSS (themes soon), JS.
No client-side encryption yet. And no working API.
- Simple but handy build system in Makefile
(requires pacman -S entr / apt install entr)
This commit is contained in:
DarkCat09 2024-03-09 16:17:18 +04:00
parent 4b6b3f7da4
commit 96376f2fba
Signed by: DarkCat09
GPG key ID: 0A26CD5B3345D6E3
12 changed files with 805 additions and 11 deletions

29
static/script.js Normal file
View file

@ -0,0 +1,29 @@
addEventListener('DOMContentLoaded', () => {
// show password while user holds button
const showPswdBtns = document.getElementsByClassName('show-pswd')
for (let el of showPswdBtns) {
const inp = document.getElementById(el.dataset.input)
el.addEventListener('mousedown', () => inp.type = 'text')
el.addEventListener('mouseup', () => inp.type = 'password')
}
// add file input by cloning #file-tmpl-js (see index.hbs)
const filesContainer = document.querySelector('#tab-file>.form-main')
const fileTemplate = document.querySelector('#file-tmpl-js>div')
document.getElementById('add-file').addEventListener('click', () => {
filesContainer.append(fileTemplate.cloneNode(true))
})
// make tabs usable from keyboard:
// when focused on label, space or enter triggers
// click on hidden input[type=radio]
const tabLabels = document.querySelectorAll('header>label')
for (let el of tabLabels) {
const inp = document.getElementById(el.htmlFor)
el.addEventListener('keyup', (ev) => {
if (ev.key == " " || ev.key == "Enter") {
inp.click()
}
})
}
})