1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
import { Component } from '@angular/core';
import { Validators } from '@angular/forms';
import { Router } from '@angular/router';
import _ from 'lodash';
import { UserService } from '~/app/shared/api/user.service';
import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
import { Icons } from '~/app/shared/enum/icons.enum';
import { NotificationType } from '~/app/shared/enum/notification-type.enum';
import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
import { CdValidators } from '~/app/shared/forms/cd-validators';
import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
import { NotificationService } from '~/app/shared/services/notification.service';
import { PasswordPolicyService } from '~/app/shared/services/password-policy.service';
@Component({
selector: 'cd-user-password-form',
templateUrl: './user-password-form.component.html',
styleUrls: ['./user-password-form.component.scss']
})
export class UserPasswordFormComponent {
userForm: CdFormGroup;
action: string;
resource: string;
passwordPolicyHelpText = '';
passwordStrengthLevelClass: string;
passwordValuation: string;
icons = Icons;
constructor(
public actionLabels: ActionLabelsI18n,
public notificationService: NotificationService,
public userService: UserService,
public authStorageService: AuthStorageService,
public formBuilder: CdFormBuilder,
public router: Router,
public passwordPolicyService: PasswordPolicyService
) {
this.action = this.actionLabels.CHANGE;
this.resource = $localize`password`;
this.createForm();
}
createForm() {
this.passwordPolicyService.getHelpText().subscribe((helpText: string) => {
this.passwordPolicyHelpText = helpText;
});
this.userForm = this.formBuilder.group(
{
oldpassword: [
null,
[
Validators.required,
CdValidators.custom('notmatch', () => {
return (
this.userForm &&
this.userForm.getValue('newpassword') === this.userForm.getValue('oldpassword')
);
})
]
],
newpassword: [
null,
[
Validators.required,
CdValidators.custom('notmatch', () => {
return (
this.userForm &&
this.userForm.getValue('oldpassword') === this.userForm.getValue('newpassword')
);
})
],
[
CdValidators.passwordPolicy(
this.userService,
() => this.authStorageService.getUsername(),
(_valid: boolean, credits: number, valuation: string) => {
this.passwordStrengthLevelClass = this.passwordPolicyService.mapCreditsToCssClass(
credits
);
this.passwordValuation = _.defaultTo(valuation, '');
}
)
]
],
confirmnewpassword: [null, [Validators.required]]
},
{
validators: [CdValidators.match('newpassword', 'confirmnewpassword')]
}
);
}
onSubmit() {
if (this.userForm.pristine) {
return;
}
const username = this.authStorageService.getUsername();
const oldPassword = this.userForm.getValue('oldpassword');
const newPassword = this.userForm.getValue('newpassword');
this.userService.changePassword(username, oldPassword, newPassword).subscribe(
() => this.onPasswordChange(),
() => {
this.userForm.setErrors({ cdSubmitButton: true });
}
);
}
/**
* The function that is called after the password has been changed.
* Override this in derived classes to change the behaviour.
*/
onPasswordChange() {
this.notificationService.show(NotificationType.success, $localize`Updated user password"`);
this.router.navigate(['/login']);
}
}
|
