webvirtcloud/accounts/templates/login.html

{% extends "base.html" %}
{% load i18n %}
{% load static %}


{% block title %}{% trans "WebVirtCloud" %} - {% trans "Sign In" %}{% endblock title %}

{% block style %}
<link href="{% static "css/signin.css" %}" rel="stylesheet">
{% endblock style %}

{% block content %}
<div class="login-box">
    <div class="page-header">
        <a href="/"><h1>WebVirtCloud</h1></a>
    </div>
    <hr>
    <div class="col-12" role="main">
        {% if form.errors %}
            <div class="alert alert-danger" role="alert">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                {% trans "Incorrect username or password." %}
            </div>
        {% endif %}
        <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 id="btn-signin" class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block script %}
<script>
    document.getElementById('form-signin').addEventListener('submit', function() {
        var btn = document.getElementById('btn-signin');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> {% trans "Loading" %}...';
    });
</script>
{% endblock script %}