File

src/modules/session-ui/components/session-timeout-warning-dialog/session-timeout-warning-dialog.component.ts

Description

Component to display a session timeout warning dialog

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

Public constructor(logger: StarkLoggingService, dialogRef: MatDialogRef<StarkSessionTimeoutWarningDialogComponent>, countdown: number)

Class constructor

Parameters :
Name Type Optional Description
logger StarkLoggingService No
  • The StarkLoggingService instance of the application.
dialogRef MatDialogRef<StarkSessionTimeoutWarningDialogComponent> No
  • The MatDialogRef reference to the StarkSessionTimeoutWarningDialogComponent.
countdown number No
  • Countdown before the session times out

Methods

Public keepSession
keepSession()

This methods is used to close the dialog and to send an answer indicating that the user should keep logged.

Returns : void
Public ngOnInit
ngOnInit()

Component lifecycle hook

Returns : void

Properties

Public countdown$
Type : Observable<number>

countdown Time in seconds before the current session expires.

Public logger
Type : StarkLoggingService
Decorators :
@Inject(STARK_LOGGING_SERVICE)
- The `StarkLoggingService` instance of the application.
import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from "@angular/core";
import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from "@angular/material/legacy-dialog";
import { interval, Observable } from "rxjs";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import { map, startWith, take, tap } from "rxjs/operators";

/**
 * @ignore
 */
const componentName = "stark-session-timeout-warning-dialog";

/**
 * Component to display a session timeout warning dialog
 */
@Component({
	selector: "stark-session-timeout-warning-dialog",
	templateUrl: "./session-timeout-warning-dialog.component.html",
	encapsulation: ViewEncapsulation.None,
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class StarkSessionTimeoutWarningDialogComponent implements OnInit {
	/**
	 * countdown Time in seconds before the current session expires.
	 */
	public countdown$!: Observable<number>;

	/**
	 * Class constructor
	 * @param logger - The `StarkLoggingService` instance of the application.
	 * @param dialogRef - The `MatDialogRef` reference to the `StarkSessionTimeoutWarningDialogComponent`.
	 * @param countdown - Countdown before the session times out
	 */
	public constructor(
		@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService,
		@Inject(MatDialogRef) private dialogRef: MatDialogRef<StarkSessionTimeoutWarningDialogComponent>,
		@Inject(MAT_DIALOG_DATA) private countdown: number
	) {}

	/**
	 * Component lifecycle hook
	 */
	public ngOnInit(): void {
		this.logger.debug(componentName + ": controller initialized");
		this.countdown$ = interval(1000).pipe(
			take(this.countdown),
			startWith(-1),
			map((value: number) => this.countdown - value - 1), // -1 due to the delay of the dialog animation
			tap((value: number) => {
				if (value === 0) {
					this.dialogRef.close("countdown-finished");
				}
			})
		);
	}

	/**
	 * This methods is used to close the dialog and to send an answer indicating that the user should keep logged.
	 */
	public keepSession(): void {
		this.dialogRef.close("keep-logged");
	}
}
<div class="stark-timeout-warning-dialog" role="alertdialog" aria-busy="true" aria-live="assertive">
	<h1 mat-dialog-title translate>STARK.SESSION_TIMEOUT.TITLE</h1>
	<div mat-dialog-content>
		<p>
			<span translate>STARK.SESSION_TIMEOUT.WILL_EXPIRE_IN</span><span> {{ countdown$ | async }} </span>
			<span translate>STARK.SESSION_TIMEOUT.SECONDS</span>
		</p>
		<p translate>STARK.SESSION_TIMEOUT.WISH_STAY_CONNECTED</p>
	</div>
	<div mat-dialog-actions>
		<button mat-raised-button color="primary" (click)="keepSession()" aria-label="Close Dialog">
			<span translate>STARK.SESSION_TIMEOUT.STAY_CONNECTED</span>
		</button>
	</div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""