moribvndvs / ng-idle Goto Github PK

So far enjoying the functionality this module is offering, but I'm having one problem.

I would like on the timeout modal for my users to be required to input their password. However, any user input while this modal appears releases them from an "idle" state.

I'd imagine what I want could be accomplished by setting activeOn(''), but I can't use this function outside of my module's config. Are there any workarounds for this?

ngMin is a grunt task used by angular-generator in Yeoman to automatically decorate functions with injected dependencies during minification. I manually decorate with metadata using $inject on $keepaliveProvider.$get and $idleProvider.$get. ngMin has a bug where it doesn't handle the $inject metadata approach and creates a problem.

I can make everyone happy, yeoman or otherwise, if I switch to the array-style metadata, which ngMin will ignore.

I am getting this while using the min version BUT only in Firefox.

Error: angular-idle.min.js is being assigned a //# sourceMappingURL, but already has one

Is $idleProvider exposed so it could be used through injection? I tried injecting $idleProvider (as well as $IdleProvider - upper-case "I") but I keep getting:

Unknown provider: $idleProviderProvider <- $idleProvider

Is it even supposed to be exposed? Your getting started injects and uses it in .config()

For example, how do I access the autoResume() function (am I even supposed to have access to that)?

Thanks

After writing and having people start to use and discuss the module, certain terms became more natural to describe certain states, while others that I had been using sounded awkward or needed to be re-explained.

Everybody hates breaking changes, but I decided that with release 1.0.0, I would make those changes to normalize the vernacular across the board and just be done with it.

These are the methods that were changed on $idleProvider:

• idleDuration() became idle()
• warningDuration() became timeout()
• activeOn() became interrupt()

Changes are already reflected in the wiki.

I was trying to disable the title service, but it wouldn't work even after adding idle-disabled="true".
Later i found that i had a image <img src="..." title="some title" />, So the value idle-disabled="true" was being overwritten later in the document.
It would be preferable to use tag name like idle-title to prevent conflicts.

