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

Add error handling

parent ead017b5
No related branches found
No related tags found
1 merge request!1Add error handling
Hide whitespace changes
Inline Side-by-side
Showing
with 116 additions and 58 deletions
roomunlock.html
+ 116
− 58
View file @ 192caccc
<!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