html/WebUI.html


<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">

  <!-- CSS sample thanks to @im.nix (Discord) -->
  <style>
    .gg-rename {
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      width: 20px;
      height: 16px;
      transform: scale(var(--ggs,1));
      background:
      linear-gradient(
      to left,currentColor 22px,
      transparent 0)
      no-repeat 6px center/2px 22px
    }

    .gg-rename::after,
      .gg-rename::before {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 6px;
      height: 12px;
      border: 2px solid;
      top: 2px
    }

    .gg-rename::before {
      border-right: 0;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px
    }

    .gg-rename::after {
      width: 10px;
      border-left: 0;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      right: 0
    } 
    .gg-folder {
      cursor: pointer;
      transform: scale(var(--ggs,1))
    }
    .gg-folder,
    .gg-folder::after {
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        width: 22px;
        height: 16px;
        border: 2px solid;
        border-radius: 3px
    }
    .gg-folder::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 4px;
        border-bottom: 0;
        border-top-left-radius: 2px;
        border-top-right-radius: 4px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        top: -5px
    }
    .gg-trash {
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      transform: scale(var(--ggs,1));
      width: 10px;
      height: 12px;
      border: 2px solid transparent;
      box-shadow:
          0 0 0 2px,
          inset -2px 0 0,
          inset 2px 0 0;
      border-bottom-left-radius: 1px;
      border-bottom-right-radius: 1px;
      margin-top: 4px;
      margin-bottom: 2px;
    cursor: pointer;
    }
    .gg-trash::after,
    .gg-trash::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute
    }
    .gg-trash::after {
        background: currentColor;
        border-radius: 3px;
        width: 16px;
        height: 2px;
        top: -4px;
        left: -5px
    }
    .gg-trash::before {
        width: 10px;
        height: 4px;
        border: 2px solid;
        border-bottom: transparent;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        top: -7px;
        left: -2px
    }
    .gg-arrow-down-r {
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid;
        transform: scale(var(--ggs,1));
        cursor: pointer;
        border-radius: 4px
    }
    .gg-arrow-down-r::after,
    .gg-arrow-down-r::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        bottom: 4px
    }
    .gg-arrow-down-r::after {
        width: 6px;
        height: 6px;
        border-bottom: 2px solid;
        border-left: 2px solid;
        transform: rotate(-45deg);
        left: 6px
    }
    .gg-arrow-down-r::before {
        width: 2px;
        height: 10px;
        left: 8px;
        background: currentColor
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 5px;
      color: #ff3ec8;
      background-color: #202124;
    }

    .container {
      max-width: 800px;
      margin: 5px auto;
      padding: 0 5px;
    }

    h3 {
      margin: 0;
      padding: 10px 0;
      border-bottom: 1px solid #7b007b;
    }
 
    table {
      width: 100%;
      border-collapse: collapse;
      border-bottom: 1px solid #7b007b;
    }
 
    th, td {
      padding: 5px;
      border-bottom: 1px solid #7b007b;
    }
 
    th {
      text-align: left;
    }
 
    a {
      color: #ffbee0;
      text-decoration: none;
    }
 
    a:hover {
      text-decoration: underline;
    }
 
    button {
      background-color: #303134;
      color: #ff3ec8;
      border: 2px solid;
      padding: 4px 8px;
      border-radius: 4px;
      border-color: #ef007b;
      cursor: pointer;
      margin: 5px;
    }
 
    button:hover {
      background-color: #ffabd7;
    }
 
    #detailsheader, #updetailsheader {
      display: flex;
      justify-content: space-between;
    }
 
    @media (max-width: 768px) {
      body {
        font-size: 14px;
      }
 
      table {
        font-size: 12px;
      }
 
      th, td {
        padding: 5px;
      }
 
      button {
        font-size: 12px;
        padding: 6px 12px;
      }
    }
    th:first-child, td:first-child {
      width: 65%;
    }
    th:last-child, td:last-child {
      width: 100px;
      text-align: center;
    }
  .float-element {
    position: absolute;
    top: 10px; /* Ajuste conforme necessário */
    right: 10px; /* Ajuste conforme necessário */
    font-size: 16px;
  }

  .drop-area {
    border: 2px dashed #ad007b;
    padding: 100px;
    margin-top: 50px;
    display: none;
  }

  .highlight {
    background-color: #303134;
    color: #ad007c65;
  }
  </style>
</head>
<body>
  <div class="container">
    <div class="float-element"><a onclick="logoutButton()" href='javascript:void(0);'>[X]</a></div>
    <h1 align="center">BRUCE Firmware</h1>
    <p>Firmware for offensive pranks and pentest studies and analysis. For educational purposes only. Don't use in environments where you are not allowed. All responsibilities for irresponsible usage of this firmware rest on your fin, sharky. Sincerely, Bruce.</p>
    <p>Firmware version: %FIRMWARE%</p>
    <p>SD Free Storage: <span id="freeSD">%FREESD%</span> | Used: <span id="usedSD">%USEDSD%</span> | Total: <span id="totalSD">%TOTALSD%</span></p>
    <p>LittleFS Free Storage: <span id="freeSD">%FREELittleFS%</span> | Used: <span id="usedSD">%USEDLittleFS%</span> | Total: <span id="totalSD">%TOTALLittleFS%</span></p>
    <p>
    <form id="save" enctype="multipart/form-data" method="post">
      <input type="hidden" id="actualFolder" name="actualFolder" value="/">
      <input type="hidden" id="actualFS" name="actualFS" value="SD">
    </form>
    <button onclick="rebootButton()">Reboot</button>
    <button onclick="WifiConfig()">Usr/Pass</button>
    <button onclick="listFilesButton('/', 'SD', true)">SD Files</button>
    <button onclick="listFilesButton('/', 'LittleFS', true)">LittleFS</button>

    </p>
    <p id="detailsheader"></p>
    <p id="details"></p>
    <p id="updetailsheader"></p>
    <p id="updetails"></p>
    <div id="drop-area" class="drop-area" ondrop="drop(event, document.getElementById('actualFolder').value)">
        <p style="text-align: center;">Drag and drop files here</p>
    </div>   
    <p id="status"></p>
  </div>

<script>

var buttonsInitialized = false;

function WifiConfig() {
  let wifiSsid = prompt("Please enter the Username of your network", "admin");
  let wifiPwd = prompt("Please enter the Password of your network", "M%L4unch3r");
  if (wifiSsid == null || wifiSsid == "" || wifiPwd == null) {
    window.alert("Invalid User or Password");
  } else {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET", "/wifi?usr=" + wifiSsid + "&pwd=" + wifiPwd, false);
    xmlhttp.send();
    document.getElementById("status").innerHTML = xmlhttp.responseText;
  }
}

function logoutButton() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/logout", true);
  xhr.send();
  setTimeout(function(){ window.open("/logged-out","_self"); }, 500);
}

function rebootButton() {
  if(confirm("Confirm Restart?!")) {
    xmlhttp=new XMLHttpRequest();
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/reboot", true);
    xhr.send();
    }
}

function listFilesButton(folders, fs = 'SD', userRequest = false) {
  xmlhttp=new XMLHttpRequest();
  document.getElementById("actualFolder").value = "";
  document.getElementById("actualFolder").value = folders;
  document.getElementById("actualFS").value = fs;

  xmlhttp.onload = function() {
      if (xmlhttp.status === 200) {
          document.getElementById("details").innerHTML = xmlhttp.responseText;
      } else {
          console.error('Erro na requisição: ' + xmlhttp.status);
      }
  };
  xmlhttp.onerror = function() {
      console.error('Erro na rede ou falha na requisição.');
  };

  xmlhttp.open("GET", "/listfiles?fs=" + fs + "&folder=" + folders, true);
  xmlhttp.send();  

  //must first select sd card or littlefs to get access to upload and create
  if (!buttonsInitialized) {
    if (userRequest) {
      if (fs == 'SD') {
        document.getElementById("detailsheader").innerHTML = "<h3>SD Files<h3>";
      } else if (fs == 'LittleFS') {
        document.getElementById("detailsheader").innerHTML = "<h3>LittleFS Files<h3>";
      }
      
      document.getElementById("updetailsheader").innerHTML = "<h3>Folder Actions:  <button onclick=\"showUploadButtonFancy('" + folders + "')\">Upload File</button><button onclick=\"showCreateFolder('" + folders + "')\">Create Folder</button><h3>"
      document.getElementById("updetails").innerHTML = "";
      _("drop-area").style.display = "block";
      buttonsInitialized = true;
      document.getElementById("status").innerHTML = "";
    }
  } else {
    if (userRequest) {
        if (fs == 'SD') {
        document.getElementById("detailsheader").innerHTML = "<h3>SD Files<h3>";
      } else if (fs == 'LittleFS') {
        document.getElementById("detailsheader").innerHTML = "<h3>LittleFS Files<h3>";
      }
    }
  }
  
  
}

function renameFile(filePath, oldName) {
  var actualFolder = document.getElementById("actualFolder").value;
  var fs = document.getElementById("actualFS").value;
  let fileName = prompt("Enter the new name: ", oldName);
  if (fileName == null || fileName == "") {
    window.alert("Invalid Name");
  } else {
    const ajax5 = new XMLHttpRequest();
    const formdata5 = new FormData();
    formdata5.append("fs", fs);
    formdata5.append("filePath", filePath);
    formdata5.append("fileName", fileName);
    ajax5.open("POST", "/rename", false);
    ajax5.send(formdata5);
    document.getElementById("status").innerHTML = ajax5.responseText;
    
    var fs = document.getElementById("actualFS").value;
    listFilesButton(actualFolder, fs, true);
  }
}

function downloadDeleteButton(filename, action) {
  var fs = document.getElementById("actualFS").value;
  var urltocall = "/file?name=" + filename + "&action=" + action + "&fs=" + fs;
  var actualFolder = document.getElementById("actualFolder").value;
  var option;
  if (action == "delete") {
    option = confirm("Do you really want to DELETE the file: " + filename + " ?\n\nThis action can't be undone!");
  }

  xmlhttp=new XMLHttpRequest();
  if (option == true || action=="create") {
    xmlhttp.open("GET", urltocall, false);
    xmlhttp.send();
    document.getElementById("status").innerHTML = xmlhttp.responseText;
    var fs = document.getElementById("actualFS").value;
    listFilesButton(actualFolder, fs,true);
  }
  if (action == "download") {
    document.getElementById("status").innerHTML = "";
    window.open(urltocall,"_blank");
  }
}

function showCreateFolder(folders) {
  var fs = document.getElementById("actualFS").value;
  var uploadform = "";
  //document.getElementById("updetailsheader").innerHTML = "<h3>Create new Folder<h3>"
  document.getElementById("status").innerHTML = "";
  uploadform =
  "<p>Creating folder at: <b>" + folders + "</b>"+
  "<form id=\"create_form\" enctype=\"multipart/form-data\" method=\"post\">" +
  "<input type=\"hidden\" id=\"folder\" name=\"folder\" value=\"" + folders + "\">" + 
  "<input type=\"text\" name=\"foldername\" id=\"foldername\">" +
  "<button onclick=\"CreateFolder()\">Create Folder</button>" +
  "</form></p>";
  document.getElementById("updetails").innerHTML = uploadform;
}

function CreateFolder() {
  var folderName = ""; 
  folderName = document.getElementById("folder").value + "/" + document.getElementById("foldername").value;
  downloadDeleteButton(folderName, 'create');
}

function showUploadButtonFancy(folders) {
  //document.getElementById("updetailsheader").innerHTML = "<h3>Upload File<h3>"
  document.getElementById("status").innerHTML = "";
  var uploadform =
  "<p>Send file to " + folders + "</p>"+
  "<form id=\"upload_form\" enctype=\"multipart/form-data\" method=\"post\">" +
  "<input type=\"hidden\" id=\"folder\" name=\"folder\" value=\"" + folders + "\">" + 
  "<input type=\"file\" name=\"file1\" id=\"file1\" onchange=\"uploadFile('" + folders + "', 'SD')\"><br>" +
  "<progress id=\"progressBar\" value=\"0\" max=\"100\" style=\"width:100%;\"></progress>" +
  "<h3 id=\"status\"></h3>" +
  "<p id=\"loaded_n_total\"></p>" +
  "</form>";
  document.getElementById("updetails").innerHTML = uploadform;
}

function _(el) {
  return document.getElementById(el);
}


