moribvndvs / ng2-idle Goto Github PK

View Code? Open in Web Editor NEW

313.0 23.0 128.0 6.62 MB

Responding to idle users in Angular (not AngularJS) applications.

Home Page: https://moribvndvs.github.io/ng2-idle

License: Apache License 2.0

JavaScript 4.40% TypeScript 91.48% CSS 0.65% HTML 3.48%

idle-users expiry keepalive ping angular angular-module maintainer-wanted help-wanted

ng2-idle's Introduction

Introduction

A module for responding to idle users in Angular applications. This is a rewrite of the ng-idle module; however if you are using Angular 1, you must use that module.

MAINTAINERS WANTED

The Angular community needs you! I'm looking for a new developer or team to take over maintenance of this module. These are the responsibilities any interested candidates should consider:

Now: Complete beta process (major remaining item is to make it compatible with SSR)
Now: Update demo and add API documentation
Ongoing: Bug fixes
Ongoing: New releases for new versions of Angular
Later: Refactor to simplify API and reduce package size
Later: Add support for non-browser environments?

Ideally, a candidate:

Has experience building applications in Angular 5+
Is an active Angular developer and tuned into the Angular release schedule
Loves open source and the Angular community
Is committed to releasing modular and lightweight (as possible) packages
Has working understanding of DOM events, JavaScript timers and intervals, Web Storage API, and cookies
Understands testing using Karma and Jasmine, and is committed to a high percentage of code coverage
Has working understanding of the contributing guide, is willing to accept contributions from others, and can use Github and related tools effectively
Has time to triage and answer tickets, or delegate to others
Has basic understanding of NPM for releasing packages

Please get in touch if you are interested!

Demo

Visit https://moribvndvs.github.io/ng2-idle to view a simple example with quick start instructions.

Quick start

@ng-idle is shipped via npm. You can install the package using the following command for the latest supported version of Angular:

npm install --save @ng-idle/core

Integrating and configuring the package into your application requires a few more steps. Please visit @ng-idle-example for source and instructions on how to get going.

Design Considerations

The primary application of this module is to detect when users are idle. It can also be used to warn users of an impending timeout, and then time them out. The core of this module is the Idle service which does its best - based on your configuration - to detect when a user is active or idle and pass that information on to your application so it can respond appropriately.

Modularization

The core functionality can be found in the @ng-idle/core package via npm.

Additional modules to extend functionality:

@ng-idle/keepalive (see below)

Extensible Keepalive Integration

In a common use case where it is used for session management, you may need to signal to the server periodically that the user is still logged in and active. If you need that functionality, @ng-idle can optionally integrate with @ng-idle/keepalive. @ng-idle will instruct @ng-idle/keepalive to ping while the user is active, and stop once they go idle or time out. When the user resumes activity or the idle state is reset, it will ping immediately and then resume pinging. Please note that keepalive integration is optional, and you must install and configure @ng-idle/keepalive separately to get this functionality. You can implement your own by extending KeepaliveSvc and configuring it as a provider in your application for the KeepaliveSvc class.

Extensible Interrupts

An interrupt is any source of input (typically from the user, but could be things like other tabs or an event) that can be used to signal to Idle that the idle watch should be interrupted or reset. Unlike ng-idle, these sources are not hardcoded; you can extend InterruptSource or any of the built-in sources to suit your purposes. This feature is also useful to handle input noise that may plague your particular use case. It can also be used to target specific elements on a page rather than the whole document or window. The following sources come built into this package:

InterruptSource (abstract): A base type you can implement to make your own source.
EventTargetInterruptSource: Any object that implements EventTarget, such as an HTMLElement or Window. Takes in the object that is the source and a space delimited string containing the events that cause an interrupt.
DocumentInterruptSource: Looks for events (in a space delimited string) that bubble up to the document.documentElement (html node).
WindowInterruptSource: Looks for events (in a space delimited string) that bubble up to the Window.
StorageInterruptSource: Looks only for the Storage event of Window object. Obligatory for LocalStorageExpiry.

NOTE: You must configure source(s) yourself when you initialize the application. By default, no interrupts are configured. You can use a configuration analogous to the ng-idle default by importing DEFAULT_INTERRUPTSOURCES and passing that reference to Idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);.

Extensible Expiry

Another feature ported from ng-idle is the ability to store an expiry value in some store where multiple tabs or windows running the same application can write to. Commonly, this store is the localStorage, but could be cookies or whatever you want. The purpose of this expiry and the expiry store is twofold: First, to prevent a window from not timing out if it sleeps or pauses longer than the configured timeout period. Second, it can be used so that activity in one tab or window prevents other tabs or windows in the same application from timing out.

By default, a LocalStorageExpiry type is provided, which will just keep track of the expiry in the localStorage. It will fulfill all purposes mentioned above. If you don't want to support multiple tabs or windows, you can use SimpleExpiry. In other words, SimpleExpiry does not coordinate last activity between tabs or windows. If you want to store the expiry value in another store, like cookies, you'll need to use or create an implementation that supports that. You can create your own by extending IdleExpiry or SimpleExpiry and configuring it as a provider for the IdleExpiry class.

Multiple Idle Instance Support

The dependency injector in Angular supports a hierarchical injection strategy. This allows you to create an instance of Idle at whatever scope you need, and there can be more than one instance. This allows you to have two separate watches, for example, on two different elements on the page.
If you use the default expiry (LocalStorageExpiry), you will need to define a name for each idle with Idle.setIdleName('yourIdleName'), otherwise the same key will be used in the localStorage and this feature will not work as expected.

Example Use Case

For example, consider an email application. For increased security, the application may wish to determine when the user is inactive and log them out, giving them a chance to extend their session if they are still at the computer and just got distracted. Additionally, for even better security the server may issue the user's session a security token that expires after 5 minutes of inactivity. The user may take much more time than that to type out their email and send it. It would be frustrating to find you are logged out when you were actively using the software!

@ng-idle/core can detect that the user is clicking, typing, touching, scrolling, etc. and know that the user is still active. It can work with @ng-idle/keepalive to ping the server every few minutes to keep them logged in. In this case, as long as the user is doing something, they stay logged in. If they step away from the computer, we can present a warning dialog, and then after a countdown, log them out.

Server-Side Rendering/Universal

@ng-idle/core uses DOM events on various targets to detect user activity. However, when using SSR/Universal Rendering the app is not always running in the browser and thus may not have access to these DOM targets, causing your app to potentially crash or throw errors as it tries to use browser globals like document and window through @ng-idle.

EventTargetInterruptSource and all the interrupt sources that derive from it (such as DocumentInterruptSource, WindowInterruptSource, and StorageInterruptSource) are designed to lazily initialize the event target listeners for compatibility with server-side rendering. The EventTargetInterruptSource will detect whether your app is running in the browser or on the server by using isPlatformServer and will skip initialization of the event target listeners when run on the server.

