'how do i switch between two form on a page with login and sign up views in django
I have a page that has both login and sign up form in the html. so when one is active, the other is hidden but any time i try to login, the sign up form is displayed instead of the login form. the sign up tab works but the login tab does not.
This is my html page:
<div class="form-box">
<div class="form-tab">
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link" id="signin-tab-2" data-toggle="tab" href="#signin-2" role="tab" aria-controls="signin-2" aria-selected="false">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="register-tab-2" data-toggle="tab" href="#register-2" role="tab" aria-controls="register-2" aria-selected="true">Register</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="signin-2" role="tabpanel" aria-labelledby="signin-tab-2">
<form action="{% url 'estores:login' %}" method="POST">
{% csrf_token %}
<div class="form-group">
<label for="singin-email-2">Username or email address *</label>
<input type="text" class="form-control" id="singin-email-2" name="username" required>
</div><!-- End .form-group -->
<div class="form-group">
<label for="singin-password-2">Password *</label>
<input type="password" class="form-control" id="singin-password-2" name="password" required>
</div><!-- End .form-group -->
<div class="form-footer">
<button type="submit" name="login" class="btn btn-outline-primary-2">
<span>LOG IN</span>
<i class="icon-long-arrow-right"></i>
</button>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="signin-remember-2">
<label class="custom-control-label" for="signin-remember-2">Remember Me</label>
</div><!-- End .custom-checkbox -->
<a href="#" class="forgot-link">Forgot Your Password?</a>
</div><!-- End .form-footer -->
</form>
<div class="form-choice">
<p class="text-center">or sign in with</p>
<div class="row">
<div class="col-sm-6">
<a href="#" class="btn btn-login btn-g">
<i class="icon-google"></i>
Login With Google
</a>
</div><!-- End .col-6 -->
<div class="col-sm-6">
<a href="#" class="btn btn-login btn-f">
<i class="icon-facebook-f"></i>
Login With Facebook
</a>
</div><!-- End .col-6 -->
</div><!-- End .row -->
</div><!-- End .form-choice -->
</div><!-- .End .tab-pane -->
<div class="tab-pane fade show active" id="register-2" role="tabpanel" aria-labelledby="register-tab-2">
<form action="{% url 'estores:signup' %}" method="POST">
{% csrf_token %}
{{form.errors}}
<div class="form-group">
<label for="username">Your username *</label>
{{form.username}}
<!-- <input type="email" class="form-control" id="register-email-2" name="register-email" required> -->
</div><!-- End .form-group -->
<div class="form-group">
<label for="register-email-2">Your email address *</label>
{{form.email}}
<!-- <input type="email" class="form-control" id="register-email-2" name="register-email" required> -->
</div><!-- End .form-group -->
<div class="form-group">
<label for="register-password-1">Password *</label>
{{form.password1}}
<!-- <input type="password" class="form-control" id="register-password-2" name="register-password" required> -->
</div><!-- End .form-group -->
<div class="form-group">
<label for="register-password-2">Password *</label>
{{form.password2}}
<!-- <input type="password" class="form-control" id="register-password-2" name="register-password" required> -->
</div><!-- End .form-group -->
<div class="form-footer">
<button type="submit" class="btn btn-outline-primary-2">
<span>SIGN UP</span>
<i class="icon-long-arrow-right"></i>
</button>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="register-policy-2" required>
<label class="custom-control-label" for="register-policy-2">I agree to the <a href="#">privacy policy</a> *</label>
</div><!-- End .custom-checkbox -->
</div><!-- End .form-footer -->
</form>
<div class="form-choice">
<p class="text-center">or sign in with</p>
<div class="row">
<div class="col-sm-6">
<a href="#" class="btn btn-login btn-g">
<i class="icon-google"></i>
Login With Google
</a>
</div><!-- End .col-6 -->
<div class="col-sm-6">
<a href="#" class="btn btn-login btn-f">
<i class="icon-facebook-f"></i>
Login With Facebook
</a>
</div><!-- End .col-6 -->
</div><!-- End .row -->
</div><!-- End .form-choice -->
</div><!-- .End .tab-pane -->
</div><!-- End .tab-content -->
</div><!-- End .form-tab -->
</div><!-- End .form-box -->
This is my signup and login views:
def signup(request):
form = SignUpForm()
if request.method == 'POST':
form = SignUpForm(request.POST)
if form.is_valid():
form.save()
username = form.cleaned_data.get("username")
email = form.cleaned_data.get("email")
password1 = form.cleaned_data.get("password1")
password2 = form.cleaned_data.get("password2")
new_user = authenticate(username=username, email=email, password=password1, password2 = password2)
if new_user is not None:
login(request, new_user)
messages.success(request, 'Account created for '+ username )
return redirect('estores:home')
context = {
'form': form
}
return render(request, 'login.html', context)
def loginPage(request):
if request.method == 'POST' and 'login' in request.POST:
username = request.POST.get('username')
password = request.POST.get('password')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
redirect('estores:home ')
context = {}
return render(request, 'login.html', context)
This is my urls:
path('signup/', signup, name='signup'),
path('login/', loginPage, name='login')
The views work for signup and it selects the signup form from the html page and process the user's input data but it doesn't work for the input. the input tab is not selected and when i manually navigate there, it doesn't show the input fields at all.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|