Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(user): bring back password field and resolve loading issue (DEV-967
…) (#753)
  • Loading branch information
kilchenmann committed May 30, 2022
1 parent 84975d7 commit 694cb06
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 84 deletions.
157 changes: 80 additions & 77 deletions src/app/user/user-form/user-form.component.html
@@ -1,90 +1,93 @@
<!-- content -->
<form [formGroup]="userForm" class="form-content user-data" (ngSubmit)="submitData()">
<app-progress-indicator *ngIf="loadingData"></app-progress-indicator>
<div *ngIf="!loadingData">
<form [formGroup]="userForm" class="form-content user-data" (ngSubmit)="submitData()">

<!-- username -->
<mat-form-field [class.large-field]="!username" [class.small-field]="username">
<input matInput type="text" formControlName="username"
placeholder="{{ 'appLabels.form.user.general.username' | translate }}" autocomplete="username">
<mat-hint *ngIf="formErrors.username">
{{ formErrors.username }}
</mat-hint>
</mat-form-field>
<!-- username -->
<mat-form-field [class.large-field]="!username" [class.small-field]="username">
<input matInput type="text" formControlName="username"
placeholder="{{ 'appLabels.form.user.general.username' | translate }}" autocomplete="username">
<mat-hint *ngIf="formErrors.username">
{{ formErrors.username }}
</mat-hint>
</mat-form-field>

<!-- email -->
<mat-form-field [class.large-field]="!username" [class.medium-field]="username">
<input matInput type="email" formControlName="email"
placeholder="{{ 'appLabels.form.user.general.email' | translate }}" autocomplete="email">
<mat-hint *ngIf="formErrors.email">
{{ formErrors.email }}
</mat-hint>
</mat-form-field>
<!-- email -->
<mat-form-field [class.large-field]="!username" [class.medium-field]="username">
<input matInput type="email" formControlName="email"
placeholder="{{ 'appLabels.form.user.general.email' | translate }}" autocomplete="email">
<mat-hint *ngIf="formErrors.email">
{{ formErrors.email }}
</mat-hint>
</mat-form-field>

<!-- given name -->
<mat-form-field class="small-field">
<input matInput formControlName="givenName"
placeholder="{{ 'appLabels.form.user.general.givenName' | translate }}" autocomplete="givenname">
<mat-hint *ngIf="formErrors.givenName">
{{ formErrors.givenName }}
</mat-hint>
</mat-form-field>
<!-- given name -->
<mat-form-field class="small-field">
<input matInput formControlName="givenName"
placeholder="{{ 'appLabels.form.user.general.givenName' | translate }}" autocomplete="givenname">
<mat-hint *ngIf="formErrors.givenName">
{{ formErrors.givenName }}
</mat-hint>
</mat-form-field>

<!-- family name -->
<mat-form-field class="medium-field">
<input matInput formControlName="familyName"
placeholder="{{ 'appLabels.form.user.general.familyName' | translate }}" autocomplete="name">
<mat-hint *ngIf="formErrors.familyName">
{{ formErrors.familyName }}
</mat-hint>
</mat-form-field>
<!-- family name -->
<mat-form-field class="medium-field">
<input matInput formControlName="familyName"
placeholder="{{ 'appLabels.form.user.general.familyName' | translate }}" autocomplete="name">
<mat-hint *ngIf="formErrors.familyName">
{{ formErrors.familyName }}
</mat-hint>
</mat-form-field>

<!-- password // hidden in edit mode -->
<!-- <app-password-form *ngIf="!username" (sendToParent)="getPassword($event)"></app-password-form> -->
<!-- password // hidden in edit mode -->
<app-password-form *ngIf="!username" (sendToParent)="getPassword($event)"></app-password-form>

<mat-form-field class="large-field">
<mat-form-field class="large-field">

<mat-select formControlName="lang"
[placeholder]="'appLabels.form.user.general.language' | translate">
<mat-option *ngFor="let lang of languagesList" [value]="lang.language">
{{ lang.value }}
</mat-option>
</mat-select>
<mat-select formControlName="lang"
[placeholder]="'appLabels.form.user.general.language' | translate">
<mat-option *ngFor="let lang of languagesList" [value]="lang.language">
{{ lang.value }}
</mat-option>
</mat-select>

</mat-form-field>
</mat-form-field>

<div class="large-field">
<mat-slide-toggle formControlName="systemAdmin"
*ngIf="sysAdmin">
{{ 'appLabels.form.user.general.sysAdmin' | translate }}
</mat-slide-toggle>
</div>
<div class="large-field">
<mat-slide-toggle formControlName="systemAdmin"
*ngIf="sysAdmin">
{{ 'appLabels.form.user.general.sysAdmin' | translate }}
</mat-slide-toggle>
</div>

<div class="form-panel form-action">
<span>
<button mat-button type="reset" (click)="closeDialog.emit()">
{{ 'appLabels.form.action.cancel' | translate }}
</button>
</span>
<span class="fill-remaining-space"></span>
<span>
<!-- Update -->
<button mat-raised-button type="submit" color="primary" *ngIf="username" [disabled]="!userForm.valid">
<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
</app-progress-indicator>
<mat-icon *ngIf="error && !loading">close</mat-icon>
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.update' |
translate) }}
</button>
<!-- Create new -->
<button mat-raised-button type="submit" color="primary" *ngIf="!username"
[disabled]="!userForm.valid || (userForm.controls['password'].value.length < 8)">
<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
</app-progress-indicator>
<mat-icon *ngIf="error && !loading">close</mat-icon>
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.submit' |
translate) }}
</button>
<div class="form-panel form-action">
<span>
<button mat-button type="reset" (click)="closeDialog.emit()">
{{ 'appLabels.form.action.cancel' | translate }}
</button>
</span>
<span class="fill-remaining-space"></span>
<span>
<!-- Update -->
<button mat-raised-button type="submit" color="primary" *ngIf="username" [disabled]="!userForm.valid">
<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
</app-progress-indicator>
<mat-icon *ngIf="error && !loading">close</mat-icon>
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.update' |
translate) }}
</button>
<!-- Create new -->
<button mat-raised-button type="submit" color="primary" *ngIf="!username"
[disabled]="!userForm.valid || (userForm.controls['password'].value.length < 8)">
<app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
</app-progress-indicator>
<mat-icon *ngIf="error && !loading">close</mat-icon>
{{ !loading && error ? ('appLabels.form.action.retry' | translate) : ('appLabels.form.action.submit' |
translate) }}
</button>

