You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

285 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en" style="position: fixed;inset: 0;">
<head>
<meta charset="UTF-8">
<title>Delta Kiosk</title>
<style>
* {
font-family: system-ui, -apple-system, sans-serif;
user-select: none;
cursor: default;
}
.users-list-user {
cursor: pointer;
background: rgba(0, 0, 0, .1);
padding: 10px 20px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.users-list-user:nth-child(1) {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.users-list-user:nth-last-child(1) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-color: transparent;
}
.users-list-user:hover {
background: rgba(0, 0, 0, .2);
}
.users-list-user:active, .users-list-user:focus {
background: rgba(0, 0, 0, .3);
}
#users {
font-size: 24px;
position: fixed;
inset: 0;
background: rgba(255, 255, 255, .5);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
z-index: 9999;
backdrop-filter: blur(50px);
}
#users-inner {
background: white;
border-radius: 10px;
padding: 50px;
width: 50vw;
}
#users-list {
list-style: none;
padding: 0;
}
#preload {
position: fixed;
z-index: 9999;
display: flex;
inset: 0;
background: black;
align-items: center;
justify-content: center;
cursor: none;
}
#preload-icon {
width: 20%;
pointer-events: none;
}
</style>
<script>
let server = "http://192.168.1.121:8081/";
let admin = "6c89f976-0eee-4bd9-8f55-de961d4bd905";
window.preloadWaitInterval = null;
window.preloadWaitTimeout = null;
async function startPreloadUnlock() {
document.getElementById("preload-icon").src = "./unlock.svg";
document.getElementById("preload-icon").style.opacity = "1";
window.preloadWaitInterval = setInterval(() => {
if (document.getElementById("preload-icon").style.opacity === "0") {
document.getElementById("preload-icon").style.opacity = "1";
} else if (document.getElementById("preload-icon").style.opacity === "1") {
document.getElementById("preload-icon").style.opacity = "0";
}
}, 1000);
window.preloadWaitTimeout = setTimeout(() => {
clearInterval(window.preloadWaitInterval);
clearInterval(window.authApprovalInterval);
document.getElementById("preload-icon").src = "./logo.svg";
document.getElementById("preload-icon").style.opacity = "1";
}, 30000);
let data = JSON.parse(await (await window.fetch(server + "/dev.equestria.delta.kiosk.RequestApproval/?activate&id=" + admin)).text());
window.authId = data.id;
window.authApprovalInterval = setInterval(async () => {
let data = JSON.parse(await (await window.fetch(server + "/dev.equestria.delta.kiosk.CheckApproved/?id=" + window.authId)).text());
if (data['token']) {
clearInterval(window.preloadWaitInterval);
clearInterval(window.authApprovalInterval);
document.getElementById("preload-icon").src = "./logo.svg";
document.getElementById("preload-icon").style.opacity = "1";
document.getElementById("preload").style.display = "none";
document.getElementById("video").currentTime = 0;
} else if (data['token'] === false) {
clearInterval(window.preloadWaitInterval);
clearInterval(window.authApprovalInterval);
document.getElementById("preload-icon").src = "./logo.svg";
document.getElementById("preload-icon").style.opacity = "1";
}
}, 500);
}
</script>
</head>
<body style="position: fixed;inset: 0;margin: 0;">
<div id="preload" onclick="startPreloadUnlock();">
<img id="preload-icon" alt="" src="./logo.svg">
</div>
<div id="welcome">
<video id="video" src="video.mp4" muted loop autoplay style="position: fixed;inset: 0;width: 100vw;height: 100vh;"></video>
<div style="position: fixed; bottom: 20px; left: 0; right: 0; text-align: center; text-shadow: 0 0 5px white; font-size: 24px;">Cliquez n'importe où pour commencer</div>
<div id="version" style="position: fixed;bottom: 5px;left: 0;right: 5px;text-align: right;text-shadow: 0 0 5px white;font-size: 18px;opacity: .25;">-</div>
<div style="position: fixed; inset: 0; z-index: 999; cursor: pointer;" onclick="start();"></div>
</div>
<div id="users" style="display: none;">
<div id="users-inner">
<h1 id="users-title">Bienvenue sur Delta</h1>
<div id="users-list-outer">
<p id="users-text">Cliquez sur votre nom pour commencer.</p>
<ul id="users-list"></ul>
</div>
<div id="users-loader" style="display: none;">
<p>Veuillez patienter... En attente d'approbation par un administrateur.</p>
</div>
</div>
</div>
<script>
const remote = require('@electron/remote');
const { ipcRenderer } = require('electron');
window.user = null;
window.authTimeout = null;
window.authApprovalInterval = null;
window.authId = null;
window.browsingTimeout1 = null;
window.browsingTimeout2 = null;
(async () => {
window.serverVersion = await (await window.fetch("https://delta.equestria.dev/version")).text();
document.getElementById("version").innerText = "v" + window.serverVersion;
let users = JSON.parse(await (await window.fetch(server + "/dev.equestria.delta.kiosk.GetUserList/")).text());
for (let user of users) {
document.getElementById("users-list").innerHTML += `<li class="users-list-user" onclick="loginAs('${user.id}');">${user.name}</li>`;
}
})();
function end() {
clearInterval(window.authApprovalInterval);
clearInterval(window.browsingTimeout1);
clearInterval(window.browsingTimeout2);
window.authId = null;
window.user = null;
document.getElementById("welcome").style.display = "block";
document.getElementById("users").style.display = "none";
document.getElementById("users-list-outer").style.display = "block";
document.getElementById("users-loader").style.display = "none";
document.getElementById("webview").loadURL("about:blank");
document.getElementById("webview").style.display = "none";
}
function start() {
document.getElementById("users").style.display = "flex";
clearTimeout(window.authTimeout);
window.authTimeout = setTimeout(end, 60000);
}
async function loginAs(id) {
window.user = id;
document.getElementById("users-list-outer").style.display = "none";
document.getElementById("users-loader").style.display = "block";
let data = JSON.parse(await (await window.fetch(server + "/dev.equestria.delta.kiosk.RequestApproval/?id=" + id)).text());
window.authId = data.id;
clearTimeout(window.authTimeout);
window.authTimeout = setTimeout(end, 60000);
window.authApprovalInterval = setInterval(async () => {
let data = JSON.parse(await (await window.fetch(server + "/dev.equestria.delta.kiosk.CheckApproved/?id=" + window.authId)).text());
if (data['token']) {
remote.webContents.fromId(document.getElementById("webview").getWebContentsId()).setWindowOpenHandler((details) => {
return {
action: 'deny'
};
});
remote.webContents.fromId(document.getElementById("webview").getWebContentsId()).session.cookies.set({
url: "https://delta.equestria.dev",
name: "DeltaLanguage",
value: "fr"
})
remote.webContents.fromId(document.getElementById("webview").getWebContentsId()).session.cookies.set({
url: "https://delta.equestria.dev",
name: "DeltaKiosk",
value: "true"
})
remote.webContents.fromId(document.getElementById("webview").getWebContentsId()).session.cookies.set({
url: "https://delta.equestria.dev",
name: "DeltaSession",
value: data['token']
})
await document.getElementById("webview").loadURL("https://delta.equestria.dev");
document.getElementById("webview").style.display = "flex";
document.getElementById("users").style.display = "none";
document.getElementById("welcome").style.display = "none";
clearInterval(window.authApprovalInterval);
clearTimeout(window.authTimeout);
window.browsingTimeout1 = setInterval(() => {
if (document.getElementById("webview").getURL().includes("/login/")) {
end();
}
if (document.getElementById("webview").getURL().endsWith("/_dev.equestria.delta.kiosk.ShutdownKiosk")) {
window.close();
}
if (document.getElementById("webview").getURL().endsWith("/_dev.equestria.delta.kiosk.DisableKiosk")) {
end();
document.getElementById("preload").style.display = "";
}
if (document.getElementById("webview").getURL().endsWith("/_dev.equestria.delta.kiosk.SessionEnd")) {
end();
}
});
window.browsingTimeout2 = setTimeout(() => {
end();
}, 300000);
} else if (data['token'] === false) {
end();
}
}, 1000);
}
window.onerror = (event, source, lineno, colno, error) => {
try { end(); } catch (e) {}
console.error(error);
alert("Une erreur s'est produite, l'application est peut-être devenue instable. Si vous rencontrez d'autres problèmes, contacter un administrateur.");
}
ipcRenderer.on('devtools', () => {
if (document.getElementById("webview").isDevToolsOpened()) {
document.getElementById("webview").closeDevTools();
} else {
document.getElementById("webview").openDevTools();
}
});
</script>
<webview id="webview" src="about:blank" style="display: none;position: fixed;inset: 0;height: 100vh;" preload="./kiosk.js"></webview>
</body>
</html>