Hi!
First that all, Let me tell you your work is awesome and I consider this as a great feature that deserve to be part of Angular itself.
I found this issue by leaving my Firefox open with the application running and blocking my windows session. I had set the timeout at 300 sec, when I got back and unlocked the session I noted the application was still running and not actions related idle was performed. I saw this happen in Ipad/Android as well when they become locked and unlocked next day :(

Is this a known issue already?
If not, let me know what information you need and how I can help, I will be glad to do so.

Thanks!

I have two desktop computers in my office, both running on the same operating system and same version of Google Chrome. When looking at the demo, computer 1 times out in 5 seconds as expected. However, computer 2 will not timeout unless the mouse is positioned outside of the window for 5 seconds. For computer 1, there is no need to move the mouse outside of the window for the $idleStart to kick in.

Any ideas on why we aren't seeing consistent functionality between the two computers?

I tried to use the demo to check out the functionality but I'm not seeing a modal appear anywhere. I've tried with and without ad-block. I don't see any output in the console that would lead me to believe the site is malfunctioning. I'm using chrome Version 38.0.2125.101 m

Reported by @brianfoody in https://github.com/brianfoody/Angular/blob/master/src/idle.js

It is suggested that we record a timestamp of when the last watch was invoked, and have interrupt trip the idle state if that time difference is greater than the idle timeout.

As states in the angular Docs

Angular Prefixes $ and $$: To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. Please do not use the $ or $$ prefix in your code.

To be less confusing, please choose a different "prefix" for all ng-idle stuff.

I've noticed that keepAlive will only run while the user IS NOT idle.

What if I don't want that? What if what I want is to keep the browser session continuously while my angularApp is open?

Is there any way to do that?

Is it MIT?

Nice work by the way!

Thanks!

Hi
I am using ng-idle in my project and everything worked great until i checked my unit tests.
All my test are failing since after adding 'ngIdle' in my app dependency my app is failing to load during Unit test.I am getting below Error

39m Error: [$injector:modulerr] Failed to instantiate module test due to:
TypeError: undefined is not a function
at F:/Projects/abc/client/app/Features/Pay/PayBeneficiary/PayBeneficiary.js:9:501
at Object.invoke (F:/Projects/abc/client/bower_components/angular/angular.js:3966:17)
at F:/Projects/abc/client/bower_components/angular/angular.js:3885:37
at forEach (F:/Projects/abc/client/bower_components/angular/angular.js:325:18)
at loadModules (F:/Projects/abc/client/bower_components/angular/angular.js:3872:5)
at Object.createInjector as injector
at Object.workFn (F:/Projects/abc/client/bower_components/angular-mocks/angular-mocks.js:2339:52)

My app.js

'use strict';

angular.module('test', [
'ngIdle',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'dateRangePicker',
'ui.select',
'ngIdle'
])
.config(function ($idleProvider, $keepaliveProvider) {
$idleProvider.idle(5); // in seconds
$idleProvider.timeout(60); // in seconds
$keepaliveProvider.interval(20); // in seconds
})
.run(function($idle){
$idle.watch();
});

and in my Karma config

files: [
'client/bower_components/jquery/dist/jquery.js',
'client/bower_components/angular/angular.js',
'client/bower_components/angular-date-range-picker/build/angular-date-range-picker.js',
'client/bower_components/angular-mocks/angular-mocks.js',
'client/bower_components/angular-resource/angular-resource.js',
'client/bower_components/angular-cookies/angular-cookies.js',
'client/bower_components/angular-sanitize/angular-sanitize.js',
'client/bower_components/lodash/dist/lodash.compat.js',
'client/bower_components/angular-ui-router/release/angular-ui-router.js',
'client/bower_components/foundation/js/foundation.js',
'client/bower_components/foundation/js/foundation/foundation.reveal.js',
'node_modules/karma-jasmine-jquery/lib/jasmine-jquery.js',
'client/bower_components/angular-bindonce/bindonce.js',
'client/bower_components/moment/moment.js',
'client/bower_components/moment-range/lib/moment-range.js',
'client/bower_components/ng-idle/angular-idle.min.js',
'client/app/app.js',
'client/app/.js',
'client/components/.js',
'client/app/.html',
'client/components/.html',
],
If i remove ngIdle from app dependency all my test are passing.
am I missing something?
I even tried the ng-idle-test but it is throwing Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $interval <- $idle Error.

I am using angular 1.25 and jasmine 2.0

I'm using ng-idle on my tool "strichliste" (Demo here: http://demo.hackerspace-bootstrap.org/strichliste-web/). I'm rendering the index page with the following html snippet:

<li ng-repeat="user in users | filter:isActiveUser | orderBy:'name'" ng-click="userClick(user.id)" class="col-xs-2 panel panel-default" title="{{user.name}}">
    <div class="name">{{user.name}}</div>
    <div class="balance" ng-class="user.balance < 0 ? 'negative' : ''">{{user.balance | number:2}} {{currency}}</div>
</li>

My filter looks like this:

$scope.isActiveUser = function() {
 // some code
};

I added some console.log for debug purpose to this function and figures out, that on every mouse move, click or scroll (maybe more events) the filter again is triggered for each entry.

ng-idle is configured like this:

if(settings.idleTimeout) {
    app
        .config(function($idleProvider) {
            $idleProvider.idleDuration(Math.ceil(settings.idleTimeout/1000));
            $idleProvider.warningDuration(1);
        })
        .run(function($rootScope, $idle, $location, locationService) {

            $idle.watch();

            $rootScope.$on('$idleTimeout', function() {
                if($location.path() != '/') {
                    locationService.gotoHome();
                }
            });

        });
}

If I comment $idle.watch(), the "problem" is gone, but the timeout doesn't work anymore - of course ;)
Is this intended behaviour? I think this reduces the performance of my angular app a lot

I'm only seeing the IdleWarn event fired when idle expires and then when timeout expires. My impression was that this would fire every second during the timeout period?

I attempted to implement in plunker to give example code but doesn't seem to work at all there. I think it is a fairly good representation of what I am doing though. http://plnkr.co/edit/Tv1rmD?p=info

note: the header comment still references this as "* @Version v0.3.5"

How can I change idleDuration at runtime in a controller?

I can inject the $idle service like so:
.controller('EventsCtrl', function($scope, $idle)
Unforunately $idle does not have a property for changing the idleDuration.

Is there a way to disable the timeout ("$idleTimeout" event)?

function timeout() {
    stopKeepalive();
    $interval.cancel(state.idle);
    $interval.cancel(state.warning);

    state.idling = true;
    state.running = false;
    state.countdown = 0;

    $rootScope.$broadcast('$idleTimeout');
}

In my case I need to keep the ng-idle watcher running forever (the only thing I actually need is the "$idleStart" event. So what happens is ng-idle stops after some time. I can work around this by doing something like:

$rootScope.$on('$idleTimeout', function () {
    $idle.watch();
});

but perhaps there is a better way to do this?

Thanks

My anticipation of setting autoResume to false and my desired effect would be to autoResume except when in a warn state. This would allow me to force the user to click a button to resume the application from the warn state and restart the $idle.watch(). I do not want to always prompt after the idleDuration expires nor do I want autoResume once warning has started. Perhaps I'm asking for an additional feature.

I do appreciate the work you have done and I would prefer to use your module without customizing your code. Hopefully I have not become a pest. Thanks,

Error: [$injector:modulerr] Failed to instantiate module ngIdle due to:
Error: [$injector:nomod] Module 'ngIdle' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I have included ngIdle in karma.conf.js in this order

files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-touch/angular-touch.js',
'app/bower_components/angular-animate/angular-animate.js',
'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/revolunet-angular-carousel/lib/angular-mobile.js',
'app/bower_components/revolunet-angular-carousel/src/angular-carousel.js',
'app/bower_components/jquery/dist/jquery.js',
'app/bower_components/angular-cookies/angular-cookies.min.js',
'app/bower_components/ng-idle/angular-idle.min.js',
'app/bower_components/ng-grid/ng-grid-2.0.11.min.js',
'app/js//*.js',
'test/spec//*.js'

What is it that I am missing? Because all my other libraries are working correctly. If I remove ngIdle code then my karma/jasmine tests are passing but with this all of my 100+ testcases are failing and giving the above error.

I am not clear on how am I supposed to manually reset the timer so it would postpone broadcasting of the $idleStart event?

Am I supposed to use:

$idle.watch();

or

$idle.unwatch();
$idle.watch();

or

$idleProvider.keepAlive();

or

// this one would probably need to be used in combination with a 
// broadcast listener and one of the mentioned above?
$keepalive.ping();

Sorry if you feel this is a dumb question, but I'm just not clear which one of these should I use to reset the timer? What are the differences between them?

Thanks in advance

I may be being an idiot here but I'm having problems where minifying angular-idle.js seems to break it. I've used your own minified version and I'm still getting provider not found issues, which commonly occur when dependency notation fails.

I've put it into a plunkr for you though:

http://plnkr.co/edit/uaEOvD9hpUh1923ugJhH?p=preview

Open up your console to see:

Error: [$injector:unpr] Unknown provider: aProvider <- a <- $keepalive <- $idle

Change the script tag to include the uncompressed version and it'll work fine.

• My session will expire after 2 hours of http inactivity is it possible to listen to this?
• And can I interrupt it on button click inside modal?

I am using this module in our mobile. I have set timeout for 30seconds. Timeout alert appears even if user keeps scrolling for 30 minutes. And timeout alert doesn't hide if I scroll up/down during that time. Timeout alert disappears if only tap not scroll using swipe/drag gestures. Any help to this?

Hi, Thanks for the ng-idle.
i am using it but dont know how to use it to sync up between different tabs. so, if user opens a page of my browser in different tab and uses it, my main page for example shouldnt timeout i.e. the reset of idle state by user action should propogate in other windows as well. i am not sure if angular will that or will i have to dive into core javascript?

I'm trying to implement ng-idle instead of our homebacked solution, to logout users after 15 minutes of inactivity, but to send http pings if they are active.
It seems that it kinda works, as I send the logout command on $scope.$idleEnd
but it only happens when I'm active on the tab. It doesn't happen in background, for instance if I moved to another tab and waited there, the event won't seem to fire unless I come back to the tab.
Is this intended behavior? And if this is, how can I make ng-idle disconnect the user in background?

I setup idleProvider to use keepalive. Once idle.watch is called, keepalive is called on the set interval, but based on the documentation keepalive should stop once idle.unwatch is called. That's not the behavior I am seeing. I see keepalive firing even after idle.unwatch.

Link to example if the issue: http://plnkr.co/edit/ic92ex6PAFf7jviXVmeP

The fix might be as easy as adding the following to idle.js (line 172) : stopKeepalive();

In v0.3.5 the angularJS dependency for angularjs is ~1.2. This does not match 1.3, and should be updated to be >1.2.

Typo in the condition check.

Hi

Here is two different plunkers with exact same code (only difference is ngIdle version) :
ngIdle v0.2.2 : http://plnkr.co/edit/71e1UUVshYbtGIr0UxxK?p=preview
ngIdle v0.3.5 : http://plnkr.co/edit/XnZmvm14Ez8Y756LfKBa?p=preview

In both plunk :

• a basic ngIdle example is set and executed (a warning message should appear after 5s of inativity)
• I binded a isGod() function to a ngIf directive anywhere in the template. This function just do nothing but add a console.log('isGod?') in the dev console

If you look at the console while moving the mouse on the page :

• in v0.2.2 plunk: "isGod?" is never showed. The log is showed only when user is considered "idle" and only once by second during this time
• in v0.3.5 plunk : "isGod?" is showed for each mousemove events (100 times per seconds when moving mouse normally), which results in a huge performance issue when this scope function does heavy work (just logging a string in this example)

Am I missing something or is it a real problem ?

Thanks for this very usefull module anyway ;)
For now I'll just desactivate mousemove option

I want to update countdown variable on my scope (progressbar animation, like in the demo).

$scope.$on('IdleWarn', function(e, countdown) {
  $scope.countdown = countdown;
});

However, the scope is not refreshed. I need to:

$scope.$on('IdleWarn', function(e, countdown) {
  $scope.$apply(function() {
    $scope.countdown = countdown;
  });
});

in order to have scope refreshed properly. IMHO, events should be dispatched inside $apply.

Tested on current master.

Is there an easy and more official way for ng-idle to support one app opened on multiple tabs of the same browser?

here is one way http://stackoverflow.com/questions/23414691/ng-idle-issue-if-multiple-tabs-windows-are-opened-in-browser

Hi,
Thanks for this great module!

I'm wondering if it's possible to detect if a user scrolls by clicking and dragging on the scrollbars?
When testing in Chrome, it doesn't.

Scrolling with mousewheel or touchpad, stops the Idle.

Best regards
Anders

Once the timer starts, if we hit the home button and come back after a little while, the timer resumes from previous. It doesn't run in the background and doesn't send the idleTimeout.

More concise.

This would be awesome if I could
bower install angular-idle
and boom! I have the angular-idle package

IdleEnd isn't broadcast anywhere, so the window title is never restored.

Doing grunt bower-install inserts both angular-idle.js and angular-idle.min.js, as they are both listed in bower.json's "main" configuration. I believe only the non-minified file should be injected, as it would be used for development anyway. For production, it would be uglified and minified through a build task.

I'm trying to update the idleDuration property on runtime but if I use the idleProvider dependency I have an error saying that idleProviderProvider does not exists, and if I inject '$idle', I don't have access to idleDuration property.

How is it doable?

This directive can be used to easily copy the idle countdown value into the local scope for easy display. It should have just one scope value, a bidirectionally bound value that will receive the countdown value as it is updated.

Example:

<div ng-controller="DemoCtrl" ng-idle-countdown="countdown">
    You will time out in {{countdown}} seconds.
</div>

First I would like to say very nice work on this module!!! I love it so far and it is going to save me a lot of time. However, the latest release published is 0.3.5 in the release tab on GitHub, but also via installation with bower. I am confused because you have migration steps to use to get to version 1.0.0 in the Wiki, but I made the changes thinking I had version 1.0.0 but I did not. Why have migration steps for an unreleased version, I am missing something here?

maths.

It would be useful for this module to provide a way of automatically updating the document title when the user becomes idle or is timed out, and restore the original title when the user is active again.

Additional goals:

1. Touchless/minimal configuration: just monitor the appropriate ng-idle events and go.
2. Allow dynamic update of messages used in the title at runtime.

Is it possible to change ng-idle to use $interval instead of $timeout/$http? The current implementation breaks protractor tests. See:

https://github.com/angular/protractor/blob/master/docs/faq.md#my-tests-time-out-in-protractor-but-everythings-working-fine-when-running-manually-whats-up

and

angular/protractor#49

Hi,
I have the following scenario:

I use ngIdle as integral part of my session timeout management.
The user is considered idle if he doesn't navigate to another page or he doesn't do any API calls to the server.

On $idleWarn, we show a Noty notification which lets the user know how much time they have left before the session times out, and it allows for the user to extend the session. When they click on the Extend button, that calls $idle.watch() again which resets the counter.

All this works fine, so far.

Next step of the process is to make API call to refresh the token when the users chooses to extend the session. While the API call is in the middle of processing, the $idleWarning countdown continues.

Is there a way to pause and resume (with whatever time is left) the countdown?
I rather use $keepalive in some way to handle this, but I wasn't sure how to set it up so that it calls the API only when I tell it and not it be dependent on any timers.

Thank you much for your help
Stefan

Hi Mike,
I am using ng-idle with angular js version 1.2.16 in my application. It works fine on FireFox ,crome and Internet Explorer 9 ,10. But on window 7 Internet explorer 8. I am getting this error "Object doesn't support this property or method", does ng-Idle works on IE8 browser if yes can you please help me to resolve this issue.

Thanks,
Gaurav

Make it work from a single, simple npm install command so contributors have less farting around to do.