Precision FDA merge2

src/app/core/app.module.ts

@@ -36,6 +36,7 @@ import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { BaseComponent } from './base/base.component';
+import { PfdaToolbarComponent } from './base/pfda-toolbar/pfda-toolbar.component';
 import { HomeComponent } from './home/home.component';
 import { RegistrarsComponent } from './registrars/registrars.component';
 import { SubstancesBrowseComponent } from './substances-browse/substances-browse.component';
@@ -124,6 +125,7 @@ import { PrivacyStatementModule } from './privacy-statement/privacy-statement.mo
     AppComponent,
     PageNotFoundComponent,
     BaseComponent,
+    PfdaToolbarComponent,
     HomeComponent,
     UnauthorizedComponent,
     SubstancesBrowseComponent,

src/app/core/auth/auth.module.ts

@@ -17,6 +17,8 @@ import { RouterModule } from '@angular/router';
 import { DecodeUriPipe } from '@gsrs-core/auth/user-downloads/download-monitor/decodeURI.pipe';
 import { FileSizePipe } from '@gsrs-core/auth/user-downloads/download-monitor/fileSize.pipe';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SessionExpirationComponent } from './session-expiration/session-expiration.component';
+import { SessionExpirationDialogComponent } from './session-expiration/session-expiration-dialog/session-expiration-dialog.component';
 
 @NgModule({
   imports: [
@@ -39,13 +41,19 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     UserProfileComponent,
     UserDownloadsComponent,
     DownloadMonitorComponent,
+    SessionExpirationComponent,
+    SessionExpirationDialogComponent,
     DecodeUriPipe,
     FileSizePipe
   ],
+  entryComponents: [
+    SessionExpirationDialogComponent
+  ],
   exports: [
     LoginComponent,
     UserProfileComponent,
     DownloadMonitorComponent,
+    SessionExpirationComponent,
     UserDownloadsComponent
   ]
 })

src/app/core/auth/session-expiration/session-expiration-dialog/session-expiration-dialog.component.html

@@ -0,0 +1,11 @@
+<h2 mat-dialog-title class="dialog-title">
+  {{dialogTitle}}
+</h2>
+<div mat-dialog-content>
+  {{dialogMessage}}
+</div>
+<div class="dialog-actions flex-row" mat-dialog-actions>
+  <span class="middle-fill"></span>
+  <button *ngIf="timeRemainingSeconds>0" mat-flat-button color="primary" (click)="extendSession()">Extend Session</button>
+  <button *ngIf="timeRemainingSeconds<=0" mat-flat-button color="primary" (click)="login()">Login</button>
+</div>

src/app/core/auth/session-expiration/session-expiration-dialog/session-expiration-dialog.component.spec.ts

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

src/app/core/auth/session-expiration/session-expiration-dialog/session-expiration-dialog.component.ts

@@ -0,0 +1,79 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from  '@angular/material/dialog';
+import { ConfigService, SessionExpirationWarning } from '@gsrs-core/config';
+
+@Component({
+  selector: 'app-session-expiration-dialog',
+  templateUrl: './session-expiration-dialog.component.html',
+  styleUrls: ['./session-expiration-dialog.component.scss']
+})
+export class SessionExpirationDialogComponent implements OnInit {
+  sessionExpirationWarning: SessionExpirationWarning = null;
+  sessionExpiringAt: number;
+  timeRemainingSeconds: number;
+  dialogTitle: string;
+  dialogMessage: string;
+  private updateDialogInterval: any;
+
+  constructor(
+    public dialogRef: MatDialogRef<SessionExpirationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    // N.B. injected services has to come after data
+    private router: Router,
+    private http: HttpClient
+  ) {
+    this.sessionExpirationWarning = data.sessionExpirationWarning;
+    this.sessionExpiringAt = data.sessionExpiringAt;
+  }
+
+  ngOnInit() {
+    // If SessionExpirationWarning is not found in configData, the intervals are never set
+    // and this component is inert
+    this.updateDialogInterval = setInterval(() => { this.updateDialog(); });
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.updateDialogInterval);
+  }
+
+  getCurrentTime() {
+    return Math.floor((new Date()).getTime() / 1000);
+  }
+
+  updateDialog() {
+    const currentTime = this.getCurrentTime()
+    this.timeRemainingSeconds = this.sessionExpiringAt - currentTime;
+
+    if (this.timeRemainingSeconds > 0) {
+      const remainingMinutes = Math.floor(this.timeRemainingSeconds / 60);
+      const reminaingSeconds = String(this.timeRemainingSeconds % 60).padStart(2, '0');
+      this.dialogTitle = "Session Ending Soon"
+      this.dialogMessage = `You will be logged out in ${remainingMinutes}:${reminaingSeconds}`
+    }
+    else {
+      this.dialogTitle = "Session Ended"
+      this.dialogMessage = "Your session has expired, please login again."
+    }
+  }
+
+  closeDialog() {
+    this.dialogRef.close(false);
+  }
+
+  extendSession() {
+    const url = this.sessionExpirationWarning.extendSessionApiUrl;
+    this.http.get(url).subscribe(
+      data => {
+        this.dialogRef.close(true);
+      },
+      err => { console.log("Error extending session: ", err) },
+      () => { }
+    );
+  }
+
+  login() {
+    window.location.assign('/login');
+  }
+}

