attempt to create users (currently there's a 500 error)

app/src/app/security/helpers/security.service.ts

@@ -34,14 +34,14 @@ export class SecurityService
   }
 
   // ----------------------------------------------------------------------------------------------------------------
-  addUser(user: UserRequest): Observable<UserResponse>
+  addUser(user): Observable<UserResponse>
   {
     return this.httpClient.post<UserResponse>(`/api/my/users`, user)
       .pipe(tap(() => usersCacheBuster$.next()));
   }
 
   // ----------------------------------------------------------------------------------------------------------------
-  editUser(userId: string, user: UserRequest): Observable<UserResponse>
+  editUser(userId: string, user): Observable<UserResponse>
   {
     return this.httpClient.post<UserResponse>(`/api/my/users/${userId}`, user)
       .pipe(tap(() => usersCacheBuster$.next()));

app/src/app/security/models/user.ts

@@ -13,6 +13,7 @@ export class UserRequest
   city: string;
   state: string;
   country: string;
+  password: string;
 }
 
 export class UserResponse extends UserRequest

app/src/app/security/policy-editor/policy-editor.component.ts

@@ -93,7 +93,7 @@ export class PolicyEditorComponent implements OnInit, OnDestroy
   // ----------------------------------------------------------------------------------------------------------------
   close()
   {
-    removeEventListener('document:keydown.escape', this.returnPressed);
+    removeEventListener('document:keydown.enter', this.returnPressed);
 
     this.modalRef.hide();
   }
@@ -153,6 +153,6 @@ export class PolicyEditorComponent implements OnInit, OnDestroy
   // --------------------------------------------------------------------------------------------------
   ngOnDestroy()
   {
-    removeEventListener('document:keydown.escape', this.returnPressed);
+    removeEventListener('document:keydown.enter', this.returnPressed);
   }
 }

app/src/app/security/user-editor/user-editor.component.html

@@ -13,7 +13,7 @@
         <div class="col-sm-6">
           <div class="form-floating">
             <input type="text" class="form-control" id="username" formControlName="username" placeholder="Username"
-                   [appAutofocus]="true" [appAutofocusDelay]="600">
+                   [appAutofocus]="true" [appAutofocusDelay]="500">
             <label for="username">Username</label>
           </div>
         </div>
@@ -25,10 +25,10 @@
         </div>
       </div>
 
-      <div class="row g-4 mt-1" formGroupName="password" *ngIf="changePassword">
+      <div class="row g-4 mt-1" formGroupName="password" *ngIf="changePassword || !user">
         <div class="col-sm-6">
           <div class="form-floating">
-            <input type="password" class="form-control" id="password" formControlName="password" placeholder="Password"
+            <input type="password" class="form-control" id="password" formControlName="password" placeholder="Password"autocomplete="new-password"
                    [appAutofocus]="user && changePassword" [appAutofocusDelay]="600">
             <label for="password">Password</label>
           </div>
@@ -39,6 +39,13 @@
             <label for="passwordCheck">Retype password</label>
           </div>
         </div>
+
+        <div *ngIf="editorForm.get('password').touched && editorForm.get('password').errors" class="text-danger mt-1 mx-1">
+          <small *ngIf="editorForm.get('password').errors.required">Type in a password</small>
+          <small *ngIf="editorForm.get('password').errors.passwordMinimumLengthRequired">Passwords must be at least 8 characters long</small>
+          <small *ngIf="editorForm.get('password').errors.passwordLowComplexity">Password must have at least one lower case letter, one capital letter and a number</small>
+          <small *ngIf="editorForm.get('password').errors.passwordMismatch">The two passwords do not match</small>
+        </div>
       </div>
 
       <h5 class="mt-3" *ngIf="!changePassword">Optional fields</h5>
@@ -64,43 +71,11 @@
             <label for="phone">Phone</label>
           </div>
         </div>
