DSM-PEPPER-799-users-and-permissions-fixes init (#2178)

Author: GiCharkviani

ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.html

@@ -1,6 +1,6 @@
 <form class="addUserForm" [formGroup]="addUserForm">
   <section class="addUserForm-title">
-    <h3>Create User</h3>
+    <h3>Add User</h3>
   </section>
   <ng-container *ngIf="errorMessage">
     <app-error-message errorText="Couldn't create user" [errorMessage]="errorMessage"></app-error-message>
@@ -10,7 +10,7 @@ <h3>Create User</h3>
       <mat-label>Email</mat-label>
       <input matInput formControlName="email">
       <mat-error *ngIf="addUserForm.get('email').hasError('email')">
-        Wrong email
+        Invalid email
       </mat-error>
       <mat-error *ngIf="addUserForm.get('email').hasError('required')">
         Required field
@@ -26,9 +26,6 @@ <h3>Create User</h3>
     <mat-form-field class="addUserForm-inputs-phone">
       <mat-label>Phone</mat-label>
       <input matInput formControlName="phone">
-      <mat-error *ngIf="addUserForm.get('phone').hasError('required')">
-        Required field
-      </mat-error>
     </mat-form-field>
   </section>
   <mat-divider class="userData-divider"></mat-divider>
@@ -40,6 +37,7 @@ <h4 class="addUserForm-permissions-title">Permissions</h4>
       [role]="role">
     </app-permission-checkbox>
   </section>
+  <mat-divider class="userData-divider"></mat-divider>
   <section class="addUserForm-buttons">
     <button class="addUserForm-buttons-add"
             color="accent"
@@ -78,6 +76,7 @@ <h4 class="addUserForm-permissions-title">Permissions</h4>
         [isDisabled]="true"
         [role]="role">
       </app-permission-checkbox>
+      <mat-divider class="userData-divider"></mat-divider>
     </div>
   </section>
 

ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.scss

@@ -8,6 +8,13 @@
     margin-bottom: 1em;
   }
 
+  &-inputs {
+    @include common.flexContainer(normal, center);
+    mat-form-field:not(:last-of-type) {
+      margin-right: .5em;
+    }
+  }
+
   &-permissions {
     overflow: auto;
     max-height: 500px;

ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/addUser/addUser.component.ts

@@ -25,7 +25,7 @@ export class AddUserComponent {
   public readonly addUserForm = this.formBuilder.group({
     email: [null, [Validators.required, Validators.email]],
     name: [null, Validators.required],
-    phone: [null, Validators.required],
+    phone: [null],
   });
 
   private onlySelectedRoles: Role[] = [];

ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/error-message/error-message.component.ts

@@ -29,6 +29,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
       font-family:  Montserrat-SemiBold, sans-serif;
     }
     .error-message {
+      word-wrap: break-word;
       font-family:  Montserrat-Regular, sans-serif;
     }
     .error-message-text {

ddp-workspace/projects/ddp-dsm-ui/src/app/usersAndPermissions/components/user/administrationUser.component.ts

@@ -105,7 +105,6 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
 
   public removeUser(event: Event): void {
     event.stopPropagation();
-    this.reportError.emit({displayError: false});
 
     const usersToRemove: RemoveUsersRequest = {
       removeUsers: [this.user.email]
@@ -119,6 +118,7 @@ export class AdministrationUserComponent implements OnInit, OnDestroy {
         filter((answer: boolean) => answer),
         tap(() => {
           this.cdr.markForCheck();
+          this.reportError.emit({displayError: false});
           this.isDeleteUserLoading = true;
         }),
         mergeMap(() => this.stateService.removeUsers(usersToRemove)