11

I am using django-allauth for one of my project. I would like to implement login/signup process via ajax. I would like to have customized signup form. I was going through their signupmixin and signup form. Sounds like I can write custom views for each action and map it to the url config. I am not sure what is the best way to do this.

Thank you so much for any help or advice on this.

San
  • 542
  • 6
  • 21

1 Answers1

10

It depends a bit on what you mean by ajax. If you just want to have a popup-style login/signup box on every page, then you can simply add the form to your base template and show it dynamically using Javascript in a popup box or so. If you keep the form action url to the original allauth urls then this will already give the feel of an ajax signin. You could also tweak things by using $.ajax or $.post to post to the original allauth views.

Something like the above is done on http://officecheese.com/ -- this is an allauth based site, though I am not affiliated with it.

If by ajax you mean that all authentication related views should be displayed via ajax, without causing a new document reload, then I am afraid you are a little bit out of luck. This simply is problematic for scenario's where e-mail verification, or OAuth handshakes are involed, as here you are typically navigating to a new URL from your mailbox, or redirecting to Twitter and so on.

pennersr
  • 6,306
  • 1
  • 30
  • 37
  • 1
    Hi @pennersr, great to have your reply. I would like to implement a form in dropdown which is similar to what officecheese.com doing. but if there is an error, lets say "invalid username or password" or "Username already exists". I would like to get this error right there before actually navigating. So, whats my plan is submit the form via `$.post` and to have json response for login and signup. Thank you so much for helping me out in this. – San Apr 24 '13 at 10:27
  • 1
    You can inspect the response to your `$.post/ajax` call, extract the form html (containing the validation errors), and replace your original form. Something like: `$("...oldForm...")).replaceWith($(ajaxresponse).find("form"))`. Detecting the login success URL redirect may become a bit messy, you would need to detect that you end up at the login redirect url. Overriding the views to return structured JSON data is cleaner though. Then again, why go through the trouble of trying to ajaxify this -- sites like Twitter don't do this either. – pennersr Apr 25 '13 at 12:50
  • @pennersr aside from hardcoding the id into the base templates, or using class-based views, is there a way to include the form in all my function-based views without having to add that to every view? – wasabigeek Jul 10 '15 at 03:22