Django: Trouble With Logging User Using Bootstrap Login.html
I'm using Django 3.0.2 + Boostrap. I have created a registration/login.html
page. The contents of this page are shown below.
The page renders correctly and most of it works OK. However, I am unable to login to my website through this page. I keep getting Your username and password did not match. Please try again
. I can login to the admin
website without any issues if I use the same username/password. I am not sure what is wrong with my login.html
. Any ideas?
{% extends "base.html" %}
{% block content %}
{% if form.errors %}
<p>Your username and password did not match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p>Your account does nohave access to this page. To proceed,please login with an account that has access.</p>
{% else %}
<p>Please login to see this page.</p>
{% endif %}
{% endif %}
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<form class="user" method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control form-control-user" id="exampleInputUserName" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password">
</div>
<input type="submit" class="btn btn-primary btn-user btn-block" value="Login">
<input type="hidden" name="next" value="{{ next }}">
</form>
<hr>
<div class="text-center">
<a class="small" target="_blank" rel="nofollow noreferrer" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" target="_blank" rel="nofollow noreferrer" href="register.html">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Contents of views.py:
from django.contrib.auth import logout
def logout_view(request):
"""Log out user from the website."""
logout(request)
Answer
Your input
types are missing the name attribute. As per the Mozilla docs:
A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.
So the name is submitted with the form. But what if there is no name
attribute?
Same Documentation explains:
Consider the name a required attribute (even though it's not). If an input has no name specified, or name is empty, the input's value is not submitted with the form.
So your username and password are not sent to the backend.
You need to provide the name attributes to your input types.
<form class="user" method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control form-control-user" id="exampleInputUserName" placeholder="Username" `name="username"`>
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password" name="password">
</div>
<input type="submit" class="btn btn-primary btn-user btn-block" value="Login">
<input type="hidden" name="next" value="{{ next }}">
</form>
It is front-end issue, not particularly related to Django.
Related Questions
- → Django, code inside <script> tag doesn't work in a template
- → Uncaught ReferenceError: Parent is not defined
- → React - Django webpack config with dynamic 'output'
- → Put a Rendered Django Template in Json along with some other items
- → Implement shopify templates in django
- → Python Shopify API output formatted datetime string in django template
- → How to avoid being crawled/penalized by Google
- → Django: Identify the urls that provide duplicate content and set a canonical link
- → Shopify app: adding a new shipping address via webhook
- → Jquery Modal Confirmation on Django form submit for deletion of object
- → changing the size of an image with css
- → shopify_auth multi store session handling
- → How to use Shopify Python API RecurringApplicationCharge