From 0e66a7dd5753b96969434ee465fe5d515f8a7cb4 Mon Sep 17 00:00:00 2001
From: abay <35039013+abaykan@users.noreply.github.com>
Date: Sat, 7 Oct 2023 22:16:22 +0700
Subject: [PATCH] Update Pentest-Wording-UI.html

---
 tools/Pentest-Wording-UI.html | 166 ++++++++++++++++++++++++++++++++++
 1 file changed, 166 insertions(+)

diff --git a/tools/Pentest-Wording-UI.html b/tools/Pentest-Wording-UI.html
index ebace08..7e849da 100644
--- a/tools/Pentest-Wording-UI.html
+++ b/tools/Pentest-Wording-UI.html
@@ -5,11 +5,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Pentest Wording Database UI</title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <script src="https://cvss.js.org/cvss.js"></script>
     <style type="text/css">
         form.cvssjs label {
             color: #000000 !important;
         }
+        #searchResult {
+            margin-bottom: 2em;
+        }
+        /* Customize the autocomplete dropdown container */
+        .ui-autocomplete {
+            position: absolute;
+            border: none;
+            background-color: #212529;
+        }
+        .ui-widget.ui-widget-content {
+            border: none;
+            background-color: #212529;
+        }
+        /* Customize each autocomplete item */
+        .ui-menu-item {
+            color: #ffc107;
+            cursor: pointer;
+            border-bottom: 1px solid #ffc107;
+        }
+        /* Customize the hover effect on autocomplete items */
+        .ui-menu-item-wrapper:hover .ui-menu-item-wrapper:hover {
+            color: #ffc107;
+            border-bottom: 1px solid #ffc107;
+        }
     </style>
     <link rel="stylesheet" type="text/css" media="all" href="https://cvss.js.org/cvss.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
@@ -23,6 +49,20 @@ <h1 class="text-warning text-center fw-bolder pt-5">Pentest Wording Database UI<
           <button class="btn btn-warning border border-warning" type="button" id="searchButton">Search</button>
         </div>
         <div id="searchResult"></div>
+
+        <div class="table">
+            <table class="table table-bordered table-striped" id="dataTable">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- Table rows will be dynamically generated here -->
+                </tbody>
+            </table>
+        </div>
+
         <div class="modal" id="myModal">
           <div class="modal-dialog modal-xl">
             <div class="modal-content">
@@ -49,6 +89,68 @@ <h4 class="text-warning text-center">CVSS 3.1 Calculator</h4>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script>
         const apiUrl = "https://api.github.com/repos/zerobyte-id/Pentest-Wording-Database-Indonesia/contents/finding-details";
+        
+        // start autocomplete
+        $("#searchInput").autocomplete({
+            source: function(request, response) {
+                fetch(apiUrl)
+                    .then(response => {
+                        if (response.ok) {
+                            return response.json();
+                        } else {
+                            throw new Error(`Failed to fetch data: ${response.status} - ${response.statusText}`);
+                        }
+                    })
+                    .then(data => {
+                        var searchInput = $("#searchInput").val();
+                        var searchResult = $("#searchResult");
+                        searchResult.empty();
+                        var foundItems = [];
+
+                        var regex = new RegExp(searchInput, "i");
+
+                        $.each(data, function (index, item) {
+                            if (regex.test(item.name)) {
+                                foundItems.push(item);
+                            }
+                        });
+                        if (foundItems.length > 0) {
+                            var resultList = $('<div class="list-group list-group-flush"></div>');
+                            $.each(foundItems, function (index, item) {
+                                var link = $('<a class="list-group-item link-warning" data-bs-toggle="modal" data-bs-target="#myModal"></a>').text(item.name.replace(".yaml", ""));
+                                link.attr("href", item.download_url);
+                                link.click(function(event) {
+                                event.preventDefault();
+                                fetch(item.download_url)
+                                    .then(response => {
+                                        if (!response.ok) {
+                                            throw new Error('Fetch data failed.');
+                                        }
+                                        return response.text();
+                                    })
+                                    .then(content => {
+                                        $("#modalTitle").text(item.name.replace(".yaml", ""));
+                                        $("#reportDetails").html(content);
+                                    })
+                                    .catch(error => {
+                                        console.error('Error fetching content:', error);
+                                        alert("Error fetching content.");
+                                    });
+                                });
+                                resultList.append(link);
+                            });
+                            searchResult.append(resultList);
+                        } else {
+                            searchResult.text("No matching items found.");
+                        }
+                    })
+                    .catch(error => {
+                        console.error(error);
+                    });
+            },
+            minLength: 2,
+        });
+        // end autocomplete
         $("#searchButton").click(function () {
             fetch(apiUrl)
                 .then(response => {
@@ -120,6 +222,70 @@ <h4 class="text-warning text-center">CVSS 3.1 Calculator</h4>
         if (window.location.hash.substring(1).length > 0) {
             cvss.set(decodeURIComponent(window.location.hash.substring(1)));
         }
+
+        // start table
+        function populateTable(data) {
+            const tableBody = document.querySelector('#dataTable tbody');
+            tableBody.innerHTML = ''; // Clear existing rows
+
+            let counter = 0;
+            data.forEach(item => {
+                if (counter >= 10) {return;}
+                const row = document.createElement('tr');
+                const nameCell = document.createElement('a');
+
+                // Apply the same formatting as the 'link' element
+                nameCell.textContent = item.name.replace(".yaml", "");
+                nameCell.classList.add('list-group-item', 'link-warning');
+                nameCell.setAttribute('data-bs-toggle', 'modal');
+                nameCell.setAttribute('data-bs-target', '#myModal');
+                nameCell.setAttribute('href', "#");
+
+                // Handle the click event for the nameCell
+                nameCell.addEventListener('click', function (event) {
+                    event.preventDefault();
+                    fetch(item.download_url)
+                        .then(response => {
+                            if (!response.ok) {
+                                throw new Error('Fetch data failed.');
+                            }
+                            return response.text();
+                        })
+                        .then(content => {
+                            $("#modalTitle").text(item.name.replace(".yaml", ""));
+                            $("#reportDetails").html(content);
+                        })
+                        .catch(error => {
+                            console.error('Error fetching content:', error);
+                            alert("Error fetching content.");
+                        });
+                });
+
+                row.appendChild(nameCell);
+                tableBody.appendChild(row);
+                counter++;
+            });
+        }
+
+        function fetchDataAndPopulateTable() {
+            fetch(apiUrl)
+                .then(response => {
+                    if (response.ok) {
+                        return response.json();
+                    } else {
+                        throw new Error(`Failed to fetch data: ${response.status} - ${response.statusText}`);
+                    }
+                })
+                .then(data => {
+                    populateTable(data);
+                })
+                .catch(error => {
+                    console.error(error);
+                });
+        }
+        fetchDataAndPopulateTable();
+        // end table
+
     </script>
     <footer class="text-center pt-5"><p class="text-monospace">&copy; 2023 Still Using Copyright? LMAO!</p></footer>
   </body>