search box moved and jwt encode/decode with little delay (#1664)

src/main/resources/webgoat/static/js/main.js

@@ -33,9 +33,12 @@ require.config({
     bootstrap: 'libs/bootstrap.min',
     text: 'libs/text',
     templates: 'goatApp/templates',
-    polyglot: 'libs/polyglot.min'
+    polyglot: 'libs/polyglot.min',
+    search: 'search'
   },
 
+  deps: ['search'],
+
   shim: {
 	"jqueryui": {
 	  exports:"$",
@@ -67,4 +70,4 @@ require([
 	'bootstrap',
 	'goatApp/goatApp'], function($,jqueryVuln,jqueryui,_,Backbone,Bootstrap,Goat){
     Goat.initApp();
-});
+});

src/main/resources/webgoat/templates/main_new.html

@@ -15,13 +15,8 @@
     <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>
     <link rel="stylesheet" type="text/css" th:href="@{/css/animate.css}"/>
     <link rel="stylesheet" type="text/css" th:href="@{/css/coderay.css}"/>
-<!--    <link rel="stylesheet" type="text/css" th:href="@{/css/asciidoctor-default.css}"/>-->
-
     <!--  end of CSS -->
 
-    <!-- JS -->
-    <!-- <script src="js/modernizr.min.js"></script>-->
-
     <!-- Require.js used to load js asynchronously -->
     <script src="js/libs/require.min.js" data-main="js/main"></script>
     <meta http-equiv="Content-Type" content="text/id; charset=UTF-8"/>
@@ -39,8 +34,9 @@
         <div id="lesson-title-wrapper">
 
         </div><!--lesson title end-->
-        <!--<div class="user-nav pull-right" id="user-and-info-nav" style="margin-right: 75px;">-->
-        <div style="position: absolute;width:400px; z-index:3; top:22px; right: -90px;">
+        <div style="position: absolute;width:600px; z-index:3; top:22px; right: -90px;">
+            <input class="form-control" type="text" id="search" name="search" th:placeholder="#{searchmenu}"  style="width:200px;display:inline-block" />
+            
             <!-- webwolf menu item -->
             <a th:href="@{/WebWolf}" target="_blank">
                 <button type="button" id="webwolf-button" class="btn btn-default right_nav_button"
@@ -151,8 +147,7 @@
                 </button>
             </a>
 
-            <input class="form-control" type="text" id="search" name="search" th:placeholder="#{searchmenu}"  style="width:60%" />
-            <script src="js/search.js" ></script>
+            
 
         </div>
     </header>

src/main/resources/webwolf/static/js/jwt.js

@@ -11,17 +11,43 @@
 
 
 $(document).ready(() => {
-    $('#payload').on('input', call(true));
-    $('#header').on('input', call(true));
-    $('#secretKey').on('input', call(true));
-    $('#token').on('input', call(false));
+let tokeninput = document.getElementById('token');
+let headerinput = document.getElementById('header');
+let secretKeyinput = document.getElementById('secretKey');
+let payloadinput = document.getElementById('payload');
+let timeout = null;
+
+tokeninput.addEventListener('keyup', function (e) {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+        call(false);
+    }, 1000);
+});
+headerinput.addEventListener('keyup', function (e) {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+        call(true);
+    }, 1000);
+});
+secretKeyinput.addEventListener('keyup', function (e) {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+        call(true);
+    }, 1000);
+});
+payloadinput.addEventListener('keyup', function (e) {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+        call(true);
+    }, 1000);
+});
 });
 
 function call(encode) {
-    return () => {
         var url = encode ? 'jwt/encode' : 'jwt/decode';
         var formData = encode ? $('#encodeForm').getFormData() : $('#decodeForm').getFormData();
         formData["secretKey"] = $('#secretKey').val();
+        console.log(formData);
 
         $.ajax({
             type: 'POST',
@@ -33,7 +59,6 @@ function call(encode) {
             contentType: "application/x-www-form-urlencoded",
             dataType: 'json'
         });
-    }
 }
 
 function update(token) {