feature(automatisk utloggning): Använder nu den nya dialog-komponenten (TV-845)

Merge in TEA/mina-sidor-fa-web from feature/TV-845-ui-dialog-idle-timout-dialog-2 to develop

Squashed commit of the following:

commit 1d9d7463238cd145f18ad929d8f56fccdefb8ee5
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Dec 27 15:21:25 2021 +0100

    fix

commit d7a0f584b200f9b9f7ea3a4b7ce9414201b7beb8
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Dec 27 13:54:03 2021 +0100

    cleanup

commit 627871488dea552df998864e9bd766894c80da6f
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Dec 27 13:52:15 2021 +0100

    cleanup

commit 8bd089a547a43fcaba86a0d187200406d35ebc87
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Dec 27 12:18:34 2021 +0100

    wip

commit 42e4bf440e00321d6be717ce814d523393134e86
Merge: 06ee26cc 39b93839
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 17 14:30:43 2021 +0100

    Merge branch 'develop' into feature/TV-845-ui-dialog-2

commit 06ee26ccbe9d2fd5edfd12d7a292f42e3b747fb7
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Dec 16 09:45:23 2021 +0100

    refactor

commit e2295202721b58fbd37341d3e02dae5a95cbb0c5
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 14:03:37 2021 +0100

    Update ui-dialog-ref.ts

commit c9507cd4579b4e542d0116f5e96b3a911c51600d
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 13:00:05 2021 +0100

    cleanup

commit 0e4ded553352414b5ca670897a51f127a5a289b1
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 12:48:25 2021 +0100

    cleanup

commit 0a48220c8bcd5704f7436f1c0c84ca25bac4c8e8
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 12:36:16 2021 +0100

    Dialog working

commit c4c1e9fb42d99df7ec6c058b7bea30662a03bb33
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 11:14:36 2021 +0100

    wip

commit 6668dfb154022b873b0a042087181cd0e6f8994d
Merge: 624b9439 9d96f0d9
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 10:47:27 2021 +0100

    Merge branch 'develop' into feature/TV-845-ui-dialog-2

commit 624b94399689bef07178f89c015745c90af1b288
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 10:47:19 2021 +0100

    wip

commit 0478638ab0d0f8f62ce8d10489f20e4930099936
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 09:58:49 2021 +0100

    wip

commit 12234c22062124165c2da10ff75cc887997172a8
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Dec 10 09:21:09 2021 +0100

    wip

apps/mina-sidor-fa/src/app/app.component.html

@@ -1,19 +1,10 @@
 <router-outlet></router-outlet>
-
 <msfa-toast-list></msfa-toast-list>
 
-<digi-ng-dialog
+<ng-template #idleDialogTemplate>
-  [afActive]="userIsIdle$ | async"
+  <h2>Du verkar vara inaktiv</h2>
-  (afOnPrimaryClick)="setUserAsActive()"
-  (afOnSecondaryClick)="logout()"
-  (afOnInactive)="setUserAsActive()"
-  afHeading="Du verkar inaktiv"
-  afHeadingLevel="h2"
-  afPrimaryButtonText="Fortsätt sessionen"
-  afSecondaryButtonText="Logga ut"
->
   <p>Din session är på väg att löpa ut på grund av inaktivitet. Vill du fortsätta eller logga ut?</p>
   <p *ngIf="timeLeftBeforeLogout$ | async as timeLeftBeforeLogout">
     Du blir automatiskt utloggad om <time>{{timeLeftBeforeLogout}}</time>
   </p>
-</digi-ng-dialog>
+</ng-template>

apps/mina-sidor-fa/src/app/app.component.ts

@@ -1,5 +1,13 @@
 import { DOCUMENT } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostListener, Inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostListener,
+  Inject,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { APPLICATION_CLOSED_TIME_STAMP } from '@msfa-constants/local-storage-keys';
@@ -8,6 +16,10 @@ import { AuthenticationService } from '@msfa-services/api/authentication.service
 import { IdleService } from '@msfa-services/idle.service';
 import { Observable } from 'rxjs';
 import { filter, map, switchMap } from 'rxjs/operators';
