Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • main
1 result

Target

Select target project
  • janhartig/vc-roomunlock-web
1 result
Select Git revision
  • main
1 result
Show changes
Commits on Source (2)
Hide whitespace changes
Inline Side-by-side
Showing
with 116 additions and 58 deletions
roomunlock.html
View file @ 081a60ef
<!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