</span>
</div>
</span>
</div>

</form>
</form>
</div>
12 changes: 5 additions & 7 deletions src/app/user/user-form/user-form.component.ts
Expand Up @@ -60,7 +60,8 @@ export class UserFormComponent implements OnInit, OnChanges {
/**
* status for the progress indicator and error
*/
loading = true;
loading = false;
loadingData = true;
error: boolean;

/**
Expand Down Expand Up @@ -177,7 +178,7 @@ export class UserFormComponent implements OnInit, OnChanges {
}

ngOnInit() {
this.loading = true;
this.loadingData = true;

// get information about the logged-in user
this.session = this._session.getSession();
Expand All @@ -198,7 +199,7 @@ export class UserFormComponent implements OnInit, OnChanges {
this._cache.get(this.username, this._dspApiConnection.admin.usersEndpoint.getUserByUsername(this.username)).subscribe(
(response: ApiResponseData<UserResponse>) => {
this.user = response.body.user;
this.loading = !this.buildForm(this.user);
this.loadingData = !this.buildForm(this.user);
},
(error: ApiResponseError) => {
this._errorHandler.showMessage(error);
Expand Down Expand Up @@ -238,7 +239,7 @@ export class UserFormComponent implements OnInit, OnChanges {
newUser.username = this.name;
}
// build the form
this.loading = !this.buildForm(newUser);
this.loadingData = !this.buildForm(newUser);
});
}
}
Expand Down Expand Up @@ -324,8 +325,6 @@ export class UserFormComponent implements OnInit, OnChanges {
// 'group': null
});

// this.loading = false;

this.userForm.valueChanges.subscribe(data => this.onValueChanged());
return true;
}
Expand Down Expand Up @@ -387,7 +386,6 @@ export class UserFormComponent implements OnInit, OnChanges {

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

// this.loading = false;
this._notification.openSnackBar('You have successfully updated the user\'s profile data.');
this.closeDialog.emit();
this.loading = false;
Expand Down

0 comments on commit 694cb06

Please sign in to comment.