MultiUserChatCLI/public/index.html

248 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Coda&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>
<title>Discord-Linux Multi User Session</title>
</head>
<body>
<header class="fixed-bottom text-center text-white bg-transparent col-auto">
<!-- Grid container -->
<h1>Discord-Linux Multi User Terminal (Using the Discord-Linux API)</h1>
<CENTER>
<h3>Type "exit" to logout and "clear" to clean old messages</h3>
</CENTER>
</h1>
<!-- Grid container -->
<!-- Copyright -->
</header>
<body onload="settoken()">
<div class="container">
<div id="messages" class='code' class="messages"></div>
<footer class="fixed-bottom text-center text-white bg-transparent">
<!-- Grid container -->
<form id="msgForm" class="msgForm">
<input bg-transparent type="text" height="200px" placeholder="Send message" class="input"
id="inputBox" />
<input type="submit" class="btn" value="Send" class="bg-transparent">
</form>
<!-- Grid container -->
<!-- Copyright -->
</footer>
<!--
<button class="top-right btn2 btn-primary pull-right" onclick="removeTerminalContent()" >Clear</button>
<button class="btn2 btn-primary pull-right" onclick="logout();">Logout</button>
-->
<!-- <button class="btn" style="height:200px;width:200px" onclick="removeTerminalContent()">Clear</button> -->
</div>
<script type="text/javascript">
let prefix = ">"
let userid
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function removeTerminalContent() {
let terminal = document.getElementById("messages")
terminal.innerHTML = ""
let ctn = document.getElementById("msgCtn")
ctn.remove();
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function settoken() {
if (!getCookie("token")) {
let userToken = prompt("A token for the Discord-Linux API is required to login.\nPlease enter your token below:", "");
if (userToken == "null" || userToken == null || userToken == "") {
return
}
if (userToken != null) {
setCookie("token", userToken, 1);
fetch('https://api.discord-linux.com/hello?token=' + getCookie("token")).then(response => response.json()).then(data => {
console.log(data.message.replace("Hello, ", "").replace(">", ""))
if (!data.message.replace("Hello, ", "").replace("!", "")) {
logout();
}
setCookie("userid", data.message.replace("Hello, ", "").replace("!", ""), 1)
})
}
}
}
function logout() {
setCookie("token", "", -1)
setCookie("userid", "", -1)
setCookie("pwd", "", -1)
window.location.reload()
}
const ws = new WebSocket(`wss://${window.document.location.host}`);
ws.binaryType = "blob";
// Log socket opening and closing
ws.addEventListener("open", event => {
console.log("Websocket connection opened");
});
ws.addEventListener("close", event => {
console.log("Websocket connection closed");
});
ws.onmessage = function (message) {
console.log(ws)
const msgDiv = document.createElement('div');
msgDiv.classList.add('msgCtn');
if (message.data instanceof Blob) {
reader = new FileReader();
reader.onload = () => {
msgDiv.innerHTML = reader.result;
document.getElementById('messages').appendChild(msgDiv);
};
reader.readAsText(message.data);
} else {
console.log("Result2: " + message.data);
if (getCookie("userid")) {
msgDiv.innerHTML = message.data;
document.getElementById('messages').appendChild(msgDiv);
} else {
setCookie("userid", userid, 1);
setCookie("pwd", "/", 1);
msgDiv.innerHTML = message.data;
document.getElementById('messages').appendChild(msgDiv)
}
}
}
const form = document.getElementById('msgForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const message = document.getElementById('inputBox').value;
let x = getCookie("userid");
let pwd = document.pwd;
if (message.startsWith(">cd" || message.startsWith("> cd"))) {
let newPwd = message.replace(">cd ", "").replace("> cd", "");
if (newPwd.startsWith("/")) {
pwd = newPwd;
} else {
pwd = pwd + "/" + newPwd;
}
setCookie("pwd", newPwd, 1);
ws.send("[SRV] " + x + ": I have set your directory to: " + newPwd);
} else
// ws.send(x + ": " + message);
if (message.startsWith(">")) {
if (x == "undefined" || x == "") {
return settoken()
}
ws.send(x + ": " + message);
(async () => {
let commandToSend = message.replace(">", "").replace("> ", "")
const rawResponse = await fetch('https://api.discord-linux.com/exec', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-discord-linux-auth': getCookie("token")
},
body: JSON.stringify({
"cmd": commandToSend,
"pwd": getCookie("pwd")
})
});
const content = await rawResponse.json();
console.log(content);
console.log(content.stdout)
if (x == "undefined" || x == "") {
return settoken()
}
if (content.stdout == "") {
if (x == "undefined" || x == "") {
return settoken()
}
return ws.send(`Response for ${x + ":" + " Command: " + commandToSend + "\n"}Done.`)
}
ws.send(`Response for ${x + ":" + " Command: " + commandToSend + "\n"}${content.stdout}`);
})();
} else {
if (message == "clear") {
return removeTerminalContent()
}
if (message == "exit") {
return logout()
}
if (message == "") {
return
}
if (x == "undefined" || x == "") {
return settoken()
}
ws.send(`${x}: ${message}`);
}
document.getElementById('inputBox').value = ''
})
</script>
</body>
</html>