bearnithi / bn-ng-idle Goto Github PK

View Code? Open in Web Editor NEW

28.0 28.0 11.0 2.34 MB

Angular user idle detector service

JavaScript 8.07% TypeScript 24.91% HTML 66.79% SCSS 0.23%

bn-ng-idle's People

Contributors

Stargazers

Watchers

Forkers

qchallenge19 cthulhuhoop garysegler eskumu markoberholzer-es dkoczara yhogiaa fokhwar kumaran-is blackpr georgepu

bn-ng-idle's Issues

Warning

WARNING in ./node_modules/bn-ng-idle/fesm5/bn-ng-idle.js 79:57-75
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

unsubscribe of undefined calling resetTimer

calling resetTimer before starting idle throws the error:

ERROR TypeError: Cannot read property 'unsubscribe' of undefined
at BnNgIdleService.push../node_modules/bn-ng-idle/fesm5/bn-ng-idle.js.BnNgIdleService.resetTimer (bn-ng-idle.js:49)

TypeError: Object(...) is not a function

Hello,

on Angular 7 after installation i got this error:

TypeError: Object(...) is not a function. From googling it I assume its version incompatibility but im using 1.0.1. Any advices? Im using just the basic method:

 `this.bnIdle.startWatching(environment.sessionTimeout).subscribe((expired) => {
    if (expired) {
	...
    }
});`

How to achieve idle state when system goes to sleep?

Thanks for the library, works well when the system is on. However, when the system goes to sleep, the timer is paused and starts executing when the system is back on. Is there a way to achieve and log out when the idle time is passed out while the system is asleep?

Thanks!

ɵɵFactoryDeclaration BnNgIdleModule error

node_modules/bn-ng-idle/lib/bn-ng-idle.module.d.ts:3:21
static ɵfac: i0.ɵɵFactoryDeclaration<BnNgIdleModule, never>;

node_modules/bn-ng-idle/lib/bn-ng-idle.module.d.ts:4:21
static ɵmod: i0.ɵɵNgModuleDeclaration<BnNgIdleModule, never, never, never>;

node_modules/bn-ng-idle/lib/bn-ng-idle.service.d.ts:14:21
static ɵfac: i0.ɵɵFactoryDeclaration<BnNgIdleService, never>;

Can't import the named export 'Injectable' from non EcmaScript module (only default export is available)

"@angular/compiler": "~11.2.4",
"bn-ng-idle": "^2.0.4",

Link in the readme to a an example of a site/app that uses this?

there's no way to know if user became active after being idle.

when user moves mouse or does something such that he is not idle anymore, then the subscription 'res' does not turn false.

startWatching() creates new instance of idle timer on every call

In our app we have a feature of read mode and edit mode. When user starts editing something we start the idle timer by calling startWatching() and if the user is idle for specified seconds, we stop the timer with stopTimer() in subscribe callback and make it read mode. But when the user starts editing again we start the idle timer again with startWatching(). But now when the idle timeout happens the subscribe callback of startWatching() is called twice.

So if startWatching() is called n times, then n number of idle timer instances are created and all the subscribe callbacks are called.

It is expected that only 1 instance is available at any given time.

Issue with compiler using fesm2015 module



Error: node_modules/bn-ng-idle/lib/bn-ng-idle.module.d.ts:3:21 - error TS2694: Namespace '"/home/godkingherb/Desktop/sram-app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

3     static ɵfac: i0.ɵɵFactoryDeclaration<BnNgIdleModule, never>;
                      ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/bn-ng-idle/lib/bn-ng-idle.module.d.ts:4:21 - error TS2694: Namespace '"/home/godkingherb/Desktop/sram-app/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

4     static ɵmod: i0.ɵɵNgModuleDeclaration<BnNgIdleModule, never, never, never>;
                      ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/bn-ng-idle/lib/bn-ng-idle.module.d.ts:5:21 - error TS2694: Namespace '"/home/godkingherb/Desktop/sram-app/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

5     static ɵinj: i0.ɵɵInjectorDeclaration<BnNgIdleModule>;
                      ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/bn-ng-idle/lib/bn-ng-idle.service.d.ts:14:21 - error TS2694: Namespace '"/home/godkingherb/Desktop/sram-app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

14     static ɵfac: i0.ɵɵFactoryDeclaration<BnNgIdleService, never>;
                       ~~~~~~~~~~~~~~~~~~~~


Error: node_modules/bn-ng-idle/lib/bn-ng-idle.service.d.ts:15:22 - error TS2694: Namespace '"/home/godkingherb/Desktop/sram-app/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.

15     static ɵprov: i0.ɵɵInjectableDeclaration<BnNgIdleService>;
                        ~~~~~~~~~~~~~~~~~~~~~~~


Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 35:18-28
Can't import the named export 'Injectable' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 47:18-26
Can't import the named export 'NgModule' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 7:28-35
Can't import the named export 'Subject' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:27-36
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:61-70
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:91-100
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:125-134
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:158-167
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:197-206
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:232-241
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:266-275
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:304-313
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:336-345
Can't import the named export 'fromEvent' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 10:21-26
Can't import the named export 'merge' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 19:22-27
Can't import the named export 'timer' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 32:143-161
Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 43:141-159
Can't import the named export 'ɵɵFactoryTarget' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 34:0-27
Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 46:0-27
Can't import the named export 'ɵɵngDeclareClassMetadata' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 32:23-44
Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 43:22-43
Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 33:24-48
Can't import the named export 'ɵɵngDeclareInjectable' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 45:22-44
Can't import the named export 'ɵɵngDeclareInjector' from non EcmaScript module (only default export is available)

