<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" type="image/x-icon" href="/assets/img/logo.svg "> <title>Web Terminal</title> <!-- Bootstrap core CSS --> <script src="/assets/external/bootstrap.min.js"></script> <link href="/assets/external/bootstrap.min.css" rel="stylesheet"> <link href="/assets/main.css" rel="stylesheet"> </head> <body> <header> <nav class="navbar navbar-dark shadow-sm navbar-xs" style="background-color: #002f55;"> <div class="container-fluid"> <a class="navbar-brand mx-auto" href="https://github.com/syssecfsu/witty" target="_blank"> <img src="/assets/img/logo_light.svg" style="margin-right: 0.5rem;" height="24"> WiTTY: Web-based interactive TTY </a> <div class="btn-toolbar float-end" role="toolbar" aria-label="top buttons"> <form action="/new" method="post" target="_blank" onsubmit="setTimeout(function(){refresh(true)}, 1000)"> {{.csrfField}} <button class="btn btn-primary btn-sm m-1" type="submit">New Session</button> </form> <a class="btn btn-primary btn-sm m-1 {{.disabled}}" href="/logout" role="button"> Logout </a> </div> </div> </nav> </header> <!-- A modal to rename file --> <div class="modal" id="renameModal" tabindex="-1" aria-labelledby="renameModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-body bg-light"> <div class="mb-3"> <label for="new_name"><strong>Rename</strong></label> <label for="new_name" class="col-form-label"></label> <input type="text" class="form-control" id="new_name"> </div> </div> <div class="modal-footer bg-light"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="rename_btn()">Rename</button> </div> </div> </div> </div> <main> <div class="container-fluid" style="margin-top:2em;"> <ul class="nav nav-tabs" id="js_sucks" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link bg-light active" id="interactive-tab" data-bs-toggle="tab" data-bs-target="#interactive-cnt" type="button" role="tab" aria-controls="interactive-cnt" aria-selected="true"><img src="/assets/img/keyboard.svg" style="margin-right: 0.5rem;" height="18px">Live Sessions</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link bg-light" id="saved-tab" data-bs-toggle="tab" data-bs-target="#saved-cnt" type="button" role="tab" aria-controls="saved-cnt" aria-selected="false"><img src="/assets/img/record.svg" style="margin-right: 0.5rem;" height="18px">Recorded Sessions</button> </li> </ul> <div class="tab-content border border-info rounded-bottom" id="nav-tabContent"> </div> </div> </main> <script> var active_tab = 0 function del_btn(path) { let formData = new FormData() formData.append('gorilla.csrf.Token', {{.csrfToken}}) fetch("/delete/" + path, { method: "POST", body: formData, }) setTimeout(function () { refresh(true) }, 20); } // fresh the page every 10 seconds, in case active sessions are closed. function refresh(once) { tabs = document.getElementById("nav-tabContent") fetch("/update/" + active_tab) .then((response) => { return response.text(); }) .then((result) => { tabs.innerHTML = result; }); if (once == false) { setTimeout(function () { refresh(false) }, 8000); } } refresh(false) var itab = document.querySelector('#interactive-tab') itab.addEventListener('shown.bs.tab', function (event) { active_tab = 0 }) var stab = document.querySelector('#saved-tab') stab.addEventListener('shown.bs.tab', function (event) { active_tab = 1 }) var renameModal = document.getElementById('renameModal') renameModal.addEventListener('show.bs.modal', function (event) { var button = event.relatedTarget // which button lunched this modal var file = button.getAttribute('data-bs-whatever') var modalTitle = renameModal.querySelector('.col-form-label') modalTitle.textContent = file }) function rename_btn() { var modalTitle = renameModal.querySelector('.col-form-label') var modalInput = renameModal.querySelector('.form-control') var newName = modalInput.value.trim() if (newName == "") { console.log("New name is empty, ignore request") return } path = "/rename/" + modalTitle.textContent + "/" + newName let formData = new FormData() formData.append('gorilla.csrf.Token', {{.csrfToken}}) fetch(path, { method: "POST", body: formData, }) setTimeout(function () { refresh(true) }, 20); } </script> </body> </html>