#16 - Fin de la session après X minutes d'inactivité

Ce script redirige les utilisateurs inactifs vers une page "Session expirée" après une certaine période d'inactivité. Un compte à rebours est affiché sur la page et se réinitialise en fonction de l'activité de la page.

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>

Tutoriel

Voici un résumé simple de ce que fait ce script :

1. Lorsque la page web se charge pour la première fois, elle recherche un élément HTML sur la page qui a l'attribut `ms-code-logout-timer`. Il s'attend à ce que le contenu de cet élément soit une heure comme "10:00" (pour 10 minutes) ou "00:30" (pour 30 secondes).

2. Il lance ensuite un compte à rebours à partir de l'heure spécifiée. Ce compte à rebours est affiché sur la page en mettant à jour le contenu de l'élément `ms-code-logout-timer` toutes les secondes.

3. Le script surveille également toute activité sur la page, comme le déplacement de la souris, l'appui sur une touche ou le contact avec l'écran (sur un appareil tactile). S'il détecte l'une de ces activités, il réinitialise le compte à rebours à sa valeur initiale.

4. Si le compte à rebours atteint zéro, il redirige automatiquement l'utilisateur vers une page dont l'URL est "/expired". Après la redirection, le compte à rebours recommence à partir du temps initial.

5. Enfin, tout membre qui arrive sur la page /expiré sera automatiquement déconnecté.