Developing

This project was developed using the NodeJS version found in the .nvmrc file. You may experience problems using older versions. Try NVM or similar to manage different versions of Node concurrently. If using NVM, you can execute nvm install to download and switch to the correct version.

Once you have cloned the repository, install all packages using npm:

npm install

You can now build and run all tests once with coverage.

 npm test

You can also continuously run tests while you make changes to a project by executing npm run ng test <project name> or ng test <project name> if you have @angular/cli installed globally.

npm run ng test core
...
npm run ng test keepalive

Note: Keepalive depends on Core. If you are running the above continuous tests, you'll need to npm build or npm run ng build core first and after making changes to Core. However, npm test will build all modules and run the tests in one shot.

Contributing

See the contributing guide.

ng2-idle's People

Contributors

Stargazers

Watchers

Forkers

gitter-badger mbcooper simplycomplexco akshitsawhneyseedoc spicywhitefish kishorek129 mvarblow bahkoo herbzi holpit leykov silvinobarreiros cyft jlbeard84 thedang maytis markmaynard haodt nertzy manichandra dpreindl rainstormza ascode odininon mramos-dev stevefiedler wenz wesley-trantham ahelper ianjoubert ramuda soniasuhag29 sajeetharan sliekens solarianagent pastafarian pradorocchi bigspoolravi fadelguy sopretty garysui hudibrian rolshevskyj mohamedfathii richie50 amnambiar merysantos sda-se littigali jtcrowson iboshkov rolfed kevinbosman vinothsubramanian virtuoushub mshahzad2017 mmubasher shahzadiiui2015 r3hensler michaelmills anveshreddy48 hai-tkx angular-way qhrtech kal93 sharegainltd hynesip johnhamm elvispeter91 saxicek briancmpbll kravda xdy-forks ckniffen iompo fishgills raulcrisan kingston-kms tyler-technologies-oss ainominako1996 osh17 manpreet1990 air2 leifjones drizzt74 syntronic avinash-corridorplatforms dlyushukov paulpatarinski buleglay kazusss dylantkx ryltar blackram nateradebaugh kazyuki prizef un1c0rnr1d3r harrysnx1 majomanoj

ng2-idle's Issues

onTimeout event not triggered on the "onResume" event Cordova / Ionic 2

I'm submitting a ...

[ x ] bug report => search github for a similar issue or PR before submitting
[ - ] feature request
[ - ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
There are three ways to send an app to the "background" (in general). Only in the first scenario, where the hardware button is pushed, the onTimeout event is triggered correctly.

[ x ] Using the home button; works correctly
[ - ] Switching to another app (double tap home button / switch app button); not working
[ - ] Turning the screen off (clicking the off button shortly); not working

Expected behavior

Peform the "check" on "all" the resume events / three scenario's above. Or (if that doesn't already happen);
Trigger the "check" on a defined event (or be able to define an event on which it needs to be checked), like "resume"
Being able to manually trigger the "check" wheter the users' state is idle. e.g. add some logic to the Cordova / Ionic 2 app, bind to the "resume" event and do something like: this.idle.isIdle() => and act on it.

Minimal reproduction of the problem with instructions
Send an Cordova / Ionic 2 app to the background via either the second or third method.

Please tell us about your environment:

@ng-idle version: 2.@latest
Ionic version: 2.@latest
Language: [ TypeScript@latest ]

Too many warnings thrown saying .ts files are missing

I'm submitting a ... (check one with "x")

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
Getting the following list of error when built with latest CLI using ng Eject option

WARNING in ./~/@ng-idle/core/index.js
Cannot find source file '../../../modules/core/index.ts': Error: Can't resolve '../../../modules/core/index.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core'
@ ./src/app/core/ncpapp.module.ts 22:0-45
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/documentinterruptsource.js
Cannot find source file '../../../../modules/core/src/documentinterruptsource.ts': Error: Can't resolve '../../../../modules/core/src/documentinterruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 1:0-72 7:0-46
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/storageinterruptsource.js
Cannot find source file '../../../../modules/core/src/storageinterruptsource.ts': Error: Can't resolve '../../../../modules/core/src/storageinterruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 2:0-70 9:0-45
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/idle.js
Cannot find source file '../../../../modules/core/src/idle.ts': Error: Can't resolve '../../../../modules/core/src/idle.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 3:0-27
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/interruptargs.js
Cannot find source file '../../../../modules/core/src/interruptargs.ts': Error: Can't resolve '../../../../modules/core/src/interruptargs.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 4:0-36
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/interruptsource.js
Cannot find source file '../../../../modules/core/src/interruptsource.ts': Error: Can't resolve '../../../../modules/core/src/interruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 5:0-38
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/eventtargetinterruptsource.js
Cannot find source file '../../../../modules/core/src/eventtargetinterruptsource.ts': Error: Can't resolve '../../../../modules/core/src/eventtargetinterruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 6:0-49
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/windowinterruptsource.js
Cannot find source file '../../../../modules/core/src/windowinterruptsource.ts': Error: Can't resolve '../../../../modules/core/src/windowinterruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 8:0-44
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/keepalivesvc.js
Cannot find source file '../../../../modules/core/src/keepalivesvc.ts': Error: Can't resolve '../../../../modules/core/src/keepalivesvc.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 10:0-35
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/idleexpiry.js
Cannot find source file '../../../../modules/core/src/idleexpiry.ts': Error: Can't resolve '../../../../modules/core/src/idleexpiry.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 11:0-33
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/simpleexpiry.js
Cannot find source file '../../../../modules/core/src/simpleexpiry.ts': Error: Can't resolve '../../../../modules/core/src/simpleexpiry.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 12:0-35
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/localstorage.js
Cannot find source file '../../../../modules/core/src/localstorage.ts': Error: Can't resolve '../../../../modules/core/src/localstorage.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 13:0-35
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/localstorageexpiry.js
Cannot find source file '../../../../modules/core/src/localstorageexpiry.ts': Error: Can't resolve '../../../../modules/core/src/localstorageexpiry.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 14:0-41
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/module.js
Cannot find source file '../../../../modules/core/src/module.ts': Error: Can't resolve '../../../../modules/core/src/module.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/index.js 16:0-44
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/interrupt.js
Cannot find source file '../../../../modules/core/src/interrupt.ts': Error: Can't resolve '../../../../modules/core/src/interrupt.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/src/idle.js 3:0-40
@ ./~/@ng-idle/core/index.js
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/alternativestorage.js
Cannot find source file '../../../../modules/core/src/alternativestorage.ts': Error: Can't resolve '../../../../modules/core/src/alternativestorage.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ .//@ng-idle/core/src/localstorage.js 2:0-58
@ ./~/@ng-idle/core/index.js
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