Error: ./node_modules/bn-ng-idle/fesm2015/bn-ng-idle.mjs 44:22-44
Can't import the named export 'ɵɵngDeclareNgModule' from non EcmaScript module (only default export is available)

There seems to be an issue with the importing of packages inside of the Service here, any idea what could be the cause?

On Angular 11 atm.

Just a small typo in readme

Hi,
thanks for the nice work! 👍

I just have found a small typo in your readme. In the ngOnInit function you check for res instead of isTimedOut.

  // initiate it in your component OnInit
  ngOnInit(): void {
    this.bnIdle.startWatching(60).subscribe((isTimedOut: boolean) => {
      // if (res) { <--- should be as below 
      if (isTimedOutt) {
        console.log('session expired');
      }
    });
  }

Cannot find module 'bn-ng-idle' or its corresponding type declarations. Version 2.0.3 issue with bn-ng-idle

Importing the latest release import { BnNgIdleService } from 'bn-ng-idle'; brings up on error on starting. Is this a known problem?

not working on iOS

Hi,
Thanks for the useful library, it's working well in Android but not in iOS. After idle state around 2 min finishes login user will logout for that I have used this.bnIdle.stopTimer(); & navigated to login page. It's working in Android but getting issue in iOS, first time it logout after 2 min idle state but when user login again it logout within few seconds.
this.bnIdle.startWatching(120).subscribe((res) => { if (res) { let token = localStorage.getItem('Token'); if (token) { this.saveform('close'); } } })

Performance suggestion

Hi,
This is very helpful service.
I think the following changes will make it even better in term of the performance of the applicaiton using this service:

Running startWatching outside Angular zone.
Debouncing the idleSubscription

  constructor(private zone: NgZone) {
  }

  public startWatching(timeOutSeconds): Observable<any> {
    this.zone.runOutsideAngular(() => {
      this.idle$ = merge(
        fromEvent(document, 'mousemove'),
        fromEvent(document, 'click'),
        fromEvent(document, 'mousedown'),
        fromEvent(document, 'keypress'),
        fromEvent(document, 'DOMMouseScroll'),
        fromEvent(document, 'mousewheel'),
        fromEvent(document, 'touchmove'),
        fromEvent(document, 'MSPointerMove'),
        fromEvent(window, 'mousemove'),
        fromEvent(window, 'resize'),
      );

      this.timeOutMilliSeconds = timeOutSeconds * 1000;

      this.idleSubscription = this.idle$
        .pipe(debounceTime(500)) // or maybe any number smaller than the timeout value
        .subscribe((res) => {
          this.resetTimer();
        });

      this.startTimer();

    });
    return this.expired$;
  }

Not working properly if we open web app in more than one browser window.

It considered idle active window if we didn't do anything in other window. Please implement changes accordingly.

Performance & RxJS suggestions

Hi,
This is a very helpful service.
I think the following changes will make it even better in terms of the performance of the app and using more Rxjs operators

Subscribe outside the Angular zone.
Emit the timeout inside the Angular zone (optional, some components maybe does not use OnPush)
Throttling the DOM events every second

stopTimer could be called it stopWatching?

      const expired$: Subject<boolean> = new Subject<boolean>();
      const _resetTimerSubj = new BehaviorSubject(1);
      const _stopWatching = new Subject<void>();
      
 constructor(private zone: NgZone) {
  }

  public startWatching(timeOutSeconds): Observable<any> {
     const timeOutMilliSeconds = timeOutSeconds * 1000;
 
  const idleAndTimeout$ = merge(
    this._resetTimerSubj, // for reset timer
    fromEvent(document, 'mousemove'),
    fromEvent(document, 'click'),
    fromEvent(document, 'mousedown'),
    fromEvent(document, 'keypress'),
    fromEvent(document, 'DOMMouseScroll'),
    fromEvent(document, 'mousewheel'),
    fromEvent(document, 'touchmove'),
    fromEvent(document, 'MSPointerMove'),
    fromEvent(window, 'mousemove'),
    fromEvent(window, 'resize')
  ).pipe(
    throttleTime(1000),
    switchMap((x) => timer(timeOutMilliSeconds, timeOutMilliSeconds)),
    takeUntil(this._stopWatching)
  );

  this.zone.runOutsideAngular(() => {
        
         idleAndTimeout$.subscribe({
          next: (x) => {   this.zone.run(() =>this.expired$.next(true) )  },
          error: (err: any) => {  this.zone.run(() => this.expired$.error(err))  },
          complete: () => {  this.zone.run(() => this.expired$.complete() )},
        });

  });
   return  this.expired$.asObservable();
  }

 public resetTimer() {
    this._resetTimerSubj.next(1)
  }
 
 // stopTimer
  public stopWatching() {
   this._stopWatching.next();
  }

Add the ability to notify idle

Hi,

I hope all is well.

I noticed I could not know if idle has triggered when I wanted to interact with the UI. In my case, I need to close a popup window before the timeout expires.

Thanks & Kind regard,
Vye

"../node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'

What I did was install the package using npm install bn-ng-idle. Afterwards, I just added BnNgIdleService in providers of app.module.ts

Anyone knows the solution/fix ?