Subtle border on invalid emails inputs (in invitation dialog)

* Mutli auto compolete component extended

dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts

@@ -36,4 +36,6 @@ export interface MultipleAutoCompleteConfiguration {
 
 	autoSelectFirstOptionOnBlur?: boolean;
 
+	appendClassToItem?: {class: string, applyFunc: (item:any) => boolean}[];
+
 }

dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html

@@ -1,7 +1,7 @@
 <div class="row multiple-auto-complete" ngForm>
 	<mat-chip-list #chipList ngDefaultControl>
 		<ng-container *ngIf="value as values">
-			<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable">
+			<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
 				<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem">
 					<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{ item: selectedItem }"></ng-template>
 					<div *ngIf="!_selectedValueTemplate(selectedItem)">{{_displayFn(selectedItem)}}</div>

dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts

@@ -365,6 +365,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	get popupItemActionIcon(): string {
 		return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
 	}
+	get appendClassToItem(): {class: string, applyFunc: (item: any) => boolean}[]{
+		return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
+	}
 
 	//Chip Functions
 	_addItem(event: MatChipInputEvent): void {
@@ -400,4 +403,19 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 		if (event != null) { event.stopPropagation(); }
 		this.optionActionClicked.emit(item);
 	}
+
+
+	private readonly empyObj = {};
+	computeClass(value: any){
+		if(!(this.appendClassToItem && this.appendClassToItem.length)){
+			return this.empyObj;
+		}
+
+		const classes = this.appendClassToItem.filter(e=> e.applyFunc(value));
+		return classes.reduce((r, current) => {
+			r[current.class] = true;
+			return r;
+		} , {});
+
+	}
 }

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss

@@ -121,3 +121,15 @@
 	background: #129d99;
 	color: #ffffff;
 }
+
+@keyframes blink{
+	0% {border: 1px solid rgba(255, 0, 0, 0.2);}
+	50% {border: 1px solid rgba(255, 0, 0, 0.5);}
+	100% {border: 1px solid rgba(255, 0, 0, 0.2);}
+}
+
+:host ::ng-deep .invalid-email{
+	border: 1px solid red;
+	// animation: blink 1.4s infinite;
+	// animation-fill-mode: both;
+}

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.ts

@@ -69,7 +69,13 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
 			const result = typeof(item) === 'string' ? item : item.email;
 			return result;
 		},
-		autoSelectFirstOptionOnBlur: true
+		autoSelectFirstOptionOnBlur: true,
+		appendClassToItem: [{class: 'invalid-email', applyFunc: (item)=> {
+			const val = typeof(item) === 'string'? item : item.email;
+			const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+			return !regexp.test(val);
+		} 
+		}]
 	};
 
 	add(event: MatChipInputEvent): void {