From 274242aee9ea28e390fc4e08710cfd3da90c16a4 Mon Sep 17 00:00:00 2001
From: RIHTARSIC Joze <joze.rihtarsic@ext.ec.europa.eu>
Date: Wed, 3 May 2023 07:41:51 +0200
Subject: [PATCH] Set warning message as "growl" and add 3s timeout on success
messages
---
.../alert-message/alert-message.component.css | 5 +++++
.../alert-message/alert-message.component.html | 5 ++---
.../alert-message/alert-message.component.ts | 14 +++++++++++++-
.../password-change-dialog.component.html | 4 ----
4 files changed, 20 insertions(+), 8 deletions(-)
diff --git a/smp-angular/src/app/common/alert-message/alert-message.component.css b/smp-angular/src/app/common/alert-message/alert-message.component.css
index e624e0941..c59f2845c 100644
--- a/smp-angular/src/app/common/alert-message/alert-message.component.css
+++ b/smp-angular/src/app/common/alert-message/alert-message.component.css
@@ -1,4 +1,9 @@
.alert-message {
+ position: fixed;
+ max-width: 70%;
+ top: 3em;
+ left: 50%;
+ transform: translate(-50%, 0);
padding: 20px;
color: white;
opacity: 1;
diff --git a/smp-angular/src/app/common/alert-message/alert-message.component.html b/smp-angular/src/app/common/alert-message/alert-message.component.html
index b3851d368..9494a75e6 100644
--- a/smp-angular/src/app/common/alert-message/alert-message.component.html
+++ b/smp-angular/src/app/common/alert-message/alert-message.component.html
@@ -1,8 +1,7 @@
-<div #alertMessage
+<div #alertMessage class="mat-elevation-z8"
*ngIf="message" [ngClass]="{ 'alert-message': message,
'alert-success': message.type === 'success',
- 'alert-error': message.type === 'error',
- 'stickyError':showSticky}"
+ 'alert-error': message.type === 'error'}"
id="alertmessage_id"
>
diff --git a/smp-angular/src/app/common/alert-message/alert-message.component.ts b/smp-angular/src/app/common/alert-message/alert-message.component.ts
index 60edc305f..8a8b2ff5a 100644
--- a/smp-angular/src/app/common/alert-message/alert-message.component.ts
+++ b/smp-angular/src/app/common/alert-message/alert-message.component.ts
@@ -13,11 +13,13 @@ export class AlertMessageComponent implements OnInit {
showSticky:boolean = false;
message: any=null;
+ readonly successTimeout: number = 3000;
+
constructor(private alertService: AlertMessageService) { }
ngOnInit() {
- this.alertService.getMessage().subscribe(message => { this.message = message; });
+ this.alertService.getMessage().subscribe(message => { this.showMessage(message); });
}
clearAlert():void {
@@ -33,4 +35,14 @@ export class AlertMessageComponent implements OnInit {
return this.message.text;
}
}
+
+ showMessage(message: any) {
+ this.message = message;
+ if (message?.type==='success') {
+ setTimeout(() => {
+ this.clearAlert();
+ }, this.successTimeout);
+ }
+
+ }
}
diff --git a/smp-angular/src/app/common/dialogs/password-change-dialog/password-change-dialog.component.html b/smp-angular/src/app/common/dialogs/password-change-dialog/password-change-dialog.component.html
index 2f4807e63..2b684909a 100644
--- a/smp-angular/src/app/common/dialogs/password-change-dialog/password-change-dialog.component.html
+++ b/smp-angular/src/app/common/dialogs/password-change-dialog/password-change-dialog.component.html
@@ -31,13 +31,11 @@
formControlName="new-password" required id="np_id" auto-focus-directive>
<mat-icon matSuffix
(click)="hideNewPwdFiled = !hideNewPwdFiled">{{hideNewPwdFiled ? 'visibility_off' : 'visibility'}}</mat-icon>
- <smp-field-error *ngIf="passwordError('new-password', 'required')">New password is required</smp-field-error >
<smp-field-error *ngIf="passwordError('new-password', 'error')">New password must not be equal than old current
password!
</smp-field-error >
<smp-field-error *ngIf="passwordError('new-password', 'pattern')">{{passwordValidationMessage}}</smp-field-error>
</mat-form-field>
-
<mat-form-field style="width:100%">
<mat-label>Confirm New Password</mat-label>
<input matInput [type]="hideConfPwdFiled ? 'password' : 'text'"
@@ -47,8 +45,6 @@
<smp-field-error *ngIf="passwordError('confirm-new-password', 'error')">Confirm valued does not match new
password!
</smp-field-error >
- <smp-field-error *ngIf="passwordError('confirm-new-password', 'required')">Confirm New password is required
- </smp-field-error >
</mat-form-field>
</div>
--
GitLab