Expected behavior
NO warnings should be thrown

Minimal reproduction of the problem with instructions
node: 6.9.5
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/compiler-cli: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/platform-server: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-beta.32.3
In this config after using ng eject and running command npm start

Node: node --version = v6.9.5

When idleStart is called don't toggleInterrupts(false)

Currently in Idle.prototype.toggleState when idleStart triggers it triggers the this.toggleInterrupts(false) which never allows idleEnd to occur. Seems like there needs to be one more condition here of not just this.idling but also the parent that called toggleState.

Runtime error in StorageInterruptSource.filterEvent

Current behavior

ng2-idle fails with error:

ERROR TypeError: Cannot read property 'indexOf' of null at StorageInterruptSource.webpackJsonp../node_modules/@ng-idle/core/src/storageinterruptsource.js.StorageInterruptSource.filterEvent (storageinterruptsource.js:22) at SafeSubscriber.handler [as _next] (eventtargetinterruptsource.js:33) at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238) at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185) at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125) at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at ThrottleTimeSubscriber.webpackJsonp../node_modules/rxjs/operator/throttleTime.js.ThrottleTimeSubscriber._next (throttleTime.js:93) at ThrottleTimeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at handler (FromEventObservable.js:134) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)

Expected behavior

No such RTE.

Minimal reproduction of the problem with instructions

Failing on Chrome with code taken from ng2-idle examples:

idle.setIdle(5); idle.setTimeout(10 * 60); idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); idle.onTimeout.subscribe(() => { console.log('timeout'); }); this.idle.watch();

Please tell us about your environment:

Os-x, Chrome (both latest).

**@ng-idle version: 2.0.0-beta.12
Angular version: 4.1.3
Node: node --version = 7.9.0

interrupt from modal ok button

Angular4 with @ng2-idle trying to capture the inactivity of the user.

code example link
https://hackedbychinese.github.io/ng2-idle/

I am trying to customize it so every time user goes idle i show modal with ok button. and user will able to resume only ok is clicked on the modal.

on page load default interrupts are on

idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

on idleStart i show my modal and count down begins
on onIdleEnd i close my modal

when modal is open i want to disable DEFAULT_INTERRUPTSOURCES only manual interrupt so i called idle.clearInterrupts() and on modal ok press event calling idle.interrupt(true);
once modal is close i set idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); again.

does not seems to work very well. after modal close and open again it does not car about DEFAULT_INTERRUPTSOURCES and on setIdle time it goes automiticaly idle mode even though user interacts with the UI.

Custom Expiry not functioning as expected

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
Created a cookie based IdleExpiry that stores lastValue as a cookie. Activity in one tab does not prevent timeout in another tab.
I was able to get something close to what I wanted by modifying the toggleState method in Idle and inserting the following at the top of the function:
if (!this.expiry.isExpired()) { return; }

This checks the cookie and prevents expiration.

Expected behavior
Activity in one tab prevents timeout in all tabs.

Minimal reproduction of the problem with instructions
Replace SimpleExpiry with the following class
`@Injectable()
export class CookieExpiry extends IdleExpiry {
private lastValue: Date = undefined;

constructor(
private cookieService: CookieService
) {
super();
}

Gets or sets the last expiry date.
@param value - The expiry value to set; omit to only return the value.
@return The current expiry value.
*/
last(value?: Date): Date {
if (value !== void 0 && value !== undefined) {
this.lastValue = value;
let expireDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
this.cookieService.put('idle-timeout', this.lastValue.toUTCString(), { expires: expireDate} );
} else {
if (this.cookieService.get('idle-timeout') !== undefined) {
this.lastValue = new Date(this.cookieService.get('idle-timeout'));
} else {
this.lastValue = undefined;
}
}
return this.lastValue;
}

Returns whether or not it is expired.
@return True if expired; otherwise, false.
*/
isExpired(): boolean {
let expiry = this.last();
return expiry !== undefined && expiry <= this.now();
}
}
`
Open app on two tabs, move mouse to trigger activity on one tab while allowing other tab to remain inactive.

What is the motivation / use case for changing the behavior?
Allow activity on one tab to keep other tabs from expiring. Since all tabs are using the same session cookie the "out-of-focus" tab is expiring session for all tabs.

Please tell us about your environment:
Ubuntu 16.04
NPM
Webpack-dev server

@ng-idle version: 2.x
"@ng-idle/core": "^2.0.0-beta.4"
Angular version: 2.x
"@angular/core": "2.1.2"
Browser:
ALL
Language:
ALL
Node: node --version =
v5.12.0

Error: No provider for KeepaliveSvc! at NoProviderError.BaseError

When using the "ng2-idle" component without the "ng2-idle-keepalive", the sample documentation on how to use causes me to get the following error when using Angular2 (currently using 2.1.x):

Error: No provider for KeepaliveSvc! at NoProviderError.BaseError [as constructor]

However, I can get around this but doing both of the following...

