What is the best way to automatically close a web page if the user does not respond?

Question

What is the best way to automatically close a web page if the user does not respond?

Hello Team, I could use some assistance regarding a validation issue.

I am looking for a solution to automatically close my web page if the user does not respond with either "yes" or "no" within 30 minutes.

constructor(private loginService:AuthenticationService,private router: Router) {
          this.setTimeout();
          this.userInactive.subscribe(()=> this.cancel());
      }

      setTimeout() {
        this.userActivity = setTimeout(() => this.userInactive.next(undefined), 300000);
      }

      @HostListener('window:mousemove') refreshUserState() {
        clearTimeout(this.userActivity);
        this.setTimeout();
      }

      cancel() {
        var cancel = confirm("We have detected inactivity. Would you like to continue?");
        if (cancel) {
          return true;
        } else {
          this.router.navigate(['/logout']);
          return false;
        }

  }

angular typescript

Answer 1

Answer №1

Consider implementing local storage for enhanced functionality

import { Injectable } from "@angular/core";
import { Router } from '@angular/router'
const MINUTES_UNITL_AUTO_LOGOUT = 60 // in mins
const CHECK_INTERVAL = 15000 // in ms
const STORE_KEY =  'lastAction';
@Injectable()
export class AutoLogoutService {
 public getLastAction() {
    return parseInt(localStorage.getItem(STORE_KEY));
  }
 public setLastAction(lastAction: number) {
    localStorage.setItem(STORE_KEY, lastAction.toString());
  }

  constructor(private router: Router) {
    this.check();
    this.initListener();
    this.initInterval();
    localStorage.setItem(STORE_KEY,Date.now().toString());
  }

  initListener() {
    document.body.addEventListener('click', () => this.reset());
    document.body.addEventListener('mouseover',()=> this.reset());
    document.body.addEventListener('mouseout',() => this.reset());
    document.body.addEventListener('keydown',() => this.reset());
    document.body.addEventListener('keyup',() => this.reset());
    document.body.addEventListener('keypress',() => this.reset());
  }

  reset() {
    this.setLastAction(Date.now());
  }

  initInterval() {
    setInterval(() => {
      this.check();
    }, CHECK_INTERVAL);
  }

  check() {
    const now = Date.now();
    const timeleft = this.getLastAction() + MINUTES_UNITL_AUTO_LOGOUT * 60 * 1000;
    const diff = timeleft - now;
    const isTimeout = diff < 0;

    if (isTimeout)  {
      localStorage.clear();
      this.router.navigate(['./login']);
    }
  }
}

Answer 2

Consider implementing local storage for enhanced functionality

import { Injectable } from "@angular/core";
import { Router } from '@angular/router'
const MINUTES_UNITL_AUTO_LOGOUT = 60 // in mins
const CHECK_INTERVAL = 15000 // in ms
const STORE_KEY =  'lastAction';
@Injectable()
export class AutoLogoutService {
 public getLastAction() {
    return parseInt(localStorage.getItem(STORE_KEY));
  }
 public setLastAction(lastAction: number) {
    localStorage.setItem(STORE_KEY, lastAction.toString());
  }

  constructor(private router: Router) {
    this.check();
    this.initListener();
    this.initInterval();
    localStorage.setItem(STORE_KEY,Date.now().toString());
  }

  initListener() {
    document.body.addEventListener('click', () => this.reset());
    document.body.addEventListener('mouseover',()=> this.reset());
    document.body.addEventListener('mouseout',() => this.reset());
    document.body.addEventListener('keydown',() => this.reset());
    document.body.addEventListener('keyup',() => this.reset());
    document.body.addEventListener('keypress',() => this.reset());
  }

  reset() {
    this.setLastAction(Date.now());
  }

  initInterval() {
    setInterval(() => {
      this.check();
    }, CHECK_INTERVAL);
  }

  check() {
    const now = Date.now();
    const timeleft = this.getLastAction() + MINUTES_UNITL_AUTO_LOGOUT * 60 * 1000;
    const diff = timeleft - now;
    const isTimeout = diff < 0;

    if (isTimeout)  {
      localStorage.clear();
      this.router.navigate(['./login']);
    }
  }
}

Answer 3

Answer №2

When implementing the cancel method, it is crucial to remember to reset the timeout once again.

  cancel() {
    var cancel = confirm("It seems like there has been inactivity. Do you wish to proceed?");
    if (cancel) {
      clearTimeout(this.userActivity);
      this.setTimeout();
      return true;
    } else {
      this.router.navigate(['/logout']);
      return false;
    }

Answer 4

When implementing the cancel method, it is crucial to remember to reset the timeout once again.

  cancel() {
    var cancel = confirm("It seems like there has been inactivity. Do you wish to proceed?");
    if (cancel) {
      clearTimeout(this.userActivity);
      this.setTimeout();
      return true;
    } else {
      this.router.navigate(['/logout']);
      return false;
    }

What is the best way to automatically close a web page if the user does not respond?

Answer №1

Answer №2

Similar questions

Dealing with 'TypeError X is Not a Function' Error in Angular (TypeScript): Occurrences in Certain Scenarios and Absence in Others

Different ways to convert a date object to instant type in Angular without considering the timestamp

Retrieving information from a JSON file utilizing an Interface

Learn how to easily toggle table column text visibility with a simple click

What is the best way to customize column width in AG-Grid?

What are the steps to incorporating the pick function in TypeScript?

JavaScript/TypeScript - Restricting to only assigned properties in an object

Would it be possible to use the Stripe customer portal to facilitate subscription upgrades or downgrades that take effect at the end of the current billing cycle?

In the production build, the RegEx validation is lacking and fails to accept certain characters like 0, 2, 7, a, c, u, x, and occasionally z

AngularYelp: Node Integration for Enhanced Functionality

Guide to making a ng-bootstrap modal that retains a component's state

What is the proper way to utilize variables in package.json with npm version 7.x.x?

Breaking a line within an ngFor loop

What causes NG-REPEAT to malfunction when used with a JSON variable retrieved from a service?

Adding one day to a date using TypeScript

What is the best layer to handle Entity-DTO conversion in my application?

Is it possible for me to dynamically alter the innerHTML of an input element using

Can TypeScript be imported into HTML to set a color value or modify a color value from HTML using TypeScript?

unable to transform this string into an object

Prevent special characters from being entered into an HTML input box with Angular 7