How to save data in django models taken from bootstrap form? - django

I'm new in Django and now I'm working on my first project.
I created model 'nom' to store data and also bootstrap form in html temlplate.
My question is how can I save data in my model after clicking submit button in my form in html.
All answers i have found recommended me to create Form as class.
Is any easy way to use data from my form?
Thanks
home.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Title</title>
<style>
body { margin: 40px }
.my-container {
border: 1px solid green}
.my-row {
border: 2px solid blue}
.my-col {
border: 2px solid red}
btn-primary { margin-left: 50px}
.align-right {
text-align: center;
border: 0;
}
</style>
</head>
<body>
<div class="container my-container">
<form action="{% url 'home' %}" method="Post">
{% csrf_token %}
<div class= "row my-row">
<div class="col-3 my-col">
<input type="number" placeholder="0" name="nom200" size="1" />
</div>
<div class="col my-col">
<h3><span class="badge badge-secondary"> {% if liczba %}
{{ liczba }}
{% endif %}
</span></h3>
</div>
<div class="col my-col">
<h3><span class="badge badge-secondary"> {% if ls %}
{{ ls }}
{% endif %}
</span></h3>
</div>
</div>
<div class= "row my-row">
<div class="col-3 my-col">
<input type="number" placeholder="0" name="nom100" size="1" />
</div>
<div class="col my-col">
<h3><span class="badge badge-secondary"> {% if liczba1 %}
{{ liczba1 }}
{% endif %}
</span></h3>
</div>
<div class="col my-col">
<h3><span class="badge badge-secondary"> {% if ls1 %}
{{ ls1 }}
{% endif %}
</span></h3>
</div>
</div>
<div class= "row my-row">
<div class="col-3 my-col">
<input type="number" placeholder="0" name="nom50" size="1" />
</div>
<div class="col my-col">
<h3><span class="badge badge-secondary"> {% if liczba3 %}
{{ liczba3 }}
{% endif %}
</span></h3>
</div>
<div class="col my-col">
<h3><span class="badge badge-secondary" name="superowo"> {% if ls3 %}
{{ ls3 }}
{% endif %}
</span></h3>
</div>
</div>
<div class= "row my-row">
<div class="col-3 my-col">
</div>
<div class="col my-col">
<h3><span class="badge badge-secondary"> {% if suma %}
{{ suma }}
{% endif %}
</span></h3>
</div>
</div>
<input type="submit" class="btn" value="Click" href="{% url 'home'%}" name="print_btn">
<a class="btn btn-primary" type="submit" href="{% url 'some_view'%}" >Do PDF</a>
<div class="align-right">
</div>
</form>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
models.py
from django.db import models
class nom (models.Model):
nom200=models.Field(max_length=200)
nom100 = models.CharField(max_length=200)
nom50 = models.CharField(max_length=200)
views.py
from django.shortcuts import render
from . import slownie
from .models import nom
def home (request):
ls=''
ls1=''
ls3=''
liczba= request.POST.get("nom200")
liczba1=request.POST.get("nom100")
liczba3=request.POST.get("nom50")
if liczba and liczba.isdigit():
liczba=int(liczba)*200
ls=slownie.slownie(int(liczba))
if liczba1 and liczba1.isdigit():
liczba1=int(liczba1)*100
ls1=slownie.slownie(int(liczba1))
if liczba3 and liczba3.isdigit():
liczba3=int(liczba3)*50
ls3=slownie.slownie(int(liczba3))
suma=0
if liczba1 and liczba and liczba3:
suma=int(liczba)+int(liczba1)+int(liczba3)
nom200=liczba
nom100=liczba1
nom50=liczba3
return render(request, 'home.html',{'liczba':liczba,'liczba1':liczba1,'liczba3':liczba3,
'suma':suma,
'ls':ls,
'ls1':ls1,
'ls3':ls3})


You save it in a model:
# …
nom200=liczba
nom100=liczba1
nom50=liczba3
nom.objects.create(
nom200=nom200
nom100=nom100
nom50=nom50
)
Normally Django models are however written in PerlCase, so Nom, instead of nom, this is often a good idea to prevent name clashes with object, that often use the name of the model, but in snake_case.

Related

Bootstrap modal dialog not displayed when click button or link in Django template

