]>
Commit | Line | Data |
---|---|---|
9f95a23c TL |
1 | <div class="cd-col-form"> |
2 | <form #frm="ngForm" | |
3 | [formGroup]="userForm" | |
4 | novalidate> | |
5 | <div class="card"> | |
6 | <div i18n="form title|Example: Create Pool@@formTitle" | |
7 | class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div> | |
8 | ||
9 | <div class="card-body"> | |
10 | <!-- Old password --> | |
11 | <div class="form-group row"> | |
12 | <label class="cd-col-form-label required" | |
13 | for="oldpassword" | |
14 | i18n>Old password</label> | |
15 | <div class="cd-col-form-input"> | |
16 | <div class="input-group"> | |
17 | <input class="form-control" | |
18 | type="password" | |
19 | placeholder="Old password..." | |
20 | id="oldpassword" | |
21 | formControlName="oldpassword" | |
22 | autocomplete="new-password" | |
23 | autofocus> | |
24 | <span class="input-group-append"> | |
25 | <button class="btn btn-light" | |
26 | cdPasswordButton="oldpassword"> | |
27 | </button> | |
28 | </span> | |
29 | </div> | |
30 | <span class="invalid-feedback" | |
31 | *ngIf="userForm.showError('oldpassword', frm, 'required')" | |
32 | i18n>This field is required.</span> | |
33 | <span class="invalid-feedback" | |
34 | *ngIf="userForm.showError('oldpassword', frm, 'notmatch')" | |
35 | i18n>The old and new passwords must be different.</span> | |
36 | </div> | |
37 | </div> | |
38 | ||
39 | <!-- New password --> | |
40 | <div class="form-group row"> | |
41 | <label class="cd-col-form-label" | |
42 | for="newpassword"> | |
43 | <span class="required" | |
44 | i18n>New password</span> | |
45 | <cd-helper *ngIf="passwordPolicyHelpText.length > 0" | |
adb31ebb | 46 | class="text-pre-wrap" |
9f95a23c TL |
47 | html="{{ passwordPolicyHelpText }}"> |
48 | </cd-helper> | |
49 | </label> | |
50 | <div class="cd-col-form-input"> | |
51 | <div class="input-group"> | |
52 | <input class="form-control" | |
53 | type="password" | |
54 | placeholder="Password..." | |
55 | id="newpassword" | |
56 | autocomplete="new-password" | |
57 | formControlName="newpassword"> | |
58 | <span class="input-group-append"> | |
59 | <button type="button" | |
60 | class="btn btn-light" | |
61 | cdPasswordButton="newpassword"> | |
62 | </button> | |
63 | </span> | |
64 | </div> | |
65 | <div class="password-strength-level"> | |
66 | <div class="{{ passwordStrengthLevelClass }}" | |
67 | data-toggle="tooltip" | |
68 | title="{{ passwordValuation }}"> | |
69 | </div> | |
70 | </div> | |
71 | <span class="invalid-feedback" | |
72 | *ngIf="userForm.showError('newpassword', frm, 'required')" | |
73 | i18n>This field is required.</span> | |
74 | <span class="invalid-feedback" | |
75 | *ngIf="userForm.showError('newpassword', frm, 'notmatch')" | |
76 | i18n>The old and new passwords must be different.</span> | |
77 | <span class="invalid-feedback" | |
78 | *ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')"> | |
79 | {{ passwordValuation }} | |
80 | </span> | |
81 | </div> | |
82 | </div> | |
83 | ||
84 | <!-- Confirm new password --> | |
85 | <div class="form-group row"> | |
86 | <label class="cd-col-form-label required" | |
87 | for="confirmnewpassword" | |
88 | i18n>Confirm new password</label> | |
89 | <div class="cd-col-form-input"> | |
90 | <div class="input-group"> | |
91 | <input class="form-control" | |
92 | type="password" | |
93 | autocomplete="new-password" | |
94 | placeholder="Confirm new password..." | |
95 | id="confirmnewpassword" | |
96 | formControlName="confirmnewpassword"> | |
97 | <span class="input-group-append"> | |
98 | <button class="btn btn-light" | |
99 | cdPasswordButton="confirmnewpassword"> | |
100 | </button> | |
101 | </span> | |
102 | </div> | |
103 | <span class="invalid-feedback" | |
104 | *ngIf="userForm.showError('confirmnewpassword', frm, 'required')" | |
105 | i18n>This field is required.</span> | |
106 | <span class="invalid-feedback" | |
107 | *ngIf="userForm.showError('confirmnewpassword', frm, 'match')" | |
108 | i18n>Password confirmation doesn't match the new password.</span> | |
109 | </div> | |
110 | </div> | |
111 | </div> | |
112 | ||
113 | <div class="card-footer"> | |
f67539c2 TL |
114 | <cd-form-button-panel (submitActionEvent)="onSubmit()" |
115 | [form]="userForm" | |
116 | [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)" | |
117 | wrappingClass="text-right"></cd-form-button-panel> | |
9f95a23c TL |
118 | </div> |
119 | </div> | |
120 | </form> | |
121 | </div> |