From 6ca7b792e7811fbb61cc84e74fce7653fe43780b Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Thu, 21 Mar 2024 18:01:17 +0200
Subject: [PATCH] 1. renamed user-field->dmp-user-field, 2. fixed sorting
 issue, 3. styling changes

---
 .../dmp-editor.component.html                 |  2 +-
 .../dmp-editor-blueprint/dmp-editor.module.ts |  4 +-
 .../dmp-user-field.component.html             | 90 +++++++++++++++++++
 .../dmp-user-field.component.scss}            | 14 ++-
 .../dmp-user-field.component.ts}              | 31 ++++++-
 .../dmp-user-field.module.ts}                 | 12 ++-
 .../dmp-invitation-dialog.component.html      |  2 +-
 .../dialog/dmp-invitation-dialog.module.ts    |  4 +-
 .../dmp/user-field/user-field.component.html  | 82 -----------------
 9 files changed, 142 insertions(+), 99 deletions(-)
 create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
 rename dmp-frontend/src/app/ui/dmp/{user-field/user-field.component.scss => dmp-user-field/dmp-user-field.component.scss} (58%)
 rename dmp-frontend/src/app/ui/dmp/{user-field/user-field.component.ts => dmp-user-field/dmp-user-field.component.ts} (83%)
 rename dmp-frontend/src/app/ui/dmp/{user-field/user-field.module.ts => dmp-user-field/dmp-user-field.module.ts} (61%)
 delete mode 100644 dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html

diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
index 97269a61e..05862add9 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
@@ -244,7 +244,7 @@
 														</div>
 														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
 															<div>
-																<app-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections"></app-user-field-component>
+																<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections"></app-dmp-user-field-component>
 															</div>
 														</div>
 													</div>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts
index b9d78b31e..7a0957885 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts
@@ -9,7 +9,7 @@ import { DmpEditorRoutingModule } from './dmp-editor.routing';
 import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 import { ReferenceFieldModule } from '@app/ui/reference/reference-field/reference-field.module';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { UserFieldModule } from '../user-field/user-field.module';
