Django authentication without reloading page

Question

I'm rather new to front-end web programming and am trying to mimic the iCloud.com login page. I have the whole layout. I have functions for the transition on successful login as well as the shake on unsuccessful login but I can't for the life of me figure out how to check user authentication with django without changing pages, and then activate these functions accordingly. I can't get ajax or anything to work.

Anyone have any idea how this is done that can point me in the right direction. Right now I'm pretty sure what I'm trying to do is submit an ajax form.

Answer 1

User authentication is nothing special. And it works the same for both ajax and non ajax views.

I suggest you implement authentication without ajax first. Confirm it is working and then go for the ajax.

But the simple example would be:

1) Add login url to urls

from django.contrib.auth import views as auth_views
....
url(r'^authenticate/$',
        auth_views.login,
        {'template_name': 'yourapp/login.html'},
        name='auth_login'),

As you can see you can give template as keyword argument to that view. So you can use djangos own auth view for authenticating with your template

2) Add link to your page which, after clicking on it. Does get request and reads the template and puts it into some kind of modal. This is relatively easy and many jQuery modal plugins support this feature. I've not user jQuery for years now so finding solid example is probably just as easy for you as it is for me

3) Modal window will present your own login.html. In that file you post the form to the same url where it came from. You do it by setting form action attribute to {{ request.get_full_path }}

4) You also have to implement some js code which will reset form on submit to display login errors.

5) After successful submit comes probably the hardest part as you have to do most coding here. After logging in using django view, you get redirected if you do not use ajax. You can handle it two ways - expect it and use returned redirect as as hint that you can display "login success" message or make another ajax request to your server to get "login successful" template and refresh the areas of your site which need to display the login (logged in or not) status.