Using Bootstrap Model with Django classed based views to implement login function - django

Question

I have created loginview using class-based view concept as following:
class LoginView(NextUrlMixin,RequestformattachMixin,FormView):
form_class = login_page
template_name = 'login.html'
success_url = '/'
def form_valid(self, form):
next_url=self.get_next_url()
return redirect(next_url)
def form_invalid(self, form):
return super().form_invalid(form)
forms.py:
class login_page(forms.Form):
Email = forms.EmailField(required=True,widget=forms.EmailInput(
attrs={"class": "form-control", "placeholder": "Email
address", "id": "exampleInputEmail2"}))
Password = forms.CharField(required=True,widget=forms.PasswordInput(attrs={"class": "form-control",'id':'exampleInputPassword2',
"placeholder": "Password"}))
I have modified on my login.html page to use bootstrap modal as the following:
{% block content %}
<div id="loginModal" class="modal fade">
<div class="loginModal-content">
<div class="loginModal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4> </div><div class="loginModal-body">
<div class="row">
<div class="col-md-12"> via <div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
{# <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>#}
{# {{ form.Email }}#}
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
{# <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>#}
{# {{ form.Password }}#}
<div class="help-block text-right">
Forgot the password ?
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
{{ form }}
</div>
</form>
</div>
<div class="bottom text-center"> New here ?
<b>Join Us</b> </div></div></div>
<div class="loginModal-footer">
</div>
</div>
</div>
{% endblock %}
As I am a newbie in Django, could you please help me how to use the bootstrap modal with my Django CBV
or even how to start as when I started using the Modal it is failed to appear, should I use ajax or what are other technologies should I use. please help from where could i start

Answer 1

Ok, the best way to render fields in django is django-widget-tweaks, this very simple and render all the error and fields with adding classes to that field.
Follow the installation of it - https://github.com/jazzband/django-widget-tweaks
here is simple and full guide of using django-widget-tweaks
I always suggest to use it, hope it will help you.

Answer 2

The plugin I wrote could be your starting point django-bootstrap-modal-forms. If you check the examples project you will also find a fully functional Login and Signup form in modals. You will be able to bind any form to the modal and all of the validation stuff will work out of the box.
You will create a trigger element opening the modal
Your selected form will be appended to the opened modal
On submit the form will be POSTed via AJAX request to form's URL
Unsuccessful POST request will return errors, which will be shown under form fields in modal
Successful POST request will redirects to selected success URL