I am trying to get a button in a django view to display a model dialog to request delete confirmation of a list item. When I click the button I cannot get the modal dialog to display. Any ideas?
Dialog (included from Django Template)
<div
id="confirmModal"
class="modal fade"
tabindex="-1"
role="dialog"
caller-id=""
aria-labelledby="confirmModal"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body" id="modal-message">
Do you wish to proceed?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmButtonModal">Confirm</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
var buttons = document.querySelectorAll("[data-target='#confirmModal']");
for (const button of buttons) {
button.addEventListener("click", function(event) {
// find the modal and add the caller-id as an attribute
var modal = document.getElementById("confirmModal");
modal.setAttribute("caller-id", this.getAttribute("id"));
// extract texts from calling element and replace the modals texts with it
if ("message" in this.dataset) {
document.getElementById("modal-message").innerHTML = this.dataset.message;
};
if ("buttontext" in this.dataset) {
document.getElementById("confirmButtonModal").innerHTML = this.dataset.buttontext;
};
})
}
document.getElementById("confirmButtonModal").onclick = () => {
// when the Confirm Button in the modal is clicked
var button_clicked = event.target
var caller_id = button_clicked.closest("#confirmModal").getAttribute("caller-id");
var caller = document.getElementById(caller_id);
// open the url that was specified for the caller
window.location = caller.getAttribute("href");
};
});
</script>
base.html
<!DOCTYPE html>
<html>
<head>
{% load static %}
<title>Unisport</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
...
...
{% block content %}{% endblock content %}
...
...
</html>
Template : List of objects : Includes modal dialog html file
Includes modal dialog via {% include "web/product_confirm_delete-dialog.html" %}
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for object in object_list %}
{% include "web/product_confirm_delete-dialog.html" %}
<div class="col">
<div class="card">
<h5 class="card-header">{{object.name}}</h5>
<img class="card-img-top" src="{{object.image}}" alt="Card image">
<div class="card-body">
<p class="card-text">{{object.max_price}} {{object.currency.id}}</p>
<p class="card-text">{{object.min_price}} {{object.currency.id}}</p>
<p class="card-text">-{{object.discount_percentage}}%</p>
<p class="card-text">{{object.recommended_retail_price}} {{object.currency.id}}</p>
</div>
<div class="card-footer">
Info
Edit
<a
href="#confirmModal"
class="btn btn-primary"
data-toggle="modal"
data-target="#confirmModal"
id="product_{{object.id}}"
>
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
</div>
{% endblock content %}

Solved by using the correct tag to trigger the display of the modal dialog. I needed to use data-bs-toggle and data-bs-target for bootstrap 5. Previously, I was using data-toggle and data-target.
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for object in object_list %}
{% include "unisport_web/product_confirm_delete-dialog.html" %}
<div class="col">
<div class="card">
<h5 class="card-header">{{object.name}}</h5>
<img class="card-img-top" src="{{object.image}}" alt="Card image">
<div class="card-body">
<p class="card-text">{{object.max_price}} {{object.currency.id}}</p>
<p class="card-text">{{object.min_price}} {{object.currency.id}}</p>
<p class="card-text">-{{object.discount_percentage}}%</p>
<p class="card-text">{{object.recommended_retail_price}} {{object.currency.id}}</p>
</div>
<div class="card-footer">
Info
Edit
<a
href="#confirmModal"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#confirmModal"
id="product_{{object.id}}"
>
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
</div>
{% endblock content %}

Why edit is not working even code is correct

