Update demo to reflect key removal api change

This commit is contained in:
Tankred Hase
2016-06-14 16:47:54 +02:00
parent 7d93b882a5
commit 2bddbd6a93
6 changed files with 83 additions and 10 deletions

View File

@@ -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">
<input class="hidden" type="radio" name="op" value="remove" checked="checked">
<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>
<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>

View File

@@ -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>

51
src/static/js/demo.js Normal file
View File

@@ -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));