console/frontend/src/main.js

import { Terminal } from 'xterm';
import { AttachAddon } from 'xterm-addon-attach';
import { FitAddon } from 'xterm-addon-fit';
import { SearchAddon } from 'xterm-addon-search';

function main() {
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('token');
    if(token==null) {
        alert("You need a token to use this.");
        return;
    }
    const host = `${window.location.hostname}`;
    var server = window.location.hash.replace('#', '');
    var serverselect = document.getElementById('serverselect')
    var serverlabel = document.getElementById('server');
    var socket;
    var term = new Terminal();
    const fitAddon = new FitAddon();
    const searchAddon = new SearchAddon();

    term.loadAddon(fitAddon);
    term.loadAddon(searchAddon);
    fitAddon.fit();
    serverlabel.innerText = server;
    getServers(token, host).then(servers => {
        if(servers==null) {
            alert("Invalid token");
            return;
        }
        servers.forEach(element => {
            let opt = document.createElement('option');
            opt.text = element;
            serverselect.add(opt);
        });
        if(server == "") {
            server = serverselect.options[0].value;
            window.location.hash = serverselect.value;
        }
        
        serverselect.value = server;

        console.log(server, servers, servers.includes(server));
        if(servers.includes(server)) {           
            term.open(document.getElementById('terminal'));
            try {
                socket = new WebSocket(`wss://${host}/server/${server}/logs?token=${token}`);
                const attachAddon = new AttachAddon(socket);
                term.loadAddon(attachAddon);
            } catch(err) {
                alert("You are not allowed to use this server");
                return;
            }
            
           

        }

    });

    serverselect.addEventListener("click", (event) => {
        console.log(serverselect.value);
        window.location.hash = serverselect.value;
        server = serverselect.value;
        socket.close();
        try {
            socket = new WebSocket(`wss://${host}/server/${server}/logs?token=${token}`);
            const attachAddon = new AttachAddon(socket);
            term.loadAddon(attachAddon);
        } catch(err) {
            alert("You are not allowed to use this server");
            return;
        }
        //location.reload();
    })
   
    window.onbeforeunload = function() {
        socket.close();
        console.log("Closing");
        alert("Closing");
    }

    const start = document.getElementById('start');
    const stop = document.getElementById('stop');
    const send = document.getElementById('send');

    start.addEventListener('click', async _ => {
        try {     
            const response = await fetch(`https://${host}/server/${server}/start?token=${token}`, {
            method: 'post',
            body: {
                // Your body
            }
            });
            console.log('Completed!', response);
            if(await response.status==401) {
                alert("You are not allowed to start this server");
                return
            }
            socket.close();
            try {
                socket = new WebSocket(`wss://${host}/server/${server}/logs?token=${token}`);
                const attachAddon = new AttachAddon(socket);
                term.loadAddon(attachAddon);
            } catch(err) {
                alert("You are not allowed to use this server");
                return;
            }
            //location.reload();
        } catch(err) {
            console.error(`Error: ${err}`);
        }
    });

    stop.addEventListener('click', async _ => {
        try {     
            const response = await fetch(`https://${host}/server/${server}/stop?token=${token}`, {
            method: 'post',
            body: {
                // Your body
            }
            });
            console.log('Completed!', response);
            if(await response.status==401) {
                alert("You are not allowed to stop this server");
                return
            }
        } catch(err) {
            console.error(`Error: ${err}`);
        }
        socket.close();
    });

    

    send.onsubmit = async (e) => {
        e.preventDefault();
        let formdata = new FormData(send);
        let command = btoa(formdata.get('send'));
        console.log(command);
        //let command = btoa('say hello')
        try {
            let response = await fetch(`https://${host}/server/${server}/command/${command}?token=${token}`, {
            method: 'POST'
            });
            if(await response.status==401) {
                alert("You are not allowed to send commands to this server");
                return
            }
        } catch(err) {
            console.error(`Error: ${err}`);
        }
      };
}


async function getServers(token, host) {
    try {
        console.log(`https://${host}/user/servers?token=${token}`);
        let response = await fetch(`https://${host}/user/servers?token=${token}`, {
        method: 'GET'
        });
        if(response.ok)
            return JSON.parse(await response.json());
        else return null;
    } catch(err) {
        console.error(`Error: ${err}`);
    }
    
}

window.onload = main();