when I click on update, it is not updating. I don't know what to do. Everything is working except edit.
views.py:
def addnew(request):
if request.method == "POST":
form = BookForm(request.POST)
if form.is_valid():
try:
form.save()
return redirect('/')
except:
pass
else:
form = BookForm()
return render(request,'book/index.html',{'form':form})
def index(request):
books = Book.objects.all()
return render(request,"book/show.html",{'books':books})
def edit(request, id):
book = Book.objects.get(id=id)
return render(request,'book/edit.html',{'book':book})
def update(request, id):
book = Book.objects.get(id=id)
form = BookForm(request.POST,instance=book)
if form.is_valid():
form.save()
return redirect('/')
return render(request,'book/edit.html',{'book': book})
def destroy(request, id):
book = Book.objects.get(id=id)
book.delete()
return redirect("/")
urls.py:
from django.contrib import admin
from django.urls import path
from book import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index,name='index'),
path('addnew',views.addnew),
path('edit/<int:id>',views.edit),
path('update/<int:id>',views.update),
path('delete/<int:id>',views.destroy),
]
templates/books:
edit.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
{% block content %}
<div class="col-md-12">
<form method="post" class="post-form" action="/update/{{ book.id }}">
{% csrf_token %}
<div class="container">
<br>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<h3>Update Details</h3>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Book Id:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="id" id="id_id" required maxlength="20" value="{{book.id}}"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Book Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="name" id="id_name" required maxlength="100" value="{{book.book_name}}" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<button type="submit" class="btn btn-success btn-lg">Update</button>
</div>
</div>
</div>
</form>
{% endblock content %}
</body>
</html>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
{% block content %}
<div class="col-md-12">
<form method="post" class="post-form" action="/addnew">
{% csrf_token %}
<div class="container">
<br>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<!-- <h3>Enter Details</h3> -->
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Book Name:</label>
<div class="col-sm-4">
{{ form.book_name }}
</div>
</div>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</div>
{% endblock content %}
</body>
</html>
show.html:
{% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Book Records</h4> <span>Add New Book</span>
<br>
<div class="table-responsive">
<table id="bootstrapdatatable" class="table table-striped table-bordered" width="90%">
<thead>
<th><input type="checkbox" id="checkall" /></th>
<th>ID</th>
<th>Book Name</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
{% for book in books %}
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td>{{ book.id }}</td>
<td>{{ book.book_name }}</td>
<td><span style="color:brown;" class="glyphicon glyphicon-pencil"></span></p></td>
<td><span style="color:brown;" class="glyphicon glyphicon-trash"></span></p></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$('#bootstrapdatatable').DataTable({
"aLengthMenu": [[3, 5, 10, 25, -1], [3, 5, 10, 25, "All"]],
"iDisplayLength": 3
}
);
} );
</script>
</body>
</body>
</html>
{% endblock content %}
Here, edit is not working. when I click on update, it is not updating. I don't know what to do. Everything is working except edit.
please anyone tell me what to do.
I have tried several times.
forms.py:
from django import forms
from book.models import Book
class BookForm(forms.ModelForm):
class Meta:
model = Book
fields = ['book_name']
widgets = { 'book_name': forms.TextInput(attrs={ 'class': 'form-control' })}
models.py:
from django.db import models
# Create your models here.
class Book(models.Model):
book_name = models.CharField(max_length=100)
class Meta:
db_table = "book"

The template of your form is wrong. Pay attention that your form is waiting for you to send it a field called book_name:
class BookForm(forms.ModelForm):
class Meta:
model = Book
fields = ['book_name']
widgets = { 'book_name': forms.TextInput(attrs={ 'class': 'form-control' })}
However, in the template you are sending it the id field and a field called name:
<input type="text" class="form-control" name="id" id="id_id" required maxlength="20" value="{{book.id}}"/>
<input type="text" class="form-control" name="name" id="id_name" required maxlength="100" value="{{book.book_name}}" />
So, according your forms.py, you must to change the template like this:
<form method="post" class="post-form" action="/update/{{ book.id }}">
{% csrf_token %}
<div class="container">
<br>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<h3>Update Details</h3>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Book Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="book_name" id="id_book_name" required maxlength="100" value="{{book.book_name}}" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-1 col-form-label"></label>
<div class="col-sm-4">
<button type="submit" class="btn btn-success btn-lg">Update</button>
</div>
</div>
</div>
BTW, you could simplify all of this, using the power of Django like this:
<form method="post" class="post-form" action="/update/{{ book.id }}">
{% csrf_token %}
{{ form }}
<button type="submit" class="btn btn-success btn-lg">Update</button>
</form>
You should study the way in witch Django builds forms: https://docs.djangoproject.com/en/dev/topics/forms/

I Can't Solve NoReverseMatch at /events/ Error

