Login form django using ajax - ajax

Question

I have a login form of Django and i want to redirect user to the landing page if the password and the username is matching and to show an alert message if the login is failed and eventually show a validation error if the form is submitted empty.
When i submit the form using the right credentials the user is logged but no message is shown on the form, on the server log i have this message
09/May/2019 23:35:52] "POST /login/ HTTP/1.1" 200 7560
when i submit an empty form i have this message
Bad Request: /login/
[09/May/2019 23:36:53] "POST /login/ HTTP/1.1" 400 0
and when i submit a wrong credentials i have this message
[09/May/2019 23:37:36] "POST /login/ HTTP/1.1" 200 61
This is my html form
<div id="cd-login"> <!-- log in form -->
<div class="login_div"></div>
<form id="login_form" class="cd-form" action="{% url 'login' %}" method="POST">
{% csrf_token %}
<p class="fieldset">
<label class="image-replace cd-email" for="signin-email">E-mail</label>
<input class="full-width has-padding has-border" id="username" type="text" name="username" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="signin-password">Password</label>
<input class="full-width has-padding has-border" id="password" type="text" name="password" placeholder="Password">
Hide
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input class="full-width" type="submit" value="Login">
</p>
</form>
<p class="cd-form-bottom-message">Forgot your password?</p>
<!-- Close -->
</div> <!-- cd-login -->
This is my views.py
def ajax_login(request):
if request.method == 'POST':
username = request.POST.get('username', '').strip()
password = request.POST.get('password', '').strip()
if username and password:
# Test username/password combination
user = authenticate(username=username, password=password)
# Found a match
if user is not None:
# User is active
if user.is_active:
# Officially log the user in
return render(request, 'issueresolver/landing_page.html')
else:
data = {'success': False, 'error': 'User is not active'}
else:
data = {'success': False, 'error': 'Wrong username and/or password'}
return HttpResponse(json.dumps(data), content_type='application/json')
# Request method is not POST or one of username or password is missing
return HttpResponseBadRequest()
This my js file
$('form').on('submit', function(e) { e.preventDefault()
$.ajax({
type:"POST",
url: $(this).attr('action'),
data: $('#login_form').serialize(),
beforeSend: function (xhr, settings) {
var csrftoken = Cookies.get('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
success: function(response){
/* here i am supposed to redirect user if login success and show an alert error message if the login is failed */
}
});
});
If any one can help me adjusting my code to be working as i described i will be more than grateful.

Answer 1

Finally i managed to solve the issue making some changes to the view.
This is the working code :
def ajax_login(request):
if request.method == 'POST':
username = request.POST.get('username', '').strip()
password = request.POST.get('password', '').strip()
response_data = {}
if username and password:
# Test username/password combination
user = authenticate(username=username, password=password)
# Found a match
if user is not None:
login(request, user)
response_data['result'] = 'Success!'
response_data['message'] = 'You"re logged in'
else:
response_data['result'] = 'Failed!'
response_data['message'] = 'Login Failed, Please check your credentials'
return HttpResponse(json.dumps(response_data), content_type="application/json")
return render(request, 'login.html')
ajax call
$('form').on('submit', function(e) { e.preventDefault()
$.ajax({
type:"POST",
url: $(this).attr('action'),
data: $('#login_form').serialize(),
beforeSend: function (xhr, settings) {
var csrftoken = Cookies.get('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
success: function(response){
if (response['result'] == 'Success!')
window.location = '/';
else
alert(response['message']);
}
});
});