Skip to content

Commit 2d43f59

Browse files
afreen23afreen23
committed
mgr/dashboard: Carbonize the Change Password Form
Fixes https://tracker.ceph.com/issues/73193 - using carbon based stylings, typography and components - used grid layout for form arrangement - breadcrumb is slightly off, which needs to be fixed by applying grid layout to the app shell Signed-off-by: Afreen Misbah <[email protected]>
1 parent b2fe749 commit 2d43f59

File tree

4 files changed

+126
-118
lines changed

4 files changed

+126
-118
lines changed

‎src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.html‎

Lines changed: 87 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,93 @@
1-
<div class="cd-col-form">
2-
<form #frm="ngForm"
3-
[formGroup]="userForm"
4-
novalidate>
5-
<div class="card">
6-
<div i18n="form title"
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-
<button class="btn btn-light"
25-
cdPasswordButton="oldpassword">
26-
</button>
27-
</div>
28-
<span class="invalid-feedback"
29-
*ngIf="userForm.showError('oldpassword', frm, 'required')"
30-
i18n>This field is required.</span>
31-
<span class="invalid-feedback"
32-
*ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
33-
i18n>The old and new passwords must be different.</span>
34-
</div>
35-
</div>
36-
37-
<!-- New password -->
38-
<div class="form-group row">
39-
<label class="cd-col-form-label"
40-
for="newpassword">
41-
<span class="required"
42-
i18n>New password</span>
43-
<cd-helper *ngIf="passwordPolicyHelpText.length > 0"
44-
class="text-pre-wrap"
45-
html="{{ passwordPolicyHelpText }}">
46-
</cd-helper>
47-
</label>
48-
<div class="cd-col-form-input">
49-
<div class="input-group">
50-
<input class="form-control"
51-
type="password"
52-
placeholder="Password..."
53-
id="newpassword"
54-
autocomplete="new-password"
55-
formControlName="newpassword">
56-
<button type="button"
57-
class="btn btn-light"
58-
cdPasswordButton="newpassword">
59-
</button>
60-
</div>
61-
<div class="password-strength-level">
62-
<div class="{{ passwordStrengthLevelClass }}"
63-
data-toggle="tooltip"
64-
title="{{ passwordValuation }}">
65-
</div>
66-
</div>
67-
<span class="invalid-feedback"
68-
*ngIf="userForm.showError('newpassword', frm, 'required')"
69-
i18n>This field is required.</span>
70-
<span class="invalid-feedback"
71-
*ngIf="userForm.showError('newpassword', frm, 'notmatch')"
72-
i18n>The old and new passwords must be different.</span>
73-
<span class="invalid-feedback"
74-
*ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
75-
{{ passwordValuation }}
76-
</span>
77-
</div>
78-
</div>
79-
80-
<!-- Confirm new password -->
81-
<div class="form-group row">
82-
<label class="cd-col-form-label required"
83-
for="confirmnewpassword"
84-
i18n>Confirm new password</label>
85-
<div class="cd-col-form-input">
86-
<div class="input-group">
87-
<input class="form-control"
88-
type="password"
89-
autocomplete="new-password"
90-
placeholder="Confirm new password..."
91-
id="confirmnewpassword"
92-
formControlName="confirmnewpassword">
93-
<button class="btn btn-light"
94-
cdPasswordButton="confirmnewpassword">
95-
</button>
96-
</div>
97-
<span class="invalid-feedback"
98-
*ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
99-
i18n>This field is required.</span>
100-
<span class="invalid-feedback"
101-
*ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
102-
i18n>Password confirmation doesn't match the new password.</span>
103-
</div>
104-
</div>
1+
<form [formGroup]="userForm"
2+
novalidate>
3+
<div cdsGrid
4+
[useCssGrid]="true"
5+
[narrow]="true"
6+
[fullWidth]="true">
7+
<div cdsCol
8+
[columnNumbers]="{sm: 4, md: 8}">
9+
<div cdsRow
10+
class="form-heading">
11+
<h3>{{ action | titlecase }} {{ resource | upperFirst }}</h3>
12+
<cd-help-text [formAllFieldsRequired]="true"></cd-help-text>
10513
</div>
106-
107-
<div class="card-footer">
14+
<div cdsRow
15+
class="form-item">
16+
<cds-password-label
17+
[invalid]="!userForm.controls.oldpassword.valid && userForm.controls.oldpassword.dirty"
18+
[invalidText]="oldPasswordInvalid">
19+
Old Password
20+
<input cdsPassword
21+
formControlName="oldpassword"
22+
autocomplete="oldpassword"
23+
[invalid]="!userForm.controls.oldpassword.valid && userForm.controls.oldpassword.dirty"
24+
id="oldpassword"
25+
autofocus>
26+
</cds-password-label>
27+
</div>
28+
<div cdsRow
29+
class="form-item">
30+
<cds-password-label
31+
[invalid]="!userForm.controls.newpassword.valid && userForm.controls.newpassword.dirty"
32+
[invalidText]="newPasswordInvalid"
33+
[helperText]="passwordPolicyHelpText">
34+
New Password
35+
<input cdsPassword
36+
formControlName="newpassword"
37+
autocomplete="newpassword"
38+
[invalid]="!userForm.controls.newpassword.valid && userForm.controls.newpassword.dirty"
39+
id="newpassword">
40+
</cds-password-label>
41+
</div>
42+
<div cdsRow
43+
class="form-item">
44+
<cds-password-label
45+
[invalid]="!userForm.controls.confirmnewpassword.valid && userForm.controls.confirmnewpassword.dirty"
46+
[invalidText]="confirmNewPasswordInvalid">
47+
Confirm New Password
48+
<input cdsPassword
49+
formControlName="confirmnewpassword"
50+
autocomplete="confirmnewpassword"
51+
[invalid]="!userForm.controls.confirmnewpassword.valid && userForm.controls.confirmnewpassword.dirty"
52+
id="confirmnewpassword">
53+
</cds-password-label>
54+
</div>
55+
<div cdsRow>
10856
<cd-form-button-panel (submitActionEvent)="onSubmit()"
10957
[form]="userForm"
11058
[submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
111-
wrappingClass="text-right"></cd-form-button-panel>
59+
wrappingClass="text-right form-button"></cd-form-button-panel>
11260
</div>
11361
</div>
114-
</form>
115-
</div>
62+
</div>
63+
</form>
64+
65+
<ng-template #oldPasswordInvalid>
66+
<span class="invalid-feedback"
67+
*ngIf="userForm.showError('oldpassword', null, 'required')"
68+
i18n>{{INVALID_TEXTS['required']}}</span>
69+
<span class="invalid-feedback"
70+
*ngIf="userForm.showError('oldpassword', null, 'notmatch')"
71+
i18n>{{INVALID_TEXTS['notmatch']}}</span>
72+
</ng-template>
73+
74+
<ng-template #newPasswordInvalid>
75+
<span class="invalid-feedback"
76+
*ngIf="userForm.showError('newpassword', null, 'required')"
77+
i18n>{{INVALID_TEXTS['required']}}</span>
78+
<span class="invalid-feedback"
79+
*ngIf="userForm.showError('newpassword', null, 'notmatch')"
80+
i18n>{{INVALID_TEXTS['notmatch']}}</span>
81+
<span class="invalid-feedback"
82+
*ngIf="userForm.showError('newpassword', null, 'passwordPolicy')"
83+
i18n>{{INVALID_TEXTS['passwordPolicy']}}</span>
84+
</ng-template>
85+
86+
<ng-template #confirmNewPasswordInvalid>
87+
<span class="invalid-feedback"
88+
*ngIf="userForm.showError('confirmnewpassword', null, 'required')"
89+
i18n>{{INVALID_TEXTS['required']}}</span>
90+
<span class="invalid-feedback"
91+
*ngIf="userForm.showError('confirmnewpassword', null, 'match')"
92+
i18n>{{INVALID_TEXTS['match']}}</span>
93+
</ng-template>

‎src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +0,0 @@
1-
@use './src/styles/vendor/variables' as vv;
2-
3-
#oldpassword.is-valid {
4-
background-image: unset;
5-
border-color: vv.$gray-400;
6-
}

