I'm trying to create a modal where you have a log-in form on the right-side and a registration form on the left. So far, I got the registration form to show-up in the modal, but I'm struggling to find a way to get the login form to show up next to it (instead I get two registration forms showing-up next to each other.) Does Crispy forms even allow for something like this?(two forms in the same modal)
Here's my code:
forms.py
from django import forms
from apps.accounts.models import CustomUser
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Fieldset, ButtonHolder, Submit, Field, Div
class AuthenticationForm(forms.Form):
username = forms.CharField(widget=forms.TextInput, label='username')
password = forms.CharField(widget=forms.PasswordInput, label='password')
def __init__(self, *args, **kwargs):
self.helper = FormHelper()
self.helper.form_method = 'POST'
self.helper.add_input(Submit('register', 'Register', css_class='btn btn-primary'))
self.helper.form_id = 'Crispy_LoginForm'
super(AuthenticationForm, self).__init__(*args, **kwargs)
class Meta:
fields = ['username', 'password']
class RegistrationForm(forms.ModelForm):
first_name = forms.CharField(widget=forms.TextInput, label='First Name')
last_name = forms.CharField(widget=forms.TextInput, label='Last Name')
email = forms.EmailField(widget=forms.TextInput, label='email')
username = forms.CharField(widget=forms.TextInput, label='username')
password1 = forms.CharField(widget=forms.PasswordInput, label='Enter your password')
password2 = forms.CharField(widget=forms.PasswordInput, label='Re-type your password')
def __init__(self, *args, **kwargs):
self.helper = FormHelper()
self.helper.form_method = 'POST'
self.helper.add_input(Submit('register', 'Register', css_class='btn btn-primary'))
self.helper.form_id = 'Crispy_RegistrationForm'
super(RegistrationForm, self).__init__(*args, **kwargs)
class Meta:
model = CustomUser
fields = ['first_name', 'last_name', 'email', 'username', 'password1', 'password2']
views.py
def login(request):
"""
User Log in View
"""
if request.method == 'POST':
form = AuthenticationForm(data=request.POST)
if form.is_valid():
user = authenticate(username=request.POST['username'], password=request.POST['password'])
if user is not None:
if user.is_active:
django_login(request, user)
return redirect('all_posts.html')
else:
form = AuthenticationForm()
return render_to_response('register.html', {
'form': form,
}, context_instance=RequestContext(request))
def logout(request):
"""
Log out view
"""
django_logout(request)
return redirect('/')
def register(request):
form = RegistrationForm(request.POST or None)
if request.method == 'POST':
if form.is_valid():
CustomUser = form.save()
CustomUser.save()
return redirect('all_posts.html')
else:
return render(request, 'register.html', {'form': form})
def all_posts(request):
post_list = TextPost.objects.all().order_by('-popularity')
paginator = Paginator(post_list, 100) # Show 100 contacts per page
form = RegistrationForm(request.POST or None)
page = request.GET.get('page')
try:
posts = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer, deliver first page.
posts = paginator.page(1)
except EmptyPage:
# If page is out of range (e.g. 9999), deliver last page of results.
posts = paginator.page(paginator.num_pages)
return render(request, 'all_posts.html', {'form': form})
register.html
{% load staticfiles %}
{% load crispy_forms_tags %}
{% block body %}
<HEAD>
<style>
.modal-dialog {
width: 808px;
}
.left-div {
float: left;
width: 392px;
padding-left: 8px;
}
.right-div {
width: 400px;
padding-left: 8px;
margin-left: 400px;
border-left-style: inset;
}
</style>
</HEAD>
<div class="modal" id="modal-1">
<div class="modal-dialog" id="box1">
<div class="modal-content">
<div class="left-div">
<form enctype="multipart/form-data" method="post" action="{{ register }}" id='Crispy_RegistrationForm'>
<div class="modal-header">
<h3 class="modal-title">Sign Up</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{ form|crispy }}
</div>
<div class="modal-footer">
<input type='submit' class="btn btn-primary" value="Sign up" />
</div>
</form>
</div>
<div class="right-div">
<form enctype="multipart/form-data" method="post" action="{{ login }}" id='Crispy_LoginForm'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Log In</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{ form|crispy }}
</div>
<div class="modal-footer">
<input type='submit' class="btn btn-default" value="Log in" />
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
