diff --git a/roomunlock.html b/roomunlock.html index 60f69d223ddbe672cef9da5a3e00b140606ba2b5..8d53073e4f1defd244fee4f9388d1c6c4e2fab3f 100644 --- a/roomunlock.html +++ b/roomunlock.html @@ -61,20 +61,23 @@ } .error { - color: darkred; + margin-top: unset; + color: rgb(179, 50, 50); + font-weight: bolder; } </style> </head> <body> <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><br> - <button type="button" onclick="" id="random">Zufälligen Raum erstellen</button> - <div id="hiddenFieldError" aria-hidden="true"> - <p id="errorText" class="error"></p> - </div> + <br> + <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> @@ -89,51 +92,74 @@ const randomButton = document.getElementById('random') const roomField = document.getElementById('room') const hiddenField = document.getElementById('hiddenField'); - const hiddenFieldError = 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") { + if (room !== "raumfreischaltung" && room !== "") { roomField.value = room; unlockButton.click(); } function get_room(_room) { + hiddenFieldError.classList.remove("visible"); + hiddenFieldError.ariaHidden = "true"; + let _body; + if (_room) { - JSON.stringify({ "room": room }) + _body = JSON.stringify({ "room": room }) } else { - "" + _body = "{}" } + fetch(baseUrl + "/unlockroom", { method: "POST", body: _body, headers: { "Content-Type": "application/json" } - }).then(data => { - data.json().then(data => { - if (data.error) { - errorText.innerText = data.error - } 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; - } - }) + }).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; - randomButton.disabled = true; - roomField.disabled = true; - hiddenField.classList.add('visible'); - hiddenField.ariaHidden = "false"; } function process_form() { - room = roomField.value - get_room() + 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() {