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
|
<div>
<h2 i18n>Please set a new password.</h2>
<h4 i18n>You will be redirected to the login page afterwards.</h4>
<form #frm="ngForm"
[formGroup]="userForm"
novalidate>
<!-- Old password -->
<div class="form-group has-feedback">
<div class="input-group">
<input class="form-control"
type="password"
placeholder="Old password..."
id="oldpassword"
formControlName="oldpassword"
autocomplete="new-password"
autofocus>
<span class="input-group-append">
<button class="btn btn-outline-light btn-password"
cdPasswordButton="oldpassword">
</button>
</span>
</div>
<span class="invalid-feedback"
*ngIf="userForm.showError('oldpassword', frm, 'required')"
i18n>This field is required.</span>
<span class="invalid-feedback"
*ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
i18n>The old and new passwords must be different.</span>
</div>
<!-- New password -->
<div class="form-group has-feedback">
<div class="input-group">
<input class="form-control"
type="password"
placeholder="New password..."
id="newpassword"
autocomplete="new-password"
formControlName="newpassword">
<span class="input-group-append">
<button type="button"
class="btn btn-outline-light btn-password"
cdPasswordButton="newpassword">
</button>
</span>
</div>
<div class="password-strength-level">
<div class="{{ passwordStrengthLevelClass }}"
data-toggle="tooltip"
title="{{ passwordValuation }}">
</div>
</div>
<span class="invalid-feedback"
*ngIf="userForm.showError('newpassword', frm, 'required')"
i18n>This field is required.</span>
<span class="invalid-feedback"
*ngIf="userForm.showError('newpassword', frm, 'notmatch')"
i18n>The old and new passwords must be different.</span>
<span class="invalid-feedback"
*ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
{{ passwordValuation }}
</span>
</div>
<!-- Confirm new password -->
<div class="form-group has-feedback">
<div class="input-group">
<input class="form-control"
type="password"
autocomplete="new-password"
placeholder="Confirm new password..."
id="confirmnewpassword"
formControlName="confirmnewpassword">
<span class="input-group-append">
<button class="btn btn-outline-light btn-password"
cdPasswordButton="confirmnewpassword">
</button>
</span>
</div>
<span class="invalid-feedback"
*ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
i18n>This field is required.</span>
<span class="invalid-feedback"
*ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
i18n>Password confirmation doesn't match the new password.</span>
</div>
<cd-form-button-panel (submitActionEvent)="onSubmit()"
(backActionEvent)="onCancel()"
[form]="userForm"
[disabled]="userForm.invalid"
[submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
wrappingClass="text-right"></cd-form-button-panel>
</form>
</div>
|
