Skip to content
Snippets Groups Projects
Commit 081a60ef authored by Jan Hartig's avatar Jan Hartig
Browse files

Merge branch 'dev' into 'main' 

Add error handling

See merge request !1
parents ead017b5 192caccc
No related branches found
No related tags found
Hide whitespace changes
Inline Side-by-side
Showing
with 116 additions and 58 deletions
roomunlock.html
+ 116
− 58
View file @ 081a60ef
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Raumfreischaltung - PTB VC</title> <title>Raumfreischaltung - PTB VC</title>
...@@ -37,20 +38,20 @@ ...@@ -37,20 +38,20 @@
button:hover { button:hover {
transition: background-color 0.12s ease-in-out; transition: background-color 0.12s ease-in-out;
background-color: #45a049; background-color: green;
} }
button:hover:disabled { button:hover:disabled {
pointer-events: none; pointer-events: none;
} }
#hiddenField { .hiddenField {
margin-top: 5rem; margin-top: 5rem;
opacity: 0; opacity: 0;
transition: opacity 0.25s ease-in; transition: opacity 0.25s ease-in;
} }
#hiddenField.visible { .hiddenField.visible {
opacity: 1; opacity: 1;
} }
...@@ -58,64 +59,121 @@ ...@@ -58,64 +59,121 @@
width: 40rem; width: 40rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.error {
margin-top: unset;
color: rgb(179, 50, 50);
font-weight: bolder;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Raumfreischaltung</h1> <h1>Raumfreischaltung</h1>
<input type="text" id="room" name="raumname" placeholder="Raumname" minlength="1"> <div id="hiddenFieldError" class="hiddenField error" aria-hidden="true">
<button type="button" onclick="process_form()" id="unlock">Freischalten</button> <p id="errorText">empty</p>
</div>
<div id="hiddenField" aria-hidden="true"> <input type="text" id="room" placeholder="Raumname" minlength=2 required>
<p id="urlText"></p> <button type="button" onclick="process_form()" id="unlock">Freischalten</button>
<p id="urlTime"></p>
<input type="text" id="roomUrl" readonly>
<br> <br>
<button id="copyButton" onclick="copyToClipboard()">Link in Zwischenablage kopieren</button> <p style="font-weight: bold;">oder...</p>
</div> <button type="button" onclick="get_room()" id="random">Zufälligen Raum erstellen</button>
<div id="hiddenField" class="hiddenField" aria-hidden="true">
<script> <p id="urlText"></p>
const baseUrl = window.location.protocol + "//" + window.location.host <p id="urlTime"></p>
const unlockButton = document.getElementById('unlock') <input type="text" id="roomUrl" readonly>
const roomField = document.getElementById('room') <br>
const hiddenField = document.getElementById('hiddenField'); <button id="copyButton" onclick="copyToClipboard()">Link in Zwischenablage kopieren</button>
const urlText = document.getElementById('urlText'); </div>
const urlTime = document.getElementById('urlTime');
const roomUrl = document.getElementById('roomUrl'); <script>
const baseUrl = window.location.protocol + "//" + window.location.host
let room = window.location.href.substring(window.location.href.lastIndexOf('/') + 1) const unlockButton = document.getElementById('unlock')
if (room.length > 2 && room !== "raumfreischaltung") { const randomButton = document.getElementById('random')
roomField.value = room; const roomField = document.getElementById('room')
get_room(); const hiddenField = document.getElementById('hiddenField');
} const hiddenFieldError = document.getElementById('hiddenFieldError');
const errorText = document.getElementById('errorText');
function get_room() { const urlText = document.getElementById('urlText');
fetch(baseUrl + "/unlockroom", { const urlTime = document.getElementById('urlTime');
method: "POST", const roomUrl = document.getElementById('roomUrl');
body: JSON.stringify({"room": room}),
headers: {"Content-Type": "application/json"} let room = window.location.href.substring(window.location.href.lastIndexOf('/') + 1)
}).then(data => { if (room !== "raumfreischaltung" && room !== "") {
data.json().then(data => { roomField.value = room;
urlText.innerHTML = "Dieser Link öffnet den Raum <b>" + data.room + "</b> ohne Zertifikat.";
urlTime.innerHTML = "Gültig bis <b>" + new Date(Date.now() + data.valid_for * 24 * 60 * 60 * 1000).toLocaleDateString() + "</b>"; if (room.length >= 2) {
roomUrl.value = baseUrl + "/" + data.room + "?jwt=" + data.jwt; get_room(room);
} else {
errorText.innerText = "Raumname zu kurz.";
hiddenFieldError.classList.add("visible");
hiddenFieldError.ariaHidden = "false";
}
}
function get_room(_room) {
hiddenFieldError.classList.remove("visible");
hiddenFieldError.ariaHidden = "true";
let _body;
if (_room) {
_body = JSON.stringify({ "room": room })
} else {
_body = "{}"
}
fetch(baseUrl + "/unlockroom", {
method: "POST",
body: _body,
headers: { "Content-Type": "application/json" }
}).then(response => {
if (!response.ok) {
errorText.innerText = "Fehler bei der Datenabfrage. Versuchen Sie es bitte später erneut.";
hiddenFieldError.classList.add("visible");
hiddenFieldError.ariaHidden = "false";
} else {
response.json().then(data => {
if (data.error) {
errorText.innerText = data.error;
hiddenFieldError.classList.add("visible");
hiddenFieldError.ariaHidden = "false";
} else {
urlText.innerHTML = "Dieser Link öffnet den Raum <b>" + data.room + "</b> ohne Zertifikat.";
urlTime.innerHTML = "Gültig bis <b>" + new Date(Date.now() + data.valid_for * 24 * 60 * 60 * 1000).toLocaleDateString() + "</b>";
roomUrl.value = baseUrl + "/" + data.room + "?jwt=" + data.jwt;
unlockButton.disabled = true;
randomButton.disabled = true;
roomField.disabled = true;
hiddenField.classList.add('visible');
hiddenField.ariaHidden = "false";
}
})
}
}) })
}) }
unlockButton.disabled = true; function process_form() {
roomField.disabled = true; if (roomField.checkValidity()) {
hiddenField.classList.add('visible'); room = roomField.value;
hiddenField.ariaHidden = "false"; get_room(room);
} } else if (roomField.validity.valueMissing) {
errorText.innerText = "Bitte Raumname wählen.";
function process_form() { hiddenFieldError.classList.add("visible");
room = roomField.value hiddenFieldError.ariaHidden = "false";
get_room() } else if (roomField.validity.tooShort) {
} errorText.innerText = "Raumname zu kurz.";
hiddenFieldError.classList.add("visible");
function copyToClipboard() { hiddenFieldError.ariaHidden = "false";
roomUrl.select(); }
document.execCommand('copy'); }
}
</script> function copyToClipboard() {
roomUrl.select();
document.execCommand('copy');
}
</script>
</body> </body>
</html>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment