Merge pull request #155 from AlanFoster/update-searchbar-to-work-in-all-tabs

Update searchbar to work in all tabs - thanks to Alan Foster for the big brain!

index.html

@@ -202,44 +202,44 @@
             </li> -->
         </ul>
 
-        <div class="tab-content">
-            <!-- Reverse Shell Tab-->
-            <div class="tab-pane active" id="reverse" role="tabpanel" aria-labelledby="reverse-tab">
-                <div class="card shadow mb-5">
-                    <div class="card-body">
+        <div class="card shadow mb-5">
+            <div class="card-body">
+                <!-- Top configuration bar -->
+                <div class="d-md-flex">
+                    <!---Filters-->
+                    <label for="os-options" class="col-auto col-form-label"
+                        style="font-size:1rem">OS</label>
+                    <div class="col-auto">
+                        <select id="os-options" class="custom-select">
+                            <option class="os-item" value="all">All</option>
+                            <option class="os-item" value="linux">Linux</option>
+                            <option class="os-item" value="windows">Windows</option>
+                            <option class="os-item" value="mac">Mac</option>
+                        </select>
+                    </div>
 
-                        <!-- Show all advanced switch -->
-                        <div class="custom-control custom-switch float-right">
-                            <input id="revshell-advanced-switch" type="checkbox" class="custom-control-input" checked>
-                            <label for="revshell-advanced-switch" class="custom-control-label small pr-2 pb-1"
-                                style="padding-top:2px" data-toggle="tooltip" title="Display all advanced settings">
-                                Show Advanced
-                            </label>
-                            <img src="assets/floppy-disk-solid.svg" class="download-svg" data-toggle="tooltip" title="Download Payload">
-                        </div>
-                        <!-- /Show all advanced switch -->
-                        <!-- Search Box -->
-                        <div class="row">
-                            <div class="col-md-6">
-                                <input type="text" id="searchBox" placeholder="Search..." class="form-control mb-3">
-                            </div>
-                        </div>
-						<!-- /Search Box -->
-                        <!---Filter OS-->
-                        <div class="row">
-                            <label for="os-options" class="col-auto col-form-label float-left"
-                                style="font-size:1rem">OS</label>
-                            <div class="col-auto">
-                                <select id="os-options" class="custom-select">
-                                    <option class="os-item" value="all">All</option>
-                                    <option class="os-item" value="linux">Linux</option>
-                                    <option class="os-item" value="windows">Windows</option>
-                                    <option class="os-item" value="mac">Mac</option>
-                                </select>
-                            </div>
-                        </div>
-                        <!---/Filter OS-->
+                    <label for="os-options" class="col-auto col-form-label"
+                        style="font-size:1rem">Name</label>
+                    <div class="col-auto flex-grow-1">
+                        <input type="text" id="searchBox" placeholder="Search..." class="form-control form-control-md text-left">
+                    </div>
+                    <!---/Filters-->
 
+                    <!-- Show all advanced switch -->
+                    <div class="custom-control custom-switch text-right d-flex justify-content-center align-self-center">
+                        <input id="revshell-advanced-switch" type="checkbox" class="custom-control-input" checked>
+                        <label for="revshell-advanced-switch" class="custom-control-label small pr-2 pb-1"
+                            style="padding-top:2px" data-toggle="tooltip" title="Display all advanced settings">
+                            Show Advanced
+                        </label>
+                        <img src="assets/floppy-disk-solid.svg" class="download-svg" data-toggle="tooltip" title="Download Payload">
+                    </div>
+                    <!-- /Show all advanced switch -->
+                </div>
+
+                <div class="tab-content">
+                    <!-- Reverse Shell Tab-->
+                    <div class="tab-pane active" id="reverse" role="tabpanel" aria-labelledby="reverse-tab">
                         <div class="card-text mt-4">
                             <div class="row">
 
@@ -340,18 +340,11 @@
 
                             </div>
                         </div>
-                        <!-- /card-text -->
-
                     </div>
-                </div>
-            </div>
-            <!-- /Reverse Shell Tab -->
+                    <!-- /Reverse Shell Tab -->
 
-            <!-- Bind Shell Tab -->
-            <div class="tab-pane" id="bind" role="tabpanel" aria-labelledby="bind-tab">
-                <div class="card shadow mb-5">
-                    <div class="card-body">
-                        <img src="assets/floppy-disk-solid.svg" class="download-svg float-right" data-toggle="tooltip" title="Download Payload">
+                    <!-- Bind Shell Tab -->
+                    <div class="tab-pane" id="bind" role="tabpanel" aria-labelledby="bind-tab">
                         <div class="card-text mt-4">
                             <div class="row">
                                 <!-- Left column: Bind selection -->
