From a70aee6cf6b60f378e6c8ad00c5c676e87244e67 Mon Sep 17 00:00:00 2001 From: Oskar Date: Thu, 3 Dec 2020 16:13:39 +0100 Subject: [PATCH] Web: Add authentication UI bc native BasicAuth is shit (resolves #14) --- web/viewdata.html | 92 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 81 insertions(+), 11 deletions(-) diff --git a/web/viewdata.html b/web/viewdata.html index 51718c4..ac64223 100644 --- a/web/viewdata.html +++ b/web/viewdata.html @@ -11,11 +11,11 @@ font-family: sans-serif; } header { - height: calc(42px - 16px); + height: calc(38px - 16px); padding: 8px; } main { - height: calc(100% - 42px); + height: calc(100% - 38px); vertical-align: top; } main > section { @@ -34,9 +34,6 @@ font-weight: bold; text-transform: capitalize; } - main #names { - padding-bottom: 32px; - } main > section.times, #timeheader { width: calc(100% - 128px); overflow: hidden; @@ -70,15 +67,54 @@ margin-right: 16px; } .viewheader.row { - height: 31px; + height: 30px; background: #ddd !important; + border-top: 1px solid gray; border-bottom: 1px solid gray; } .viewheader span { background: none !important; - color: #444 !important; + color: #000 !important; padding-left: 4px; } + #credprompt { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 95%; + max-width: 320px; + margin: auto; + background: #ddd; + box-shadow: 0 0 0 10000px rgba(0,0,0,.75); + } + #credprompt h1 { + margin: 0; + padding: 16px; + text-transform: uppercase; + color: #eee; + background: #c50e1f; + text-align: center; + } + #credprompt input { + display: block; + border: none; + margin: 16px auto; + padding: 16px; + font-size: 16px; + } + #credprompt input[type=text], + #credprompt input[type=password] { + color: #000; + width: calc(100% - 64px); + } + #credprompt input[type=submit] { + background: #c50e1f; + text-transform: uppercase; + font-weight: bold; + color: #fff; + width: calc(100% - 32px); + } @@ -86,16 +122,17 @@ Start: Ende: Raum: +
Names
-
+
-
+
@@ -212,15 +249,48 @@ } + function submitCredentials() { + var cp = document.querySelector('#credprompt') + var user = cp.querySelector('#user').value + var pass = cp.querySelector('#pass').value + cp.remove() + var auth = btoa(user + ":" + pass) + localStorage.setItem('dataauth', auth) + loadData() + } + function loadData() { - fetch('/data') + var auth = localStorage.getItem('dataauth') + if (auth == null) { + var prompt = document.createElement('div') + prompt.id = 'credprompt' + prompt.innerHTML = '

Credentials Required

\ + \ + \ + ' + document.body.appendChild(prompt) + document.querySelector('#credprompt #user').focus() + return // Abort load, wait for submit + } + + var headers = new Headers() + headers.append('Authorization', 'Basic ' + auth) + + var fetchopts = { + method: 'GET', + headers: headers + } + + fetch('/data', fetchopts) .then(res => { if (Math.floor(res.status / 100) == 2) return res.json() else + localStorage.removeItem('dataauth') res.text().then(function (text) { - alert(text + "\nRestart your browser (yes, all tabs and windows) to relogin") + alert(text) + location.reload() }) }) .then(rdata => saveData(rdata))