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

[Ashesh]

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.

[Shinu]

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.

[Ashesh]

Thanks Shinu, Is there any way i can modify this and display 2:00 >1:59 > so on ..

[Shinu]

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.