How to display a popup message before the FormAuthentication timeout in rad notification.

4 posts, 0 answers
  1. Ashesh
    Ashesh avatar
    14 posts
    Member since:
    May 2013

    Posted 01 Jul 2013 Link to this post

    I am trying to display a warning message saying your session is about to expire 2 min before the form authentication time out. It can be in  in radnotification or in radwindows. Please if anybody knows anything let me know.

    Thanks for help.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Jul 2013 Link to this post

    Hi Ashesh,

    Please have a look at the following code I tried which works fine at my end. The session expiration time is set to 4 minutes and the notification will be shown after the first two minutes.

    ASPX:
    <div>
        <div class="clockSession">
            <div class="contSession">
                <div class="sesseionExpire">
                    Your Session will expire in
                    <%= Session.Timeout %>
                    minutes</div>
                <div class="showNotification">
                    Notification will be shown in:</div>
                <div class="timeRemain">
                    <span class="timeSeconds"><span id="mainLbl">120 </span></span>seconds</div>
            </div>
        </div>
        <telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240"
            Height="100" OnCallbackUpdate="OnCallbackUpdate" OnClientShowing="OnClientShowing"
            OnClientHidden="OnClientHidden" LoadContentOn="PageLoad" AutoCloseDelay="60000"
            Title="Continue Your Session" TitleIcon="" Skin="Office2007" EnableRoundedCorners="true"
            ShowCloseButton="false">
            <ContentTemplate>
                <div class="infoIcon">
                    <img src="Img/infoIcon.jpg" alt="info icon" /></div>
                <div class="notificationContent">
                    Time remaining: <span id="timeLbl">120</span>
                    <telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session"
                        Style="margin-top: 10px;" AutoPostBack="false" OnClientClicked="ContinueSession">
                    </telerik:RadButton>
                </div>
            </ContentTemplate>
        </telerik:RadNotification>
    </div>

    JavaScript:
    <script type="text/javascript">
        //The functionality related to the scenario itself is handled by RadNotification automatically out of the box
        var mainLblCounter = null;
        var timeLeftCounter = null;
        var seconds = 120;
        var secondsBeforeShow = 120;
        var mainLabel;
     
        //start the main label counter when the page loads
        function pageLoad() {
            var xmlPanel = $find("<%= RadNotification1.ClientID %>")._xmlPanel;
            xmlPanel.set_enableClientScriptEvaluation(true);
            mainLabel = $get("mainLbl"); resetTimer("mainLblCounter", updateMainLabel, 1000);
        };
     
        //stop timers for UI
        function stopTimer(timer) {
            clearInterval(this[timer]);
            this[timer] = null;
        };
     
        //reset timers for UI
        function resetTimer(timer, func, interval) {
            this.stopTimer(timer);
            this[timer] = setInterval(Function.createDelegate(this, func), interval);
        };
     
        function OnClientShowing(sender, args) {
            //deal with UI labels
            mainLabel.innerHTML = 0;
            resetTimer("timeLeftCounter", UpdateTimeLabel, 1000);
            stopTimer("mainLblCounter");
        }
     
        function updateMainLabel(toReset) {
            secondsBeforeShow = (toReset == true) ? 120 : secondsBeforeShow - 1;
            mainLabel.innerHTML = secondsBeforeShow;
        }
     
        function OnClientHidden() {
            updateMainLabel(true);
            mainLabel.style.display = "";
            resetTimer("mainLblCounter", updateMainLabel, 1000);
        }
        //update the text in the label in RadNotification
        //this could also be done automatically by using UpdateInterval. However, this will cause callbacks [which is the second best solution than javascript] on every second that is being count
        function UpdateTimeLabel(toReset) {
            var sessionExpired = (seconds == 0);
            if (sessionExpired) {
                stopTimer("timeLeftCounter");
                //redirect to session expired page - simply take the url which RadNotification sent from the server to the client as value
                window.location.href = $find("<%= RadNotification1.ClientID %>").get_value();
            }
            else {
                var timeLbl = $get("timeLbl");
                timeLbl.innerHTML = seconds--;
            }
        }
     
        function ContinueSession() {
            var notification = $find("<%= RadNotification1.ClientID %>");
            //we need to contact the server to restart the Session - the fastest way is via callback
            //calling update() automatically performs the callback, no need for any additional code or control
            notification.update();
            notification.hide();
     
            //resets the showInterval for the scenario where the Notification is not disposed (e.g. an AJAX request is made)
            //You need to inject a call to the ContinueSession() function from the code behind in such a request
            var showIntervalStorage = notification.get_showInterval(); //store the original value
            notification.set_showInterval(0); //change the timer to avoid untimely showing, 0 disables automatic showing
            notification.set_showInterval(showIntervalStorage); //sets back the original interval which will start counting from its full value again
     
            stopTimer("timeLeftCounter");
            seconds = 120;
            updateMainLabel(true);
        }
    </script>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //set the expire timeout for the session
            Session.Timeout = 4                                                              ;
            //configure the notification to automatically show 1 min before session expiration
            RadNotification1.ShowInterval = (Session.Timeout - 2) * 60000;
            //set the redirect url as a value for an easier and faster extraction in on the client
            RadNotification1.Value = Page.ResolveClientUrl("SessionExpired.aspx");
        }
    }
     
    protected void OnCallbackUpdate(object sender, RadNotificationEventArgs e)
    {
     
    }

    Thanks,
    Shinu.
  3. Ashesh
    Ashesh avatar
    14 posts
    Member since:
    May 2013

    Posted 02 Jul 2013 Link to this post

    Thanks Shinu, Is there any way i can modify this and display 2:00 >1:59 > so on ..
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Jul 2013 Link to this post

    Hi Ashesh,

    There are two lines in the above code that set the seconds in the labels. Take a look here for a simple example which can be used to convert them to hh:mm:ss.

    The two lines in the code are:
    1) in the updateMainLabel() function - the line: mainLabel.innerHTML = secondsBeforeShow; - convert the seconds and pass that new string
    2) in UpdateTimeLabel() - timeLbl.innerHTML = seconds--; - once again. Just create a function that will take the seconds as a parameter and will return a string.

    Thanks,
    Shinu.
Back to Top