Session Expired Redirect / Session Refresher Using RadWindowManager and jQuery

32 posts, 0 answers
  1. dlamprey
    dlamprey avatar
    25 posts
    Member since:
    Jan 2007

    Posted 15 Oct 2009 Link to this post

    Requirements

    RadControls version Q1 2009
    .NET version

    2.0
    Visual Studio version

    2005
    programming language

    VB.NET (C# available on request)
    browser support

    all browsers supported by RadControls

     Additional Requirements
     jQuery 1.3.2

    PROJECT DESCRIPTION
    This control solves two problems. In a custom CMS we wrote, users were losing data when their sessions were expiring during editing of a page. We wanted to be able reset the users session countdown without having to refresh the page. The second problem is auto-redirecting a user to the login screen if they have been logged out due to session inactivity. This control displays a RadWindow confirm popup when there is 90 seconds left on a users session. If the user does not click the prompt within 90 seconds, they are redirected to a login page. Otherwise, the user will silently have their session timer refreshed.

    To implement the control, simply add it to a page whenever the user is logged in. If a user is not logged in, you can either not add the control to the page (optimal), or set it Visible = false.

     For more information about the control or help implementing it, respond to this thread.

    LogoutTimer.ascx

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="LogoutTimer.ascx.vb" 
        Inherits="ScreenMatter.Admin.Web.LogoutTimer" %> 
    <%@ Register Namespace="Telerik.Web.UI" TagPrefix="telerik" Assembly="Telerik.Web.UI" %> 
     
    <script type="text/javascript"
        function sm_timer(sessionLength, redirectUrl) { 
            var timeleft = sessionLength
            var prm = Sys.WebForms.PageRequestManager.getInstance(); 
            if (prm != null) { 
                prm.add_endRequest(function() { 
                timeleft = sessionLength
                }); 
            } 
            var modalVisible = false
            var displayElements = $('.sm_logoutTimer'); 
            function updateDisplay() { 
                if (displayElements != null) { 
                    var m = Math.floor(timeleft / 60); 
                    var s = timeleft % 60; 
                    displayElements.attr('innerHTML', m.toString() + ':' + (s <= 9 ? '0' : '') + s.toString()); 
                } 
            } 
            function logout_callback(arg) { 
                $.get(location.href); 
                modalVisible = false
                timeleft = sessionLength
            } 
            function checkPrompt() { 
                if (timeleft <= 120 && !modalVisible) { 
                    modalVisible = true
                    radconfirm('', logout_callback, 280, 140); 
                    displayElements = $('.sm_logoutTimer'); 
                } 
            } 
            function logout() { 
                document.location.href = redirectUrl
            } 
            function tick() { 
                if (timeleft <= 0) { 
                    logout(); 
                } else { 
                    updateDisplay(); 
                    checkPrompt(); 
                    setTimeout(tick, 1000); 
                } 
                timeleft--; 
            } 
            setTimeout(tick, 1000); 
        } 
    </script> 
     
    <telerik:RadWindowManager runat="server" ID="windowManager" Behaviors="Move" style="z-index:8000"
        <AlertTemplate></AlertTemplate
        <PromptTemplate></PromptTemplate
        <ConfirmTemplate> 
            <div class="rwDialogPopup radconfirm"
                <div class="rwDialogText"
                   You will be logged out due to inactivity soon.<br />Time until logged out: <span class="sm_logoutTimer"></span> 
                </div> 
                <div> 
                    <onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);"
                        <span class="rwOuterSpan"><span class="rwInnerSpan">Stay Logged In</span></span></a> 
                </div> 
            </div> 
        </ConfirmTemplate> 
    </telerik:RadWindowManager> 
     

    LogoutTimer.ascx.vb
    Public Partial Class LogoutTimer 
        Inherits System.Web.UI.UserControl 
     
        Private Shared SessionDurationInSeconds As Integer = System.Web.HttpContext.Current.Session.Timeout * 60 
        Private _logoutUrl As String 
     
        ''' <summary> 
        ''' When the user is logged out they will be redirected here. 
        ''' </summary> 
        Public Property LogoutUrl() As String 
            Get 
                Return _logoutUrl 
            End Get 
            Set(ByVal value As String
                _logoutUrl = value 
            End Set 
        End Property 
     
        Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load 
            Dim timeoutStartScript As String = String.Format("sm_timer({0},""{1}"");", SessionDurationInSeconds, LogoutUrl) 
            Page.ClientScript.RegisterStartupScript(GetType(LogoutTimer), "TimeoutStartScript", timeoutStartScript, True
        End Sub 
     
    End Class 

    Example implementation:

        Protected Sub OnLoad(ByVal e As System.EventArgs) 
            If Current.User.Identity.IsAuthenticated Then 
                Dim loginControl As Control = LoadControl("~/auth/controls/LogoutTimer.ascx"
                LoggedInPanel.Controls.Add(loginControl) 
            End If 
        End Sub 
     
      

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 16 Oct 2009 Link to this post

    Hello dlamprey,

    Thank you for the sample. Your points were updated.


    Kind regards,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. leesam
    leesam avatar
    11 posts
    Member since:
    Nov 2006

    Posted 21 Oct 2009 Link to this post

    Hi. I really thank you for sharing this code. I find it's very useful and try to use it in my project.

    I found a problem when I loaded this code in Masterpage so that all the child page inherited can get the message when session timeout. I found a problem when a child page already default with a timer control, this code will not work correctly. For example, if a child page with a timer control set to 1 minute refresh a AJAX control, then this code run up to 1min and auto reset to session.timeout period. I'd like your help to show me how to get around with this?

    One more thing, if we never post back after click on the "stay Login" button in the RadConfirm, I found that session will really expired? Is the code correct for this area? No need post back?
  4. Ivan Queiroz
    Ivan Queiroz avatar
    31 posts
    Member since:
    Oct 2009

    Posted 06 Nov 2009 Link to this post

    dlamprey,

    Thank you so much! This is a great help!

    I made one change, though: I used "Page_PreRender" as opposed to "OnLoad" to check user authentication and load the control, since using OnLoad meant I had to override the original method--actually, I tried, but the page did not render anything.

    Ivan
  5. Ivan Queiroz
    Ivan Queiroz avatar
    31 posts
    Member since:
    Oct 2009

    Posted 06 Nov 2009 Link to this post

    dlamprey,

    I found one issue: if a ModalPopupExtender is active, the RadWindow shows behind the ModalPopupExtender. I played with the z-index a little, but couldn't get it to show on top of the modal popup. Any ideas?

    Thanks again!

    Ivan
  6. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 09 Nov 2009 Link to this post

    Hi Ivan,

    The ModalPopupExtend has a very hight z-Index value. I suggest using IE Dev toolbar, Firebug or a similar tool to see what it is and then to set a higher z-Index to the RadWindowManager by using the style property.


    Regards,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. dlamprey
    dlamprey avatar
    25 posts
    Member since:
    Jan 2007

    Posted 09 Nov 2009 Link to this post

    leesam,
    A timer control keeps the session active, so this control would have to be modified to support it. I guess you would want to remove this bit:

     var prm = Sys.WebForms.PageRequestManager.getInstance();  
     if (prm != null) {  
         prm.add_endRequest(function() {  
         timeleft = sessionLength;  
         });  
    }  

    We are posting back when clicking the stay logged in button. The line is:

     $.get(location.href);  
  8. dlamprey
    dlamprey avatar
    25 posts
    Member since:
    Jan 2007

    Posted 09 Nov 2009 Link to this post

    I have updated this control with some new functionality and I should be reposting it soon. : )
  9. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 10 Nov 2009 Link to this post

    That's great to hear, dlamprey :)

    Send me a ticket with the new update when you are ready and I will upload it here right away.


    Best wishes,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Ivan Queiroz
    Ivan Queiroz avatar
    31 posts
    Member since:
    Oct 2009

    Posted 10 Nov 2009 Link to this post

    Thanks Georgi,

    The ModalPopupExtend z-index is 100001. I set the RadWindowManager to 200001, and it is fine now.

    Ivan
  11. Ivan Queiroz
    Ivan Queiroz avatar
    31 posts
    Member since:
    Oct 2009

    Posted 10 Nov 2009 Link to this post

    dlamprey, as you are working on this, may I make a suggestion?

    Suppose that someone is entering a long text. The user is active, but no request is sent to the server, so the warning window comes up a few minutes before the session expires. That is fine, except that the user may get confused—as far as they are concerned, they are active.

    So, what do you think about having keyboard events triggering the logout timer for the above specific situation? The logic would be the same as you have now, except that the warning window would not come up (you’d also need to have some type of property to let the script know whether to monitor keyboard events). Does this make sense? Maybe it could be as easy as adding some type of querystring to the redirect so that the windows doesn’t come up?

    Thanks again for developing this control! It's been a huge time saver for me.

    Ivan
  12. Manuel Ortiz
    Manuel Ortiz avatar
    68 posts
    Member since:
    Aug 2009

    Posted 25 Jun 2010 Link to this post

    Hi dlamprey,

    You said in a previous post that you had updated the control.  Have you posted or uploaded the new version somewhere??

    Thanks,
    Manuel
  13. Jason
    Jason avatar
    26 posts
    Member since:
    Nov 2006

    Posted 28 Jul 2010 Link to this post

    Hi,

    Did the updated control ever get uploaded?

    Cheers
  14. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 29 Jul 2010 Link to this post

    Hi Lourein,

    We didn't receive the update. Of course once we have it, we will upload it right away.


    Greetings,
    Georgi Tunev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  15. Tom M
    Tom M avatar
    33 posts
    Member since:
    Nov 2009

    Posted 23 Sep 2010 Link to this post

    Great Job! Many Thanks!

    Regards,
    Tom
  16. Trung
    Trung avatar
    1 posts
    Member since:
    Sep 2007

    Posted 13 Oct 2010 Link to this post

    Where do I download the lated updated version of this control?  Is C# version available?
  17. vrevzin
    vrevzin avatar
    1 posts
    Member since:
    Jun 2007

    Posted 24 Jan 2011 Link to this post


  18. Joe
    Joe avatar
    13 posts
    Member since:
    Jul 2010

    Posted 24 Feb 2011 Link to this post

    Anyone have the latest version of this code for download?
  19. Joe
    Joe avatar
    13 posts
    Member since:
    Jul 2010

    Posted 07 Mar 2011 Link to this post

    I now have a version of this user control functioning in a C# master page scenario.  Hope that this helps someone out...


    LogoutTimer.ascx.cs
    public partial class LogoutTimer : System.Web.UI.UserControl
    {
        //private static int SessionDurationInSeconds = System.Web.HttpContext.Current.Session.Timeout * 60;
        private static int SessionDurationInSeconds = 10;  // <-- change this for testing
     
        private string _logoutUrl;
     
        public string LogoutUrl
        {
            get { return _logoutUrl; }
            set { _logoutUrl = value; }
        }
     
        protected void Page_Load(object sender, System.EventArgs e)
        {
            string timeoutStartScript = string.Format("sm_timer({0},\"{1}\");", SessionDurationInSeconds, LogoutUrl);
            Page.ClientScript.RegisterStartupScript(typeof(LogoutTimer), "TimeoutStartScript", timeoutStartScript, true);
        }
     
    }

    LogoutTimer.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="LogoutTimer.ascx.cs" Inherits="LogoutTimer" %>
    <%@ Register Namespace="Telerik.Web.UI" TagPrefix="telerik" Assembly="Telerik.Web.UI" %>
     
    <script type="text/javascript">
        function sm_timer(sessionLength, redirectUrl) {
            var timeleft = sessionLength;
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function () {
                    timeleft = sessionLength;
                });
            }
            var modalVisible = false;
            var displayElements = $('.sm_logoutTimer');
            function updateDisplay() {
                if (displayElements != null) {
                    var m = Math.floor(timeleft / 60);
                    var s = timeleft % 60;
                    document.getElementById("sm_logoutTimer").innerHTML = m.toString() + ':' + (s <= 9 ? '0' : '') + s.toString()
                }
            }
            function logout_callback(arg) {
                $.get(location.href);
                modalVisible = false;
                timeleft = sessionLength;
            }
            function checkPrompt() {
                if (timeleft <= 120 && !modalVisible) {
                    modalVisible = true;
                    radconfirm('', logout_callback, 280, 140);
                    displayElements = $('u');
                }
            }
            function logout() {
                document.location.href = redirectUrl;
            }
            function tick() {
                if (timeleft <= 0) {
                    logout();
                } else {
                    updateDisplay();
                    checkPrompt();
                    setTimeout(tick, 1000);
                }
                timeleft--;
            }
            setTimeout(tick, 1000);
        }
    </script>
     
      
    <telerik:RadWindowManager runat="server" ID="windowManager" Behaviors="Move" Style="z-index: 200001">
        <AlertTemplate>
        </AlertTemplate>
        <PromptTemplate>
        </PromptTemplate>
        <ConfirmTemplate>
            <div class="rwDialogPopup radconfirm">
                <div class="rwDialogText">
                    You will be logged out due to inactivity soon.<br />
                    Time until logged out:
                    <div id="sm_logoutTimer">
                    </div>
                </div>
                <div>
                    <a onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);"><span class="rwOuterSpan"><span class="rwInnerSpan">Stay Logged In</span></span></a>
                </div>
            </div>
        </ConfirmTemplate>
    </telerik:RadWindowManager>

    On the master page include the following:
    <%@ Register TagPrefix="LT" TagName="LogoutTimer" Src="~/LogoutTimer.ascx" %>
     
    .....
     
     
     
        <LT:LogoutTimer LogoutUrl="Logout.htm" runat="server" ID="LogoutTimer" />

  20. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 08 Mar 2011 Link to this post

    Hello Joe,

    Thank you very much for the code - I am sure, that the community will benefit from it.

    Your points have been updated.

    Best wishes,
    Georgi Tunev
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  21. Syed Hussain
    Syed Hussain avatar
    5 posts
    Member since:
    Jun 2010

    Posted 26 Jun 2011 Link to this post

    Hi ,
    This code didn't worked for me, can someone give me a full example? Maybe i am missing some thing ....?

    Regards,
    Syed


  22. Tom M
    Tom M avatar
    33 posts
    Member since:
    Nov 2009

    Posted 27 Jun 2011 Link to this post

    Hey Syed,
    It would probably be helpful if you could describe how the code 'didn't work' for you. Were there errors? Unexpected behavior? etc.

    Thanks,
    Tom
  23. Syed Hussain
    Syed Hussain avatar
    5 posts
    Member since:
    Jun 2010

    Posted 27 Jun 2011 Link to this post

    Hi Tom,

    Thanks for quick response. Actually there is no error. That rad windows didn't  pop up and redirects to login page.

    Regards,
    Syed

  24. Roger
    Roger avatar
    38 posts
    Member since:
    May 2008

    Posted 08 Aug 2011 Link to this post

    Make sure you have jqeury, as specified in the requirements above.

  25. Brian
    Brian avatar
    9 posts
    Member since:
    Dec 2007

    Posted 03 Nov 2011 Link to this post

    Thanks for posting the updated code.  I've found it works great in Mozilla but I can't seem to get it to post anything back when using IE7.  The function is being called as an alert I stuck in there will pop up.  Using Fiddler I see no traffic to the server though.  I am using the jQuery library built into the Telerik 2011 Q1 Ajax library so I had to modify the  postback line to read
    $telerik.$.get(location.href);

    but as I said, this works fine in Mozilla.  Any ideas why it wouldn't work in IE7?  Should I try to use the latest version of the jQuery library directly?  Thanks.
  26. Greg
    Greg avatar
    29 posts
    Member since:
    Oct 2007

    Posted 28 Nov 2011 Link to this post

    Is there an updated VB version available? For Q1 2011 the following line generates an exception:

        var displayElements = $('.sm_logoutTimer');

    Error:
    Microsoft JScript runtime error: Object expected

    Can't get this code to run.
  27. Brian
    Brian avatar
    9 posts
    Member since:
    Dec 2007

    Posted 09 Feb 2012 Link to this post

    The issue with IE8 had to do with caching.  I changed

    $.get(location.href)

     to

    $.get(location.href, { ts: new Date().getTime() });

  28. Al
    Al avatar
    9 posts
    Member since:
    Oct 2012

    Posted 29 Mar 2012 Link to this post

    I use a variation that gives a countdown warning time (.e.g. 2mins). It was working fine until I found (for some reason) that it stopped showing the countdown time. Everything other aspect was ok. After a little tinkering I got it working again by changing innerHtml to html. Not sure  Hope that helps someone out.

    <script type="text/javascript">
        function sm_timer(sessionLength,warningSeconds,redirectUrl) {
            var timeleft = sessionLength;
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function () {
                    timeleft = sessionLength;
                });
            }
            var modalVisible = false;
            var displayElements = $('.sm_logoutTimer');
            function updateDisplay() {
                if (displayElements != null) {
                    var m = Math.floor(timeleft / 60);
                    var s = timeleft % 60;
                    displayElements.html(m.toString() + ':' + (s <= 9 ? '0' : '') + s.toString());
                }
            }
            function logout_callback(arg) {
                $.get(location.href, { ts: new Date().getTime() });
                modalVisible = false;
                timeleft = sessionLength;
            }
            function checkPrompt() {
                if (timeleft <= warningSeconds && !modalVisible) {
                    modalVisible = true;
                    radconfirm('Session Timeout Warning!', logout_callback, 350, 120);
                    displayElements = $('.sm_logoutTimer');
                }
            }
            function logout() {
                document.location.href = redirectUrl;
            }
            function tick() {
                if (timeleft <= 0) {
                    logout();
                } else {
                    updateDisplay();
                    checkPrompt();
                    setTimeout(tick, 1000);
                }
                timeleft--;
            }
            setTimeout(tick, 1000);
        
    </script>
  29. Dave
    Dave avatar
    17 posts
    Member since:
    Jul 2005

    Posted 12 Dec 2012 Link to this post

    Ok, I managed to ALMOST get this to work by adding the control to an Ajax panel.

    The problem I face is the message text is not being presented to the user. The countdown is also not being presented.

    All I see is a (squished) version of the icon image and the 2 buttons.

    I tried resizing the dialog but it does not fix the image or present the text.

    Does anyone actually have this working and if so, what needs to be done?

    I've tried it in both IE and Firefox with the same results.


  30. Sid
    Sid avatar
    16 posts
    Member since:
    Sep 2010

    Posted 08 Oct 2013 Link to this post

    Hi, I run into same problem as Dave. Any updates for this?
Back to Top