Skip to content

Commit 694cb06

Browse files
kilchenmannkilchenmann
authored
fix(user): bring back password field and resolve loading issue (DEV-967) (#753)
1 parent 84975d7 commit 694cb06

2 files changed

Lines changed: 85 additions & 84 deletions

File tree

‎src/app/user/user-form/user-form.component.html‎

Lines changed: 80 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,93 @@
11
<!-- content -->
2-
<form [formGroup]="userForm" class="form-content user-data" (ngSubmit)="submitData()">
2+
<app-progress-indicator *ngIf="loadingData"></app-progress-indicator>
3+
<div *ngIf="!loadingData">
4+
<form [formGroup]="userForm" class="form-content user-data" (ngSubmit)="submitData()">
35

4-
<!-- username -->
5-
<mat-form-field [class.large-field]="!username" [class.small-field]="username">
6-
<input matInput type="text" formControlName="username"
7-
placeholder="{{ 'appLabels.form.user.general.username' | translate }}" autocomplete="username">
8-
<mat-hint *ngIf="formErrors.username">
9-
{{ formErrors.username }}
10-
</mat-hint>
11-
</mat-form-field>
6+
<!-- username -->
7+
<mat-form-field [class.large-field]="!username" [class.small-field]="username">
8+
<input matInput type="text" formControlName="username"
9+
placeholder="{{ 'appLabels.form.user.general.username' | translate }}" autocomplete="username">
10+
<mat-hint *ngIf="formErrors.username">
11+
{{ formErrors.username }}
12+
</mat-hint>
13+
</mat-form-field>
1214

13-
<!-- email -->
14-
<mat-form-field [class.large-field]="!username" [class.medium-field]="username">
15-
<input matInput type="email" formControlName="email"
16-
placeholder="{{ 'appLabels.form.user.general.email' | translate }}" autocomplete="email">
17-
<mat-hint *ngIf="formErrors.email">
18-
{{ formErrors.email }}
19-
</mat-hint>
20-
</mat-form-field>
15+
<!-- email -->
16+
<mat-form-field [class.large-field]="!username" [class.medium-field]="username">
17+
<input matInput type="email" formControlName="email"
18+
placeholder="{{ 'appLabels.form.user.general.email' | translate }}" autocomplete="email">
19+
<mat-hint *ngIf="formErrors.email">
20+
{{ formErrors.email }}
21+
</mat-hint>
22+
</mat-form-field>
2123

22-
<!-- given name -->
23-
<mat-form-field class="small-field">
24-
<input matInput formControlName="givenName"
25-
placeholder="{{ 'appLabels.form.user.general.givenName' | translate }}" autocomplete="givenname">
26-
<mat-hint *ngIf="formErrors.givenName">
27-
{{ formErrors.givenName }}
28-
</mat-hint>
29-
</mat-form-field>
24+
<!-- given name -->
25+
<mat-form-field class="small-field">
26+
<input matInput formControlName="givenName"
27+
placeholder="{{ 'appLabels.form.user.general.givenName' | translate }}" autocomplete="givenname">
28+
<mat-hint *ngIf="formErrors.givenName">
29+
{{ formErrors.givenName }}
30+
</mat-hint>
31+
</mat-form-field>
3032

31-
<!-- family name -->
32-
<mat-form-field class="medium-field">
33-
<input matInput formControlName="familyName"
34-
placeholder="{{ 'appLabels.form.user.general.familyName' | translate }}" autocomplete="name">
35-
<mat-hint *ngIf="formErrors.familyName">
36-
{{ formErrors.familyName }}
37-
</mat-hint>
38-
</mat-form-field>
33+
<!-- family name -->
34+
<mat-form-field class="medium-field">
35+
<input matInput formControlName="familyName"
36+
placeholder="{{ 'appLabels.form.user.general.familyName' | translate }}" autocomplete="name">
37+
<mat-hint *ngIf="formErrors.familyName">
38+
{{ formErrors.familyName }}
39+
</mat-hint>
40+
</mat-form-field>
3941

40-
<!-- password // hidden in edit mode -->
41-
<!-- <app-password-form *ngIf="!username" (sendToParent)="getPassword($event)"></app-password-form> -->
42+
<!-- password // hidden in edit mode -->
43+
<app-password-form *ngIf="!username" (sendToParent)="getPassword($event)"></app-password-form>
4244

43-
<mat-form-field class="large-field">
45+
<mat-form-field class="large-field">
4446

45-
<mat-select formControlName="lang"
46-
[placeholder]="'appLabels.form.user.general.language' | translate">
47-
<mat-option *ngFor="let lang of languagesList" [value]="lang.language">
48-
{{ lang.value }}
49-
</mat-option>
50-
</mat-select>
47+
<mat-select formControlName="lang"
48+
[placeholder]="'appLabels.form.user.general.language' | translate">
49+
<mat-option *ngFor="let lang of languagesList" [value]="lang.language">
50+
{{ lang.value }}
51+
</mat-option>
52+
</mat-select>
5153

52-
</mat-form-field>
54+
</mat-form-field>
5355

54-
<div class="large-field">
55-
<mat-slide-toggle formControlName="systemAdmin"
56-
*ngIf="sysAdmin">
57-
{{ 'appLabels.form.user.general.sysAdmin' | translate }}
58-
</mat-slide-toggle>
59-
</div>
56+
<div class="large-field">
57+
<mat-slide-toggle formControlName="systemAdmin"
58+
*ngIf="sysAdmin">
59+
{{ 'appLabels.form.user.general.sysAdmin' | translate }}
60+
</mat-slide-toggle>
61+
</div>
6062

61-
<div class="form-panel form-action">
62-
<span>
63-
<button mat-button type="reset" (click)="closeDialog.emit()">
64-
{{ 'appLabels.form.action.cancel' | translate }}
65-
</button>
66-
</span>
67-
<span class="fill-remaining-space"></span>
68-
<span>
69-
<!-- Update -->
70-
<button mat-raised-button type="submit" color="primary" *ngIf="username" [disabled]="!userForm.valid">
71-
<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
72-
</app-progress-indicator>
73-
<mat-icon *ngIf="error && !loading">close</mat-icon>
74-
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.update' |
75-
translate) }}
76-
</button>
77-
<!-- Create new -->
78-
<button mat-raised-button type="submit" color="primary" *ngIf="!username"
79-
[disabled]="!userForm.valid || (userForm.controls['password'].value.length < 8)">
80-
<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
81-
</app-progress-indicator>
82-
<mat-icon *ngIf="error && !loading">close</mat-icon>
83-
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.submit' |
84-
translate) }}
85-
</button>
63+
<div class="form-panel form-action">
64+
<span>
65+
<button mat-button type="reset" (click)="closeDialog.emit()">
66+
{{ 'appLabels.form.action.cancel' | translate }}
67+
</button>
68+
</span>
69+
<span class="fill-remaining-space"></span>
70+
<span>
71+
<!-- Update -->
72+
<button mat-raised-button type="submit" color="primary" *ngIf="username" [disabled]="!userForm.valid">
73+
<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
74+
</app-progress-indicator>
75+
<mat-icon *ngIf="error && !loading">close</mat-icon>
76+
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.update' |
77+
translate) }}
78+
</button>
79+
<!-- Create new -->
80+
<button mat-raised-button type="submit" color="primary" *ngIf="!username"
81+
[disabled]="!userForm.valid || (userForm.controls['password'].value.length < 8)">
82+
<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
83+
</app-progress-indicator>
84+
<mat-icon *ngIf="error && !loading">close</mat-icon>
85+
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.submit' |
86+
translate) }}
87+
</button>
8688

