Hi
I am trying to create a wbesite where i want to have a popup for the registartion and login in the same page i am trying to do it by having a register.html and login.html, when i open each page the popup works but when i use the nav by using the following code it just opens the page but doesn’t open the popup!!
a class=“btn btn-primary” data-bs-toggle=“modal” href=“{% url ‘register’ %}#register” role=“button”>register
the issue is that it doesn’t open the popup by its ID it just routes me to the register page !!
You can use something like Modal for this as you need to open a simple window. If you have register.html and login.html files and you are navigating directly to these template views then you page will be redirected to the specific page. This is for your reference Modal · Bootstrap v5.3 take a look at this.
actually i am using modal in register.html what i am trying to do is that i want to access it directly from my home page, i can send you my code if it helps ?
Yes please share the code, it will help
base.html
{% load static %}
{% block title %}{% endblock title %} | {% include 'layouts/navbar.html' %} {% include 'forms/register.html' %}{% block content %}
{% endblock content %}
i am not able to share the code here so kindly find it in this link forms.py and 3 other files | Files.fm.
I am sorry please use this link as the other one had some changes that didn’t work out base.html and 4 other files | Files.fm.
These are your views right? and you want to handle your signup and login Modal to be handled within every page right? if so then share your login Modal’s code.
def index(request):
return render(request, 'index.html')
def loginUser(request):
page = 'login'
# if request.user.is_authenticated:
# return redirect('main')
if request.method == 'POST':
username = request.POST['username'].lower()
password = request.POST['password']
try:
user = User.objects.get(username=username)
except:
messages.error(request, 'Username does not exist')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return redirect(request.GET['next'] if 'next' in request.GET else 'account')
else:
messages.error(request, 'Username OR password is incorrect')
context = {'page': page}
return render(request, 'forms/login.html', context)
You can find my entire code on this link base.html and 4 other files | Files.fm.
I don’t see anything related to Modal or login/signup in these codes. share the navbar.html it might have your Modal and other related code.
i uploaded the entire folder but apparently it only accepts files login.html and 2 other files | Files.fm.
In your navbar.html I can see this data-bs-toggle=“modal”, but still there is no code of Modals in it as well.
<button data-bs-toggle="modal" onclick="myFunction()" class="landing_H_button" href="{% url 'login' %}#login" type="button">Login</button>
<a class="btn btn-primary" data-bs-toggle="modal" href="{% url 'register' %}#register" role="button">register</a>
the code for it is on register.html and login.html
Instead of sharing code files in the links you can share the code here.
login.html
{% load static %}
{% load socialaccount %}
<div class="auth">
<div class="card">
<div class="auth__header text-center">
<span id="regbackbtn"> <i class="fa-solid fa-angle-left"></i> </span>
<div class="login_center">
{% comment %} <a href="/">
<img src="{% static 'images/logo.png' %}" alt="icon" />
</a> {% endcomment %}
</div>
<div class="login_center">
<h>Welcome back</h>
</div>
</div>
<div class=login_ovalbtn2>
<span class="login_span">
<img src="{% static 'images/google icon.png' %}"/>
<a id = "social" href="{% provider_login_url 'google' %}?next=">Log in with Google</a>
</span>
</div>
<br>
<div class=login_ovalbtn2>
<span class="login_span">
<img src="{% static 'images/facebook icon.png' %}"/>
<a id = "social" href="{% provider_login_url 'google' %}?next=">Log in with Facebook</a>
</span>
</div>
<br>
<div class="rule">
<div class="line"><div></div></div>
<div class="words"><h>OR</h></div>
<div class="line"><div></div></div>
</div>
<!-- <div class="login_div"> <h> OR </h></div> -->
<form action="" method="POST" class="form">
{% csrf_token %}
<!-- Input:Username -->
<div class="form__field">
<label class="login_label" for="formInput#text">Email Address </label>
<div class="login_textbox1" onclick="login_txtboxchange">{{form.email}}</div>
</div>
<br>
<!-- Input:Password -->
<div class="form__field">
<label class="login_label" for="formInput#password">Password </label>
<div class="login_textbox1" onclick="login_txtboxchange">{{form.password1}}</div>
</div>
<br>
<div>
<label class="login_label" for="stay"><input type="checkbox" id="stay" name="stay" unchecked />Stay Logged in</label>
<a href="{% url 'reset_password' %}" style="font-family: 'Poppins';padding-left: 70px;" >Forget Password?</a>
</div>
</form>
{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="alert alert-danger alert-dismissible fade show"> {{ error}}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endfor %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
<div class="modal-footer">
<div class="login_ovalbtn">
<input class="login" type="submit" value="Login" />
</div>
</div>
</div>
</div>
register.html
{% include ‘base.html’ %}
{% load static %}
{% load socialaccount %}
<div class="login_center">
<a href="/">
<img src="{% static 'images/logo.png' %}" alt="icon" />
</a>
<br>
<h>Sign up your new Account.<h>
</div>
<form method="POST" action="{% url 'index' %}" class="form auth__form">
{% csrf_token %}
<div id="reg1" style="display: flex;" class="form__field">
<div class = "field">
<label for="formInput#text">{{form.first_name.label}}</label>
{{form.first_name}}
{% for error in form.first_name.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<div class = "field">
<label for="formInput#text">{{form.last_name.label}}</label>
{{form.last_name}}
{% for error in form.last_name.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<div class = "field">
<label for="formInput#text">{{form.mobile.label}}</label>
{{form.mobile}}
{% for error in form.mobile.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<div class = "field">
<label for="formInput#text">{{form.email.label}}</label>
{{form.email}}
{% for error in form.email.errors %}
<p class="error">{{error}}</p>
{% endfor %}
</div>
<br>
</div>
</div>
<div class="modal-footer">
<input type="button" class="ovalbtn" data-bs-target="#register2" data-bs-toggle="modal" value="Continue"/>
</div>
</div>
</div>
Sign up your new Account.
{{form.username.label}}
{{form.username}}
{% for error in form.username.errors %}
{{error}}
{% endfor %}
{{form.password1.label}}
{{form.password1}}
{% for error in form.password1.errors %}
{{error}}
{% endfor %}
Confirm Password
{{form.password2}}
{% for error in form.password2.errors %}
{{error}}
{% endfor %}
Continue
Select your country and city of residence.
{{form.country.label}}
{{form.country}}
{% for error in form.country.errors %}
{{error}}
{% endfor %}
{{form.city.label}}
{{form.city}}
{% for error in form.city.errors %}
{{error}}
{% endfor %}I agree with Terms and Conditions by creating an account
Continue
{{ error}}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endfor %}
{% endfor %}
{% endif %}
it explain more if i open it from localhost:8000/register it works
but if i try to open it from the home page localhost:8000 it doesn’t redirect to it and i get this error in the console
Uncaught TypeError: Cannot read properties of undefined (reading ‘classList’)
at Modal._isAnimated (bootstrap.js:3043:28)
at Modal._initializeBackDrop (bootstrap.js:2913:26)
at new Modal (bootstrap.js:2799:29)
at Modal.getOrCreateInstance (bootstrap.js:730:43)
at HTMLAnchorElement. (bootstrap.js:3158:24)
at HTMLDocument.handler (bootstrap.js:411:23)
_isAnimated @ bootstrap.js:3043
_initializeBackDrop @ bootstrap.js:2913
Modal @ bootstrap.js:2799
getOrCreateInstance @ bootstrap.js:730
(anonymous) @ bootstrap.js:3158
handler @ bootstrap.js:411
okay, so first thing is in your navbar, here you have href="{% url 'login' %}#login" this will execute the loginUser view and in your loginUser you have specified return render(request, 'forms/login.html', context) and this line will render the particular template i.e forms/login.html.
In your login.html you have <form action="" method="POST" class="form"> you can specify action="{% url 'login' %}" and can handle everything within that view by changing loginUser view code like this
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return redirect(".")
i followed your instruction and still when i press on login it doesn’t redirect me and the popup doesn’t work
<button data-bs-toggle="modal" onclick="myFunction()" class="landing_H_button" href="{% url 'login' %}#login" type="button">Login</button>
Change this code as
<button class="landing_H_button" data-toggle="modal" data-target="#login">Login</button>
and update the Modal’s target id with only login