I have a custom login page for my web. Upon keying the right account details, I can log in to my web. But if I key in wrong account details, it just refreshes the pages with the username and password 's textbox empty. Is there some way to show something like 'Username or Password is wrong' as a error or message?
Within the login.html I have the following
{% if messages %}
{%for message in messages%}
<div class ="alert alert-success" role="alert">
{{message}}
</div>
{%endfor%}
{%endif%}
{% for field in form %}
{% if field.errors %}
{% for error in field.errors %}
<div class="alert alert-danger" role="alert">
<div class="d-flex flex-row">
<div class="align-middle pr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
</svg>
</div>
<div class="align-middle"><b>{{field.label}}</b> - {{error}}</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endfor %}
The following does not seem to do anything if the username or password is incorrect.