Merge pull request #450 from OWASP/datatable

Datatable implementation (#415)
OWASP · Nov 24, 2022 · b6c28ce · b6c28ce
2 parents 0554583 + 14b7681
commit b6c28ce
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 11 deletions.
diff --git a/pom.xml b/pom.xml
@@ -31,12 +31,12 @@
         <name>The Open Web Application Security Project (OWASP)</name>
         <url>https://owasp.org/</url>
     </organization>
-<!--    <distributionManagement>-->
-<!--        <snapshotRepository>-->
-<!--            <id>ossrh</id>-->
-<!--            <url>https://s01.oss.sonatype.org/content/repositories/snapshots</url>-->
-<!--        </snapshotRepository>-->
-<!--    </distributionManagement>-->
+    <!--    <distributionManagement>-->
+    <!--        <snapshotRepository>-->
+    <!--            <id>ossrh</id>-->
+    <!--            <url>https://s01.oss.sonatype.org/content/repositories/snapshots</url>-->
+    <!--        </snapshotRepository>-->
+    <!--    </distributionManagement>-->
 
     <properties>
         <java.version>19</java.version>
@@ -49,6 +49,8 @@
         <bootstrap.version>5.2.2</bootstrap.version>
         <github.button.version>2.14.1</github.button.version>
         <gcp.sdk.version>3.4.0</gcp.sdk.version>
+        <datatables.version>1.12.1</datatables.version>
+        <jquery.version>3.6.1</jquery.version>
         <thymeleaf-spring5.version>3.0.15.RELEASE</thymeleaf-spring5.version>
         <thymeleaf.version>3.0.15.RELEASE</thymeleaf.version>
         <thymeleaf.layout>3.1.0</thymeleaf.layout>
@@ -156,6 +158,16 @@
             <artifactId>github-buttons</artifactId>
             <version>${github.button.version}</version>
         </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>datatables</artifactId>
+            <version>${datatables.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>jquery</artifactId>
+            <version>${jquery.version}</version>
+        </dependency>
         <!--        <dependency>-->
         <!--            <groupId>org.springframework.boot</groupId>-->
         <!--            <artifactId>spring-boot-devtools</artifactId>-->

diff --git a/src/main/resources/static/css/dark.css b/src/main/resources/static/css/dark.css
@@ -82,3 +82,13 @@
     background-color: var(--bs-indigo);
     border-color: var(--bs-indigo);
 }
+
+.dark-mode input {
+    background-color: var(--bs-gray-600);
+    color: var(--bs-body-color);
+}
+
+.dark-mode select {
+    background-color: var(--bs-gray-600);
+    color: var(--bs-body-color);
+}
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -6,8 +6,10 @@
     <title>OWASP WrongSecrets</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/5.2.2/css/bootstrap.min.css} " />
+    <link th:rel="stylesheet" th:href="@{/webjars/datatables/1.12.1/css/dataTables.bootstrap5.min.css} " />
     <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
     <link rel="stylesheet" type="text/css" th:href="@{/css/dark.css}" />
+
 </head>
 
 <body>
@@ -18,6 +20,9 @@
 
     <script th:src="@{/webjars/bootstrap/5.2.2/js/bootstrap.bundle.min.js}"></script>
     <script th:src="@{/webjars/github-buttons/2.14.1/dist/buttons.js}"></script>
+    <script th:src="@{/webjars/jquery/3.6.1/jquery.js}"></script>
+    <script th:src="@{/webjars/datatables/1.12.1/js/jquery.dataTables.min.js}"></script>
+    <script th:src="@{/webjars/datatables/1.12.1/js/dataTables.bootstrap5.min.js}"></script>
     <script th:if="${allCompleted} eq 'party'">
         window.addEventListener("load", function () {
             new bootstrap.Modal(document.getElementById('finishedModal'), {}).toggle()
@@ -37,4 +42,18 @@
     </script>
 </body>
 
+<script>
+
+    $.extend(true, $.fn.dataTable.defaults, {
+        searching: true,
+        ordering: true,
+    });
+    $(document).ready(function () {
+        $('#challenge_overview').DataTable({
+            lengthMenu: [ [20, 30, 50, -1], [20, 30, 50, "All"] ]
+        });
+    });
+</script>
+
+
 </html>
diff --git a/src/main/resources/templates/welcome.html b/src/main/resources/templates/welcome.html
@@ -17,7 +17,7 @@
     <div class="container-fluid text-sm p-2 p-lg-3">
         <div class="row">
             <div class="col-12 col-lg-7">
-                <table class="table table-responsive">
+                <table class="table table-responsive" id="challenge_overview">
                     <thead>
                     <tr>
                         <th scope="col" class="d-none d-xl-table-cell">#</th>
@@ -38,24 +38,25 @@
                             th:text="${challenge.name}"
                             th:remove="tag"></span></a></td>
                         <td th:text="${challenge.tech}"></td>
+                            <td td:if="${{challenge.requiredEnv == 'USEDFORDEDUPLICATIONDONOTREMOVE'}}" class="d-sm-none"></td>
                         <td class="d-none d-md-table-cell">
                             <th:span th:each="i: ${#numbers.sequence(1, challenge.difficulty)}"><span>★ </span></th:span>
                             <th:span th:if="${challenge.difficulty<5}"
                                      th:each="i: ${#numbers.sequence(challenge.difficulty+1, 5)}"><span>☆</span>
                             </th:span>
                         </td>
                         <th:block th:if="${challenge.requiredEnv} == 'DOCKER'">
-                            <td>Docker</td>
+                            <td class="d-none d-sm-table-cell" >Docker</td>
                         </th:block>
                         <th:block th:if="${challenge.requiredEnv} == 'K8S'">
-                            <td>K8s or Minikube</td>
+                            <td class="d-none d-sm-table-cell" >K8s or Minikube</td>
                         </th:block>
                         <th:block th:if="${challenge.requiredEnv} == 'VAULT'">
-                            <td>K8s or Minikube with Vault</td>
+                            <td class="d-none d-sm-table-cell" >K8s or Minikube with Vault</td>
                         </th:block>
                         <th:block
                             th:if="${challenge.requiredEnv} == 'AWS' or ${challenge.requiredEnv} == 'GCP' or ${challenge.requiredEnv} == 'AZURE'">
-                            <td>AWS, GCP, Azure</td>
+                            <td class="d-none d-sm-table-cell" >AWS, GCP, Azure</td>
                         </th:block>
 
                     </tr>