‎src/pybind/mgr/dashboard/frontend/src/app/core/auth/user-password-form/user-password-form.component.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@ export class UserPasswordFormComponent {
2828
passwordStrengthLevelClass: string;
2929
passwordValuation: string;
3030
icons = Icons;
31+
INVALID_TEXTS = {
32+
required: 'This field is required',
33+
notmatch: 'The old and new passwords must be different',
34+
match: "Password confirmation doesn't match the new password.",
35+
passwordPolicy: ''
36+
};
3137

3238
constructor(
3339
public actionLabels: ActionLabelsI18n,
@@ -76,11 +82,17 @@ export class UserPasswordFormComponent {
7682
CdValidators.passwordPolicy(
7783
this.userService,
7884
() => this.authStorageService.getUsername(),
79-
(_valid: boolean, credits: number, valuation: string) => {
85+
(_valid: boolean, credits, valuation: string) => {
86+
/* `passwordStrengthLevelClass` and `passwordValuation` is used in LoginPasswordFormComponent
87+
* These values are not needed in this component after carbonization.
88+
* @TODO: Need to remove once the LoginPasswordFormComponent is carbonized.
89+
*/
8090
this.passwordStrengthLevelClass = this.passwordPolicyService.mapCreditsToCssClass(
8191
credits
8292
);
8393
this.passwordValuation = _.defaultTo(valuation, '');
94+
95+
this.INVALID_TEXTS['passwordPolicy'] = _.defaultTo(valuation, '');
8496
}
8597
)
8698
]

‎src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,12 +111,36 @@ Carbon Overrides
111111
/******************************************
112112
Form Controls
113113
******************************************/
114+
115+
// Ref: https://carbondesignsystem.com/components/form/style/#recommended-for-default-forms/
116+
117+
form {
118+
// Overriding to remove extra space which is getting added when cdsGrid is used.
119+
// If we use grid in app shell, then we dont need to set this.
120+
// @TODO: Add grid layout for the app shell
121+
.cds--grid {
122+
padding-inline: 0;
123+
}
124+
}
125+
126+
.form-heading {
127+
h3 {
128+
@include type.type-style('heading-03');
129+
}
130+
131+
display: block;
132+
margin-bottom: var(--cds-spacing-08);
133+
}
134+
114135
.form-item {
115136
@extend .cds--form-item;
116137

117138
display: block;
118-
margin-bottom: 32px;
119-
margin-top: 32px;
139+
margin-bottom: var(--cds-spacing-07);
140+
}
141+
142+
.form-button {
143+
margin-top: var(--cds-spacing-09);
120144
}
121145

122146
.form-item-append {

0 commit comments

Comments
 (0)