1 files changed, 38 insertions, 8 deletions
diff --git a/hosted/challenges.html b/hosted/challenges.html
index 65d6bb3..3c18f2d 100644
--- a/hosted/challenges.html
+++ b/hosted/challenges.html
@@ -26,7 +26,7 @@
                         {{#if foundFlag}}
                             <p class="text-success">Flag found!</p>
                         {{else}}
-                            <form class="input-group mb-3" method="POST" action="/api/submitFlag">
+                            <form class="input-group mb-3" onsubmit="event.preventDefault();submitThis(this);">
                                 <input type="hidden" name="challengeName" value="{{ name }}">
                                 <input type="text" class="form-control" aria-label="Flag" aria-describedby="button-submit" name="flag">
                                 <div class="input-group-append">
@@ -60,17 +60,47 @@
             </div>
         </nav>
         <main class="container" role="main" id="challenge-list">
+            <div class="alert alert-info" role="alert">
+                Loading challenges...
+            </div>
         </main>
     </body>
     <script type="text/javascript">
         var template = Handlebars.compile($("#body-template").html());
-        $.ajax({
-            url: "/api/getChallenges",
-            success: function(result) {
-                $("#challenge-list").html(
-                    template(jQuery.parseJSON(result))
-                );
-            }
+
+        function loadChallengesAndRender() {
+            $.ajax({
+                url: "/api/getChallenges",
+                success: function(result) {
+                    $("#challenge-list").html(
+                        template(jQuery.parseJSON(result))
+                    );
+                }
+            });
+        }
+
+        function submitThis(t) {
+            submitFlag($(t).find('[name=challengeName]').val(), $(t).find('[name=flag]'));
+        }
+
+        function submitFlag(challengeName, flagObject) {
+            $.post("/api/submitFlag", {
+                "challengeName": challengeName,
+                "flag": flagObject.val()
+            }).done(function(data) {
+                var result = jQuery.parseJSON(data);
+                if(result["correctFlag"] == "true") {
+                    // yay!
+                    loadChallengesAndRender();
+                } else {
+                    // nay!
+                    flagObject.addClass("alert-danger").blur();
+                }
+            });
+        }
+
+        $(document).ready(function() {
+            loadChallengesAndRender();
         });
     </script>
 </html>
\ No newline at end of file