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

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

Browse Source
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; font-family: sans-serif;
} }
header { header {
height: calc(42px - 16px); height: calc(38px - 16px);
padding: 8px; padding: 8px;
} }
main { main {
height: calc(100% - 42px); height: calc(100% - 38px);
vertical-align: top; vertical-align: top;
} }
main > section { main > section {
@ -34,9 +34,6 @@
font-weight: bold; font-weight: bold;
text-transform: capitalize; text-transform: capitalize;
} }
main #names {
padding-bottom: 32px;
}
main > section.times, #timeheader { main > section.times, #timeheader {
width: calc(100% - 128px); width: calc(100% - 128px);
overflow: hidden; overflow: hidden;
@ -70,15 +67,54 @@
margin-right: 16px; margin-right: 16px;
} }
.viewheader.row { .viewheader.row {
height: 31px; height: 30px;
background: #ddd !important; background: #ddd !important;
border-top: 1px solid gray;
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
} }
.viewheader span { .viewheader span {
background: none !important; background: none !important;
color: #444 !important; color: #000 !important;
padding-left: 4px; 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> </style>
</head> </head>
<body> <body>
@ -86,16 +122,17 @@
Start: <input type="datetime-local" id="start" value="2020-12-01T00:00" onchange="renderData()"> Start: <input type="datetime-local" id="start" value="2020-12-01T00:00" onchange="renderData()">
Ende: <input type="datetime-local" id="end" onchange="renderData()"> Ende: <input type="datetime-local" id="end" onchange="renderData()">
Raum: <input type="text" id="room" placeholder=".* (regex)" 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> </header>
<main> <main>
<div class="row viewheader" id="nameheader"> <div class="row viewheader" id="nameheader">
<span><b>Names</b></span> <span><b>Names</b></span>
</div><!-- </div><!--
--><div class="row viewheader" id="timeheader"> --><div class="row viewheader" id="timeheader">
<div id="timelabels"></div> <div id="timelabels" style="padding-right: 32px;"></div>
</div> </div>
<section class="names"> <section class="names">
<div id="names"></div> <div id="names" style="padding-bottom: 32px;"></div>
</section><!-- </section><!--
--><section class="times"> --><section class="times">
<div class="scroll"> <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() { 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 => { .then(res => {
if (Math.floor(res.status / 100) == 2) if (Math.floor(res.status / 100) == 2)
return res.json() return res.json()
else else
localStorage.removeItem('dataauth')
res.text().then(function (text) { 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)) .then(rdata => saveData(rdata))