Iss #68 - Add ECA checker to the page

src/main/resources/templates/simple_fingerprint_ui.html

@@ -21,6 +21,8 @@
 <div class="container" id="main-page-content">
   <div id="main-content-row" class="row">
     <section id="main-content" class="col-md-18 col-sm-16 margin-bottom-20">
+      <div id="toast-target">
+      </div>
       <h1>Git ECA Validation Status</h1>
       <div class="row">
         <div class="col-md-24 margin-bottom-20">
@@ -84,8 +86,21 @@
       {/if}
     </section>
 
-    <aside id="main-sidebar-secondy" role="complementary" class="col-md-6 col-sm-8">
-      <div class="region region-sidebar-second solstice-region-element-count-1">
+    <aside id="main-sidebar-secondy" role="complementary" class="col-md-6 col-sm-8 margin-bottom-30">
+      <div class="region region-sidebar-second solstice-region-element-count-2">
+      <section id="block-site-login-eclipse-eca-sle-eca-lookup-tool" class="block block-site-login-eclipse-eca block-region-sidebar-second solstice-block solstice-block-default solstice-block-white-bg block-sle-eca-lookup-tool clearfix">
+        <h2 class="block-title">ECA Validation Tool</h2>    
+        <div class="block-content">
+          <form id="eclipse-eca-lookup-form" accept-charset="UTF-8">
+            <div class="form-item form-item-input form-type-textfield form-group">
+              <input placeholder="Enter email address" class="form-control form-text" type="text" id="email-input" name="email-input" value="" size="21" maxlength="128" autofill-prediction="UNKNOWN_TYPE">
+              <div class="help-block">Enter email address of an Eclipse account.</div>
+            </div>
+            <button class="btn-success btn form-submit" type="submit" id="edit-submit">Verify ECA</button>
+            </div>
+          </form>
+        </div>
+        </section>
         <section id="block-eclipse-api-github-eclipse-api-github-links" class="block block-eclipse-api-github contextual-links-region block-region-sidebar-second solstice-block block-eclipse-api-github-links clearfix">
           <div class="block-content">
             <aside class="main-sidebar-default-margin" id="main-sidebar">
@@ -100,9 +115,9 @@
               </ul>
             </aside>  
           </div>
-        </section> <!-- /.block -->
+        </section>
       </div>
-    </aside><!-- /#sidebar-second -->
+    </aside>
   </div>
 </div>
 {|<script>
@@ -113,8 +128,55 @@
           .find('.icon-toggle')
           .toggleClass('glyphicon-plus glyphicon-minus');
     }
+    function escapeHTML(s) { 
+      return s.replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    }
+    function toast(message, type) {
+      const $toastTarget = $('#toast-target');
+      // create and append the toast notification into the top of the screen
+      const $newToast = $(`<div class="margin-top-20 fade in alert alert-${type}">${message}<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>`);
+      $toastTarget.append($newToast);
+      // auto dismiss after 10s
+      setTimeout(function() {
+          $newToast.fadeOut("slow");
+      }, 10000);
+    }
     $('#accordion').on('hidden.bs.collapse', toggleIcon);
     $('#accordion').on('shown.bs.collapse', toggleIcon);
+    document.getElementById("eclipse-eca-lookup-form").addEventListener("submit", function (e) {
+      // don't submit the form as we will handle it w/ ajax
+      e.preventDefault();
+      // grab the constants from the form and perform a check
+      const inputVal = $(e.target).find('#email-input').val();
+      const $submitButton = $(e.target).find('button');
+      // disable the button so that requests won't be spammed
+      $submitButton.attr("disabled", "disabled");
+      // use ajax to check the ECA status of the user
+      $.ajax({
+        url: `/git/eca/lookup`,
+        data: {
+          email: inputVal
+        },
+        success: function( data ) {
+          toast(`There is a valid ECA on file for <em>${escapeHTML(inputVal)}</em>`, 'success');
+        },
+        error: function(xhr) {
+          console.log(xhr.status);
+          if (xhr.status == '403') {
+            toast(`There is no valid ECA on file for <em>${escapeHTML(inputVal)}</em>`, 'danger');
+          } else {
+            toast(`No Eclipse Foundation account found for <em>${escapeHTML(inputVal)}</em>`, 'warning');
+          }
+        },
+        complete: function() {
+          $submitButton.removeAttr("disabled");
+        }
+      });
+    });
   });
+
 </script>|}
 {#include eclipse_footer /}
\ No newline at end of file