@@ -396,15 +389,10 @@
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <!-- /Bind Shell Tab -->
+                    <!-- /Bind Shell Tab -->
 
-            <!-- MSFVenom Tab -->
-            <div class="tab-pane" id="msfvenom" role="tabpanel" aria-labelledby="msfvenom-tab">
-                <div class="card shadow mb-5">
-                    <div class="card-body">
-                        <img src="assets/floppy-disk-solid.svg" class="download-svg float-right" data-toggle="tooltip" title="Download Payload">
+                    <!-- MSFVenom Tab -->
+                    <div class="tab-pane" id="msfvenom" role="tabpanel" aria-labelledby="msfvenom-tab">
                         <div class="card-text mt-4">
                             <div class="row">
                                     <!-- Left column: MSFVenom selection -->
@@ -457,15 +445,10 @@
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <!-- /MSFVenom Tab -->
+                    <!-- /MSFVenom Tab -->
 
-            <!-- HoaxShell Tab -->
-            <div class="tab-pane" id="hoaxshell" role="tabpanel" aria-labelledby="hoaxshell-tab">
-                <div class="card shadow mb-5">
-                    <div class="card-body">
-                        <img src="assets/floppy-disk-solid.svg" class="download-svg float-right" data-toggle="tooltip" title="Download Payload">
+                    <!-- HoaxShell Tab -->
+                    <div class="tab-pane" id="hoaxshell" role="tabpanel" aria-labelledby="hoaxshell-tab">
                         <div class="card-text mt-4">
                             <div class="row">
                                     <!-- Left column: HoaxShell selection -->
@@ -509,10 +492,10 @@
                             </div>
                         </div>
                     </div>
+                    <!-- /hoaxshell Tab -->
                 </div>
             </div>
-            <!-- /hoaxshell Tab -->
-    </div>
+        </div>
 
     <!-- RSG data -->
     <script src="js/data.js"></script>

js/script.js

@@ -5,14 +5,16 @@ const portInput = document.querySelector("#port");
 const listenerSelect = document.querySelector("#listener-selection");
 const shellSelect = document.querySelector("#shell");
 // const autoCopySwitch = document.querySelector("#auto-copy-switch");
+const operatingSystemSelect = document.querySelector("#os-options");
 const encodingSelect = document.querySelector('#encoding');
+const searchBox = document.querySelector('#searchBox');
 const listenerCommand = document.querySelector("#listener-command");
 const reverseShellCommand = document.querySelector("#reverse-shell-command");
 const bindShellCommand = document.querySelector("#bind-shell-command");
 const msfVenomCommand = document.querySelector("#msfvenom-command");
 const hoaxShellCommand = document.querySelector("#hoaxshell-command");
 
