From 1de762420054ca6782660dd950c938541f543291 Mon Sep 17 00:00:00 2001 From: Daniel Appelgren Date: Tue, 28 Dec 2021 14:25:56 +0100 Subject: [PATCH] =?UTF-8?q?feature(automatisk=20utloggning):=20Anv=C3=A4nd?= =?UTF-8?q?er=20nu=20den=20nya=20dialog-komponenten=20(TV-845)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Date: Mon Dec 27 15:21:25 2021 +0100 fix commit d7a0f584b200f9b9f7ea3a4b7ce9414201b7beb8 Author: Daniel Appelgren Date: Mon Dec 27 13:54:03 2021 +0100 cleanup commit 627871488dea552df998864e9bd766894c80da6f Author: Daniel Appelgren Date: Mon Dec 27 13:52:15 2021 +0100 cleanup commit 8bd089a547a43fcaba86a0d187200406d35ebc87 Author: Daniel Appelgren Date: Mon Dec 27 12:18:34 2021 +0100 wip commit 42e4bf440e00321d6be717ce814d523393134e86 Merge: 06ee26cc 39b93839 Author: Daniel Appelgren Date: Fri Dec 17 14:30:43 2021 +0100 Merge branch 'develop' into feature/TV-845-ui-dialog-2 commit 06ee26ccbe9d2fd5edfd12d7a292f42e3b747fb7 Author: Daniel Appelgren Date: Thu Dec 16 09:45:23 2021 +0100 refactor commit e2295202721b58fbd37341d3e02dae5a95cbb0c5 Author: Daniel Appelgren Date: Fri Dec 10 14:03:37 2021 +0100 Update ui-dialog-ref.ts commit c9507cd4579b4e542d0116f5e96b3a911c51600d Author: Daniel Appelgren Date: Fri Dec 10 13:00:05 2021 +0100 cleanup commit 0e4ded553352414b5ca670897a51f127a5a289b1 Author: Daniel Appelgren Date: Fri Dec 10 12:48:25 2021 +0100 cleanup commit 0a48220c8bcd5704f7436f1c0c84ca25bac4c8e8 Author: Daniel Appelgren Date: Fri Dec 10 12:36:16 2021 +0100 Dialog working commit c4c1e9fb42d99df7ec6c058b7bea30662a03bb33 Author: Daniel Appelgren Date: Fri Dec 10 11:14:36 2021 +0100 wip commit 6668dfb154022b873b0a042087181cd0e6f8994d Merge: 624b9439 9d96f0d9 Author: Daniel Appelgren Date: Fri Dec 10 10:47:27 2021 +0100 Merge branch 'develop' into feature/TV-845-ui-dialog-2 commit 624b94399689bef07178f89c015745c90af1b288 Author: Daniel Appelgren Date: Fri Dec 10 10:47:19 2021 +0100 wip commit 0478638ab0d0f8f62ce8d10489f20e4930099936 Author: Daniel Appelgren Date: Fri Dec 10 09:58:49 2021 +0100 wip commit 12234c22062124165c2da10ff75cc887997172a8 Author: Daniel Appelgren Date: Fri Dec 10 09:21:09 2021 +0100 wip --- apps/mina-sidor-fa/src/app/app.component.html | 15 ++----- apps/mina-sidor-fa/src/app/app.component.ts | 43 +++++++++++++++++-- apps/mina-sidor-fa/src/app/app.module.ts | 6 +-- .../src/app/shared/services/idle.service.ts | 2 +- libs/styles/src/styles.scss | 15 ------- libs/ui/src/dialog/ui-dialog.model.ts | 2 +- libs/ui/src/dialog/ui-dialog.service.ts | 2 +- 7 files changed, 48 insertions(+), 37 deletions(-) diff --git a/apps/mina-sidor-fa/src/app/app.component.html b/apps/mina-sidor-fa/src/app/app.component.html index fdd5936..f76fd5d 100644 --- a/apps/mina-sidor-fa/src/app/app.component.html +++ b/apps/mina-sidor-fa/src/app/app.component.html @@ -1,19 +1,10 @@ - - + +

Du verkar vara inaktiv

Din session är på väg att löpa ut på grund av inaktivitet. Vill du fortsätta eller logga ut?

Du blir automatiskt utloggad om

- + diff --git a/apps/mina-sidor-fa/src/app/app.component.ts b/apps/mina-sidor-fa/src/app/app.component.ts index 6362df5..6ac7cbc 100644 --- a/apps/mina-sidor-fa/src/app/app.component.ts +++ b/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 { - userIsIdle$: Observable = this.idleService.isIdle$; +export class AppComponent extends UnsubscribeDirective implements OnInit { + @ViewChild('idleDialogTemplate') idleDialogTemplate: TemplateRef; timeLeftBeforeLogout$: Observable = this.idleService.timeLeftBeforeLogout$; + private _dialogRef: UiDialogRef; + private _userIsIdle$: Observable = 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 { diff --git a/apps/mina-sidor-fa/src/app/app.module.ts b/apps/mina-sidor-fa/src/app/app.module.ts index 2721c92..2681052 100644 --- a/apps/mina-sidor-fa/src/app/app.module.ts +++ b/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], diff --git a/apps/mina-sidor-fa/src/app/shared/services/idle.service.ts b/apps/mina-sidor-fa/src/app/shared/services/idle.service.ts index 9c36a37..f66ac64 100644 --- a/apps/mina-sidor-fa/src/app/shared/services/idle.service.ts +++ b/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', diff --git a/libs/styles/src/styles.scss b/libs/styles/src/styles.scss index 9533fcf..1b019d6 100644 --- a/libs/styles/src/styles.scss +++ b/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; diff --git a/libs/ui/src/dialog/ui-dialog.model.ts b/libs/ui/src/dialog/ui-dialog.model.ts index f8033d3..8a12311 100644 --- a/libs/ui/src/dialog/ui-dialog.model.ts +++ b/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 { - data: DialogInputData; + data?: DialogInputData; /** * primaryButtonText defaults to 'Stäng' diff --git a/libs/ui/src/dialog/ui-dialog.service.ts b/libs/ui/src/dialog/ui-dialog.service.ts index 2d6a200..402d297 100644 --- a/libs/ui/src/dialog/ui-dialog.service.ts +++ b/libs/ui/src/dialog/ui-dialog.service.ts @@ -21,7 +21,7 @@ export class UiDialog { open( content: string | TemplateRef | Type, - config: UiDialogConfig + config: UiDialogConfig = {} ): UiDialogRef { const positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically(); const configs = new OverlayConfig({