Session idle timeout with logout implementation

src/app/home/home.module.ts

@@ -15,6 +15,7 @@ import { AmountDisbursedPieComponent } from './dashboard/amount-disbursed-pie/am
 import { ClientTrendsBarComponent } from './dashboard/client-trends-bar/client-trends-bar.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { WarningDialogComponent } from './warning-dialog/warning-dialog.component';
+import { SessionTimeoutDialogComponent } from './timeout-dialog/session-timeout-dialog.component';
 
 /**
  * Home Component
@@ -35,7 +36,8 @@ import { WarningDialogComponent } from './warning-dialog/warning-dialog.componen
     AmountCollectedPieComponent,
     AmountDisbursedPieComponent,
     ClientTrendsBarComponent,
-    WarningDialogComponent
+    WarningDialogComponent,
+    SessionTimeoutDialogComponent
   ],
   providers: [ ]
 })

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 {
+  }
+
+}

src/app/home/warning-dialog/warning-dialog.component.html

@@ -1,5 +1,5 @@
-<h1 mat-dialog-title>{{ "labels.text."+title | translate }}</h1>
+<h1 mat-dialog-title>{{ "labels.text." + title | translate }}</h1>
 <mat-dialog-content>{{ "labels.text.Warning message" | translate }}</mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-raised-button color="primary" mat-dialog-close>{{ "labels.buttons."+buttonText | translate}}</button>
+  <button mat-raised-button color="primary" mat-dialog-close>{{ "labels.buttons." + buttonText | translate}}</button>
 </mat-dialog-actions>