From 6bee0f3fa6cd33e9af97a665e5d597b556e8dcb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Zubcevic?= <rene@zubcevic.com>
Date: Fri, 27 Nov 2020 13:58:58 +0100
Subject: [PATCH] layout of page improved and ordered ranking (#903)

---
 .../org/owasp/webgoat/users/Scoreboard.java   | 10 ++++++
 .../src/main/resources/static/css/main.css    | 11 ++-----
 .../js/goatApp/templates/scoreboard.html      |  4 +--
 .../main/resources/templates/scoreboard.html  | 32 +++++++++++++------
 4 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/webgoat-container/src/main/java/org/owasp/webgoat/users/Scoreboard.java b/webgoat-container/src/main/java/org/owasp/webgoat/users/Scoreboard.java
index 06d789e13..7b4cce443 100644
--- a/webgoat-container/src/main/java/org/owasp/webgoat/users/Scoreboard.java
+++ b/webgoat-container/src/main/java/org/owasp/webgoat/users/Scoreboard.java
@@ -8,6 +8,7 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.util.ArrayList;
+import java.util.Comparator;
 import java.util.List;
 import java.util.stream.Collectors;
 
@@ -45,6 +46,15 @@ public class Scoreboard {
             UserTracker userTracker = userTrackerRepository.findByUser(user.getUsername());
             rankings.add(new Ranking(user.getUsername(), challengesSolved(userTracker)));
         }
+        /* sort on number of captured flags to present an ordered ranking */
+        rankings.sort(new Comparator<Ranking>() {
+
+			@Override
+			public int compare(Ranking o1, Ranking o2) {
+				
+				return o2.getFlagsCaptured().size() - o1.getFlagsCaptured().size();
+			}
+		});
         return rankings;
     }
 
diff --git a/webgoat-container/src/main/resources/static/css/main.css b/webgoat-container/src/main/resources/static/css/main.css
index ab0c93ab0..e380e781c 100644
--- a/webgoat-container/src/main/resources/static/css/main.css
+++ b/webgoat-container/src/main/resources/static/css/main.css
@@ -1185,7 +1185,7 @@ div.scoreboard-username {
     color: aliceblue;
     padding: 4px;
     padding-left: 8px;
-    font-size: x-large;
+    font-size: medium;
     border-radius: 6px;
 }
 
@@ -1203,7 +1203,7 @@ div.captured-flag {
     background-color: #444;
     color: white;
     padding: 4px;
-    font-size: x-large;
+    font-size: medium;
     display: inline-block;
 }
 
@@ -1216,13 +1216,6 @@ div.captured-flag {
     color: red
 }
 
-.appseceu-banner {
-    background: url('img/owasp_logo.jpg') no-repeat 0px 0px;
-    height: 117px;
-    width: 1268px;
-    margin-bottom: 20px;
-}
-
 #content {
     position: relative;
 }
diff --git a/webgoat-container/src/main/resources/static/js/goatApp/templates/scoreboard.html b/webgoat-container/src/main/resources/static/js/goatApp/templates/scoreboard.html
index af53d5771..4ce48148b 100644
--- a/webgoat-container/src/main/resources/static/js/goatApp/templates/scoreboard.html
+++ b/webgoat-container/src/main/resources/static/js/goatApp/templates/scoreboard.html
@@ -1,9 +1,7 @@
-<div class="scoreboard-title">WebGoat Challenge</div>
-<div class="appseceu-banner"></div>
 <table class="scoreboard-table">
     <% _.each(rankings, function(userRanking, index) { %>
     <tr>
-        <th class="username"> <div class="scoreboard-username"><%= index%> <%=userRanking.username %> </div></th>
+        <th class="username"> <div class="scoreboard-username"><%= index+1%> - <%=userRanking.username %> </div></th>
         <td class="user-flags"> <% _.each(userRanking.flagsCaptured, function(flag) { %>
 
              <div class="captured-flag">
diff --git a/webgoat-container/src/main/resources/templates/scoreboard.html b/webgoat-container/src/main/resources/templates/scoreboard.html
index b26f7d86a..2a19f9143 100644
--- a/webgoat-container/src/main/resources/templates/scoreboard.html
+++ b/webgoat-container/src/main/resources/templates/scoreboard.html
@@ -7,14 +7,6 @@
     <meta http-equiv="Cache-Control" CONTENT="no-cache"/>
     <meta http-equiv="Cache-Control" CONTENT="no-store"/>
 
-    <!--[if lt IE 7]>
-    <id class="no-js lt-ie9 lt-ie8 lt-ie7"/> <![endif]-->
-    <!--[if IE 7]>
-    <id class="no-js lt-ie9 lt-ie8"/> <![endif]-->
-    <!--[if IE 8]>
-    <id class="no-js lt-ie9"/> <![endif]-->
-    <!--[if gt IE 8]><!-->
-
     <!--  CSS -->
     <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
 
@@ -28,13 +20,35 @@
     <meta http-equiv="Content-Type" content="text/id; charset=ISO-8859-1"/>
     <title>WebGoat</title>
 </head>
-<body class="scoreboard-page">
+<!--  <body class="scoreboard-page"> -->
+<body>
+<header id="header">
+        <!--logo start-->
+        <div class="brand">
+            <a th:href="@{/welcome.mvc}" class="logo"><span>Web</span>Goat</a>
+        </div>
+        <!--logo end-->
+        <div id="lesson-title-wrapper">
+			<h1 id="lesson-title">WebGoat challenges ranking</h1>
+        </div><!--lesson title end-->
+        <div class="user-nav pull-right" id="user-and-info-nav" style="margin-right: 75px;">
+        </div>
+    </header>
+<section id="container">
+<!--main content start-->
+    <section class="main-content-wrapper">
+        <section id="main-content">
 
 <div id="scoreboard-wrapper">
     <div id="scoreboard">
         <!-- will use _ template here -->
     </div>
 </div>
+
+</section>
+</section>
+</section>
+
 </body>