87-
</span>
88-
</div>
89+
</span>
90+
</div>
8991

90-
</form>
92+
</form>
93+
</div>

‎src/app/user/user-form/user-form.component.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ export class UserFormComponent implements OnInit, OnChanges {
6060
/**
6161
* status for the progress indicator and error
6262
*/
63-
loading = true;
63+
loading = false;
64+
loadingData = true;
6465
error: boolean;
6566

6667
/**
@@ -177,7 +178,7 @@ export class UserFormComponent implements OnInit, OnChanges {
177178
}
178179

179180
ngOnInit() {
180-
this.loading = true;
181+
this.loadingData = true;
181182

182183
// get information about the logged-in user
183184
this.session = this._session.getSession();
@@ -198,7 +199,7 @@ export class UserFormComponent implements OnInit, OnChanges {
198199
this._cache.get(this.username, this._dspApiConnection.admin.usersEndpoint.getUserByUsername(this.username)).subscribe(
199200
(response: ApiResponseData<UserResponse>) => {
200201
this.user = response.body.user;
201-
this.loading = !this.buildForm(this.user);
202+
this.loadingData = !this.buildForm(this.user);
202203
},
203204
(error: ApiResponseError) => {
204205
this._errorHandler.showMessage(error);
@@ -238,7 +239,7 @@ export class UserFormComponent implements OnInit, OnChanges {
238239
newUser.username = this.name;
239240
}
240241
// build the form
241-
this.loading = !this.buildForm(newUser);
242+
this.loadingData = !this.buildForm(newUser);
242243
});
243244
}
244245
}
@@ -324,8 +325,6 @@ export class UserFormComponent implements OnInit, OnChanges {
324325
// 'group': null
325326
});
326327

327-
// this.loading = false;
328-
329328
this.userForm.valueChanges.subscribe(data => this.onValueChanged());
330329
return true;
331330
}
@@ -387,7 +386,6 @@ export class UserFormComponent implements OnInit, OnChanges {
387386

388387
this._cache.set(this.username, response);
389388

390-
// this.loading = false;
391389
this._notification.openSnackBar('You have successfully updated the user\'s profile data.');
392390
this.closeDialog.emit();
393391
this.loading = false;

0 commit comments

Comments
 (0)