Session killed while editing Summernote

Question

My view has a line to return to login screen if computer is left unattended:

<meta http-equiv="refresh" content="120; url=/auth/login/" />

The problem is that session dies if I write for too long in a Summernote box. It is a long text and it is very easy to go over 2 minutes editing it. How can I avoid killing the session if the user uses the keyboard in that summernote?

Thanks!

Answer 1

Rather than using meta tag for handling redirection, we could handle it in JavaScript.

const sn = document.getElementById('summernote');
let redirecTimer, stopTypingTimer;

sn.addEventListener('keyup', function() {
  console.log(this.value);

  /* Clear previous timers to prevent overlaps */
  stopTimer(redirecTimer);
  stopTimer(stopTypingTimer);

  stopTypingTimer = window.setTimeout(function() {
    console.log('Stopped Typing');
    startTimer();
  }, 5000); // Assume it takes 5 secs for a user to stop typing
});


function startTimer() {
  redirecTimer = window.setTimeout(function() {
    console.log("User is not typing. So Redirect..");
    //window.location = "http://www.google.com";
  }, 3000); // Redirect in 3 seconds. For 2 minutes set it to 120000
}

function stopTimer(timer) {
  clearTimeout(timer);
}

<textarea id="summernote"></textarea>

Update: To apply event to all elements in a DOM

const sn = document.getElementById('summernote');
let redirecTimer, stopTypingTimer;

/* Extend the events as per the need and elements you have in DOM.
   `change` and `keyup` should capture all possible input elements
*/

['change', 'keyup'].forEach(function(e) {
  document.addEventListener(e, function() {
    console.log('User is interacting with the page');

    /* Clear previous timers to prevent overlaps */
    stopTimer(redirecTimer);
    stopTimer(stopTypingTimer);

    stopTypingTimer = window.setTimeout(function() {
      console.log('Stopped Typing');
      startTimer();
    }, 5000); // Assume it takes 5 secs for a user to stop typing
  });
});


function startTimer() {
  redirecTimer = window.setTimeout(function() {
    console.log("User is not typing. So Redirect..");
    //window.location = "http://www.google.com";
  }, 3000); // Redirect in 3 seconds. For 2 minutes set it to 120000
}

function stopTimer(timer) {
  clearTimeout(timer);
}

<textarea id="summernote"></textarea>
<input type="checkbox">Hi
<input type="text"/>
<input type="radio"/>I am Radio button
<select>
  <option value="1">1</option>
  <option value="2">2</option>
</select>