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
120
121
|
<div class="cd-col-form">
<form #frm="ngForm"
[formGroup]="userForm"
novalidate>
<div class="card">
<div i18n="form title"
class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
<div class="card-body">
<!-- Old password -->
<div class="form-group row">
<label class="cd-col-form-label required"
for="oldpassword"
i18n>Old password</label>
<div class="cd-col-form-input">
<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-light"
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>
</div>
<!-- New password -->
<div class="form-group row">
<label class="cd-col-form-label"
for="newpassword">
<span class="required"
i18n>New password</span>
<cd-helper *ngIf="passwordPolicyHelpText.length > 0"
class="text-pre-wrap"
html="{{ passwordPolicyHelpText }}">
</cd-helper>
</label>
<div class="cd-col-form-input">
<div class="input-group">
<input class="form-control"
type="password"
placeholder="Password..."
id="newpassword"
autocomplete="new-password"
formControlName="newpassword">
<span class="input-group-append">
<button type="button"
class="btn btn-light"
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>
</div>
<!-- Confirm new password -->
<div class="form-group row">
<label class="cd-col-form-label required"
for="confirmnewpassword"
i18n>Confirm new password</label>
<div class="cd-col-form-input">
<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-light"
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>
</div>
</div>
<div class="card-footer">
<cd-form-button-panel (submitActionEvent)="onSubmit()"
[form]="userForm"
[submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
wrappingClass="text-right"></cd-form-button-panel>
</div>
</div>
</form>
</div>
|