@NgModule({
	providers: [
        IDLE_PROVIDERS, {provide: KeepaliveSvc, useValue: undefined}, <-- insert a fake KeepaliveSvc injectable
	],

and

export class AppComponent {
    private configureIdleBehavior() {
        // this._idle.setKeepaliveEnabled(false); //must comment this out, else app wants a valid KeepaliveSvc

My fix was pieced together with the help of some other issues but wanted to report it here so the documentation on the main page can be updated accordingly to help others getting bitten by this, or to actually fix the providers in the component to work properly with the official Angular 2+ releases.

Angular RC5 Support

There is already a fixed merge for for RC5 support. Can you publish a new version to NPM?

LocalStorageExpiry bug

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

When I call the stop function on my Idle. This function call 'this.expiry.last(null)' with expiry instance of LocalStorageExpiry. The LocalStorageExpiry don't check the null value and throw the TypeError: Cannot read property 'getTime' of null TypeError: Cannot read property 'getTime' of null at LocalStorageExpiry

Expected behavior

Check null value when we set expiry in LocalStorageExpiry

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

@ng-idle version: 2.0.0(beta.5)

Angular version: 2.x

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [all | TypeScript X.X | ES6/7 | ES5]
Node: node --version =

Switch to Angular 2.0.0

Hi everyone,

After upgraded my project to Angular 2.0.0, I can´t use browserify to generate bundle.js because ng2-idle throws "no provider for Http!" exception when I try to load my app from the browser (as I said, using bundle.js generated by browserify).

If I remove ng2-idle dependency from my components, I don´t get this exception and the app works flawlessly.

So, I suppose that ng2-idle should be switched to Angular 2.0.0. Is this statement correct?

Is there anything that I can do to overcome this problem?

Thanks in advance.

Tiago Peixoto.

Timeout is not occurring as per configuration - inconsistent behavior

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
Whatever timeout is configured in settimeout the idle period and timeout did not end as per configuration. It has been observed that the last expiry value is not calculating it properly. Sometimes it did not fire timeout event after it occurs first time. This is mostly occuring when you set the large number in that timeout period.

Expected behavior

The timeout should happen whatever is configured in setTimeout.

Minimal reproduction of the problem with instructions
Settimeout for 60 second interval and 60 seconds in setIdle. The timeout occurs at anytime or sometimes did not occur at all.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
OS windows-10

@ng-idle version: 2.x
2.0.0-beta.12
Angular version: 2.x
Angular-4
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
All browser
Language: [all | TypeScript X.X | ES6/7 | ES5]
Typescript
Node: node --version =

@ngIdle not working if we refresh the page manually if am at localhost:8000/home and my @ngIdle logic on localhost:8000/login .

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

@ng-idle version: 2.x

Angular version: 4

Browser: [all | Chrome xx | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [all | TypeScript X.X | ES6/7 | ES5]
Node: node --version =

DocumentInterruptSource issue with scroll event

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
I noticed when using my own DocumentInterruptSource instance that the scroll event doesn't trigger for document.documentElement.

However document.onscroll and window.onscroll work as expected so I'm using WindowInterruptSource for now.

Expected behavior
DocumentInterruptSource events should work for document event listeners

Minimal reproduction of the problem with instructions
in the browser console if you type and enter:
document.documentElement.onscroll = function() { console.log('scroll')}
and scroll, nothing happens.

My interrupt sources are:

let interruptSources: DocumentInterruptSource[] = [new DocumentInterruptSource( 'mousemove keydown mousedown touchstart touchmove scroll')];

What is the motivation / use case for changing the behavior?
The default interrupts use DocumentInterruptSource.

Please tell us about your environment:
MacOSX Chrome 55

@ng-idle version: 2.x
Older version 1.0.0-alpha.13
Angular version: 2.x
angular2-rc4
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Chrome 55
Language: [all | TypeScript X.X | ES6/7 | ES5]
Typescript ^1.8.10
Node: node --version =
v6.6.0

Watch intervals should be run outside of main Angular zone

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

ng2-idle's watching uses setInterval on the main angular zone which is blocking Protractor because it waits until all calls in the main zone are finished.

Expected behavior

setInterval is run outside of the main angular zone so that it doesn't block Protractor.

Minimal reproduction of the problem with instructions

You should be able to add protractor to an app setup for ng2-idle and use protractor --elementExplorer and try to grab an element through Protractor's api.

Workaround
Should preferably deal with this inside of the plugin itself.

    this._ngZone.runOutsideAngular(() => {
      this.idle.watch();
    });

    this.idle.onTimeoutWarning.subscribe((countdown: number) => {
      this._ngZone.run(() => { this.sessionEndCountdown = countdown });
    });

What is the motivation / use case for changing the behavior?

Protractor tests don't work

Please tell us about your environment:

OSX EL Capitan 10.11.6
VS Code

@ng-idle version: 2.x

2.0.0-beta.4

Angular version: 2.x

2.4.7

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

ALL

Language: [all | TypeScript X.X | ES6/7 | ES5]
ALL
Node: node --version =
7

Unexpected value '[object Object]' imported by the module 'AppModule', - ionic 2

Hi, I'm on alpha 18 I just created a new ionic 2 project with

ionic start myApp --v2.

Then all I did was install via npm and include the module in my module's imports as in the ng2-idle-example repo.

I get this error and I cannot figure out why.

Suggestion: Remove dev dependency on global packages

In package.json:
`- "postinstall": "typings install",

"test": "gulp test"
"gulp": "node node_modules/.bin/gulp",
"typings": "node node_modules/.bin/typings",
"test": "npm run gulp test",
"postinstall": "npm run typings -- install"`

Now gulp install (global gulp) is npm run gulp install.
This approach, while a little more verbose, is more accommodating for users or CI environments with a different version of typings or gulp installed globally.

Uncaught Invalid provider - only instances of Provider and Type are allowed

After applying gulp-webpack to my ts scripts, running my application gets this error in Chrome:

Uncaught Invalid provider - only instances of Provider and Type are allowed, got: [object Object]

When I remove the IDLE_PROVIDERS from the bootstrap method it works fine.

Environment:
Angular2: RC1
ng2-idle: 1.0.0-alpha.12

documentation

Hi,

It would be great to have a code snippet to see how to use the Idle service.

Thanks,
David

Compatibility with Ionic 2 RC0

Hello,

I am using ng2-idle in my ionic 2 beta project. Currently, we are in the process of migrating to ionic 2 RC0 (which updated to Angular 2.0.0 AOT from Angular 2 RC4 )
However, currently, I'm encountering 2 kinds of errors when I include ng2-idle providers.

error in ionic serve command:

bundle dev started...
Error reading template file, "my-component-tpl.html": Error: ENOENT: no file or directory, open 'ionic_app\node_modules\ng2-idle\node_modules@angular\core\src\animation\my-component-tpl.html'

Error reading template file, "my-component-tpl.html": Error: ENOENT: no file or directory, open 'ionic_app\node_modules\ng2-idle-keep-alive\node_modules@angular\core\src\animation\my-component-tpl.html'

Error reading template file, "my-component-tpl.html": Error: ENOENT: no file or directory, open 'ionic_app\node_modules\ng2-idle-keepalive\node_modules@angular\http\src\people.html'

error in browser console

"Unhandled Promise rejection: No provider for Http!; Zone: ; Task: Promise.then; Value:"

My app.module.ts

@NgModule({
  declarations: [ MyApp ] 
  imports: [IonicModule.forRoot(MyApp), HttpModule]
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [IDLE_PROVIDERS, KEEP_ALIVE_PROVIDERS]
})
export class AppModule {}

(I'm not familiar yet with the changes in Angular 2.0.0 but I'm guess AOT compiling used by Ionic 2 RC0 may be a factor?)

Can anyone advise? Thanks

Type Error: Cannot read property 'getTime' of null

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

When Idle start: onIdleStart:

core.es5.js:1084 ERROR TypeError: Cannot read property 'getTime' of null
at watchFn (idle.js:202)
at ZoneDelegate.webpackJsonp.1271.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:4140)
at ZoneDelegate.webpackJsonp.1271.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.1271.Zone.runTask (zone.js:191)
at ZoneTask.invoke (zone.js:486)
at timer (zone.js:1512)

Expected behavior

Subscription to onIdleStart should be triggered.

Minimal reproduction of the problem with instructions

This is the method used in AppComponent

constructor(private idle: Idle) {
   this.setupIdle();
}

 private setupIdle() {
    this.idle.setIdle(20);

    this.idle.onIdleStart.subscribe(() => {
        ....
    });

    this.resetIdle();
  }

private resetIdle() {
    this.idle.watch(true);
  }

What is the motivation / use case for changing the behavior?

Auto logout when user idle

Please tell us about your environment:

Windows 10, IntelliJ IDEA, NPM, Node.js

@ng-idle version: 2.x

"@ng-idle/core": "^2.0.0-beta.11"

Angular version: 2.x

"@angular/core": "^4.1.1"

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome 58.0.3029.110

Language: [all | TypeScript X.X | ES6/7 | ES5]
TypeScript
Node: node --version =
v6.10.3

Timeout is not occurring as per configured setTimeout.

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
If we set the setIdle to whatever seconds. It doesn't raise onIdleStart event as per configured time. This happens normally if we set the timeInterval more than 5 seconds.

this.idle.setIdle(30);

It has been observed from console logs that the last value calculation is wrong. last value from LocalStorageExpiry.last() is coming wrong. Below is the sample code -

this.idle.setIdle(30);
const idleTimeout: number = parseInt(10);
// sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    const timeout = this.idle.getTimeout();
   
    this.idle.onIdleEnd.subscribe(() => {
        this.logger.debug('You are no longer idle. Click "OK" to close the warning dialog')
    });
    this.idle.onTimeout.subscribe(() => {
        this.logger.debug('Timed out!');          
    });
   
    this.idle.onIdleStart.subscribe(
        () => {
            this.logger.debug('You have gone idle. Idle time period started');
        });
    this.idle.onTimeoutWarning.subscribe((countdown: any) => {
        this.logger.warn('timed out warning dialog - ' + countdown);
      
    });

    // sets the ping interval to 15 seconds
    this.keepalive.interval(15);
    
    this.keepalive.onPing.subscribe(() =>
        log("KeepAlive call"));

    
    this.idle.setTimeout(idleTimeout);
    const timeOutInterval = this.idle.getTimeout(); 

    this.idle.watch();

Expected behavior
The onIdleStart event should raised based on setIdle configuration.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
OS10

@ng-idle version: 2.x
2.0.0-beta.12
Angular version: 2.x
Angular -4
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
All browser
Language: [all | TypeScript X.X | ES6/7 | ES5]
Typescript
Node: node --version =

Please upgrade to ng4 as soon as possible.

please update ng4 ASAP or update "@angular/common"
"@angular/core" of peerDependencies to more than 4.0 version
Thank

SetTimeout is throwing error

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
setTimeout is throwing error even when passing valid positive number in seconds.
idle.setTimeout(10);

throw new Error(''seconds' can only be 'false' or a positive number.');

Expected behavior
It should not throw error if it passes correct value.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

@ng-idle version: 2.x

Angular version: 2.x

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All browser

Language: [all | TypeScript X.X | ES6/7 | ES5]
Typescript.
Node: node --version =

Logout using ng2-idle

My problem is that when click on the logout button ng2-idle continues working. And to try to solve this problem I set again the setIdle and setTimeout functions for 1 second.

However, when the user is transferred to the login screen, the app takes 1 second to give the timeout.

I like to know if have any way of forcing the timeout or end ng2-idle after click the logout button that call logout() function.

 import {Component} from '@angular/core';
 import {Router} from "@angular/router";
 import {Http, Headers} from "@angular/http";
 import {NgClass} from '@angular/common';
 import {Observable} from "rxjs/Observable";
 import 'rxjs/Rx';
 import {HeaderService} from './header.service';
 import {Idle, DEFAULT_INTERRUPTSOURCES} from 'ng2-idle/core';

 @Component({
      selector: 'my-header',
      templateUrl: './js/app/header/header.component.html',
      styleUrls: ['./js/app/header/header.component.css']
 })

 export class HeaderComponent {
      nome = localStorage['nome'];
      constructor(private _router: Router, private _http: Http, private _headerService: HeaderService, private idle: Idle) {
           idle.setIdle(5);
           idle.setTimeout(1800);
           idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

           idle.onTimeoutWarning.subscribe((countdown:number) => {
             console.log('TimeoutWarning: ' + countdown);
           });

           idle.onTimeout.subscribe(() => {
             console.log('Timeout');
             localStorage.clear();
             this._router.navigate(['/auth', {sessionExpirate: 'true'}]);
           });
           idle.watch();
      }

      logout() {
           this.idle.setIdle(1);
           this.idle.setTimeout(1);
           this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
           this._headerService.exit()
                .subscribe(
                     data => {
                          this.idle.onTimeout.subscribe(() => {
                               console.log('Timeout');
                               localStorage.clear();
                               this._router.navigate(['/auth']);
                     },
                     error => console.log(error)
                )}
           )
      }  
 }

onIdleEnd fails to trigger on second (and subsequent) visits to the view

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
I have two routes at app root level - login (LoginComponent) and content (ContentComponent).

Only content component has ng2-idle configured in its constructor.

On first entry/visit to content view everything works fine.

However, if I go to logout (or any other view) and come back to content, the interrupts are not detected by ng2-idle and onIdleStart gets triggered after the timeout period! Even after that no matter how much I click on the screen or scroll etc, the onIdleEnd event is not triggered and onIdleTimeout gets triggered. After that everything again starts works well.

Expected behavior

ng2-idle should work consistently on first visit or subsequent visits to the route

Minimal reproduction of the problem with instructions

Please visit the following Plunk to check the bug:
https://plnkr.co/edit/OHhNJHYrmx0oWkIqYq7V?p=preview

What is the motivation / use case for changing the behavior?

Idle timeout is used only for protected content. It is never used for login page.

Please tell us about your environment:

OSx (macOS Sierra)
VSCode
NPM
Node.js

@ng-idle version: 2.x

latest

Angular version: 2.x

2.4.4

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Checked on Chrome, Safari & Firefox

Language: [all | TypeScript X.X | ES6/7 | ES5]
Typescript
Node: node --version =
7.4.0

`npm run format` doesn't work

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
$ npm run format

> [email protected] format /Users/pivotal/workspace/ng2-idle
> gulp clang:format

[10:11:55] No gulpfile found

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/7.7.4/bin/node" "/usr/local/bin/npm" "run" "format"
npm ERR! node v7.7.4
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] format: `gulp clang:format`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] format script 'gulp clang:format'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ng-idle-src package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp clang:format
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ng-idle-src
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ng-idle-src
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/pivotal/workspace/ng2-idle/npm-debug.log

Expected behavior
npm run format is supposed to use clang-format to clean up the source. Either this should fixed or it should be removed.

Minimal reproduction of the problem with instructions

Clone the repo
Run npm run format

DOM refreshes and changes interactive elements back to "default"

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
I have a component like this:

<div *ngFor="let item of items">
  <item-main [item]="item"></item-main>
  <item-expanded *ngIf="item.expanded" [item]="item"></item-expanded>
</div>

Clicking on <item-main> toggles the view of <item-expanded>
This works.

However, after I click on <item-main>, 5000ms later, the IDLE_START event is dispatched and the DOM updates and the <item-expanded> disappears. (however, item.expanded is still set to true...)

Expected behavior
Clicking on <item-main> toggles the view of <item-expanded> and it should not disappear after 5000ms

Minimal reproduction of the problem with instructions

Our package.json is:

    "@ng-idle/core": "2.0.0-beta.4",
    "@ng-idle/keepalive": "2.0.0-beta.4",

What is the motivation / use case for changing the behavior?

I don't know why the UI changes even though the core object used by ngIf doesn't change...

Please tell us about your environment:

Running on mac
NPM = 4.1.2
NODE = 7.5.0
Angular = 2.2.4

@ng-idle version: 2.0.0-beta.4

Angular version: 2.2.4

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [TypeScript]
Node: node --version =

Add AOT support

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
If I include ng2-idle in my import modules while doing AOT compile I get the following error:

[11:54:02] Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda...

If I take out the ng2-idle import etc, it works fine.

Related to: angular/angular#11262

Does ng2-idle have support for AoT compilation? I don't see any .metadata.json files.

Please tell us about your environment:
Running with ionic 2, windows 10. typescript.

@ng-idle version: 2.0.0-beta.2

Angular version: 2.1.1

interrupts should not be paused during the timeout countdown

When the onTimeoutWarning event is firing events, the interrupts are paused. I can't find a way to prevent the timeout. I don't think interrupts should be paused so that the timeout can be prevented.

What I want to do is display the countdown to the user and allow them to cancel the timeout simply by moving the mouse over the page. This is a feature that I had working with ng-idle for Angular 1 which doesn't seem to work in ng2-idle.

Class Subject<T> Incorrectly Extends Subject<T>

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
When I try to build my Angular 4 application I get the following error:
E:/Projects/INSTINCT/AnalystDashboard/src/Proxy_Reporting/node_modules/ng2-idle/node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class 'Subject' incorrectly extends base class 'Observable'.
Types of property 'lift' are incompatible.
Type '<T, R>(operator: Operator<T, R>) => Observable' is not assignable to type '(operator: Operator<T, R>) => Observable'.
Type 'Observable' is not assignable to type 'Observable'.
Type 'T' is not assignable to type 'R'.

Expected behavior
Expect the above issue not to occur

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
Proper integration of this package into my application.

Please tell us about your environment:
Using Windows 7, Visual Studio 2015, npm 3.10.8

@ng-idle version: 2.x
Using ng2-idle 2.0.0-beta.12
Angular version: 2.x
Using angular 4.3.5
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Using Google Chrome and IE 11
Language: [all | TypeScript X.X | ES6/7 | ES5]
Using Typescript 2.4.2, ES5/ES2015
Node: node --version =
Using node version 6.9.1

idle doesn't work with CKEditor

Hi, the idle function doesn't work with CKEditor. When user typing in the CKEditor, always got idle and timeout. How to fix that?

Thanks

not AoT compatible? (no exported member 'IDLE_PROVIDERS')

Hi this works fine in dev mode and regular peoduction mode but AoT does not compile. It gives node_modules/ng2-idle/core"' has no exported member 'IDLE_PROVIDERS'. and node_modules/ng2-idle-keepalive/core"' has no exported member 'KEEPALIVE_PROVIDERS'

This is with angular 2.1.0

Re-enter angular2 component cause multiple 'Idle' instance subscribing

In my application, there is a necessary to frequently re-visit a core component. I follow the example to reset the idle using idle.watch() every time the component class constructs. The behaviour is wrong so that each visit will create a running instance. Thus multiple onTimeout, onIdleEnd event will fire together when due. Even if I have programmably enforce idle.stop when the component onDestroy.

Method to stop idle.watch()

Is there a method to stop idle.watch after a user successfully logs out?

ngModule and WebPack

Using the latest version of ng2-Idle, I am not able to get it to work with the full release of Angular 2. I keep getting errors around No Provider for KeepAliveSrv.

To reproduce (using angular-cli):

ng new idleTest

npm install --save ng2-idle

There is no module exposed to add to app.module.ts, so I have to resort to adding IDLE_PROVIDERS to the providers section.

Idle detection not consistent in IE11

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
When using IE11 moving the mouse does not stop idle. (Using DEFAULT_INTERRUPTSOURCES)

Expected behavior
On other browsers tested (Chrome, Firefox and Edge) moving the mouse stops idle timeout

Minimal reproduction of the problem with instructions
Start up ng2-idle example https://hackedbychinese.github.io/ng2-idle in IE11. Wait for timeout countdown to start. Moving mouse does not stop countdown.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

@ng-idle version: 2.0.0-beta.4
Angular version: 2.2.1
Browser: IE 11
Language: [all | TypeScript 2.0.3 | ES6/7 | ES5]
Node: node --version = 6.9.1

How to get library to work with Angular 2 Webpack Starter

I have a project where I am using the Angular2 Webpack Starter project.

Because you've referfenced specific versions of rxjs etc., I get a node_modules directory in the node_modules/ng2-idle directory....

I get all sort of reference problems due to rxjs already being including in my typings

Have you been able to include ng2-idle in a webpack project?

If I delete the child node_modules directory, it seems to compile OK.
--mike

Timer not running when current tab out of focus

https://hackedbychinese.github.io/ng2-idle/

The example runs continue stopping countdown if I move the focus to other tab or applications.

Max OS X 10.12.4
Chrome Version 59.0.3053.3 (Official Build) dev (64-bit)

Feature request: allow keepalive.request() to accept a function

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

The keepalive module accepts a string or Request in request() for configuring the ping request.

Expected behavior

I'd like to have the ability to pass a function that returns a promise.

Minimal reproduction of the problem with instructions

n/a

What is the motivation / use case for changing the behavior?

I have an app that needs to add special headers to HTTP requests. I extended Angular's Http to enable this. I'd rather use a service that I already wrote instead of manually constructing the Request to pass to keepalive.request().

Please tell us about your environment:

Idea, npm, linux

@ng-idle version: 2.x

Angular version: 2.x

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

Language: [all | TypeScript X.X | ES6/7 | ES5]
All
Node: node --version = 6.10.3

Thank you!

Latest beta versions not included in npm

We are attempting to update to the latest version of angular (2.3.0) using npm. In this, we recieved an error for your old ng2-idle-keepalive project.

After noticing you had merged the project into ng2-idle, we updated our package.json to request version 2.0.0-beta.4. It seems the latest packages haven't been published

Are you still supporting npm packages?
https://www.npmjs.com/package/ng2-idle

support for angular 2.0.0-rc.0 and later

With the release of angular 2.0.0-rc.0 all of the angular packages have been renamed. This causes problems with ng2-idle.

Improve scrolling performance with passive event listeners

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
Adding default list of event listeners (DEFAULT_INTERRUPTSOURCES) causes warnings in Angular4.
EX:
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

Expected behavior
Add event listeners in passive mode.

Minimal reproduction of the problem with instructions
const idle = new Idle();
idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
idle.watch();

What is the motivation / use case for changing the behavior?
Improved performance.

@ng-idle version: 2.0.0-beta.12
Angular version: 4.2.2
Browser: Chrome 51+
Language: all
Node: v6.10.3

idleEnd is not called if user becomes idle while focus is in another window

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

Currently, if I allow the idle period to start while my focus is in another window (such as another application besides my browser), the idle period will not end when I return to the browser, click around with the mouse, type keys, etc. It works as expected only if the user becomes idle while focus is inside the window, which is not desired, since most users will become idle while in other windows.

Expected behavior

The idle period should end regardless of where the focus was when it began.

Minimal reproduction of the problem with instructions

Take appropriate steps to activate ng2idle in your application (such as logging in).
Move the mouse to another window besides the browser and shift the focus there by clicking.
Wait for your application to become idle.
Move the mouse back into the application and click to move the focus back.
Click or type keys to end the idle status.
The application will not become active un-idle.

I'm using the following initialization:
init () {
let interruptSource: WindowInterruptSource = new WindowInterruptSource('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove scroll');
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
this.idle.setInterrupts([interruptSource, new StorageInterruptSource()]);

// Subscribe to idle events. Add your logic on how the application should respond, such as displaying
this.keepalive.onPing.subscribe(() => {
  this.ngZone.run(() => {
      console.log("In keepalive ping");
  });
});
this.idle.onTimeout.subscribe(() => {
  this.ngZone.run(() => {
     console.log("The user would be logout now");
  });
});

// a warning dialog onIdleStart, or redirecting to logout page onTImeout, etc.
this.idle.onIdleStart.subscribe(() => {
  this.ngZone.run(() => {
    console.log('IdleStart');
  });
});
  this.idle.onTimeoutWarning.subscribe((countdown) => {
  this.ngZone.run(() => {
    console.log("Countdown", countdown);
  });
 });
this.idle.onIdleEnd.subscribe(() => {
  this.ngZone.run(() => {
     console.log("Idle ended");
 });
});

// start watching for idleness right away.
this.start();
}

start () {
this.ngZone.runOutsideAngular(() => {
  this.idle.watch();
});

}

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

I'm using a Mac with Chrome, but have seen the same results on Browserstack emulating the Windows environment with both Chrome and Firefox.

@ng-idle version: 2.0.0-beta.11

Angular version: 2.4.1

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome, Firefox

Language: [all | TypeScript X.X | ES6/7 | ES5]
Typescript
Node: node --version = 6.5.0

EDIT: Seems related to #40 - when not running this.idle.watch outside of ngZone, it seems to behave correctly - but then Protractor tests fail.

Switch to Angular 2.0.0 and webpack

Hi guys,

I'm quite new to this environment, I'm sorry if I'll say something stupid, but I really need your help.

I was using your component in a previous version (in development stage) of my application, using SystemJs and Angular RC-6, and all seemed to work properly.
With the release of Angular 2 Final, I started a new project from scratch, switching to webpack (that I still can't figure out :-( )
I added IDLE_PROVIDERS to the providers of my module, like the previous version, but the application is asking me (and it wasn't before) to configure KeepAliveSvc in the providers. I have no need to use the keep-alive function of your component, I only need to manage the idle behaviour.

Tell me whatever you need

Thank you very much

Isaia

Angular 4 compatibility

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

npm WARN @ng-idle/[email protected] requires a peer of @angular/common@^2.0.0 but none was installed.
npm WARN @ng-idle/[email protected] requires a peer of @angular/core@^2.0.0 but none was installed.

Expected behavior
npm install --save @ng-idle/core@latest should work with an Angular 4 project.

Minimal reproduction of the problem with instructions
Run npm install --save @ng-idle/core@latest on an Angular 4 project.

What is the motivation / use case for changing the behavior?
We want to upgrade our application to Angular 4, but @ng-idle/core is the only package that we use that doesn't support it yet.

Please tell us about your environment:
macOS, IntelliJ, npm or yarn, webpack

@ng-idle version: 2.0.0-beta.9
Angular version: 4.0.0
Node: node --version = v7.7.4

Example code tests timeout and fail

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

Following the example code at https://hackedbychinese.github.io/ng2-idle. When I run the tests, they timeout with this error:

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

If I remove the call to this.idle.watch(), the tests don't timeout.

Expected behavior
The tests should run and pass without timing out.

Minimal reproduction of the problem with instructions
I create a new project with angular-cli (RC2), add the example code, validate the example works in the UI, run the tests using ng test, the tests now fail with a timeout.

What is the motivation / use case for changing the behavior?
It would be nice to get the tests to work.

Please tell us about your environment:
MAC Sierra

@ng-idle version: 2.x
2.0.0-beta.8
Angular version: 2.x
2.4
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Chrome
Language: [all | TypeScript X.X | ES6/7 | ES5]
Typescript
Node: node --version =
6.9.4

NoProviderError after RC6 upgrade

Had ng2-idle implemented on a RC5/Webpack installation after following the GETTING STARTED part of the readme. Everything working fine. Upgraded to RC6 yesterday and got an error + app crash.

Image with the chrome console error

NoProviderError {_nativeError: Error: No provider for KeepaliveSvc! at NoProviderError.Error (native) at NoProviderError.Ba…, keys: Array[1], injectors: Array[1]}
_nativeError
:
Error: No provider for KeepaliveSvc! at NoProviderError.Error (native) at NoProviderError.BaseError [as constructor] (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:1618:39) at NoProviderError.AbstractProviderError [as constructor] (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:2102:21) at new NoProviderError (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:2133:21) at ReflectiveInjector_._throwOrNull (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:3735:24) at ReflectiveInjector_._getByKeyDefault (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:3763:30) at ReflectiveInjector_._getByKey (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:3726:30) at ReflectiveInjector_.get (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:3535:26) at NgModuleInjector.AppModuleInjector.createInternal (AppModule.ngfactory.js:451:67) at NgModuleInjector.create (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:9911:81)
constructResolvingMessage

I have not tried to install the ng2-keepalive library in my app.

What I did try was to declare the KeepaliveSvc class as a provider in app.module.ts and in the component where the Idle functions run in different ways with no success.

Setup:

"dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.6",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.3",
    "angular2-apollo": "^0.4.3",
    "angular2-modal": "^2.0.0-beta.12",
    "apollo-client": "^0.4.11",
    "core-js": "^2.2.0",
    "es6-promise": "^3.2.1",
    "ie-shim": "^0.1.0",
    "isomorphic-fetch": "^2.2.1",
    "ng2-bootstrap": "^1.0.24",
    "ng2-idle": "^1.0.0-alpha.15",
    "ng2-redux": "^3.3.5",
    "redux": "^3.5.2",
    "rxjs": "5.0.0-beta.6",
    "typescript": "^1.9.0-dev",
    "zone.js": "~0.6.12"
  }

app.module.ts:

import { IDLE_PROVIDERS } from 'ng2-idle/core';

providers   : [
  ...
  IDLE_PROVIDERS
]

auth-timer.component.ts:

import { Idle, DEFAULT_INTERRUPTSOURCES } from 'ng2-idle/core';
constructor(
  private idle: Idle
)
{
  idle.setIdle(600);
  idle.setTimeout(180);
  idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
  idle.onIdleStart.subscribe(() => {
      console.log('IdleStart');
    });
  idle.onIdleEnd.subscribe(() => {
      console.log('IdleEnd');
    });
  idle.onTimeoutWarning.subscribe((countdown:number) => {
      console.log('TimeoutWarning: ' + countdown);
    });
  idle.onTimeout.subscribe(() => {
      console.log('Timeout');
    });
  // start watching for idleness right away.
    idle.watch();
}

Documentation on InterruptSource

Is it possible to get more documentation on how to implement our own custom interrupt source? I haven't seen this anywhere in the documentation.

In my case, I want the user to no longer be considered idle whenever he moves his mouse or presses a key on the keyboard, not just within the tab, but anywhere on the computer, or at least in the browser.

I'm seeing InterruptSource as an abstract class, but am not sure which properties it wants me to define when I extend from it It also looks like attachFn and detachFn are parameters passed to the constructor when instantiated, but I don't understand what should happen in these functions or what the purpose of them is. I assume attachFn attaches the event it wants to listen to to this somehow but is detachFn called during destruction?

node_modules/@ng-idle/core.js not found

Hi, I just update NgIdleModule to beta 2.0.0-beta.4. My code looks like:

import {NgIdleModule} from '@ng-idle/core';
...

imports: [NgIdleModule.forRoot()]

But I'm receiving
GET http://localhost:5555/node_modules/@ng-idle/core.js 404 Not Found

SystemJS compatibility

In looking at the systemjs.config.js from the Quickstart, we see how to reference packages via map and packages from the SystemJS config API. For all of the scoped @angular packages this works swimmingly. However, I cannot get ng2-idle or ng2-idle-keepalive to properly be referenced. What am I doing wrong?

Here is my wwwroot/js folder hierarchy:

js
|   bootstrap.js
|   bootstrap.min.js
|   jquery.js
|   jquery.min.js
|   jquery.scrollbar.js
|   jquery.scrollbar.min.js
|   Reflect.js
|   Reflect.min.js
|   system.src.js
|   system.src.min.js
|   zone.js
|   zone.min.js
+---@angular
|   +---common
|   |   \---bundles
|   |           common.umd.js
|   |           common.umd.min.js
|   +---compiler
|   |   \---bundles
|   |           compiler.umd.js
|   |           compiler.umd.min.js
|   +---core
|   |   \---bundles
|   |           core.umd.js
|   |           core.umd.min.js
|   +---forms
|   |   \---bundles
|   |           forms.umd.js
|   |           forms.umd.min.js
|   +---http
|   |   \---bundles
|   |           http.umd.js
|   |           http.umd.min.js
|   +---platform-browser
|   |   \---bundles
|   |           platform-browser.umd.js
|   |           platform-browser.umd.min.js
|   +---platform-browser-dynamic
|   |   \---bundles
|   |           platform-browser-dynamic.umd.js
|   |           platform-browser-dynamic.umd.min.js
|   +---router
|   |   \---bundles
|   |           router.umd.js
|   |           router.umd.min.js
|   +---router-deprecated
|   |   \---bundles
|   |           router-deprecated.umd.js
|   |           router-deprecated.umd.min.js
|   \---upgrade
|       \---bundles
|               upgrade.umd.js
|               upgrade.umd.min.js
+---ng2-ext
|       angular2localization.umd.js
|       angular2localization.umd.min.js
|       ng2-bs3-modal.js
|       ng2-bs3-modal.min.js
|       ng2-idle-keepalive.js
|       ng2-idle-keepalive.min.js
|       ng2-idle.js
|       ng2-idle.min.js
\---rxjs
    \---bundles
            Rx.umd.js
            Rx.umd.min.js

Here is my systemjs.config.js:

(function (global) {

    var packages = {
        'ng2-idle/core': { defaultExtension: 'js' },
        'ng2-idle-keepalive/core': { defaultExtension: 'js' },
        'ng2-bs3-modal/ng2-bs3-modal': { defaultExtension: 'js' }
    };

    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];

    ngPackageNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = { 
            main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'
        };
    });

    System.config({
        defaultJSExtensions: true,
        paths: {
            'rxjs/*': 'js/rxjs/bundles/Rx.umd.min.js',
            'angular2localization/*': 'js/ng2-ext/angular2localization.umd.min.js'
        },
        map: {
            'app': 'app/shell',
            '@angular': 'js/@angular',
            'ng2-idle': 'js/ng2-ext',
            'ng2-idle-keepalive': 'js/ng2-ext',
            'ng2-bs3-modal': 'js/ng2-ext'
        },
        packages: packages
    });

})(this);

When the files are requested by the client module loader, they return happily but then references to any objects of these from import statements are undefined?

Keep in mind that I have tried all sorts of alternative ways of referencing these packages, including but not limited to paths, implicit versus explicit main reference in packages, implicit versus explicit .js file in map, etc...

moribvndvs / ng2-idle Goto Github PK

ng2-idle's Introduction

Introduction

MAINTAINERS WANTED

Demo

Quick start

Design Considerations

Modularization

Extensible Keepalive Integration

Extensible Interrupts

Extensible Expiry

Multiple Idle Instance Support

Example Use Case

Server-Side Rendering/Universal

Developing

Contributing

ng2-idle's People

Contributors

Stargazers

Watchers

Forkers

ng2-idle's Issues

Recommend Projects

Recommend Topics

Recommend Org