I got this error when I add event with status false. There is no problem at status true:
NoReverseMatch at /events/
Reverse for 'event-detail' with arguments '('',)' not found. 1 pattern(s) tried: ['events/(?P<url_sistem>[^/]+)/$']
I couldn't see the cause of the error
It's my views.py file:
from django.shortcuts import render, get_object_or_404
from .models import Event
def event_list(request):
events_f = Event.objects.filter(status=False)
events_t = Event.objects.filter(status=True)
return render(request, 'etkinlik/event_list.html', {'events_f':events_f , 'events_t':events_t})
def event_detail(request, url_sistem):
event = get_object_or_404(Event, url_sistem=url_sistem)
return render(request, 'etkinlik/event_detail.html',{'event':event})
This is urls.py:
urlpatterns = [
path('', views.event_list, name='event_list'),
path('<str:url_sistem>/', views.event_detail, name='event-detail')
]
And this template file:
{% extends 'base.html' %}
{%block title%}Events | {%endblock%}
{% block content %}
<div class="container mt-4">
<div class="jumbotron">
<h4 class="display-4">Öne Çıkarılan Etkinlik</h4>
<p class="lead mb-5">Bu etkinlik şuandaki en önemli ve popüler etkinliktir. Katılabilen herkesin katılmasını isteriz</p>
{% if not events_t %}
<h2>Şu anda öne çıkarılan yok</h2>
{% else %}
{% for event_t in events_t %}
<a href="{% url 'event-detail' event_t.url_sistem %}" style="color:black;">
<div class="card mb-3" style="max-width:700px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="/media/{{ event_t.img_event }}" class="card-img" alt="etkinlik_foto">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{event_t.title}}</h5>
<p class="card-text">{{event_t.exp}}</p>
<p class="card-text"><small class="text-muted">Etkinlik Tarihi: {{event_t.event_date}}</small></p>
</div>
</div>
</div>
</div>
</a>
{% endfor %}
{% endif %}
</div>
{% for event_f in events_f %}
<a href="{% url 'event-detail' event_t.url_sistem %}" style="color:black;">
<div class="card mb-3" style="max-width:700px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="/media/{{ event_f.img_event }}" class="card-img" alt="etkinlik_foto">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{event_f.title}}</h5>
<p class="card-text">{{event_f.exp}}</p>
<p class="card-text"><small class="text-muted">Etkinlik Tarihi: {{event_f.event_date}}</small></p>
</div>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% endblock %}
Thanks in advance

<a href="{% url 'event-detail' event_t.url_sistem %}" style="color:black;">
Here in the url you need to replace event_t.url_sistem with event_f.url_sistem

is there is a solution for urls issues

