j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2024-11-01 03:54:15 +00:00
Code Issues Projects Releases Wiki Activity

add loading spinner after submit to login pages

Browse source
This commit is contained in:
catborise 2023-05-12 12:01:54 +03:00
parent c0513f7c6b
commit 8bf28a4f33
2 changed files with 44 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
accounts/templates/accounts/otp_login.html
View file

@ -21,7 +21,7 @@
{% bootstrap_form_errors form %} {% bootstrap_form_errors form %}
</div> </div>
{% endif %} {% 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> <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
{% bootstrap_field form.username layout='inline' %} {% bootstrap_field form.username layout='inline' %}
{% bootstrap_field form.password layout='inline' %} {% bootstrap_field form.password layout='inline' %}
@ -29,9 +29,28 @@
<a href="{% url 'accounts:email_otp' %}" class="float-end">{% trans "I do not have/lost my OTP!" %}</a> <a href="{% url 'accounts:email_otp' %}" class="float-end">{% trans "I do not have/lost my OTP!" %}</a>
<br> <br>
<div class="d-grid"> <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> </div>
</form> </form>
</div> </div>
</div> </div>
{% endblock content %} {% 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%}

23
accounts/templates/login.html
View file

@ -22,15 +22,34 @@
{% trans "Incorrect username or password." %} {% trans "Incorrect username or password." %}
</div> </div>
{% endif %} {% 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> <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="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="password" class="form-control" name="password" placeholder="{% trans 'Password' %}" required>
<input type="hidden" name="next" value="{{ next }}"> <input type="hidden" name="next" value="{{ next }}">
<div class="d-grid"> <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> </div>
</form> </form>
</div> </div>
</div> </div>
{% endblock %} {% 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%}