diff --git a/roomunlock.html b/roomunlock.html index 0e4625c78a78aed8882bf715f60996feaa2aab89..61dbef38cc2505b9da9939733538bb6acc823ed2 100644 --- a/roomunlock.html +++ b/roomunlock.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html lang="de"> + <head> <meta charset="UTF-8"> <title>Raumfreischaltung - PTB VC</title> @@ -37,20 +38,20 @@ button:hover { transition: background-color 0.12s ease-in-out; - background-color: #45a049; + background-color: green; } button:hover:disabled { pointer-events: none; } - #hiddenField { + .hiddenField { margin-top: 5rem; opacity: 0; transition: opacity 0.25s ease-in; } - #hiddenField.visible { + .hiddenField.visible { opacity: 1; } @@ -58,64 +59,121 @@ width: 40rem; margin-bottom: 1.5rem; } + + .error { + margin-top: unset; + color: rgb(179, 50, 50); + font-weight: bolder; + } </style> </head> + <body> -<h1>Raumfreischaltung</h1> -<input type="text" id="room" name="raumname" placeholder="Raumname" minlength="1"> -<button type="button" onclick="process_form()" id="unlock">Freischalten</button> - -<div id="hiddenField" aria-hidden="true"> - <p id="urlText"></p> - <p id="urlTime"></p> - <input type="text" id="roomUrl" readonly> + <h1>Raumfreischaltung</h1> + <div id="hiddenFieldError" class="hiddenField error" aria-hidden="true"> + <p id="errorText">empty</p> + </div> + <input type="text" id="room" placeholder="Raumname" minlength=2 required> + <button type="button" onclick="process_form()" id="unlock">Freischalten</button> <br> - <button id="copyButton" onclick="copyToClipboard()">Link in Zwischenablage kopieren</button> -</div> - -<script> - const baseUrl = window.location.protocol + "//" + window.location.host - const unlockButton = document.getElementById('unlock') - const roomField = document.getElementById('room') - const hiddenField = document.getElementById('hiddenField'); - const urlText = document.getElementById('urlText'); - const urlTime = document.getElementById('urlTime'); - const roomUrl = document.getElementById('roomUrl'); - - let room = window.location.href.substring(window.location.href.lastIndexOf('/') + 1) - if (room.length > 2 && room !== "raumfreischaltung") { - roomField.value = room; - get_room(); - } - - function get_room() { - fetch(baseUrl + "/unlockroom", { - method: "POST", - body: JSON.stringify({"room": room}), - headers: {"Content-Type": "application/json"} - }).then(data => { - data.json().then(data => { - 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; + <p style="font-weight: bold;">oder...</p> + <button type="button" onclick="get_room()" id="random">Zufälligen Raum erstellen</button> + <div id="hiddenField" class="hiddenField" aria-hidden="true"> + <p id="urlText"></p> + <p id="urlTime"></p> + <input type="text" id="roomUrl" readonly> + <br> + <button id="copyButton" onclick="copyToClipboard()">Link in Zwischenablage kopieren</button> + </div> + + <script> + const baseUrl = window.location.protocol + "//" + window.location.host + const unlockButton = document.getElementById('unlock') + const randomButton = document.getElementById('random') + const roomField = document.getElementById('room') + const hiddenField = document.getElementById('hiddenField'); + const hiddenFieldError = document.getElementById('hiddenFieldError'); + const errorText = document.getElementById('errorText'); + const urlText = document.getElementById('urlText'); + const urlTime = document.getElementById('urlTime'); + const roomUrl = document.getElementById('roomUrl'); + + let room = window.location.href.substring(window.location.href.lastIndexOf('/') + 1) + if (room !== "raumfreischaltung" && room !== "") { + roomField.value = room; + + if (room.length >= 2) { + 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; - roomField.disabled = true; - hiddenField.classList.add('visible'); - hiddenField.ariaHidden = "false"; - } - - function process_form() { - room = roomField.value - get_room() - } - - function copyToClipboard() { - roomUrl.select(); - document.execCommand('copy'); - } -</script> + } + + function process_form() { + if (roomField.checkValidity()) { + room = roomField.value; + get_room(room); + } else if (roomField.validity.valueMissing) { + errorText.innerText = "Bitte Raumname wählen."; + hiddenFieldError.classList.add("visible"); + hiddenFieldError.ariaHidden = "false"; + } else if (roomField.validity.tooShort) { + errorText.innerText = "Raumname zu kurz."; + hiddenFieldError.classList.add("visible"); + hiddenFieldError.ariaHidden = "false"; + } + } + + function copyToClipboard() { + roomUrl.select(); + document.execCommand('copy'); + } + </script> </body> -</html> + +</html> \ No newline at end of file