FaSTTUBe
/
ftracker
38
1
Fork 0
Code Issues 2 Pull Requests Releases 1 Wiki Activity

Web: Add authentication UI bc native BasicAuth is shit (resolves #14)

This commit is contained in:
Oskar Winkels 2020-12-03 16:13:39 +01:00 committed by Oskar
parent 402dc27180
commit a70aee6cf6
1 changed files with 81 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
web/viewdata.html
View File

@ -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);
}
</style>
</head>
<body>
@ -86,16 +122,17 @@
Start: <input type="datetime-local" id="start" value="2020-12-01T00:00" onchange="renderData()">
Ende: <input type="datetime-local" id="end" onchange="renderData()">
Raum: <input type="text" id="room" placeholder=".* (regex)" onchange="renderData()">
<input type="button" value="Log Out" style="float:right" onclick="localStorage.removeItem('dataauth'); location.reload()">
</header>
<main>
<div class="row viewheader" id="nameheader">
<span><b>Names</b></span>
</div><!--
--><div class="row viewheader" id="timeheader">
<div id="timelabels"></div>
<div id="timelabels" style="padding-right: 32px;"></div>
</div>
<section class="names">
<div id="names"></div>
<div id="names" style="padding-bottom: 32px;"></div>
</section><!--
--><section class="times">
<div class="scroll">
@ -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 = '<h1>Credentials Required</h1>\
<input type="text" id="user" placeholder="username" onkeydown="if (event.keyCode == 13) {submitCredentials()}">\
<input type="password" id="pass" placeholder="password" onkeydown="if (event.keyCode == 13) {submitCredentials()}">\
<input type="submit" onclick="submitCredentials()">'
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))