I am building a web app using django and I get an error, I couldn't figure out what is the problem behind it.
I have three models( Category, SubCategory, Article) in my url I want something like that (localhost:8000/categories/Id_category/Id_subcategory)
the url (localhost:8000/categories/Id_category) worked perfectly but (localhost:8000/categories/Id_category/Id_subcategory) didn't work I get this error enter image description here
So here is my code that I tried to make it:
#views.py
def categorie(request):
Catégorie_list=Catégorie.objects.all()
context = {
'Catégorie_list':Catégorie_list,
}
return render(request,'articles/Category.html',context)
def souscategorie(request,categoryID):
SousCatégorie_list=SousCatégorie.objects.order_by('désignation').filter(Catégorie_identifiant_id=categoryID)
name_category=Catégorie.objects.get(id=categoryID)
articles=Article.objects.select_related('Sous_Catégorie__Catégorie_identifiant').filter(Sous_Catégorie__Catégorie_identifiant_id=categoryID)
context = {
'SousCatégorie_list':SousCatégorie_list,
'name_category': name_category,
'articles':articles
}
return render(request,'articles/SubCategory.html',context)
def articl(request,categoryID,articleID):
return render(request,'articles/article.html')
#articles/urls.py
urlpatterns=[
path('',views.categorie, name='Category'),
path('<int:categoryID>/',views.souscategorie, name='SubCategory'),
path('<int:categoryID>/<int:articleID>/',views.articl, name='article'),
path('search',views.search, name='search'),
]
#my template Category.html
{% if Catégorie_list %}
{% for category in Catégorie_list %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<a href="{% url 'SubCategory' category.id %}">
<img class="card-img-top" src="{{ category.photo_main.url }}" alt="{{ category.désignation }}"> </a>
<div class="card-body">
<div class="listing-heading text-center">
<a href="{% url 'SubCategory' category.id %}" style="text-decoration: none;">
<h4 class="text-primary" >{{ category.désignation }}</h4>
</a>
</div>
<hr>
<div class="listing-heading text-center">
<a class="text-primary" >{{ category.Description }}</a>
</div>
<hr>
Voir la catégorie
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="col-md-12">
<p>Aucune catégorie disponible</p>
</div>
{% endif %}
#my template Subcategory.html
<div class="row">
{% if articles %}
{% for article in articles %}
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="{{ article.photo_main.url }}" alt="">
<div class="card-body">
<h4 class="card-title">
{{ article.désignation }}
</h4>
<h5>{{ article.Sous_Catégorie }}</h5>
<p class="card-text">{{ article.Description }}</p>
</div>
<div class="card-footer">
<h6 class="text-muted">Ajouter au panier</h6>
</div>
</div>
</div>
{% endfor %}
{% else %}
<a class="list-group-item"> Aucune sous catégorie disponible</a>
{% endif %}
</div>

Django Allauth urls giving blank pages

I have installed Django-allauth on my site,
I made a modal with both login and signup in it,
the login and signup works ok (doh I have a problem that if the login isn't good it just freezes at a white page)
the problem is that under login, I have a forgot your password button,
but once clicked it redirect to http://127.0.0.1:8000/accounts/password/reset/,
but online show a white page, like the allauth templates, were not loaded
URLs
path('users/', include('users.urls')), #for allauth
url(r'^accounts/', include('allauth.urls')), #custom user
SETTINGS:
INSTALLED_APPS = [
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',
AUTH_USER_MODEL = 'users.CustomUser'
AUTHENTICATION_BACKENDS = (
'django.contrib.auth.backends.ModelBackend',
"allauth.account.auth_backends.AuthenticationBackend",
)
TEMPLATES ... # `allauth` needs this from django
'django.template.context_processors.request',
LOGIN_REDIRECT_URL = 'home'
LOGOUT_REDIRECT_URL = 'home'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_LOGOUT_ON_GET = True
ACCOUNT_LOGIN_ATTEMPTS_LIMIT =5
ACCOUNT_LOGIN_ATTEMPTS_TIMEOUT =1800
ACCOUNT_USERNAME_BLACKLIST =[]
ACCOUNT_UNIQUE_EMAIL =True
this is the button for forgotten password
<div>
<a class="forgotpass" href="{% url 'account_reset_password' %}">
{% trans "Forgot Password?" %}</a>
</div>
What did I do wrong ??
UPON REQUEST HERE IS THE WEBSITE BASE TEMPLATE:
<!DOCTYPE html>
<html lang="zxx" class="no-js">
{% load static from static %} {% load socialaccount %}{% load i18n %}
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href='{% static "/home/img/favicon.ico" %}'>
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Title -->
<title>Dr.Landivar</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!-- CSS -->
{% block css %}
{% endblock %}
<style>
.footer-social {
font-size: 1rem !important;
}
.comment {
margin: 20px 0px 20px 20px;
}
.banner-area {
background: url('{% static "/home/img/banner-bg.jpg" %}') no-repeat center;
}
.home-about-area:after {
background: url('{% static "/home/img/about-img.jpg" %}') no-repeat center center/cover;
}
.appoinment-area:after {
background: url('{% static "/home/img/appoinment-img.jpg" %}') no-repeat center center/cover;
}
.about-banner {
background: url('{% static "/home/img/top-banner.jpg" %}') center
}
.blog-home-banner {
background: url('{% static "/home/img/-blog/blog-home-banner.jpg" %}') bottom;
}
</style>
<script src="https://use.fontawesome.com/d2f653f275.js"></script>
</head>
<body>
<!-- Start header Area -->
<header id="header" id="home">
<div class="header-top">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-sm-6 col-4 header-top-left no-padding">
<a href="/">
<img src='{% static "/home/img/logo.png" %}' alt="" title="" />
</a>
</div>
<div class="col-lg-6 col-sm-6 col-8 header-top-right no-padding specialwidthphone">
<a class="btns" href="tel:+010101010">+1 050505050</a>
<a class="icons" href="tel:+953 012 3654 896">
<span class="lnr lnr-phone-handset"></span>
</a>
</div>
</div>
</div>
</div>
<div class="container main-menu">
<div class="row align-items-center justify-content-between d-flex">
<nav id="nav-menu-container">
<ul class="nav-menu">
<li>
Blog
</li>
<li>
{% trans "Videos" %}
</li>
<li>
{% trans "Online Appointments" %}
</li>
<li>
{% trans "Contact Us" %}
</li>
<li>
{% trans "Shop Online" %}
</li>
<li>
<a href="/cart">
<i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
</a>
</li>
<li id="sign-in">
{% if user.is_authenticated %}
<p id="welcome">{% trans "Welcome" %} {{ user.username }}</p>
<a id="dash" href="/dash">
<i class="fa fa-tachometer" aria-hidden="true"></i>
</a>
<a id="log" href="{% url 'account_logout' %}">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</a>
<p>
{% else %}
<!-- Button to Open the Modal -->
<div class="loginbtn">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
{% trans "Login" %}
</button>
</div>
<div class="modal-login">
<!-- The Modal For LOGIN -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- LOGIN Modal Header -->
<div class="modal-header">
<h3 class="modal-title">{% trans "Login" %}</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- LOGIN Modal body -->
<div class="modal-body">
<form action="{% url 'account_login' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
<label class="login" for="id_login">{% trans "Username or email:" %} </label>
<input id="id_login" name="login" placeholder="Username or e-mail" type="text" required />
<div>
<label class="password" for="id_password">{% trans "Password:" %} </label>
<input id="id_password" name="password" placeholder="Password" type="password" required />
</div>
<label class="remember" for="id_remember">{% trans "Remember Me:" %}</label>
<input id="id_remember" name="remember" type="checkbox" />
<div>
<button class="submit-btn btn btn-success btn-sm" type="submit">{% trans "Login" %}</button>
</div>
<div>
<a class="forgotpass" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
</div>
</form>
<hr id="line">
<form action="{% url 'account_signup' %}" method="post">
{% csrf_token %}
<h4 class="signinhere">{% trans "You are not signed in yet ? Sign in here" %}</h4>
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
<label class="user" for="id_username">{% trans "Username:" %} </label>
<input id="id_username" name="username" placeholder="Username" type="text" required />
<div>
<label class="email" for="id_email">{% trans "E-mail:" %}</label>
<input type="email" name="email" placeholder="E-mail address" required id="id_email">
</div>
<label class="pass1" for="id_password1">{% trans "Password:" %}</label>
<input type="password" name="password1" placeholder="Password" required id="id_password1">
<div>
<label class="pass2" for="id_password2">{% trans "Password (again):" %}</label>
<input type="password" name="password2" placeholder="Password (again)" required id="id_password2">
</div>
<div>
<button class="submit-btn btn btn-success btn-sm" type="submit">{% trans "Submit" %}</button>
</div>
</form>
</div>
<!-- LOGIN Modal footer -->
<div class="modal-footer">
<div>
<p class="specialgmail">
<i class="fab fa-google"></i>
<a id="gmail" href="{% provider_login_url 'google' %}">{% trans "Log In with Gmail" %}</a>
</p>
</div>
<button type="button" class="icon-right btn btn-danger" data-dismiss="modal">{% trans "Close" %}</button>
</div>
</div>
</div>
</div>
</div>
</p>
{% endif %}
</p>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- End header Area -->
{% block content %}
{% endblock%}
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6">
<div class="single-footer-widget">
<h6>{% trans "Navigate" %}</h6>
<ul class="footer-nav">
<li>
{% trans "Log In or Register" %}
</li>
<li>
{% trans "Help Center" %}
</li>
<li>
{% trans "Shipping Policy" %}
</li>
<li>
{% trans "Terms of Service" %}
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-footer-widget mail-chimp">
<h6 class="mb-20">{% trans "Contact Us" %}</h6>
<p>
{% trans "2060 Biscayne Blvd, Miami, FL 33137, EE. UU." %}
</p>
<h3>012-6532-568-9746</h3>
<h3>012-6532-568-97468</h3>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="single-footer-widget newsletter">
<h6>{% trans "Newsletter" %}</h6>
<p>{% trans "You can trust us. we only send promo offers, not a single spam." %}</p>
<div id="mc_embed_signup">
<form action="https://drlandivar.us19.list-manage.com/subscribe/post?u=a988793f3acfebb954fa9a95e&id=da7c864704"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"
novalidate>
<div class="form-group row" style="width: 100%">
<div class="col-lg-8 col-md-12">
<input name="EMAIL" placeholder="Your Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email Address '"
required="" type="email">
<div style="position: absolute; left: -5000px;">
<input name="b_a988793f3acfebb954fa9a95e_da7c864704" tabindex="-1" value="" type="text">
</div>
</div>
<div class="col-lg-4 col-md-12">
<button class="nw-btn primary-btn">{% trans "Subscribe" %}
<span class="lnr lnr-arrow-right"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row footer-bottom d-flex justify-content-between">
<p class="col-lg-8 col-sm-12 footer-text m-0">
</p>
<div class="col-lg-4 col-sm-12 footer-social">
<a href="https://www.facebook.com/Dr.Gus.Landivar/" target="_blank">
<i class="fa fa-facebook-square"></i>
</a>
<a href="https://plus.google.com/u/1/112018602499732214904?tab=mX" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a href="https://www.youtube.com/channel/UCl8nmbvMhlc5-os-2n7uSQg" target="_blank">
<i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
</div>
</footer>
<!-- End footer Area -->
{% block scripts %}
{% endblock%}
</body>
</html>

You should extend your base.html instead of allauth's base.html