TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
							<html>
    <head>
        <title>WsTTY</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
        <script type="text/javascript" src="../../script/ao_module.js"></script>
        <style>
            body{
                background-color: rgba(20, 20, 20, 0.9);
            }

            .textarea{
                width: 100%;
                height: calc(100% - 24px);
                border-bottom: 1px solid #242424;
                overflow-y: auto;
                overflow-x: hidden;
                word-wrap: break-word;
                padding: 12px;
                color: white;
                font-family: monospace;
            }

            .commandinput{
                width: 100%;
                background-color:transparent;
                border: 0px solid transparent;
                padding: 3px;
                color: white;
                padding-left: 12px;
                padding-right: 12px;
            }
        </style>
    </head>
    <body>
        <div class="textarea" onclick="$('.commandinput').focus();">

        </div>
        <input type="text" class="commandinput"></input>
        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="yellow exclamation triangle icon"></i>
                Connection Closed
            </div>
            <div class="content">
                <p>Session has been terminated by the server side (either by permission denied or system failure). Please restart the WsTTY for a new session.</p>
            </div>
            <div class="actions">
                <div class="ui basic cancel inverted button">
                OK
                </div>
                <div class="ui ok inverted button" onclick="ao_module_close();">
                <i class="remove icon"></i>
                Close
                </div>
            </div>
        </div>
        <script>
            var ShellWs;
            var commandHistory = [];
            var historyViewCounter = 0;

            var CtrlDown = false;

            $('.ui.modal').modal();
            $(document).ready(function(){
                $(".commandinput").focus();

                //Connect to WebSocket
                let protocol = "wss://";
                if (location.protocol !== 'https:') {
                    protocol = "ws://";
                }

                writeToScreen("[info] Conencting to arozos WsTTY service...")
                //Create WebSocket object
                ShellWs = new WebSocket(protocol + window.location.hostname + ":" + window.location.port + "/wstty/tty/");
            
                //Hook events
                ShellWs.onopen = function(e) {
                    writeToScreen("[info] Connection opened")
                };

                ShellWs.onmessage = function(event) {
                    writeToScreen(event.data)
                };

                ShellWs.onclose = function(event) {
                    writeToScreen("[info] Connection Closed")
                    $('.ui.modal').modal("show");
                };

                ShellWs.onerror = function(error) {
                    console.log(error);
                };

            });

            $(document).keydown(function(event) {
                if (event.which == "17"){
                    CtrlDown = true;
                }else if (event.which == 67 && CtrlDown == true){
                    //Signkill.
                    if (ShellWs != undefined){
                        ShellWs.send("\x003")
                    }
                }
            });

            $(document).keyup(function() {
                CtrlDown = false;
            });
                        
            $(".commandinput").on("keydown", function(e){
                if (e.keyCode == 13){
                    //Enter pressed.
                    var commandToSend = $(".commandinput").val();

                    //Handle client side commands
                    if (commandToSend == "clear"){
                        $(".textarea").html("");
                    }else{
                        if (ShellWs !== undefined){
                            ShellWs.send(commandToSend)
                        }
                    }

                    commandHistory.push(commandToSend);
                    historyViewCounter = 0;
                    $(".commandinput").val("");
                
                }else if (e.keyCode == 38){
                    if (historyViewCounter == 0){
                        historyViewCounter = commandHistory.length - 1;
                    }else if (historyViewCounter > 1){
                        historyViewCounter--;
                    }

                    $(".commandinput").val(commandHistory[historyViewCounter]);
                }
            });

            function writeToScreen(newContent){
                newContent = newContent.trim();
                newContent = newContent.split("<").join(`&lt;`);
                newContent = newContent.split(">").join(`&gt;`);
                newContent = newContent.split("\n").join("<br>");
                newContent = newContent.split(" ").join(`&nbsp`);

                $(".textarea").html($(".textarea").html() + newContent + "<br>")

                $(".textarea")[0].scrollTop = $(".textarea")[0].scrollHeight;
            }
        </script>
    </body>
</html>