Merge pull request #587 from catborise/master

enchancements

accounts/templates/accounts/otp_login.html

@@ -21,7 +21,8 @@
                 {% bootstrap_form_errors form %}
             </div>
         {% endif %}
-        <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
+
+        <form id="form-signin" class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
             <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
             {% bootstrap_field form.username layout='inline' %}
             {% bootstrap_field form.password layout='inline' %}
@@ -29,9 +30,28 @@
             <a href="{% url 'accounts:email_otp' %}" class="float-end">{% trans "I do not have/lost my OTP!" %}</a>
             <br>
             <div class="d-grid">
-                <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+                <button id="btn-signin" class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
             </div>
         </form>
     </div>
 </div>
 {% endblock content %}
+
+{% block script %}
+<script>
+    $(document).ready(function() {
+        $("#btn-signin").click(function() {
+            // disable button
+            $(this).prop("disabled", true);
+            // add spinner to button
+            $(this).html(
+            `
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            {% trans "Loading" %}...
+            `
+            );
+            $("#form-signin").submit();
+        });
+});
+</script>
+{% endblock script%}

accounts/templates/login.html

@@ -22,15 +22,34 @@
                 {% trans "Incorrect username or password." %}
             </div>
         {% endif %}
-        <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
+        <form id="form-signin" class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
             <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
             <input type="text" class="form-control" name="username" placeholder="{% trans 'User' %}" autocapitalize="none" autocorrect="off" autofocus required>
             <input type="password" class="form-control" name="password" placeholder="{% trans 'Password' %}" required>
             <input type="hidden" name="next" value="{{ next }}">
             <div class="d-grid">
-                <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+                <button id="btn-signin" class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
             </div>
         </form>
     </div>
 </div>
 {% endblock %}
+
+{% block script %}
+<script>
+    $(document).ready(function() {
+        $("#btn-signin").click(function() {
+            // disable button
+            $(this).prop("disabled", true);
+            // add spinner to button
+            $(this).html(
+            `
+            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+            {% trans "Loading" %}...
+            `
+            );
+            $("#form-signin").submit();
+        });
+});
+</script>
+{% endblock script%}

instances/templates/create_inst_block.html

@@ -12,15 +12,14 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <form method="post" aria-label="Select compute for instance create form">
+                <form method="post" aria-label="Select compute for instance create form">{% csrf_token %}
-                    {% csrf_token %}
                     <div class="row">
                         <table class="table">
                             <thead>
                                 <tr style="cursor:default;pointer-events:none">
                                     <th>{% trans "Name" %}</th>
                                     <th>{% trans "VCPU" %}
-                                    <th>{% trans "Cpu Usage" %}</th>
+                                    <th>{% trans "CPU Usage" %}</th>
                                     <th>{% trans "Memory" %}</th>
                                     <th>{% trans "Mem Usage" %}</th>
                                     <th>{% trans "Action" %}</th>
@@ -29,12 +28,12 @@
                             <tbody>
                                 {% for compute in computes %}
                                     {% if compute.status is True %}
-                                        <tr style="text-decoration: none">
+                                        <tr>
                                             <td>{{ compute.name }}</td>
                                             <td>{{ compute.cpu_count }}</td>
                                             <td>
                                                 <div class="progress">
-                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ compute.cpu_usage }}%"
+                                                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ compute.cpu_usage }}%"
                                                         aria-valuenow="{{ compute.cpu_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.cpu_usage }}%
                                                     </div>
                                                 </div>
@@ -42,7 +41,7 @@
                                             <td>{{ compute.ram_size|filesizeformat }}</td>
                                             <td>
                                                 <div class="progress">
-                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ compute.ram_usage }}%"
+                                                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ compute.ram_usage }}%"
                                                         aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
                                                     </div>
                                                 </div>