Add some visual indicators that authorisations have been submitted.

This will show teccies and clients that RIGS is processing emails which can take a short while.
Should prevent duplicate sending.
This commit is contained in:
Tom Price
2017-05-17 18:59:06 +01:00
parent 36d258253f
commit 4b87b0a196
5 changed files with 39 additions and 5 deletions

View File

@@ -7,7 +7,14 @@
<script> <script>
$(function () { $(function () {
$('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').tooltip();
}) });
$('form').on('submit', function() {
$('#loading-modal').modal({
backdrop: 'static',
show: true
});
});
</script> </script>
{% endblock %} {% endblock %}

View File

@@ -22,7 +22,9 @@
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-10 col-md-offset-1"> <div class="col-sm-12 col-md-10 col-md-offset-1">
<form action="{{ form.action|default:request.path }}" method="post" class="form-horizontal">{% csrf_token %} <form action="{{ form.action|default:request.path }}" method="post" class="form-horizontal"
id="auth-request-form">
{% csrf_token %}
<div class="row"> <div class="row">
{% include 'form_errors.html' %} {% include 'form_errors.html' %}
@@ -38,11 +40,20 @@
<div class="text-right col-sm-3 col-sm-offset-9"> <div class="text-right col-sm-3 col-sm-offset-9">
<div class="form-group"> <div class="form-group">
<input type="submit" class="form-control btn btn-primary"/> <button type="submit" class="form-control btn btn-primary">
<span class="glyphicon glyphicon-send"></span>
Send
</button>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<script>
$('#auth-request-form').on('submit', function () {
$('#auth-request-form button').attr('disabled', true);
});
</script>
{% endblock %} {% endblock %}

View File

@@ -71,6 +71,22 @@
<div class="modal fade" id="modal" role="dialog" tabindex=-1></div> <div class="modal fade" id="modal" role="dialog" tabindex=-1></div>
<div class="modal fade" id="loading-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Please wait</h2>
</div>
<div class="modal-body">
<div class="loading-animation">
<div class="circle"></div>
<div class="circle1"></div>
</div>
</div>
</div>
</div>
</div>
<script> <script>
Date.prototype.getISOString = function () { Date.prototype.getISOString = function () {
var yyyy = this.getFullYear().toString(); var yyyy = this.getFullYear().toString();