+import { DmpUserFieldModule } from '../dmp-user-field/dmp-user-field.module';
 
 @NgModule({
 	imports: [
@@ -22,7 +22,7 @@ import { UserFieldModule } from '../user-field/user-field.module';
 		AutoCompleteModule,
 		ReferenceFieldModule,
 		DragDropModule,
-		UserFieldModule
+		DmpUserFieldModule
 	],
 	declarations: [
 		DmpEditorComponent,
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
new file mode 100644
index 000000000..8ce4a05d5
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.html
@@ -0,0 +1,90 @@
+<div class="p-2">
+	
+	<div cdkDropList (cdkDropListDropped)="dropUsers($event)" *ngIf="enableSorting===true; else sortingDisabled" class="row">
+		<div class="col-12">
+			<div *ngFor="let user of form.get('users').controls; let userIndex = index" cdkDrag class="row align-items-center user-fields" [cdkDragDisabled]="form.disabled" (mouseenter)="onUserHover(userIndex)" (mouseleave)="clearHoveredUser()">
+				<ng-container *ngTemplateOutlet="userForm; context: {$implicit: user, index: userIndex}" ></ng-container>	
+			</div>
+		</div>
+	</div>
+		
+	<ng-template #sortingDisabled>
+		<div class="row">
+			<div class="col-12">
+				<div *ngFor="let user of form.get('users').controls; let userIndex = index" class="row align-items-center user-fields">
+					<ng-container *ngTemplateOutlet="userForm; context: {$implicit: user, index: userIndex}" ></ng-container>	
+				</div>
+			</div>
+		</div>
+	</ng-template>
+
+	<div class="row">
+		<div class="col">
+			<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
+				<mat-icon>add</mat-icon>
+			</button>
+		</div>
+	</div>
+</div>
+	
+<ng-template #userForm let-user let-userIndex="index">
+
+
+	<div class="col-auto pb-1">
+		<span *ngIf="!isUserSelected(userIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.435rem 0 0.435rem;">{{userIndex + 1}}</span>
+		<mat-icon *ngIf="isUserSelected(userIndex)" [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
+	</div>
+	<div class="col-auto">
+		<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')">
+			<div *ngFor="let userType of dmpUserTypeEnumValues">
+				<mat-button-toggle class="lang-button" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>
+			</div>
+		</mat-button-toggle-group>
+	</div>
+	<div class="col-auto mt-3 user-field" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
+		<mat-form-field class="w-100">
+			<mat-label>{{'DMP-EDITOR.FIELDS1.USER' | translate}}*</mat-label>
+			<app-single-auto-complete [formControl]="user.get('user')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
+			<mat-error *ngIf="user.get('user').hasError('backendError')">{{user.get('user').getError('backendError').message}}</mat-error>
+			<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		</mat-form-field>
+	</div>
+	<div class="col-auto mt-3 user-field" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
+		<mat-form-field class="w-100">
+			<mat-label>{{'DMP-EDITOR.FIELDS1.EMAIL' | translate}}*</mat-label>
+			<input matInput type="text" name="email" [formControl]="user.get('email')">
+			<mat-error *ngIf="user.get('email').hasError('backendError')">{{user.get('email').getError('backendError').message}}</mat-error>
+			<mat-error *ngIf="user.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		</mat-form-field>
+	</div>
+	<div class="col-auto mt-3 user-field">
+		<mat-form-field class="w-100">
+			<mat-label>{{'DMP-EDITOR.FIELDS1.USER-ROLE' | translate}}</mat-label>
+			<mat-select [formControl]="user.get('role')">
+				<mat-option *ngFor="let userRole of dmpUserRoleEnumValues" [value]="userRole">{{enumUtils.toDmpUserRoleString(userRole)}}</mat-option>
+			</mat-select>
+			<mat-error *ngIf="user.get('role').hasError('backendError')">{{user.get('role').getError('backendError').message}}</mat-error>
+			<mat-error *ngIf="user.get('role').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		</mat-form-field>
+	</div>
+	<div class="col-auto mt-3 user-field" *ngIf="sections">
+		<mat-form-field class="w-100">
+			<mat-label>{{'DMP-EDITOR.FIELDS1.SECTION' | translate}}</mat-label>
+			<mat-select [formControl]="user.get('sectionId')">
+				<mat-option *ngFor="let section of sections" [value]="section.id">
+					{{ section.label }}
+				</mat-option>
+			</mat-select>
+			<mat-error *ngIf="user.get('sectionId').hasError('backendError')">{{user.get('sectionId').getError('backendError').message}}</mat-error>
+			<mat-error *ngIf="user.get('sectionId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error>
+		</mat-form-field>
+	</div>
+	<div class="col-auto user-field">
+		<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="form.disabled">
+			<mat-icon>delete</mat-icon>
+		</button>
+	</div>
+
+	<mat-error *ngIf="form.get('users').dirty && form.get('users').hasError('required')">{{'DMP-EDITOR.USERS-REQUIRED' | translate}}</mat-error>
+	<mat-error *ngIf="form.get('users').hasError('backendError')">{{form.get('users').getError('backendError').message}}</mat-error>
+</ng-template>
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
similarity index 58%
rename from dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
rename to dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
index 909b9e9ce..9d8a2e18c 100644
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.scss
@@ -1,4 +1,4 @@
-.invite-users-dialog-wrapper {
+.invite-users-wrapper {
 	display: flex;
 	flex-direction: column;
 	align-items: baseline;
@@ -14,6 +14,14 @@
 	color: rgba(0, 0, 0, 0.38);;
 }
 
-.user-fields-wrapper {
+
+@media (max-width:1400px) {
 	
-}
+	.user-fields {
+		flex-direction: column;
+	}
+		
+	.user-field {
+		align-self: flex-start;
+	}
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.ts b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.ts
similarity index 83%
rename from dmp-frontend/src/app/ui/dmp/user-field/user-field.component.ts
rename to dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.ts
index 0df0b0e9b..298f18318 100644
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.component.ts
@@ -12,11 +12,11 @@ import { ValidationErrorModel } from '@common/forms/validation/error-model/valid
 import { DmpEditorModel, DmpUserEditorModel } from '../dmp-editor-blueprint/dmp-editor.model';
 
 @Component({
-	selector: 'app-user-field-component',
-	templateUrl: 'user-field.component.html',
-	styleUrls: ['./user-field.component.scss']
+	selector: 'app-dmp-user-field-component',
+	templateUrl: 'dmp-user-field.component.html',
+	styleUrls: ['./dmp-user-field.component.scss']
 })
-export class UserFieldComponent extends BaseComponent implements OnInit {
+export class DmpUserFieldComponent extends BaseComponent implements OnInit {
 
 	@Input() form;
 	@Input() validationErrorModel: ValidationErrorModel;
@@ -25,7 +25,9 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
 	@Input() placeholder: string;
 	@Input() sections: DmpBlueprintDefinitionSection[] = null;
 	@Input() initializeUsers: boolean = false;
+
 	@Input() enableSorting: boolean = true;
+	hoveredUser:number = -1;
 
 	dmpUserTypeEnum = DmpUserType;
 	dmpUserTypeEnumValues = this.enumUtils.getEnumValues<DmpUserType>(DmpUserType);
@@ -33,6 +35,7 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
 
 	multipleAutoCompleteSearchConfiguration: MultipleAutoCompleteConfiguration;
 
+
 	constructor(
 		public enumUtils: EnumUtils,
 		public userService: UserService
@@ -63,6 +66,12 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
 		this.form.get('users').markAsDirty();
 	}
 
+	//
+	//
+	// Users
+	//
+	//
+
 	dropUsers(event: CdkDragDrop<string[]>) {
 		const usersFormArray = (this.form.get('users') as FormArray);
 
@@ -77,4 +86,18 @@ export class UserFieldComponent extends BaseComponent implements OnInit {
 		);
 		this.form.get('users').markAsDirty();
 	}
+
+	isUserSelected(userId: number): boolean {
+		return this.hoveredUser === userId;
+	}
+
+	onUserHover(userIndex: number): void {
+		if (this.enableSorting === false) return;
+
+		this.hoveredUser = userIndex;
+	}
+
+	clearHoveredUser(): void {
+		this.hoveredUser = -1;
+	}
 }
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.module.ts b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.module.ts
similarity index 61%
rename from dmp-frontend/src/app/ui/dmp/user-field/user-field.module.ts
rename to dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.module.ts
index 9365117fa..65d024af3 100644
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.module.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp-user-field/dmp-user-field.module.ts
@@ -3,20 +3,24 @@ import { FormattingModule } from '@app/core/formatting.module';
 import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
-import { UserFieldComponent } from './user-field.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { NgxDropzoneModule } from "ngx-dropzone";
+import { DmpUserFieldComponent } from './dmp-user-field.component';
 
 @NgModule({
 	imports: [
 		CommonUiModule,
 		CommonFormsModule,
 		FormattingModule,
+		NgxDropzoneModule,
+		DragDropModule,
 		AutoCompleteModule
 	],
 	declarations: [
-		UserFieldComponent
+		DmpUserFieldComponent
 	],
 	exports: [
-		UserFieldComponent
+		DmpUserFieldComponent
 	]
 })
-export class UserFieldModule { }
+export class DmpUserFieldModule { }
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html b/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html
index 475d3e46b..d969e2a63 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.component.html
@@ -9,7 +9,7 @@
 	</div>
 	<div mat-dialog-content class="row">
 		<div>
-			<app-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [initializeUsers]="'true'" [enableSorting]="'false'"></app-user-field-component>
+			<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [initializeUsers]="true" [enableSorting]="false"></app-dmp-user-field-component>
 		</div>
 		<div class="col mt-2">
 			<button mat-raised-button *ngIf="hasValue()" (click)="send()" type="button" class="invite-btn">{{'DMP-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button>
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.module.ts b/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.module.ts
index b8cf4ee3d..0a708ae42 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.module.ts
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dialog/dmp-invitation-dialog.module.ts
@@ -4,10 +4,10 @@ import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.mod
 import { RichTextEditorModule } from "@app/library/rich-text-editor/rich-text-editor.module";
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { DmpInvitationDialogComponent } from './dmp-invitation-dialog.component';
-import { UserFieldModule } from '../../user-field/user-field.module';
+import { DmpUserFieldModule } from '../../dmp-user-field/dmp-user-field.module';
 
 @NgModule({
-	imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule, RichTextEditorModule, UserFieldModule],
+	imports: [CommonUiModule, FormsModule, ReactiveFormsModule, AutoCompleteModule, RichTextEditorModule, DmpUserFieldModule],
 	declarations: [DmpInvitationDialogComponent],
 	exports: [DmpInvitationDialogComponent]
 })
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
deleted file mode 100644
index 80ffb7718..000000000
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<div class="invite-users-dialog-wrapper">
-	<div *ngIf="enableSorting==true; else sortingDisabled" class="col-12" cdkDropList (cdkDropListDropped)="dropUsers($event)">
-		<ng-container *ngTemplateOutlet="userForm"></ng-container>	
-	</div>
-
-	<ng-template class="col-12" #sortingDisabled>
-		<ng-container *ngTemplateOutlet="userForm"></ng-container>	
-	</ng-template>
-
-	<div class="row">
-		<div class="col">
-			<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
-				<mat-icon>add</mat-icon>
-			</button>
-		</div>
-	</div>
-</div>
-
-<ng-template #userForm>
-	<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="mb-4 row user-fields-wrapper" [cdkDragDisabled]="form.disabled">
-		<!-- <div class="pb-2 col-auto">
-			<span style="font-size: 15px;">{{userIndex + 1}}</span>
-		</div> -->
-		<div class="pb-2 mb-1 col-auto">
-				<span class="col-auto" style="font-size: 18px;">{{userIndex + 1}}</span>
-		</div>
-		<div *ngIf="enableSorting==true" class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-		<div class="pb-4 col-auto">
-			<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')">
-				<div *ngFor="let userType of dmpUserTypeEnumValues">
-					<mat-button-toggle class="lang-button" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>
-				</div>
-			</mat-button-toggle-group>
-		</div>
-		<div class="col-auto" *ngIf="user.get('userType').value == dmpUserTypeEnum.Internal">
-			<mat-form-field class="w-100">
-				<mat-label>{{'DMP-EDITOR.FIELDS1.USER' | translate}}*</mat-label>
-				<app-single-auto-complete [formControl]="user.get('user')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
-				<mat-error *ngIf="user.get('user').hasError('backendError')">{{user.get('user').getError('backendError').message}}</mat-error>
-				<mat-error *ngIf="user.get('user').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-			</mat-form-field>
-		</div>
-		<div class="col-auto" *ngIf="user.get('userType').value == dmpUserTypeEnum.External">
-			<mat-form-field class="w-100">
-				<mat-label>{{'DMP-EDITOR.FIELDS1.EMAIL' | translate}}*</mat-label>
-				<input matInput type="text" name="email" [formControl]="user.get('email')">
-				<mat-error *ngIf="user.get('email').hasError('backendError')">{{user.get('email').getError('backendError').message}}</mat-error>
-				<mat-error *ngIf="user.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-			</mat-form-field>
-		</div>
-		<div class="col-auto">
-			<mat-form-field class="w-100">
-				<mat-label>{{'DMP-EDITOR.FIELDS1.USER-ROLE' | translate}}</mat-label>
-				<mat-select [formControl]="user.get('role')">
-					<mat-option *ngFor="let userRole of dmpUserRoleEnumValues" [value]="userRole">{{enumUtils.toDmpUserRoleString(userRole)}}</mat-option>
-				</mat-select>
-				<mat-error *ngIf="user.get('role').hasError('backendError')">{{user.get('role').getError('backendError').message}}</mat-error>
-				<mat-error *ngIf="user.get('role').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-			</mat-form-field>
-		</div>
-		<div class="col-auto" *ngIf="sections">
-			<mat-form-field class="w-100">
-				<mat-label>{{'DMP-EDITOR.FIELDS1.SECTION' | translate}}</mat-label>
-				<mat-select [formControl]="user.get('sectionId')">
-					<mat-option *ngFor="let section of sections" [value]="section.id">
-						{{ section.label }}
-					</mat-option>
-				</mat-select>
-				<mat-error *ngIf="user.get('sectionId').hasError('backendError')">{{user.get('sectionId').getError('backendError').message}}</mat-error>
-				<mat-error *ngIf="user.get('sectionId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error>
-			</mat-form-field>
-		</div>
-		<div class="col-auto">
-			<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-USER' | translate}}" (click)="removeUser(userIndex)" [disabled]="form.disabled">
-				<mat-icon>delete</mat-icon>
-			</button>
-		</div>
-	</div>
-
-	<mat-error *ngIf="form.get('users').dirty && form.get('users').hasError('required')">{{'DMP-EDITOR.USERS-REQUIRED' | translate}}</mat-error>
-	<mat-error *ngIf="form.get('users').hasError('backendError')">{{form.get('users').getError('backendError').message}}</mat-error>
-</ng-template>