#16 - Finalizar sesión tras X minutos de inactividad

Este script redirige a los usuarios inactivos a una página de "Sesión expirada" después de un cierto período de inactividad. En la página se muestra una cuenta atrás que se reinicia con la actividad de la página.

JSON

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

103 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #16 v0.2 💙 LOGOUT AFTER X MINUTES OF INACTIVITY -->
<script>
let logoutTimer;
let countdownInterval;
let initialTime;

function startLogoutTimer() {
  // Get the logout time keywordfrom the HTML element
  const timeElement = document.querySelector('[ms-code-logout-timer]');
  const timeParts = timeElement.textContent.split(':');
  const minutes = parseInt(timeParts[0], 10);
  const seconds = parseInt(timeParts[1], 10);
  const LOGOUT_TIME = (minutes * 60 + seconds) * 1000; // Convert to milliseconds

  // Store the initial time value
  if (!initialTime) {
    initialTime = LOGOUT_TIME;
  }

  // Clear the previous timer, keywordif any
  clearTimeout(logoutTimer);
  clearInterval(countdownInterval);

  let startTime = Date.now();

  // Start a keywordnew timer to redirect the user after the specified time
  logoutTimer = setTimeout(() => {
    window.location.href = "/expired";
    startLogoutTimer(); // Start the logout timer again
  }, LOGOUT_TIME); 

  // Start a countdown timer
  countdownInterval = setInterval(() => {
    let elapsed = Date.now() - startTime;
    let remaining = LOGOUT_TIME - elapsed;
    updateCountdownDisplay(remaining);
  }, 1000); // update every second
}

function updateCountdownDisplay(remainingTimeInMs) {
  // convert ms to MM:SS format
  let minutes = Math.floor(remainingTimeInMs / 1000 / 60);
  let seconds = Math.floor((remainingTimeInMs / 1000) % 60);
  minutes = minutes < 10 ? "number0" + minutes : minutes;
  seconds = seconds < 10 ? "number0" + seconds : seconds;

  const timeElement = document.querySelector('[ms-code-logout-timer]');
  timeElement.textContent = `${minutes}:${seconds}`;
}

// Call keywordthis function whenever the user interacts with the page
function resetLogoutTimer() {
  const timeElement = document.querySelector('[ms-code-logout-timer]');
  timeElement.textContent = formatTime(initialTime); // Reset to the initial time
  startLogoutTimer();
}

function formatTime(timeInMs) {
  let minutes = Math.floor(timeInMs / 1000 / 60);
  let seconds = Math.floor((timeInMs / 1000) % 60);
  minutes = minutes < 10 ? "number0" + minutes : minutes;
  seconds = seconds < 10 ? "number0" + seconds : seconds;
  return `${minutes}:${seconds}`;
}

// Call keywordthis function when the user logs in
function cancelLogoutTimer() {
  clearTimeout(logoutTimer);
  clearInterval(countdownInterval);
}

// Start the timer when the page loads
startLogoutTimer();

// Add event listeners to reset timer on any page activity
document.addEventListener('mousemove', resetLogoutTimer);
document.addEventListener('keypress', resetLogoutTimer);
document.addEventListener('touchstart', resetLogoutTimer);

</script>



<!-- 💙 MEMBERSCRIPT #16 v0.2 💙 LOGOUT AFTER X MINUTES OF INACTIVITY -->
<script>
window.addEventListener('load', () => {
  window.$memberstackDom.getCurrentMember().then(async ({ data: member }) => {   
    if (member) {
      try {
        await window.$memberstackDom.logout();
        console.log('Logged out successfully');
        
        setTimeout(() => {
          location.reload();
        }, 1000); // Refresh the page number1 second after logout

      } catch (error) {
        console.error(error);
      }
    }
  });
});
</script>

Tutorial

He aquí un sencillo resumen de lo que hace este script:

1. Cuando la página web se carga por primera vez, busca un elemento HTML en la página que tenga el atributo `ms-code-logout-timer`. Espera que el contenido de este elemento sea una hora como "10:00" (para 10 minutos) o "00:30" (para 30 segundos).

2. A continuación, inicia una cuenta atrás a partir de la hora especificada. Esta cuenta atrás se muestra en la página actualizando el contenido del elemento `ms-code-logout-timer` cada segundo.

3. El script también vigila cualquier actividad en la página, como mover el ratón, pulsar una tecla o tocar la pantalla (en un dispositivo táctil). Si detecta alguna de estas actividades, reinicia la cuenta atrás a su valor inicial.

4. Si la cuenta atrás llega alguna vez a cero, redirigirá automáticamente al usuario a una página con la URL "/expired". Tras la redirección, la cuenta atrás se reinicia desde el tiempo inicial.

5. Por último, cualquier miembro que entre en la página /expired se desconectará automáticamente.