+import { UiDialog } from '@ui/dialog/ui-dialog.service';
+import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
+import { UiDialogConfig } from '@ui/dialog/ui-dialog.model';
+import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
 
 @Component({
   selector: 'msfa-root',
@@ -15,9 +27,17 @@ import { filter, map, switchMap } from 'rxjs/operators';
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {
+export class AppComponent extends UnsubscribeDirective implements OnInit {
-  userIsIdle$: Observable<boolean> = this.idleService.isIdle$;
+  @ViewChild('idleDialogTemplate') idleDialogTemplate: TemplateRef<UiDialogRef>;
   timeLeftBeforeLogout$: Observable<string> = this.idleService.timeLeftBeforeLogout$;
+  private _dialogRef: UiDialogRef;
+  private _userIsIdle$: Observable<boolean> = this.idleService.isIdle$;
+  private _idleDialogConfig: UiDialogConfig = {
+    primaryButtonText: 'Fortsätt sessionen',
+    primaryAction: () => this.setUserAsActive(),
+    secondaryButtonText: 'Logga ut',
+    secondaryAction: () => this.logout(),
+  };
 
   // Saving latest activity timestamp when application is closed
   // to avoid users be automatically logged in if user hasn't used the application for a while.
@@ -32,8 +52,10 @@ export class AppComponent {
     private activatedRoute: ActivatedRoute,
     private titleService: Title,
     private idleService: IdleService,
-    private authenticationService: AuthenticationService
+    private authenticationService: AuthenticationService,
+    private uiDialog: UiDialog
   ) {
+    super();
     this.document.body.dataset.version = environment.version;
 
     this.router.events
@@ -55,6 +77,19 @@ export class AppComponent {
   setUserAsActive(): void {
     this.idleService.setActive();
   }
+
+  ngOnInit(): void {
+    super.unsubscribeOnDestroy(
+      this._userIsIdle$.subscribe(isIdle => {
+        if (isIdle) {
+          this._dialogRef = this.uiDialog.open(this.idleDialogTemplate, this._idleDialogConfig);
+          this._dialogRef.afterClosed$.subscribe(() => this.setUserAsActive());
+        } else if (this._dialogRef) {
+          this._dialogRef.close();
+        }
+      })
+    );
+  }
 }
 
 function traverseUntilNoChildRoute(route: ActivatedRoute): ActivatedRoute {

apps/mina-sidor-fa/src/app/app.module.ts

@@ -1,6 +1,5 @@
-import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { registerLocaleData } from '@angular/common';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import localeSe from '@angular/common/locales/sv';
 import { ErrorHandler, LOCALE_ID, NgModule, Provider } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -12,6 +11,7 @@ import { AppComponent } from './app.component';
 import { ToastListModule } from './components/toast-list/toast-list.module';
 import { LoggingModule } from './logging.module';
 import { AvropModule } from './pages/avrop/avrop.module';
+import { UiDialogModule } from '@ui/dialog/ui-dialog.module';
 
 registerLocaleData(localeSe);
 const providers: Provider[] = [
@@ -30,7 +30,7 @@ const providers: Provider[] = [
     AppRoutingModule,
     ToastListModule,
     AvropModule,
-    DigiNgDialogModule,
+    UiDialogModule,
   ],
   providers,
   bootstrap: [AppComponent],

apps/mina-sidor-fa/src/app/shared/services/idle.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
-import { environment } from '@msfa-environment';
 import { BehaviorSubject, fromEvent, merge, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AuthenticationService } from './api/authentication.service';
+import { environment } from '@msfa-environment';
 
 @Injectable({
   providedIn: 'root',

libs/styles/src/styles.scss

@@ -51,21 +51,6 @@ dl {
   display: inline-flex;
 }
 
-// Fix issue with too long modal-content. This makes it scrollable.
-.digi-ng-dialog-base__content {
-  max-height: 90vh;
-  overflow-x: auto;
-}
-
-.digi-ng-dialog {
-  position: fixed;
-  z-index: $msfa__z-index-backdrop;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
 // Removing margins from digi fieldset component.
 .digi-form-fieldset {
   margin: 0;

libs/ui/src/dialog/ui-dialog.model.ts

@@ -3,7 +3,7 @@ import { UiDialogRef } from '@ui/dialog/ui-dialog-ref';
 export const UI_DIALOG_DATA = 'UI_DIALOG_DATA';
 
 export interface UiDialogConfig<DialogInputData = unknown> {
-  data: DialogInputData;
+  data?: DialogInputData;
 
   /**
    * primaryButtonText defaults to 'Stäng'

libs/ui/src/dialog/ui-dialog.service.ts

@@ -21,7 +21,7 @@ export class UiDialog {
 
   open<DialogContent = unknown, T = unknown>(
     content: string | TemplateRef<unknown> | Type<unknown>,
-    config: UiDialogConfig<T>
+    config: UiDialogConfig<T> = {}
   ): UiDialogRef<DialogContent> {
     const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
     const configs = new OverlayConfig({