Changes between Initial Version and Version 1 of AjaxDojoLogin

Timestamp:

Jun 12, 2006, 12:10:47 AM (18 years ago)

Author:

coulix

Comment:

--

AjaxDojoLogin

@@ +1 @@
+== Adding an ajax login form to your project ==
+
+Assuming you have a project running and using the normal authentification scheme providen by django, it would be nice not to reaload the page to show errors about login and password when the login is wrong.
+
+We need to add a specific method to your project view.py lets call it '''loginajax'''.
+Simple we do a copy / past from '''/django/contrib/auth/view.py''' method login.
+we just change the return answers.
+
+{{{
+#!python
+def loginajax(request):
+        manipulator = AuthenticationForm(request)
+        redirect_to = request.REQUEST.get(REDIRECT_FIELD_NAME, '')
+        if request.POST:
+                errors = manipulator.get_validation_errors(request.POST)
+                if not errors:
+                        if not redirect_to or '://' in redirect_to or ' ' in redirect_to:
+                                redirect_to = '/accounts/profile/'
+                        request.session[SESSION_KEY] = manipulator.get_user_id()
+                        request.session.delete_test_cookie()
+                        return HttpResponse(redirect_to)
+                else:
+                        return HttpResponse("false")
+}}}
+
+Now let change our '''ur.py'''
+You shoudl still keep the normal one r^login/$  and add the new one.
+{{{
+#!python
+[..]
+        (r'^login/$',  'django.contrib.auth.views.login'),
+        (r'^login/ajax/$',  'cefinban.views.loginajax'),
+[...]
+}}}
+
+
+We then need to add the dojo magic to our login page.
+id = loginForm refer to our <form id="loginform" ..>
+If you are confuse see [wiki:AjaxDojoFormSub], similar code is more detailed there.
+{{{
+    var sendLoginButton;        
+        
+    function sendLogin(){
+      dojo.io.bind({
+                    url: '/login/ajax/',
+                    handler:sendLoginCallback,
+                    formNode: dojo.byId('loginform'),
+                    method: 'POST'  
+                });
+      // let hide the form
+      dojo.byId("loginform").style.display = "none";
+      dojo.byId("messagestatus").innerHTML = "<p>Loading ...</p>"; 
+    }
+
+    function sendLoginCallback(type, data, evt) {
+    if (type == 'error')
+        alert('Error when retrieving data from the server!');
+    else
+        if (data === "false") {
+                 dojo.byId("loginform").style.display = ""; 
+                 dojo.byId("messagestatus").innerHTML = "<span id='error'> Your password or username is invalid</span>";
+                 dojo.event.disconnect(sendLoginButton, 'onclick', 'sendLogin');
+                 var anim = dojo.lfx.html.highlight("messagestatus", [255, 0, 0], 200).play(100);
+                 dojo.event.connect(anim, "onEnd", function() {  dojo.event.connect(sendLoginButton, 'onclick', 'sendLogin'); });
+                 
+        }
+        else {
+                 window.location=data;
+        }
+    }
+  
+    function init(){
+        sendLoginButton = dojo.byId('loginButton');
+        // disable form posting when js used
+        var loginForm = dojo.byId('loginform');
+        loginForm.onsubmit = function() { return false; }
+        dojo.event.connect(sendLoginButton, 'onclick', 'sendLogin');
+    }
+ 
+    dojo.addOnLoad(init);
+}}}
+
+
+Note you can go further by not redirecting to a login_ok page but updating the appropriate field, like the header part of your page 
+telling you if you are a registred user or not (if you have such a thing).
+