add activity monitoring

README.md

@@ -1,14 +1,18 @@
 # Idle Timeout Alert
 > A Laravel package for alerting idle sessions about to expire.
 
-SESSION_LIFETIME is great but how is the user supposed to know when the session is about to expire due to inactivity, especially if it is a low value? When the session is about to expire, show a dialog so the user can choose not to be logged out.
+SESSION_LIFETIME is great but how is the user supposed to know when the session is about to expire due to inactivity, especially if it is a low value? Furthermore, a user may be actively engaging the site (by clicking around or filling out a form) without ever sending a request to the backend. Laravel may end the session during this time without the user knowing. 
+
+When the session is about to expire, show a dialog so the user can choose not to be logged out.
 
 ![](screenshot.png)
 
 ## Installation
 
+Laravel package and NPM dependencies
 ```sh
 composer require vectorwyse/idle-timeout-alert
+npm install --save idle-vue
 ```
 
 ## Usage
@@ -42,6 +46,30 @@ Step 3: Compile
 npm run dev
 ```
 
+### Add component
+
+Finally, add the component to any page where you would like the dialog. A good place is `layouts/app.blade.php`.
+```html
+<timeout-dialog></timeout-dialog>
+```
+
+By default the dialog will only appear if the user happens to be idle when the session is about to expire. As long as user has activity, a ping will be sent in the background keeping the session alive.
+
+If you would like to ignore user activity and have the dialog appear no matter what, then use the following:
+```html
+<timeout-dialog v-bind:ignore-activity="true"></timeout-dialog>
+```
+
+If you want to allow a user to be on a particular page forever without ever timing out, then use the following:
+```html
+<timeout-dialog v-bind:keep-alive="true"></timeout-dialog>
+```
+As long as user is on the page, a ping will be sent in the background keeping the session alive and no dialog will ever appear.
+
+## Customization
+
+Feel free to make changes to the dialog in `resources/assets/vendor/vectorwyse/idle-timeout-alert/js/components/TimeoutDialog.vue`. Don't forget to recompile assets afterward! 
+
 ## Support Us
 [Vectorwyse](https://vectorwyse.com) is a digital agency offering advisory and web development services. We love building things with Laravel and Vue.js, so when we have an opportunity to give back to the community, we're super excited! 
 

resources/assets/js/app.js

@@ -1,2 +1,8 @@
+import IdleVue from 'idle-vue';
+Vue.use(IdleVue, {
+    idleTime: 30000,
+    eventEmitter: new Vue(),
+});
+
 Vue.component('modal-component', require('./components/ModalComponent.vue').default);
 Vue.component('timeout-dialog', require('./components/TimeoutDialog.vue').default);

resources/assets/js/components/TimeoutDialog.vue

@@ -26,14 +26,15 @@ const timeToAlert = 31;
 
 export default {
     name: "TimeoutDialog",
-    props: ["keepAlive"],
+    props: ["keepAlive", "ignoreActivity"],
     components: {
         ModalComponent,
     },
     data() {
         return {
             showModal: false,
             remainingTime: undefined,
+            isIdle: false,
             timer: setInterval(() => {
                 if (this.remainingTime === undefined) return;
                     
@@ -50,7 +51,7 @@ export default {
 
                 if (this.remainingTime <= timeToAlert) {
                     if (!this.showModal) {
-                        if (this.keepAlive) {
+                        if (this.keepAlive || (this.ignoreActivity !== true && !this.isIdle)) {
                             return this.resetTimeout();
                         }
 
@@ -78,6 +79,12 @@ export default {
     mounted() {
         this.checkTimeout();
     },
+    onIdle() {
+        this.isIdle = true;
+    },
+    onActive() {
+        this.isIdle = false;
+    },
     methods: {
         checkTimeout(callback) {
             axios