Code development platform for open source projects from the European Union institutions

Skip to content
Snippets Groups Projects
Commit 6fec44bd authored by Joze RIHTARSIC's avatar Joze RIHTARSIC
Browse files

Pull request #212: Update user dialog 

Merge in EDELIVERY/smp from bugfix/EDELIVERY-9397-user-email-can-not-save-for-a-user-when-trying-to-put-user-email-in-user-edit to development

* commit '5eb90706b9d17d9f0d00c8c5b522599c25658e61':
  Update user dialog
parents 5ab1da8a aa88fae0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 140 additions and 65 deletions
smp-angular/src/app/common/dialog/dialog.component.css → smp-angular/src/app/common/dialogs/dialog/dialog.component.css
+ 4
− 0
View file @ 6fec44bd
......@@ -43,3 +43,7 @@ label:hover, label:active, input:hover + label, input:active + label {
.divTableBody {
display: table-row-group;
}
.empty-field-label {
color: gray;
}
smp-angular/src/app/common/dialogs/dialog/dialog.component.html 0 → 100644
+ 25
− 0
View file @ 6fec44bd
<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>{{text}}</mat-dialog-content>
<mat-dialog-actions>
<div *ngIf="isConfirmationDialog()" class="divTableCell">
<button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="yesbuttondialog_id" tabindex="0">
<mat-icon>check_circle</mat-icon>
<span>Yes</span>
</button>
</div>
<div *ngIf="isConfirmationDialog()" class="divTableCell">
<button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="nobuttondialog_id" tabindex="1">
<mat-icon>cancel</mat-icon>
<span>No</span>
</button>
</div>
<div *ngIf="isInformationDialog()" class="divTableCell">
<button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="okbuttondialog_id" tabindex="3">
<mat-icon>warning</mat-icon>
<span>OK</span>
</button>
</div>
</mat-dialog-actions>
smp-angular/src/app/common/dialog/dialog.component.ts → smp-angular/src/app/common/dialogs/dialog/dialog.component.ts
+ 1
− 0
View file @ 6fec44bd
......@@ -9,6 +9,7 @@ import { MatDialogRef } from '@angular/material/dialog';
export class DialogComponent {
@Input() title: String;
@Input() text: String;
@Input() type: string;
......
smp-angular/src/app/common/expired-password-dialog/expired-password-dialog.component.html → smp-angular/src/app/common/dialogs/expired-password-dialog/expired-password-dialog.component.html
+ 6
− 0
View file @ 6fec44bd
<smp-dialog [title]="'Your password is more than three months old. Please change it as soon as possible!'"
<smp-dialog style="width: 400px"
[title]="'Password about to expire!'"
[text]="'Your password is more than three months old. Please change it as soon as possible!'"
[type]="'information'"
[dialogRef]="dialogRef">
</smp-dialog>
smp-angular/src/app/common/expired-password-dialog/expired-password-dialog.component.ts → smp-angular/src/app/common/dialogs/expired-password-dialog/expired-password-dialog.component.ts
+ 1
− 1
View file @ 6fec44bd
import { Component, OnInit } from '@angular/core';
import { Component} from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
......
smp-angular/src/app/common/password-change-dialog/password-change-dialog.component.css → smp-angular/src/app/common/dialogs/password-change-dialog/password-change-dialog.component.css
+ 3
− 1
View file @ 6fec44bd
......@@ -13,4 +13,6 @@
z-index: 1000;
background-color: #f44336;
}
.empty-field-label {
color: gray;
}
smp-angular/src/app/common/password-change-dialog/password-change-dialog.component.html → smp-angular/src/app/common/dialogs/password-change-dialog/password-change-dialog.component.html
+ 24
− 24
View file @ 6fec44bd
<h2 mat-dialog-title>{{formTitle}}</h2>
<mat-dialog-content style="width:500px">
<div *ngIf="message" [ngClass]="{ 'alert-message': message, 'alert-message-success': messageType === 'success', 'alert-message-error':messageType === 'error' }" id="alertmessage_id">
<div *ngIf="message"
[ngClass]="{ 'alert-message': message, 'alert-message-success': messageType === 'success', 'alert-message-error':messageType === 'error' }"
id="alertmessage_id">
<span class="alert-message-close-button" (click)="clearAlert()">&times;</span>
{{message}}
</div>
......@@ -9,24 +11,19 @@
<mat-card>
<mat-card-content fxLayout="column">
<mat-form-field style="width:100%">
<input matInput placeholder="User email" formControlName="email" id="em_id" readonly="true">
<input matInput placeholder="Username" formControlName="username" id="un_id" readonly="true">
</mat-form-field>
<mat-form-field style="width:100%">
<input matInput placeholder="Username" formControlName="username" id="un_id" readonly="true">
<input matInput placeholder="User email" formControlName="email" id="em_id"
[ngClass]="{ 'empty-field-label': isEmptyEmailAddress }" readonly="true">
</mat-form-field>
</mat-card-content>
</mat-card>
<mat-card class="password-panel">
<mat-card-content>
<mat-card-actions >
<button mat-raised-button color="primary" (click)="changeCurrentUserPassword()"
[disabled]="!dialogForm.valid ">
<mat-icon>check_circle</mat-icon>
<span>Change password</span>
</button>
</mat-card-actions>
<mat-form-field style="width:100%">
<input matInput placeholder="Current Password" [type]="hideCurrPwdFiled ? 'password' : 'text'"
<input matInput [placeholder]="getPasswordTitle" [type]="hideCurrPwdFiled ? 'password' : 'text'"
formControlName="current-password" required id="cp_id">
<mat-icon matSuffix
(click)="hideCurrPwdFiled = !hideCurrPwdFiled">{{hideCurrPwdFiled ? 'visibility_off' : 'visibility'}}</mat-icon>
......@@ -34,7 +31,7 @@
<mat-form-field style="width:100%">
<input matInput placeholder="New Password" [type]="hideNewPwdFiled ? 'password' : 'text'"
formControlName="new-password" required id="np_id">
formControlName="new-password" required id="np_id" auto-focus-directive>
<mat-icon matSuffix
(click)="hideNewPwdFiled = !hideNewPwdFiled">{{hideNewPwdFiled ? 'visibility_off' : 'visibility'}}</mat-icon>
<mat-error *ngIf="passwordError('new-password', 'required')">New password is required</mat-error>
......@@ -57,16 +54,19 @@
</mat-card-content>
</mat-card>
</form>
<table class="buttonsRow" *ngIf="!this.forceChange">
<tr>
<td>
<button mat-raised-button color="primary" mat-dialog-close>
<mat-icon>cancel</mat-icon>
<span>Close</span>
</button>
</td>
</tr>
</table>
<div class="required-fields">* required fields</div>
</mat-dialog-content>
<div class="required-fields">* required fields</div>
<mat-dialog-actions>
<button mat-raised-button color="primary" (click)="changeCurrentUserPassword()"
[disabled]="!dialogForm.valid ">
<mat-icon>check_circle</mat-icon>
<span>Change password</span>
</button>
<button *ngIf="!this.forceChange" mat-raised-button color="primary" mat-dialog-close>
<mat-icon>cancel</mat-icon>
<span>Close</span>
</button>
</mat-dialog-actions>
smp-angular/src/app/common/password-change-dialog/password-change-dialog.component.ts → smp-angular/src/app/common/dialogs/password-change-dialog/password-change-dialog.component.ts
+ 59
− 38
View file @ 6fec44bd
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
import {
AbstractControl,
FormBuilder,
FormControl,
FormGroup,
FormGroupDirective, NgForm,
ValidatorFn,
Validators
} from "@angular/forms";
import {User} from "../../security/user.model";
import {GlobalLookups} from "../global-lookups";
import {ErrorStateMatcher} from "@angular/material/core";
import {UserDetailsService} from "../../user/user-details-dialog/user-details.service";
import {CertificateRo} from "../../user/certificate-ro.model";
import {AlertMessageService} from "../alert-message/alert-message.service";
import {ErrorResponseRO} from "../error/error-model";
import {SecurityService} from "../../security/security.service";
import {AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators} from "@angular/forms";
import {User} from "../../../security/user.model";
import {GlobalLookups} from "../../global-lookups";
import {UserDetailsService} from "../../../user/user-details-dialog/user-details.service";
import {AlertMessageService} from "../../alert-message/alert-message.service";
import {SecurityService} from "../../../security/security.service";
import {InformationDialogComponent} from "../information-dialog/information-dialog.component";
import {UserRo} from "../../../user/user-ro.model";
import {SmpConstants} from "../../../smp.constants";
@Component({
selector: 'smp-password-change-dialog',
......@@ -26,19 +17,20 @@ import {InformationDialogComponent} from "../information-dialog/information-dial
})
export class PasswordChangeDialogComponent {
formTitle = "Change password dialog!";
formTitle = "Change password dialog";
dialogForm: FormGroup;
hideCurrPwdFiled: boolean = true;
hideNewPwdFiled: boolean = true;
hideConfPwdFiled: boolean = true;
current: User;
adminUser: boolean = false;
message: string;
messageType: string = "alert-error";
forceChange:boolean=false;
forceChange: boolean = false;
constructor(
public dialogRef: MatDialogRef<PasswordChangeDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: User,
@Inject(MAT_DIALOG_DATA) public data: any,
private lookups: GlobalLookups,
private userDetailsService: UserDetailsService,
private alertService: AlertMessageService,
......@@ -49,7 +41,8 @@ export class PasswordChangeDialogComponent {
// disable close of focus lost
dialogRef.disableClose = true;
this.current = {...data}
this.current = {...data.user}
this.adminUser = data.adminUser
this.forceChange = this.current.forceChangeExpiredPassword;
......@@ -67,7 +60,7 @@ export class PasswordChangeDialogComponent {
'confirm-new-password': confirmNewPasswdFormControl
});
this.dialogForm.controls['email'].setValue(this.current.emailAddress);
this.dialogForm.controls['email'].setValue(this.isEmptyEmailAddress ? "Empty email address!" : this.current.emailAddress);
this.dialogForm.controls['username'].setValue(this.current.username);
this.dialogForm.controls['current-password'].setValue('');
this.dialogForm.controls['new-password'].setValue('');
......@@ -78,6 +71,10 @@ export class PasswordChangeDialogComponent {
return this.dialogForm.controls[controlName].hasError(errorName);
}
get isEmptyEmailAddress() {
return !this.current.emailAddress;
}
get passwordValidationMessage() {
return this.lookups.cachedApplicationConfig?.passwordValidationRegExpMessage;
}
......@@ -86,30 +83,54 @@ export class PasswordChangeDialogComponent {
return this.lookups.cachedApplicationConfig?.passwordValidationRegExp;
}
get getPasswordTitle(): string {
return this.adminUser ? "Admin password for user [" + this.securityService.getCurrentUser().username + "]" : "Current password";
}
changeCurrentUserPassword() {
this.clearAlert();
// update password
this.userDetailsService.changePassword(this.current.userId,
this.dialogForm.controls['new-password'].value,
this.dialogForm.controls['current-password'].value).subscribe((res: boolean) => {
this.showPassChangeDialog();
close()
},
(err) => {
this.showErrorMessage(err.error.errorDescription);
}
);
if (this.adminUser) {
// update password
this.userDetailsService.changePasswordAdmin(
this.securityService.getCurrentUser().userId,
this.current.userId,
this.dialogForm.controls['new-password'].value,
this.dialogForm.controls['current-password'].value).subscribe((result: UserRo) => {
this.showPassChangeDialog();
this.current.passwordExpireOn = result.passwordExpireOn;
this.dialogRef.close(result)
},
(err) => {
this.showErrorMessage(err.error.errorDescription);
}
);
} else {
// update password
this.userDetailsService.changePassword(this.current.userId,
this.dialogForm.controls['new-password'].value,
this.dialogForm.controls['current-password'].value).subscribe((res: boolean) => {
this.showPassChangeDialog();
close()
},
(err) => {
this.showErrorMessage(err.error.errorDescription);
}
);
}
}
showPassChangeDialog(){
showPassChangeDialog() {
this.dialog.open(InformationDialogComponent, {
data: {
title: "Password changed!",
description: "Password has been successfully changed. Login again to the application with the new password!"
description: "Password has been successfully changed. " +
(!this.adminUser ? "Login again to the application with the new password!" : "")
}
}).afterClosed().subscribe(result => {
// no need to logout because service itself logouts
this.securityService.finalizeLogout(result);
if (!this.adminUser) {
// logout if changed for itself
this.securityService.finalizeLogout(result);
}
close();
})
}
......
smp-angular/src/app/common/save-dialog/save-dialog.component.html → smp-angular/src/app/common/dialogs/save-dialog/save-dialog.component.html
+ 5
− 0
View file @ 6fec44bd
<smp-dialog [title]="'Do you want to save your changes?'"
<smp-dialog [title]="'Save changes'"
[text]="'Do you want to save your changes?'"
[type]="'confirmation'"
[dialogRef]="dialogRef">
</smp-dialog>
smp-angular/src/app/common/directive/autofocus/auto-focus.directive.ts 0 → 100644
+ 11
− 0
View file @ 6fec44bd
import { Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
selector: '[auto-focus-directive]'
})
export class AutoFocusDirective implements OnInit {
constructor(private elRef: ElementRef) { }
ngOnInit(): void {
this.elRef.nativeElement.focus();
}
}
smp-angular/src/app/common/dirty.guard.ts
+ 1
− 1
View file @ 6fec44bd
......@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, CanDeactivate, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';
import {MatDialog} from '@angular/material/dialog';
import {CancelDialogComponent} from './cancel-dialog/cancel-dialog.component';
import {CancelDialogComponent} from './dialogs/cancel-dialog/cancel-dialog.component';
@Injectable()
export class DirtyGuard implements CanActivate, CanDeactivate<any> {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

For further information about the platform and support, please see https://code.europa.eu/info/about