src/app/core/auth/session-expiration/session-expiration.component.spec.ts

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

src/app/core/auth/session-expiration/session-expiration.component.ts

@@ -0,0 +1,131 @@
+import { Router, Event as NavigationEvent, NavigationStart } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { MatDialog} from '@angular/material/dialog';
+
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { HttpClient } from '@angular/common/http';
+import { ConfigService, SessionExpirationWarning } from '@gsrs-core/config';
+import { AuthService } from '../auth.service';
+import { SessionExpirationDialogComponent } from './session-expiration-dialog/session-expiration-dialog.component'
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'app-session-expiration',
+  templateUrl: './session-expiration.component.html'
+})
+export class SessionExpirationComponent implements OnInit {
+  sessionExpirationWarning: SessionExpirationWarning = null;
+  sessionExpiringAt: number;
+  private overlayContainer: HTMLElement;
+  private subscriptions: Array<Subscription> = [];
+  private expirationTimer: any;
+
+  constructor(
+    private router: Router,
+    private configService: ConfigService,
+    private authService: AuthService,
+    private http: HttpClient,
+    private dialog: MatDialog,
+    private overlayContainerService: OverlayContainer
+  ) {
+    this.sessionExpirationWarning = configService.configData.sessionExpirationWarning;
+    this.overlayContainer = this.overlayContainerService.getContainerElement();
+  }
+
+  ngOnInit() {
+    // If SessionExpirationWarning is not found in configData, the intervals are never set
+    // and this component is inert
+    const authSubscription = this.authService.getAuth().subscribe(auth => {
+      if (this.sessionExpirationWarning) {
+        if (auth) {
+          this.resetExpirationTimer();
+        }
+        else {
+          // User has logged out while timeout is active
+          this.clearExpirationTimer();
+        }
+      }
+    });
+    this.subscriptions.push(authSubscription);
+
+    // This component seems to be destroyed and recreated on route change, so maybe
+    // the following isn't necessary:
+    // const routerSubscription = this.router.events.subscribe((event: NavigationEvent) => {
+    //   if (event instanceof NavigationStart && this.expirationTimer) {
+    //     this.extendSession();
+    //   }
+    // });
+    // this.subscriptions.push(routerSubscription);
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      subscription.unsubscribe();
+    });
+    this.clearExpirationTimer();
+  }
+
+  getCurrentTime() {
+    return Math.floor((new Date()).getTime() / 1000);
+  }
+
+  clearExpirationTimer() {
+    if (this.expirationTimer) {
+      clearTimeout(this.expirationTimer);
+      this.expirationTimer = null;
+    }
+  }
+
+  resetExpirationTimer() {
+    this.clearExpirationTimer();
+
+    const currentTime = this.getCurrentTime()
+    this.sessionExpiringAt = currentTime + this.sessionExpirationWarning.maxSessionDurationMinutes * 60;
+
+    const timeRemainingSeconds = this.sessionExpiringAt - currentTime;
+    const timeBeforeDisplayingDialogMs = (timeRemainingSeconds - 61) * 1000;
+    if (timeBeforeDisplayingDialogMs > 0) {
+      this.expirationTimer = setTimeout( () => {
+        this.openDialog();
+      }, timeBeforeDisplayingDialogMs);
+    }
+    else {
+      this.login();
+    }
+  }
+
+  openDialog() {
+    const dialogRef = this.dialog.open(SessionExpirationDialogComponent, {
+      data: {
+        'sessionExpirationWarning': this.sessionExpirationWarning,
+        'sessionExpiringAt': this.sessionExpiringAt
+      },
+      width: '650px',
+      autoFocus: false,
+      disableClose: true
+    });
+    this.overlayContainer.style.zIndex = '1501';
+    const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
+      this.overlayContainer.style.zIndex = null;
+      if (response) {
+        // Session was extended
+        this.resetExpirationTimer();
+      }
+    });
+  }
+
+  extendSession() {
+    const url = this.sessionExpirationWarning.extendSessionApiUrl;
+    this.http.get(url).subscribe(
+      data => {
+        this.resetExpirationTimer();
+      },
+      err => { console.log("Error extending session: ", err) },
+      () => { }
+    );
+  }
+
+  login() {
+    window.location.assign('/login');
+  }
+}