From 694cb0626a5a5166656414a30f39dac9dfd6ee25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Kilchenmann?= <github@milchkannen.ch>
Date: Mon, 30 May 2022 14:03:39 +0200
Subject: [PATCH] fix(user): bring back password field and resolve loading
 issue (DEV-967) (#753)

---
 .../user/user-form/user-form.component.html   | 157 +++++++++---------
 src/app/user/user-form/user-form.component.ts |  12 +-
 2 files changed, 85 insertions(+), 84 deletions(-)

diff --git a/src/app/user/user-form/user-form.component.html b/src/app/user/user-form/user-form.component.html
index 7955420a0c..6687867830 100644
--- a/src/app/user/user-form/user-form.component.html
+++ b/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>
diff --git a/src/app/user/user-form/user-form.component.ts b/src/app/user/user-form/user-form.component.ts
index b7dcc9c560..480875841d 100644
--- a/src/app/user/user-form/user-form.component.ts
+++ b/src/app/user/user-form/user-form.component.ts
@@ -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;
 
     /**
@@ -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();
@@ -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);
@@ -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);
                 });
         }
     }
@@ -324,8 +325,6 @@ export class UserFormComponent implements OnInit, OnChanges {
             // 'group': null
         });
 
-        // this.loading = false;
-
         this.userForm.valueChanges.subscribe(data => this.onValueChanged());
         return true;
     }
@@ -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;