From b7f657ad2c85fef9fe6065ba99fca83992fb2239 Mon Sep 17 00:00:00 2001
From: Nanne Baars <nanne.baars@owasp.org>
Date: Sat, 2 Dec 2023 12:59:56 +0100
Subject: [PATCH] chore: fix WebWolf UI (#1686)

Fix-ups after the Bootstrap 5 upgrade for WebWolf.
---
 .../resources/webwolf/static/css/webwolf.css  |  1 -
 .../resources/webwolf/templates/files.html    | 37 +++++++++----------
 .../webwolf/templates/fragments/header.html   | 36 ++++++++----------
 .../resources/webwolf/templates/home.html     |  2 +-
 src/main/resources/webwolf/templates/jwt.html | 17 ++++-----
 .../resources/webwolf/templates/mailbox.html  |  2 +-
 .../resources/webwolf/templates/requests.html |  8 ++--
 .../webwolf/templates/webwolf-login.html      | 10 ++---
 8 files changed, 52 insertions(+), 61 deletions(-)

diff --git a/src/main/resources/webwolf/static/css/webwolf.css b/src/main/resources/webwolf/static/css/webwolf.css
index a0557cfd2..787c1a640 100644
--- a/src/main/resources/webwolf/static/css/webwolf.css
+++ b/src/main/resources/webwolf/static/css/webwolf.css
@@ -75,7 +75,6 @@ textarea {
 /*Mailbox*/
 body {
     margin: 0 0 10px;
-    font-family: 'Font Awesome 5 Free';
     font-size: medium;
 }
 .nav-tabs .glyphicon:not(.no-margin) { margin-right:10px; }
diff --git a/src/main/resources/webwolf/templates/files.html b/src/main/resources/webwolf/templates/files.html
index 6c4e70a3b..df9a4fba5 100644
--- a/src/main/resources/webwolf/templates/files.html
+++ b/src/main/resources/webwolf/templates/files.html
@@ -9,16 +9,15 @@
 
 <script type="text/javascript" th:src="@{/js/fileUpload.js}"></script>
 
-<div class="container">
-
+<div class="container mt-1">
     <div class="alert alert-info alert-dismissible fade show" role="alert">
         <div>
             <p>
-            Upload a file which you need to host as an attacker.
+                Upload a file which you need to host as an attacker.
             </p>
             <p>
-            Each file will be available under the following url:
-            <span th:text="${webwolf_url}">http://localhost:9090/WebWolf/</span>/files/{username}/{filename}.
+                Each file will be available under the following url:
+                <span th:text="${webwolf_url}">http://localhost:9090/WebWolf/</span>/files/{username}/{filename}.
             </p>
             <p>
                 You can copy and paste the location from the table below.
@@ -28,25 +27,24 @@
     </div>
 
     <div class="card">
-        <div class="card-heading"><strong>Upload a file</strong>
-            <small></small>
-        </div>
         <div class="card-body">
-
-            <!-- Standard Form -->
+            <h5 class="card-title"><strong>Upload a file</strong></h5>
             <form th:action="@{/fileupload}" method="post" enctype="multipart/form-data">
-                <div class="form-inline">
-                    <div class="form-group">
-                        <input type="file" name="file"/>
+                <fieldset>
+                    <div class="mb-3">
+                        <input type="file" class="form-control" name="file"/>
                     </div>
-                    <button type="submit" class="btn btn-md btn-primary">Upload files</button>
-                </div>
+                    <div class="mb-3">
+                        <button type="submit" class="btn btn-md btn-primary">Upload files</button>
+                    </div>
+                </fieldset>
             </form>
-            <div class="fileUploadAlert alert-success top10" role="alert">
-                <span th:text="${uploadSuccess}"></span>
-            </div>
         </div>
     </div>
+</div>
+
+
+<div class="container mt-3">
 
     <table class="table">
         <thead class="thead-inverse">
@@ -61,12 +59,11 @@
             <td th:text="${f.name}">filename</td>
             <td th:text="${f.size}">size</td>
             <td><a th:id="fileLink" th:href="@{'/' + ${f.link}}">link</a>
-                    <span class="fa fa-files-o" title="Click to copy to clipboard"></span>
+                <span class="fa fa-files-o" title="Click to copy to clipboard"></span>
             </td>
         </tr>
         </tbody>
     </table>
-
 </div>
 </body>
 </html>
diff --git a/src/main/resources/webwolf/templates/fragments/header.html b/src/main/resources/webwolf/templates/fragments/header.html
index 5210b1181..90855e922 100644
--- a/src/main/resources/webwolf/templates/fragments/header.html
+++ b/src/main/resources/webwolf/templates/fragments/header.html
@@ -13,33 +13,29 @@
 <body>
 <div th:fragment="header">
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <div class="container-fluid">
-            <div class="navbar-item">
-                <a class="navbar-brand" th:href="@{/home}">WebWolf</a>
-            </div>
+        <a class="navbar-brand" th:href="@{/home}">WebWolf</a>
 
-            <ul class="nav navbar-nav">
-                <li class="nav-item"><a class="nav-link" th:href="@{/home}">Home</a></li>
-                <li class="nav-item"><a class="nav-link" th:href="@{/files}">Files</a></li>
-                <li class="nav-item"><a class="nav-link" th:href="@{/mail}">Mailbox</a></li>
-                <li class="nav-item"><a class="nav-link" th:href="@{/requests}">Incoming requests</a></li>
-                <li class="nav-item"><a class="nav-link" th:href="@{/jwt}">JWT</a></li>
-            </ul>
-            <ul class="nav navbar-nav navbar-right">
-
-                <li class="nav-item"><a class="nav-link" href="#">
+        <ul class="nav navbar-nav">
+            <li class="nav-item"><a class="nav-link" th:href="@{/home}">Home</a></li>
+            <li class="nav-item"><a class="nav-link" th:href="@{/files}">Files</a></li>
+            <li class="nav-item"><a class="nav-link" th:href="@{/mail}">Mailbox</a></li>
+            <li class="nav-item"><a class="nav-link" th:href="@{/requests}">Incoming requests</a></li>
+            <li class="nav-item"><a class="nav-link" th:href="@{/jwt}">JWT</a></li>
+        </ul>
+        <ul class="navbar-nav position-absolute end-0 mx-3">
+            <li class="nav-item"><a class="nav-link" href="#">
                         <span sec:authorize="isAuthenticated()">
                         <span class="glyphicon glyphicon-user"></span>
                             <span th:text="${#authentication.name}"></span></span></a>
-                </li>
-                <li class="nav-item"><a class="nav-link" th:href="@{/logout}">
+            </li>
+            <li class="nav-item"><a class="nav-link" th:href="@{/logout}">
                         <span sec:authorize="isAuthenticated()">
                         Sign out</span></a>
-                </li>
-            </ul>
-        </div>
+            </li>
+        </ul>
+</div>
 
-    </nav>
+</nav>
 </div>
 
 </body>
diff --git a/src/main/resources/webwolf/templates/home.html b/src/main/resources/webwolf/templates/home.html
index 7f6ea8840..5fd228cce 100644
--- a/src/main/resources/webwolf/templates/home.html
+++ b/src/main/resources/webwolf/templates/home.html
@@ -17,7 +17,7 @@
             <h1 class="h2">WebWolf</h1>
             <br/>
             <p>
-                Some challenges requires to have a local web server running. WebWolf is for you the attacker it
+                Some challenges require to have a local web server running. WebWolf is for you the attacker it
                 helps you while solving some assignments and challenges within
                 WebGoat. An assignment might for example require you to serve a file or connect back to your own
                 environment or to receive an e-mail.
diff --git a/src/main/resources/webwolf/templates/jwt.html b/src/main/resources/webwolf/templates/jwt.html
index f8dd7c128..31e5d1b0d 100644
--- a/src/main/resources/webwolf/templates/jwt.html
+++ b/src/main/resources/webwolf/templates/jwt.html
@@ -10,7 +10,7 @@
 <script type="text/javascript" th:src="@{/js/jwt.js}"></script>
 
 
-<div class="container">
+<div class="container mt-3">
 
     <div class="alert alert-info alert-dismissible fade show">
         <div>
@@ -23,7 +23,7 @@
 
     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
         <div class="form-group">
-            <label for="token">Encoded</label>
+            <label for="token"><strong>Encoded</strong></label>
             <form id="decodeForm">
             <textarea class="form-control" style="font-size: 14pt; font-family:monospace;" id="token" name="token"
                       rows="4"
@@ -31,8 +31,8 @@
             </form>
         </div>
         <form id="encodeForm">
-            <div class="form-group">
-                <label>Decoded</label>
+            <div class="form-group mt-2">
+                <label><strong>Decoded</strong></label>
                 <div class="row">
                     <div class="col-xs-6 col-md-5">Header</div>
                     <div class="col-xs-6 col-md-7">Payload</div>
@@ -52,13 +52,12 @@
             </div>
         </form>
 
-        <br/>
-        <div class="input-group">
-            <span class="input-group-addon">Secret key</span>
-            <input type="text" placeholder="Enter your secret key" class="form-control" id="secretKey">
+        <div class="input-group input-group-sm mb-3 mt-3">
+            <span class="input-group-text" id="inputGroup-sizing-sm">Secret key</span>
+            <input type="text" class="form-control" id="secretKey" placeholder="Enter your secret key" aria-describedby="inputGroup-sizing-sm">
         </div>
 
-        <div class="input-group">
+        <div class="input-group mt-2">
             <h4 id="signatureValid">Invalid signature</h4>
         </div>
 
diff --git a/src/main/resources/webwolf/templates/mailbox.html b/src/main/resources/webwolf/templates/mailbox.html
index 55377bd75..d22a23400 100644
--- a/src/main/resources/webwolf/templates/mailbox.html
+++ b/src/main/resources/webwolf/templates/mailbox.html
@@ -13,7 +13,7 @@
 <div class="container">
 
 
-    <div class="alert alert-info alert-dismissible fade show">
+    <div class="alert alert-info alert-dismissible fade show mt-3">
         <div>
         <The mailbox of you as an attacker, all the mail send to <th:block th:text="${username}" />@webgoat.org will be send to this mailbox.
         </p>
diff --git a/src/main/resources/webwolf/templates/requests.html b/src/main/resources/webwolf/templates/requests.html
index c636c5ecb..9ec08cc3a 100644
--- a/src/main/resources/webwolf/templates/requests.html
+++ b/src/main/resources/webwolf/templates/requests.html
@@ -12,7 +12,7 @@
 <div class="container">
 
 
-    <div class="alert alert-info alert-dismissible fade show">
+    <div class="alert alert-info alert-dismissible fade show mt-3">
         <div>
         <p>
             Challenges in which you need to call your hacker machine WebWolf offers a simple httpd
@@ -29,16 +29,16 @@
 
 
     <h3>Requests</h3>
-    <div th:each="trace,iter : ${traces}" class="card-group" id="accordion" role="tablist" aria-multiselectable="true">
+    <div th:each="trace,iter : ${traces}" class="card-group mt-1" id="accordion" role="tablist" aria-multiselectable="true">
         <div class="card">
             <div class="card-heading" role="tab" th:id="'heading' + ${iter.index}">
-                <h4 class="card-title">
+                <strong class="card-title">
                     <a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion"
                        th:href="'#collapse' + ${iter.index}" aria-expanded="false" th:aria-controls="'collapse' + ${iter.index}">
                         <i class="bi bi-chevron-down"></i> <!-- FontAwesome icon -->
                         <span th:utext="${trace.date}"/> | <span th:utext="${trace.path}"/>
                     </a>
-                </h4>
+                </strong>
             </div>
             <div th:id="'collapse' + ${iter.index}" class="card-collapse collapse" role="tabcard"
                  th:aria-labelledby="'heading' + ${iter.index}">
diff --git a/src/main/resources/webwolf/templates/webwolf-login.html b/src/main/resources/webwolf/templates/webwolf-login.html
index 3c12ff6b5..7d01db2d5 100644
--- a/src/main/resources/webwolf/templates/webwolf-login.html
+++ b/src/main/resources/webwolf/templates/webwolf-login.html
@@ -11,7 +11,7 @@
 
 <div class="container">
 
-    <div class="row" style="margin-top:20px">
+    <div class="row" style="margin-top:100px">
         <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" th:style="'background:url(' + @{/images/wolf.png} + ') no-repeat right;'">
             <form th:action="@{/login}" method="post">
                 <fieldset>
@@ -28,12 +28,12 @@
                         </div>
                     </div>
 
-                    <div class="form-group">
-                        <input type="text" name="username" id="username" class="form-control input-lg"
+                    <div class="input-group mb-3">
+                        <input type="text" name="username" id="username" class="form-control"
                                placeholder="Username WebGoat" required="true" autofocus="true"/>
                     </div>
-                    <div class="form-group">
-                        <input type="password" name="password" id="password" class="form-control input-lg"
+                    <div class="input-group mb-3">
+                        <input type="password" name="password" id="password" class="form-control"
                                placeholder="Password WebGoat" required="true"/>
                     </div>