Update demo to reflect key removal api change

.jshintrc

@@ -20,6 +20,7 @@
     "before" : true,
     "beforeEach" : true,
     "after" : true,
-    "afterEach" : true
+    "afterEach" : true,
+    "jQuery" : true
   }
 }

Gruntfile.js

@@ -6,7 +6,8 @@ module.exports = function(grunt) {
     jshint: {
       all: ['*.js', 'src/**/*.js', 'test/**/*.js'],
       options: {
-        jshintrc: '.jshintrc'
+        jshintrc: '.jshintrc',
+        ignores: ['src/static/js/*.min.js']
       }
     },
 

README.md

@@ -128,7 +128,7 @@ POST /api/v1/key
 * **primaryEmail (optional)**: The ascii armored block is parsed to check for user ids, so this parameter is purely optional. Normally a verification email is sent to every user id found in the pgp key. To prevent this behaviour, user agents can specify the user's primary email address to send out only one email.
 
 
-### Verify uploaded key
+### Verify uploaded key (via link in email)
 
 ```
 GET /api/v1/key?op=verify&keyId=b8e4105cc9dedc77&nonce=6a314915c09368224b11df0feedbc53c
@@ -140,7 +140,7 @@ GET /api/v1/key?op=verify&keyId=b8e4105cc9dedc77&nonce=6a314915c09368224b11df0fe
 DELETE /api/v1/key?keyId=b8e4105cc9dedc77 OR ?email=user@example.com
 ```
 
-### Verify key removal
+### Verify key removal (via link in email)
 
 ```
 GET /api/v1/key?op=verifyRemove&keyId=b8e4105cc9dedc77&nonce=6a314915c09368224b11df0feedbc53c

src/static/demo.html

@@ -20,7 +20,7 @@
         <nav>
           <ul class="nav nav-pills pull-right">
             <li role="presentation"><a href="/">Home</a></li>
-            <li role="presentation" class="active"><a href="/demo.html">Demo</a></li>
+            <li role="presentation" class="active"><a href="demo.html">Demo</a></li>
             <li role="presentation"><a href="https://github.com/mailvelope/keyserver" target="_blank">GitHub</a></li>
           </ul>
         </nav>
@@ -28,8 +28,17 @@
       </div>
 
       <div class="row marketing">
-        <div class="col-lg-12">
+        <div id="addKey" class="col-lg-12">
           <h2>OpenPGP key upload</h2>
+          <div class="alert alert-success hidden" role="alert">
+            <strong>Success!</strong> <span></span>
+          </div>
+          <div class="alert alert-danger hidden" role="alert">
+            <strong>Error!</strong> <span></span>
+          </div>
+          <div class="progress hidden">
+            <div class="progress-bar progress-bar-striped active" role="progressbar"></div>
+          </div>
           <form action="/pks/add" method="post">
             <p><textarea class="form-control" name="keytext" rows="5" spellcheck="false" placeholder="Paste PGP PUBLIC KEY BLOCK here ..." required></textarea></p>
             <input class="btn btn-primary btn-lg" type="submit" value="Upload">
@@ -51,10 +60,18 @@
           <hr>
         </div> <!-- /col-lg-12 -->
 
-        <div class="col-lg-12">
+        <div id="removeKey" class="col-lg-12">
           <h2>OpenPGP key removal</h2>
-          <form action="/api/v1/key" method="get">
+          <div class="alert alert-success hidden" role="alert">
-            <input class="hidden" type="radio" name="op" value="remove" checked="checked">
+            <strong>Success!</strong> <span></span>
+          </div>
+          <div class="alert alert-danger hidden" role="alert">
+            <strong>Error!</strong> <span></span>
+          </div>
+          <div class="progress hidden">
+            <div class="progress-bar progress-bar-striped active" role="progressbar"></div>
+          </div>
+          <form>
             <div class="input-group input-group-lg">
               <input class="form-control" name="email" type="email" spellcheck="false" placeholder="Email address" required>
               <span class="input-group-btn">
@@ -77,5 +94,8 @@
 
     </div> <!-- /container -->
 
+    <script src="js/jquery.min.js"></script>
+    <script src="js/demo.js"></script>
+
   </body>
 </html>

src/static/index.html

@@ -20,7 +20,7 @@
         <nav>
           <ul class="nav nav-pills pull-right">
             <li role="presentation" class="active"><a href="/">Home</a></li>
-            <li role="presentation"><a href="/demo.html">Demo</a></li>
+            <li role="presentation"><a href="demo.html">Demo</a></li>
             <li role="presentation"><a href="https://github.com/mailvelope/keyserver" target="_blank">GitHub</a></li>
           </ul>
         </nav>

src/static/js/demo.js

@@ -0,0 +1,51 @@
+;(function($) {
+  'use strict';
+
+  $('.progress-bar').css('width', '100%');
+
+  // POST key form
+  $('#addKey form').submit(function(e) {
+    e.preventDefault();
+    $('#addKey .alert').addClass('hidden');
+    $('#addKey .progress').removeClass('hidden');
+    $.ajax({
+      method: 'POST',
+      url: '/api/v1/key',
+      data: JSON.stringify({ publicKeyArmored:$('#addKey textarea').val() }),
+      contentType: 'application/json',
+    }).done(function(data, textStatus, xhr) {
+      if (xhr.status === 304) {
+        alert('addKey', 'danger', 'Key already exists!');
+      } else {
+        alert('addKey', 'success', xhr.responseText);
+      }
+    })
+    .fail(function(xhr) {
+      alert('addKey', 'danger', xhr.responseText);
+    });
+  });
+
+  // DELETE key form
+  $('#removeKey form').submit(function(e) {
+    e.preventDefault();
+    $('#removeKey .alert').addClass('hidden');
+    $('#removeKey .progress').removeClass('hidden');
+    var email = $('#removeKey input[type="email"]').val();
+    $.ajax({
+      method: 'DELETE',
+      url: '/api/v1/key?email=' + encodeURIComponent(email)
+    }).done(function(data, textStatus, xhr) {
+      alert('removeKey', 'success', xhr.responseText);
+    })
+    .fail(function(xhr) {
+      alert('removeKey', 'danger', xhr.responseText);
+    });
+  });
+
+  function alert(region, outcome, text) {
+    $('#' + region + ' .progress').addClass('hidden');
+    $('#' + region + ' .alert-' + outcome + ' span').text(text);
+    $('#' + region + ' .alert-' + outcome).removeClass('hidden');
+  }
+
+}(jQuery));