-
-        <!-- <div class="col-sm-9">
-          <div class="form-floating">
-            <input type="text" class="form-control" id="address" formControlName="address" placeholder="Address">
-            <label for="address">Address</label>
-          </div>
-        </div>
-        <div class="col-sm-3">
-          <div class="form-floating">
-            <input type="text" class="form-control" id="postalCode" formControlName="postalCode" placeholder="Postal code">
-            <label for="postalCode">Postal code</label>
-          </div>
-        </div>
-
-        <div class="col-sm-4">
-          <div class="form-floating">
-            <input type="text" class="form-control" id="city" formControlName="city" placeholder="City">
-            <label for="city">City</label>
-          </div>
-        </div>
-        <div class="col-sm-4">
-          <div class="form-floating">
-            <input type="text" class="form-control" id="state" formControlName="state" placeholder="State">
-            <label for="state">State</label>
-          </div>
-        </div>
-        <div class="col-sm-4">
-          <div class="form-floating">
-            <input type="text" class="form-control" id="country" formControlName="country" placeholder="Country">
-            <label for="country">Country</label>
-          </div>
-        </div> -->
       </div>
 
       <div class="d-flex justify-content-end align-items-center mt-5">
-        <button class="btn btn-link text-info me-3" (click)="close()">Close without saving</button>
+        <button type="button" class="btn btn-link text-info me-3" (click)="close()">Close without saving</button>
-        <button class="btn btn-info" (click)="saveChanges()" [disabled]="editorForm.invalid">
+        <button type="button" class="btn btn-info" (click)="saveChanges()" [disabled]="editorForm.invalid">
           <fa-icon icon="spinner" [pulse]="true" size="sm" class="me-1" *ngIf="working"></fa-icon>
           Save changes
         </button>

app/src/app/security/user-editor/user-editor.component.ts

@@ -73,7 +73,7 @@ export class UserEditorComponent implements OnInit
   // --------------------------------------------------------------------------------------------------
   private passwordsValidator: ValidatorFn = (group: FormGroup): ValidationErrors | null =>
   {
-    if (!this.changePassword)
+    if (!this.changePassword && !!this.user)
       return null;
 
     const password = group.get('password').value;
@@ -89,7 +89,7 @@ export class UserEditorComponent implements OnInit
 
     const passwordCheck = group.get('passwordCheck').value;
 
-    if (passwordCheck && password !== passwordCheck)
+    if (!passwordCheck || password !== passwordCheck)
       return { 'passwordMismatch': true };
 
     return null;
@@ -104,6 +104,8 @@ export class UserEditorComponent implements OnInit
   // ----------------------------------------------------------------------------------------------------------------
   saveChanges()
   {
+    this.working = true;
+
     let observable: Observable<UserResponse>;
 
     const changes = this.editorForm.getRawValue();
@@ -114,20 +116,18 @@ export class UserEditorComponent implements OnInit
     }
     else
     {
-      const user = new UserRequest();
+      const user = {
-      user.login = changes.username;
+        login: changes.username,
-      user.email = changes.email;
+        email: changes.email,
-      user.companyName = changes.companyName;
+        firstName: changes.firstName,
-      user.firstName = changes.firstName;
+        lastName: changes.lastName,
-      user.lastName = changes.lastName;
+        phone: changes.phone,
-      user.address = changes.address;
+        password: changes.password
-      user.postalCode = changes.postalCode;
+      };
-      user.city = changes.city;
-      user.state = changes.state;
-      user.country = changes.country;
-      user.phone = changes.phone;
 
-      observable = this.securityService.editUser(this.user.id, user);
+      observable = this.user
+        ? this.securityService.editUser(this.user.id, user)
+        : this.securityService.addUser(user);
     }
 
     observable.subscribe(x =>
@@ -135,7 +135,12 @@ export class UserEditorComponent implements OnInit
       this.save.next(x as User);
 
       this.close();
-    }, err => this.toastr.error(err.error.message));
+    }, err =>
+    {
+      this.toastr.error(err.error.message);
+
+      this.working = false;
+    });
   }
 
   // ----------------------------------------------------------------------------------------------------------------