feat: Add log off due to inactivity.

libs/dh/core/shell/src/lib/dh-core-shell.component.html

@@ -47,4 +47,5 @@ <h2 class="toolbar__heading">
   </ng-container>
 
   <router-outlet></router-outlet>
+  <dh-inactivity-logout></dh-inactivity-logout>
 </watt-shell>

libs/dh/core/shell/src/lib/dh-core-shell.component.ts

@@ -27,6 +27,7 @@ import { DhTopBarStore } from '@energinet-datahub/dh-shared-data-access-top-bar'
 
 import { DhPrimaryNavigationComponent } from './dh-primary-navigation.component';
 import {
+  DhInactivityLogoutComponent,
   DhSelectedActorComponent,
   DhSignupMitIdComponent,
 } from '@energinet-datahub/dh/shared/feature-authorization';
@@ -48,6 +49,7 @@ import { ApolloModule } from 'apollo-angular';
     WattButtonComponent,
     DhSelectedActorComponent,
     DhSignupMitIdComponent,
+    DhInactivityLogoutComponent,
   ],
 })
 export class DhCoreShellComponent {

libs/dh/globalization/assets-localization/src/assets/i18n/da.json

@@ -1154,6 +1154,9 @@
   "admin": {
     "userManagement": {
       "connect": "Tilknyt",
+      "sessionExpireHeader": "Sessionen udløber snart",
+      "sessionExpireContentA": "Du har været inaktiv i 2 timer.",
+      "sessionExpireContentB": "Af sikkerhedsmæssige årsager vil du blive logget af om",
       "inviteUser": {
         "title": "Inviter bruger",
         "informations": "Information",

libs/dh/globalization/assets-localization/src/assets/i18n/en.json

@@ -1162,6 +1162,9 @@
   "admin": {
     "userManagement": {
       "connect": "Connect",
+      "sessionExpireHeader": "Session expires soon",
+      "sessionExpireContentA": "You have been inactive for 2 hours.",
+      "sessionExpireContentB": "You will be signed out due to security reasons in",
       "inviteUser": {
         "title": "Invite user",
         "informations": "Information",

libs/dh/shared/feature-authorization/src/index.ts

@@ -17,5 +17,6 @@
 export * from './lib/permission.guard';
 export * from './lib/permission-required.directive';
 export * from './lib/dh-authorization.interceptor';
+export * from './lib/dh-inactivity-logout.component';
 export * from './lib/dh-selected-actor.component';
 export * from './lib/dh-signup-mitid.component';

libs/dh/shared/feature-authorization/src/lib/dh-inactivity-logout.component.html

@@ -0,0 +1,22 @@
+<!--
+@license
+Copyright 2020 Energinet DataHub A/S
+
+Licensed under the Apache License, Version 2.0 (the "License2");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<ng-container *transloco="let t; read: 'admin.userManagement'">
+  <watt-modal #inactivityWarningModal [size]="'small'" [title]="t('sessionExpireHeader')">
+    <p>{{ t("sessionExpireContentA") }}<br />{{ t("sessionExpireContentB") }}</p>
+    <h2>{{ warningTimeout$ | push | date : "mm:ss" }}</h2>
+  </watt-modal>
+</ng-container>

libs/dh/shared/feature-authorization/src/lib/dh-inactivity-logout.component.ts

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, ViewChild } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { RxPush } from '@rx-angular/template/push';
+import {
+  concat,
+  filter,
+  fromEvent,
+  interval,
+  map,
+  merge,
+  of,
+  switchMap,
+  take,
+  tap,
+  timer,
+} from 'rxjs';
+import { WATT_MODAL, WattModalComponent } from '@energinet-datahub/watt/modal';
+import { TranslocoModule } from '@ngneat/transloco';
+import { MsalService } from '@azure/msal-angular';
+
+@Component({
+  selector: 'dh-inactivity-logout',
+  styles: [
+    `
+      h2 {
+        text-align: center;
+      }
+    `,
+  ],
+  templateUrl: './dh-inactivity-logout.component.html',
+  standalone: true,
+  imports: [CommonModule, RxPush, DatePipe, TranslocoModule, WATT_MODAL],
+})
+export class DhInactivityLogoutComponent {
+  private readonly secondsUntilWarning = 115 * 60;
+  private readonly secondsUntilLogOff = 5 * 60;
+  private isInactive = false;
+
+  constructor(private readonly msal: MsalService) {}
+
+  @ViewChild('inactivityWarningModal')
+  inactivityWarningModal!: WattModalComponent;
+
+  private readonly inputDetection$ = merge(
+    of(1),
+    fromEvent(document, 'mousemove'),
+    fromEvent(document, 'mousedown'),
+    fromEvent(document, 'keydown'),
+    fromEvent(document, 'wheel'),
+    fromEvent(document, 'touchmove'),
+    fromEvent(document, 'touchstart')
+  );
+
+  readonly userActive$ = this.inputDetection$.pipe(
+    switchMap(() => concat(of(1), timer(this.secondsUntilWarning * 1000))),
+    map((isActive) => !!isActive),
+    tap((isActive) => (this.isInactive = !isActive))
+  );
+
+  readonly warningTimeout$ = this.userActive$.pipe(
+    tap((isActive) => {
+      return isActive
+        ? this.inactivityWarningModal?.close(false)
+        : this.inactivityWarningModal?.open();
+    }),
+    switchMap((isActive) => {
+      if (isActive) return of(this.secondsUntilLogOff);
+
+      return interval(1000).pipe(
+        take(this.secondsUntilLogOff + 1),
+        filter(() => this.isInactive),
+        tap((elapsed) => elapsed >= this.secondsUntilLogOff && this.msal.logout()),
+        map((elapsed) => Math.max(0, this.secondsUntilLogOff - elapsed - 1))
+      );
+    }),
+    map((elapsed) => new Date(elapsed * 1000))
+  );
+}