-const FilterType = {
+const FilterOperatingSystemType = {
     'All': 'all',
     'Windows': 'windows',
     'Linux': 'linux',
@@ -20,7 +22,6 @@ const FilterType = {
 };
 
 const hoaxshell_listener_types = {
-	
 	"Windows CMD cURL" : "cmd-curl",
 	"PowerShell IEX" : "ps-iex",
 	"PowerShell IEX Constr Lang Mode" : "ps-iex-cm",
@@ -30,14 +31,13 @@ const hoaxshell_listener_types = {
 	"PowerShell IEX https" : "ps-iex -c /your/cert.pem -k /your/key.pem",
 	"PowerShell IEX Constr Lang Mode https" : "ps-iex-cm -c /your/cert.pem -k /your/key.pem",
 	"PowerShell Outfile https" : "ps-outfile -c /your/cert.pem -k /your/key.pem",
-	"PowerShell Outfile Constr Lang Mode https" : "ps-outfile-cm -c /your/cert.pem -k /your/key.pem"	
-	
+	"PowerShell Outfile Constr Lang Mode https" : "ps-outfile-cm -c /your/cert.pem -k /your/key.pem"
 };
 
-document.querySelector("#os-options").addEventListener("change", (event) => {
+operatingSystemSelect.addEventListener("change", (event) => {
     const selectedOS = event.target.value;
     rsg.setState({
-        filter: selectedOS,
+        filterOperatingSystem: selectedOS,
     });
 });
 
@@ -87,21 +87,16 @@ for (const button of rawLinkButtons) {
     });
 }
 
-const filterCommandData = function (data, { commandType, filter }) {
+const filterCommandData = function (data, { commandType, filterOperatingSystem = FilterOperatingSystemType.All, filterText = '' }) {
     return data.filter(item => {
+
         if (!item.meta.includes(commandType)) {
             return false;
         }
 
-        if (!filter) {
-            return true;
-        }
-
-        if (filter === FilterType.All) {
-            return true;
-        }
-
-        return item.meta.includes(filter);
+        var hasOperatingSystemMatch = (filterOperatingSystem === FilterOperatingSystemType.All) || item.meta.includes(filterOperatingSystem);
+        var hasTextMatch = item.name.toLowerCase().indexOf(filterText.toLowerCase()) >= 0;
+        return hasOperatingSystemMatch && hasTextMatch;
     });
 }
 
@@ -129,7 +124,8 @@ const rsg = {
         [CommandType.HoaxShell]: filterCommandData(rsgData.reverseShellCommands, { commandType: CommandType.HoaxShell })[0].name,
     },
     commandType: CommandType.ReverseShell,
-    filter: FilterType.All,
+    filterOperatingSystem: query.get('filterOperatingSystem') || localStorage.getItem('filterOperatingSystem') || FilterOperatingSystemType.All,
+    filterText: query.get('filterText') || localStorage.getItem('filterText') || '',
 
     uiElements: {
         [CommandType.ReverseShell]: {
@@ -347,6 +343,8 @@ const rsg = {
 
         ipInput.value = rsg.ip;
         portInput.value = rsg.port;
+        operatingSystemSelect.value = rsg.filterOperatingSystem;
+        searchBox.value = rsg.filterText;
     },
 
     updateTabList: () => {
@@ -354,12 +352,20 @@ const rsg = {
         const filteredItems = filterCommandData(
             data,
             {
-                filter: rsg.filter,
+                filterOperatingSystem:  rsg.filterOperatingSystem,
+                filterText: rsg.filterText,
                 commandType: rsg.commandType
             }
         );
 
-        const documentFragment = document.createDocumentFragment()
+        const documentFragment = document.createDocumentFragment();
+        if (filteredItems.length === 0) {
+            const emptyMessage = document.createElement("button");
+            emptyMessage.innerText = "No results found";
+            emptyMessage.classList.add("list-group-item", "list-group-item-action", "disabled");
+
+            documentFragment.appendChild(emptyMessage);
+        }
         filteredItems.forEach((item, index) => {
             const {
                 name,
@@ -471,6 +477,12 @@ encodingSelect.addEventListener("change", (e) => {
     })
 });
 
+searchBox.addEventListener("input", (e) => {
+    rsg.setState({
+        filterText: e.target.value
+    })
+});
+
 document.querySelector('#inc-port').addEventListener('click', () => {
     rsg.setState({
         port: rsg.getPort() + 1
@@ -537,67 +549,3 @@ $(function () {
 // TODO: add a random fifo for netcat mkfifo
 //let randomId = Math.random().toString(36).substring(2, 4);
 
-// Global variable to keep track of the last search term
-// This variable will hold the last search term
-// This function will apply the search filter to the list
-// Utility function to save the search term
-function saveSearchTerm(term) {
-    localStorage.setItem('searchTerm', term);
-}
-
-// Utility function to get the saved search term
-function getSavedSearchTerm() {
-    return localStorage.getItem('searchTerm');
-}
-
-// Function to apply the search filter
-function applySearchFilter(term) {
-    var listItems = document.querySelectorAll('#reverse-shell-selection .list-group-item');
-    var count = 0;
-    
-    listItems.forEach(function(item) {
-        var text = item.textContent.toLowerCase();
-        var match = text.indexOf(term) !== -1;
-        item.style.display = match ? '' : 'none';
-        if (match) count++;
-    });
-
-    // Show or hide the 'no results' message
-    var noResultsEl = document.getElementById('noResults');
-    if (noResultsEl) {
-        noResultsEl.style.display = count === 0 ? 'block' : 'none';
-    }
-
-    // Reattach event listeners to the filtered items
-    attachClickListenersToItems();
-}
-
-// Attach click event listeners to search result items
-function attachClickListenersToItems() {
-    document.querySelectorAll('#reverse-shell-selection .list-group-item').forEach(function(item) {
-        item.addEventListener('click', function(event) {
-            event.preventDefault();
-            event.stopPropagation(); 
-
-            var searchTerm = getSavedSearchTerm();
-            if (searchTerm) {
-                applySearchFilter(searchTerm);
-            }
-        });
-    });
-}
-
-// Set up the initial event listener for the search box
-document.addEventListener('DOMContentLoaded', function() {
-    var searchBox = document.getElementById('searchBox');
-    if (searchBox) {
-        searchBox.value = getSavedSearchTerm() || ''; 
-        applySearchFilter(searchBox.value.toLowerCase()); 
-
-        searchBox.addEventListener('keyup', function() {
-            var searchTerm = this.value.toLowerCase();
-            saveSearchTerm(searchTerm); 
-            applySearchFilter(searchTerm); 
-        });
-    }
-});