function uploadFile(folder) {
  var fs = document.getElementById("actualFS").value;
  var folder = _("folder").value;
  var files = _("file1").files; // Extract files from input element

  var formdata = new FormData();
  for (var i = 0; i < files.length; i++) {
    formdata.append("files[]", files[i]); // Append each file to form data
  }
  formdata.append("folder", folder);

  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "/upload" + fs);
  ajax.send(formdata);
}

// Drag and drop event listeners
window.addEventListener("load", function() {
  var dropArea = _("drop-area");
  dropArea.addEventListener("dragenter", dragEnter, false);
  dropArea.addEventListener("dragover", dragOver, false);
  dropArea.addEventListener("dragleave", dragLeave, false);
  dropArea.addEventListener("drop", drop, false);
});

function dragEnter(event) {
  event.stopPropagation();
  event.preventDefault();
  this.classList.add("highlight");
}

function dragOver(event) {
  event.stopPropagation();
  event.preventDefault();
  this.classList.add("highlight");
}

function dragLeave(event) {
  event.stopPropagation();
  event.preventDefault();
  this.classList.remove("highlight");
}
var fileQueue = [];
var currentFileIndex = 0;

  function drop(event, folder) {
    event.stopPropagation();
    event.preventDefault();
    _("drop-area").classList.remove("highlight");

    fileQueue = event.dataTransfer.files;
    currentFileIndex = 0;
    var fs = document.getElementById("actualFS").value;

    var uploadform =
    "<p>Send file to " + folder + "</p>"+
    "<form id=\"upload_form\" enctype=\"multipart/form-data\" method=\"post\">" +
    "<progress id=\"progressBar\" value=\"0\" max=\"100\" style=\"width:100%;\"></progress>" +
    "<h3 id=\"status\"></h3>" +
    "<p id=\"loaded_n_total\"></p>" +
    "</form>";
    document.getElementById("updetails").innerHTML = uploadform;    

    if (fileQueue.length > 0) {
      uploadNextFile(folder, fs);
    }
  }

  function uploadNextFile(folder, fs) {
    if (currentFileIndex >= fileQueue.length) {
      console.log("Todos os arquivos foram enviados.");
	    listFilesButton(folder, fs, true);
      return;
    }

    var file = fileQueue[currentFileIndex];
    var formdata = new FormData();
    formdata.append("file", file);
    formdata.append("folder", folder);

    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "/upload" + fs);
    ajax.send(formdata);
  }

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes";
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  if (percent >= 100) {
    _("status").innerHTML = "Please wait, writing file to filesystem";
  }
}
function completeHandler(event) {
  _("progressBar").value = 0;
  if (fileQueue.length > 0) {
		currentFileIndex++;
    if (currentFileIndex <= fileQueue.length) {
		  document.getElementById("status").innerHTML = "Uploaded " + currentFileIndex + " of " + fileQueue.length + " files.";
    }
		uploadNextFile(document.getElementById("actualFolder").value, document.getElementById("actualFS").value);
	}
	else {
		_("status").innerHTML = "Upload Complete";
		var actualFolder = document.getElementById("actualFolder").value
		document.getElementById("status").innerHTML = "File Uploaded";
		var fs = document.getElementById("actualFS").value;
		listFilesButton(actualFolder, fs, true);
		}
}
function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
    if (fileQueue.length > 0) {
		currentFileIndex++;
		document.getElementById("status").innerHTML = "Uploaded " + i + " of " + files.length + " files, please wait.";
		uploadNextFile(document.getElementById("actualFolder").value, document.getElementById("actualFS").value);
	}
}
function abortHandler(event) {
  _("status").innerHTML = "inUpload Aborted";
    if (fileQueue.length > 0) {
		currentFileIndex++;
		document.getElementById("status").innerHTML = "Uploaded " + i + " of " + files.length + " files, please wait.";
		uploadNextFile(document.getElementById("actualFolder").value, document.getElementById("actualFS").value);
	}
}

window.addEventListener("load", function() {
  var actualFolder = document.getElementById("actualFolder").value
  var fs = document.getElementById("actualFS").value;
  document.getElementById("status").innerHTML = "Please select the storage you want to manage (SD or LittleFS).";
  listFilesButton(actualFolder, fs, true);
});

</script>
</body>
</html>