From e045bc692d5e8454c03546e3e232ab903c321b3b Mon Sep 17 00:00:00 2001
From: Nanne Baars <nanne.baars@owasp.org>
Date: Tue, 29 May 2018 12:47:27 +0200
Subject: [PATCH] Buying page also calculates the prices Product image added

---
 .../jwt/src/main/resources/html/JWT.html      |  30 +++++++++------
 .../main/resources/images/product-icon.png    | Bin 0 -> 2552 bytes
 .../jwt/src/main/resources/js/jwt-buy.js      |  36 ++++++++++++++++++
 3 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 webgoat-lessons/jwt/src/main/resources/images/product-icon.png
 create mode 100644 webgoat-lessons/jwt/src/main/resources/js/jwt-buy.js

diff --git a/webgoat-lessons/jwt/src/main/resources/html/JWT.html b/webgoat-lessons/jwt/src/main/resources/html/JWT.html
index 136d20d1ce..9ba14748ff 100644
--- a/webgoat-lessons/jwt/src/main/resources/html/JWT.html
+++ b/webgoat-lessons/jwt/src/main/resources/html/JWT.html
@@ -111,7 +111,7 @@ <h3>Vote for your favorite</h3>
 
     <link rel="stylesheet" type="text/css" th:href="@{/lesson_css/jwt.css}"/>
     <script th:src="@{/lesson_js/bootstrap.min.js}" language="JavaScript"></script>
-    <script th:src="@{/lesson_js/jwt-refresh.js}" language="JavaScript"></script>
+    <script th:src="@{/lesson_js/jwt-buy.js}" language="JavaScript"></script>
     <div class="attack-container">
         <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
         <form class="attack-form" accept-charset="UNKNOWN"
@@ -136,9 +136,11 @@ <h3>Vote for your favorite</h3>
                             <tr>
                                 <td class="col-sm-8 col-md-6">
                                     <div class="media">
-                                        <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"></img>
+                                        <img class="media-object" th:src="@{/images/product-icon.png}"
+                                             style="width: 72px; height: 72px;"></img>
                                         <div class="media-body">
-                                            <h4 class="media-heading"><a href="#">Learn defending your application with WebGoat</a></h4>
+                                            <h4 class="media-heading"><a href="#">Learn to defend your application with
+                                                WebGoat</a></h4>
                                             <h5 class="media-heading"> by <a href="#">WebGoat Publishing</a></h5>
                                             <span>Status: </span><span
                                                 class="text-success"><strong>In Stock</strong></span>
@@ -148,8 +150,11 @@ <h5 class="media-heading"> by <a href="#">WebGoat Publishing</a></h5>
                                 <td class="col-sm-1 col-md-1" style="text-align: center">
                                     <input type="text" class="form-control" id="quantity1" value="3"></input>
                                 </td>
-                                <td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td>
-                                <td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
+                                <td class="col-sm-1 col-md-1 text-center"><strong>$
+                                    <span id="piecePrice1">4.87</span></strong>
+                                </td>
+                                <td class="col-sm-1 col-md-1 text-center"><strong>$<span
+                                        id="totalPrice1">14.61</span></strong></td>
                                 <td class="col-sm-1 col-md-1">
                                     <button type="button" class="btn btn-danger">
                                         <span class="glyphicon glyphicon-remove"></span> Remove
@@ -159,7 +164,9 @@ <h5 class="media-heading"> by <a href="#">WebGoat Publishing</a></h5>
                             <tr>
                                 <td class="col-md-6">
                                     <div class="media">
-                                        <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"></img>
+                                        <img class="media-object"
+                                             th:src="@{/images/product-icon.png}"
+                                             style="width: 72px; height: 72px;"></img>
                                         <div class="media-body">
                                             <h4 class="media-heading"><a href="#">Pentesting for professionals</a></h4>
                                             <h5 class="media-heading"> by <a href="#">WebWolf Publishing</a></h5>
@@ -167,11 +174,12 @@ <h5 class="media-heading"> by <a href="#">WebWolf Publishing</a></h5>
                                         </div>
                                     </div>
                                 </td>
-                                <td class="col-md-1" style="text-align: center">
+                                <td class="col-sm-1 col-md-1" style="text-align: center">
                                     <input type="text" class="form-control" id="quantity2" value="2"></input>
                                 </td>
-                                <td class="col-md-1 text-center"><strong>$4.99</strong></td>
-                                <td class="col-md-1 text-center"><strong>$9.98</strong></td>
+                                <td class="col-sm-1 col-md-1 text-center"><strong>$<span id="piecePrice2">4.99</span></strong>
+                                </td>
+                                <td class="col-sm-1 col-md-1 text-center"><strong>$<span id="totalPrice2">9.98</span></strong></td>
                                 <td class="col-md-1">
                                     <button type="button" class="btn btn-danger">
                                         <span class="glyphicon glyphicon-remove"></span> Remove
@@ -186,8 +194,8 @@ <h5 class="media-heading"> by <a href="#">WebWolf Publishing</a></h5>
                                 <td>  </td>
                                 <td><h5>Subtotal<br></br>Estimated shipping</h5>
                                     <h3>Total</h3></td>
-                                <td class="text-right"><h5><strong>$24.59<br></br>$6.94</strong></h5>
-                                    <h3>$31.53</h3></td>
+                                <td class="text-right"><h5><strong>$<span id="subtotalJwt">24.59</span><br></br>$6.94</strong></h5>
+                                    <h3>$<span id="totalJwt">31.53</span></h3></td>
                             </tr>
                             <tr>
                                 <td>  </td>
diff --git a/webgoat-lessons/jwt/src/main/resources/images/product-icon.png b/webgoat-lessons/jwt/src/main/resources/images/product-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6589f621df8986d9af236df41ed6ac434a06d2c4
GIT binary patch
literal 2552
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
O0000<MNUMnLSTX{MX!qh

literal 0
HcmV?d00001

diff --git a/webgoat-lessons/jwt/src/main/resources/js/jwt-buy.js b/webgoat-lessons/jwt/src/main/resources/js/jwt-buy.js
new file mode 100644
index 0000000000..f5167aa91a
--- /dev/null
+++ b/webgoat-lessons/jwt/src/main/resources/js/jwt-buy.js
@@ -0,0 +1,36 @@
+$(document).ready(function () {
+    $("#quantity1").on("blur", function () {
+        var quantity = $("#quantity1").val();
+        if (!$.isNumeric(quantity) || quantity < 0) {
+            $("#quantity1").val("1");
+            quantity = 1;
+        }
+        var piecePrice = $("#piecePrice1").text();
+        $('#totalPrice1').text((quantity * piecePrice).toFixed(2));
+        updateTotal();
+    });
+    $("#quantity2").on("blur", function () {
+        var quantity = $("#quantity2").val();
+        if (!$.isNumeric(quantity) || quantity < 0) {
+            $("#quantity2").val("1");
+            quantity = 1;
+        }
+        var piecePrice = $("#piecePrice2").text();
+        $('#totalPrice2').text((quantity * piecePrice).toFixed(2));
+        updateTotal();
+    })
+})
+
+function updateTotal() {
+    var price1 = parseFloat($('#totalPrice1').text());
+    var price2 = parseFloat($('#totalPrice2').text());
+    var subTotal = price1 + price2;
+    $('#subtotalJwt').text(subTotal.toFixed(2));
+    var total = subTotal + 6.94;
+    $('#totalJwt').text(total.toFixed(2));
+
+
+}
+
+
+