Make your LoginWidget react to a clientside login

November 27, 2013
Personally I miss the old click, postback, login of Sitefinity Forms Auth.  The problem with the client Auth is if there's "lag" waiting for the server to respond...user sees zero feedback in the native widget.  However, the clientside ajax claims method lets us do some neat things where we don't need to modify teleriks code :)

jQuery has a few global methods you can hook into that will let you know when an ajax call is taking place.  So on a page like a dedicated login where the ONLY ajax would be the LoginWidget this works great!

This code assumes you've cached your jQuery selector to $loginPage.loginWidget.  Feel free to modify as you need.  You SHOULD cache it, just...you know...remember it's a jquery object in this case.

var longTimeout = null; //Variable to hold the timeout
 
//User has clicked Login
$(document).ajaxStart(function () {
    $loginPage.loginWidget.addClass("authenticating");
 
    longTimeout = setTimeout(function () {
        $loginPage.loginWidget.addClass("longwait");
    }, 3000);
});
 
//Auth Callback is done
$(document).ajaxComplete(function () {
    clearTimeout(longTimeout);
    $loginPage.loginWidget.addClass("success");
});
 
//PROBLEM!
$(document).ajaxError(function () {
    clearTimeout(longTimeout);
    $loginPage.loginWidget.addClass("auth-error");
 
    //Clears the error message after 1.5 seconds
    setTimeout(function () {
        $loginPage.loginWidget.removeAttr("class");
    }, 1500);
});

Also please note...the classes I'm adding are to hide and show messages...you could just as easily change the message text with jquery directly in this script.

This code also has a "long" mode where if for some reason the login is just godawful slow, the user won't worry that it's frozen.  I like to hide or disable the login button when it's "authenticating" so they can't click it again.

Steve


Image Description

Steve McNiven-Scott

Best\Only Blogger on this site. Therefore defacto blogger of the year Award Winner.