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.

RIGS/static/js/interaction.js

@@ -136,4 +136,4 @@ $("#item-table tbody").sortable({
         });
 
     }
-});
+});

RIGS/templates/RIGS/eventauthorisation_form.html

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

RIGS/templates/RIGS/eventauthorisation_request.html

@@ -22,7 +22,9 @@ <h1>Send authorisation request email.</h1>
             </div>
         </div>
         <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">
                     {% include 'form_errors.html' %}
@@ -38,11 +40,20 @@ <h1>Send authorisation request email.</h1>
 
                     <div class="text-right col-sm-3 col-sm-offset-9">
                         <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>
             </form>
         </div>
     </div>
+
+    <script>
+        $('#auth-request-form').on('submit', function () {
+            $('#auth-request-form button').attr('disabled', true);
+        });
+    </script>
 {% endblock %}

templates/base_ajax.html

@@ -22,4 +22,4 @@ <h4 class="modal-title">{% block title %}{% endblock %}</h4>
             });
         </script>
     </div>
-</div>
+</div>

templates/base_client.html

@@ -71,6 +71,22 @@
 
 <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>
     Date.prototype.getISOString = function () {
         var yyyy = this.getFullYear().toString();