locked
Logout with a countdown progress bar RRS feed

  • Question

  • User325035487 posted

    I am using the code from Solved Question to logout users after idle time (when no click is received anywhere on the body). I am trying to combine that with a countdown progress bar here

    My Code below

        #timeouts {
            display: none;
        }
        #progressBar {
            width: 100%;
            margin: 10px auto;
            height: 22px;
            background-color: red;
        }
    
            #progressBar div {
                height: 100%;
                text-align: right;
                padding: 0 10px;
                line-height: 22px; /* same as #progressBar height if we want text middle aligned */
                width: 0;
                background-color: yellow;
                box-sizing: border-box;
            }
    

    HTML

    <body class="smoothscroll boxed pattern7 printable" onload="StartTimers();" onclick="ResetTimers();">
        <div id="progressBar"><div></div></div>
        <div id="timeouts">
            <h2>Session About To Timeout</h2>
                <span class="alert alert-warning">Alert! Logout in 4 Seconds</span>
         </div>
    </body>

    JS

    var timoutWarning = 10000; // Displa
    var timoutNow = 14000; // Time
    var logoutUrl = '/logout'; //
    var warningTimer;
    var timeoutTimer;
    
    // Start timers.
    function StartTimers() {
        warningTimer = setTimeout("IdleWarning()", timoutWarning);
        timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
    }
    
    // Reset timers.
    function ResetTimers() {
        clearTimeout(warningTimer);
        clearTimeout(timeoutTimer);
        StartTimers();
        document.getElementById("timeouts").style.display = "none";
        progress(14, 14, $('#progressBar')); //This makes things go crazy
    }
    
    // Show idl
    function IdleWarning() {
        document.getElementById("timeouts").style.display = "block";
    }
    
    // Logout the user.
    function IdleTimeout() {
        window.location = logoutUrl;
    }
    function progress(timeleft, timetotal, $element) {
        var progressBarWidth = timeleft * $element.width() / timetotal;
        $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft+ " s");
        if (timeleft > 0) {
            setTimeout(function () {
                progress(timeleft - 1, timetotal, $element);
            }, 1000);
        }
    };
    
    progress(14, 14, $('#progressBar'));

    It will work perfectly on page load. But when the function ResetTimers() is called, it is supposed to reset the progress function. But things go crazy with the progress bar showing random values. Please help me figure out what is going on.

    Thursday, December 10, 2015 6:39 AM

Answers

  • User325035487 posted
    var timoutWarning = 1140000; // Display warning after 19 minutes
    var logoutUrl = '/logout'; //
    var warningTimer;
    var timeoutTimer;
    var progressTimer;
    var timeleft = 1200;
    var timetotal = 1200;
    // Start timers.
    function StartTimers() {
        warningTimer = setTimeout("IdleWarning()", timoutWarning);
        progress(timeleft, timetotal, $('#progressBar'));
    }
    // Reset timers.
    function ResetTimers() {
        clearTimeout(warningTimer);
        clearTimeout(progressTimer);
        StartTimers();
        document.getElementById("timeouts").style.display = "none";
    }
    // Show idl
    function IdleWarning() {
        document.getElementById("timeouts").style.display = "block";
    }
    // Logout the user.
    function IdleTimeout() {
        window.location = logoutUrl;
    }
    function progress(timeleft, timetotal, $element) {
        var progressBarWidth = timeleft * 100 / timetotal;
        $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html((timeleft / 60).toFixed(1) + " m");
        if (timeleft > 0) {
            progressTimer = setTimeout(function () { progress(timeleft - 1, timetotal, $element); }, 1000);
        }
        else {
    
            IdleTimeout();
        }
    };

    By assigning a variable to the setTimeout function call inside my recursive function and then clear it by clearTimeout(progressTimer) inside the ResetTimers() call. Thank you

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 10, 2015 3:32 PM

All replies

  • User325035487 posted

    I figured out that the function below is still running using the original values to 0 even i try to run it again from ResetTimers()

    function progress(timeleft, timetotal, $element) {
        var progressBarWidth = timeleft * $element.width() / timetotal;
        $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft+ " s");
        if (timeleft > 0) {
            setTimeout(function () {
                progress(timeleft - 1, timetotal, $element);
            }, 1000);
        }
    };


    Hence I am getting two values for the progress bar as there is two instance of this function running. How to break the first function before starting it again from the ResetTimer()

    Thursday, December 10, 2015 2:25 PM
  • User325035487 posted
    var timoutWarning = 1140000; // Display warning after 19 minutes
    var logoutUrl = '/logout'; //
    var warningTimer;
    var timeoutTimer;
    var progressTimer;
    var timeleft = 1200;
    var timetotal = 1200;
    // Start timers.
    function StartTimers() {
        warningTimer = setTimeout("IdleWarning()", timoutWarning);
        progress(timeleft, timetotal, $('#progressBar'));
    }
    // Reset timers.
    function ResetTimers() {
        clearTimeout(warningTimer);
        clearTimeout(progressTimer);
        StartTimers();
        document.getElementById("timeouts").style.display = "none";
    }
    // Show idl
    function IdleWarning() {
        document.getElementById("timeouts").style.display = "block";
    }
    // Logout the user.
    function IdleTimeout() {
        window.location = logoutUrl;
    }
    function progress(timeleft, timetotal, $element) {
        var progressBarWidth = timeleft * 100 / timetotal;
        $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html((timeleft / 60).toFixed(1) + " m");
        if (timeleft > 0) {
            progressTimer = setTimeout(function () { progress(timeleft - 1, timetotal, $element); }, 1000);
        }
        else {
    
            IdleTimeout();
        }
    };

    By assigning a variable to the setTimeout function call inside my recursive function and then clear it by clearTimeout(progressTimer) inside the ResetTimers() call. Thank you

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 10, 2015 3:32 PM