Session idle timeout with logout implementation

src/app/home/timeout-dialog/idle-timeout.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { IdleTimeoutService } from './idle-timeout.service';
+
+describe('IdleTimeoutService', () => {
+  let service: IdleTimeoutService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(IdleTimeoutService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/home/timeout-dialog/idle-timeout.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { environment } from 'environments/environment';
+import { interval, merge, fromEvent, Observable} from 'rxjs';
+import { takeUntil, repeat, map} from 'rxjs/operators';
+
+/**
+ *  Idle timeout service used to track idle user
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class IdleTimeoutService {
+
+    // max timeout for an idle user
+    readonly timeoutDelay = environment.session.timeout.idleTimeout || 300000; // 5 minutes
+
+    // observable timeout
+    readonly $onSessionTimeout: Observable<void>;
+
+    constructor() {
+        const events = ['mousemove', 'keydown', 'wheel', 'mousedown', 'scroll'];
+        const $signal = merge(...events.map(eventName => fromEvent(document, eventName)));
+        this.$onSessionTimeout = interval(this.timeoutDelay).pipe(
+            takeUntil($signal),
+            map(() => undefined),
+            repeat()
+        );
+    }
+}

src/app/home/timeout-dialog/session-timeout-dialog.component.html

@@ -0,0 +1,5 @@
+<h1 mat-dialog-title>{{ 'labels.heading.Session Timeout' | translate }}</h1>
+<mat-dialog-content>{{ 'labels.text.Session timed out after a period of inactivity' | translate }}.</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-raised-button color="primary" mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
+</mat-dialog-actions>

src/app/home/timeout-dialog/session-timeout-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SessionTimeoutDialogComponent } from './session-timeout-dialog.component';
+
+describe('SessionTimeoutDialogComponent', () => {
+  let component: SessionTimeoutDialogComponent;
+  let fixture: ComponentFixture<SessionTimeoutDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SessionTimeoutDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SessionTimeoutDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/timeout-dialog/session-timeout-dialog.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'mifosx-session-timeout-dialog',
+  templateUrl: './session-timeout-dialog.component.html',
+  styleUrls: ['./session-timeout-dialog.component.scss']
+})
+export class SessionTimeoutDialogComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<SessionTimeoutDialogComponent>) {
+  }
+
+  ngOnInit(): void {
+  }
+
+}