Set the logout time if user is inactive?

Ionic Framework ionic-v3
1

I want to set the logout time if the user is inactive on the app for example for last 5 minutes. How to handle this?
first thing is to check the inactivity, how?
in ionic 3.x.x?

2
3

Thanks for reply. Please can you share a tutorial that how to use it in ionic 3?

4 
import {Component } from '@angular/core';
import {Idle, DEFAULT_INTERRUPTSOURCES } from 'ng2-idle/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';

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

export class AppHeaderComponent {
    nome :any = localStorage['app-appHeader'];

    constructor(private router: Router,
        private http: Http,
        private headerService: HeaderService,
        private idle: Idle) {

        idle.setIdle(10);
        idle.setTimeout(3600);
        idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

        idle.onTimeoutWarning.subscribe((countdown: number) => {
            alert('Timeout Warning - ' + countdown);
        });

        idle.onTimeout.subscribe(() => {
          alert('Timeout');
          localStorage.clear();

          this.router.navigate(['/auth', {sessionExpirate: 'true'}]);
        });

        idle.watch();
    }

    logout() {
        this.idle.stop();
        this.idle.ngOnDestroy(); //includes this.idle.stop() and this.clearInterrupts() both.
        this.headerService.exit()
            .subscribe(
                data => {
                    localStorage.clear();
                    this.router.navigate(['/auth']);
                },
                error => console.log(error)
            )
    }  
}

May be this will help you out.

5

what about “platform.pause”?

6

The pause event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event would emit when a Cordova app is put into the background, however, it would not fire on a standard web browser.

constructor( private platform: Platform ) {
    platform.ready().then(() => {    
        this.platform.pause.subscribe(() => {
            console.log('[INFO] App paused');
        });

        this.platform.resume.subscribe(() => {
            console.log('[INFO] App resumed');
        });
    });
}
7

does Pause event means that user is inactive mode.

8

It seems like platform pause and resume could be used

Do we know if resume is called when the phone is locked and stuff. The user be using the app, batter is low, Plug in charger and let it be. The app is still the “main” app?
I might test this.
We have a loading modal that overlays. I was thinking of just putting something in there.

9

Hello All,

I tried implementing this, but as soon as I mention the “idle: Idle” in the constructor, it throws an error " : Object( WEBPACK_IMPORTED_MODULE_0_rxjs [“fromEvent”]) is not a function. (In ‘Object( WEBPACK_IMPORTED_MODULE_0_rxjs [“fromEvent”])(target, eventName, opts)’, ‘Object( WEBPACK_IMPORTED_MODULE_0_rxjs [“fromEvent”])’ is an instance of Object)"

Also created an issue about the same here:

10

When app goes to background and comes to foreground then app is not able track the time elapsed. Also it expects user intervention to perform any action. Ex: I’m supposed to track 100 seconds, app goes to background and comes to foreground at 120 seconds. Unless user touches the app, the action that was supposed to happen to 100 will not happen. If that action was a feature like logout then it will be a big problem. You have any suggestion to this?

1 Like