Django: login user and refresh on same page withou

Question

I'm trying to use a bootstrap drop-down sign in form to have users login. I'm able to hard code my username and password and authenticate just fine but I'm trying to have a user login without going to a login screen. Here is my code:

Template: I use action to call the logUserIn url so that the form can post to that view.

<ul class="nav pull-right">
          {% if user.is_authenticated %}
          <li><a> Welcome {{ user.first_name }} </a></li>
          <li class="divider-vertical"></li>
          <li><a href="{% url 'caesarWorkflowApp.views.logUserOut' %}">Log Out</a></li>
          <li class="divider-vertical"></li>
          {% else %}
          <li class="dropdown">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
            <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
              <form action="{% url 'caesarWorkflowApp.views.logUserIn' %}" method="post" accept-charset="UTF-8">
                {% csrf_token %}
                <input id="user_username" style="margin-bottom: 15px;" type="text" name="username" placeholder="Username" size="30" />
                <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" placeholder="Password" size="30" />
                <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                <label class="string optional" for="user_remember_me"> Remember me</label>
                <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
              </form>
            </div>
          </li>
            {% endif %}
          <li class="divider-vertical"></li>
        </ul>

URLS:

urlpatterns = patterns('',
    url(r'^$', 'caesarWorkflowApp.views.home', name='default'),
    url(r'^$', 'caesarWorkflowApp.views.logUserIn'),
    url(r'^$', 'caesarWorkflowApp.views.logUserOut'),
)

VIEWS: Then I have this view for login which doesn't work because console never even print 'enter' even though the form is posting successfully. Am I posting wrong? Calling the wrong action? Does anyone know how to create a login/logout view without creating a template for it so that it just refreshes/redirects to the home page?

def logUserIn(request):
    if request.method == 'POST':
        print 'enter'
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(username=username, password=password)
        if user is not None:
            # the password verified for the user
            if user.is_active:
                login(request, user)
                print("User is valid, active and authenticated")

            else:
                print("The password is valid, but the account has been disabled!")
        else:
            # the authentication system was unable to verify the username and password
            print("The username and password were incorrect.")

    response = render_to_response('home.html', {}, context_instance=RequestContext(request))
    return response

I also want the page to not ask me if I want to reload since the it's post form and I believe this is the solution in case anyone is interested in that: Stop browsers asking to resend form data on refresh?

Thank you!

Answer 1

I couldn't get AJAX working so I just came up with this solution:

TEMPLATE:

<ul class="nav pull-right">
          {% if user.is_authenticated %}
          <li><a> Welcome, {{ user.first_name }} </a></li>
          <li class="divider-vertical"></li>
          <li><a href="/logout/">Log Out</a></li>
          <li class="divider-vertical"></li>
          {% else %}
          <li class="dropdown">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
            <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
              <form id="form-login" action="/" method="post" accept-charset="UTF-8">
                {% csrf_token %}
                <input id="user_username" style="margin-bottom: 15px;" type="text" name="username" placeholder="Username" size="30" />
                <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" placeholder="Password" size="30" />
                <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                <label class="string optional" for="user_remember_me"> Remember me</label>
                <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
              </form>
            </div>
          </li>
          <li class="divider-vertical"></li>
          {% endif %}
        </ul>

URLS:

urlpatterns = patterns('',
    url(r'^$', 'caesarWorkflowApp.views.home', name='default'),
    url(r'^login/$', 'caesarWorkflowApp.views.logUserIn'),
    url(r'^logout/$', 'caesarWorkflowApp.views.logUserOut'),
)

VIEWS:

def logUserIn(request):
    print 'enter'
    username = request.POST['username']
    password = request.POST['password']
    user = authenticate(username=username, password=password)
    if user is not None:
        # the password verified for the user
        if user.is_active:
            login(request, user)
            print("User is valid, active and authenticated")

        else:
            print("The password is valid, but the account has been disabled!")
    else:
        # the authentication system was unable to verify the username and password
        print("The username and password were incorrect.")

    response = render_to_response('home.html', {}, context_instance=RequestContext(request))
    return response

def logUserOut(request):
    logout(request)
    return HttpResponseRedirect('/')

Works perfectly and really nice looking! =)

Answer 2

What you are looking for is called AJAX. I always used jQuery to handle AJAX requests as it makes the job way easier.

Here is how I usually proceed:

1. Create an ajax application inside my Django project to keep my AJAX views and URLs away from the rest of my code (also, I like to re'use my apps. from one project to another)
2. Code the AJAX view and its URL inside the ajax application
3. Apply the AJAX request to my forms using jQuery

The template

<form id="form-login" action="" method="post">
{% csrf_token %}
<!-- Put your form here -->
<button type="submit">submit</button>
</form>

The JavaScript

$(document).ready(function() {
    $("#form-login").submit(function() {
        jQuery.ajax({
            "data":    $(this).serialize(),
            "type":    $(this).attr("method"),
            "url":     "{% url 'login-submit' %}",
            "success": function(response) {
                switch(response.code) {
                    // Do what you want with the received response
                }
            }
        });
        return false;
    });
});

The AJAX URL

urlpatterns = patterns('',
    url(r'^ajax/login/submit/$', 'path.to.login_submit', name='login-submit'),
)

The AJAX view

@require_AJAX
def login_submit(request, label):
    # Code here the logging logic 
    response = HttpResponse(json.dumps({'code':'42'}), content_type='application/json')
    return response

Please see this answer for the require_AJAX decorator.

I often use AJAX when it comes to submit form (not only logging), so I apply the above JavaScript code to all my forms (with $("form").submit(...);). But I then need to let the view know which form I am posting. Here is how I proceed in case you need it:

• First your URL should welcome an argument (the form's id for me)
• Then the associated view would be able to know which case to handle with the corresponding label