[ADF-4048] PeopleCloudComponent - improve preselect input functionality (#4286)

* fix conflicts * [ADF-4048] - fix add same user on multiple selection * [ADF-4048] PeopleCloudComponent change validation users functionality * [ADF-4048] PeopleCloudComponent - focus input when preselected user exists * [ADF-4048] PeopleCloudComponent - pull request changes * [ADF-4048] - lint * [ADF-4048] PeopleCloud - PR changes * [ADF-4048] - fix conflicts * [ADF-4048] fx lint
2025-07-24 17:32:15 +00:00 · 2019-03-06 15:26:51 +02:00
parent 5d3f47eacf
commit f7a399c3e8
8 changed files with 352 additions and 71 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -296,7 +296,8 @@
    "ROLE": "Roles: ",
    "APP_NAME": "Aplication Name",
    "APP_FILTER_MODE": "Filter by application name",
-    "ROLE_FILTER_MODE": "Filter by role"
+    "ROLE_FILTER_MODE": "Filter by role",
+    "PRESELECT_VALIDATION": "Preselect validation"
  },
  "ABOUT": {
    "TITLE": "Plugins",
--- a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html
+++ b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html
@@ -30,9 +30,17 @@
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}: {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
                <input matInput (input)="setPeoplePreselectValue($event)"  data-automation-id="adf-people-preselect-input" />
            </mat-form-field>
+            <mat-checkbox class="adf-preselect-value" (change)="onChangePeopleValidation($event)">{{
+                'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
        </div>
        <div>
-            <adf-cloud-people [preSelectUsers]="preSelectUsers" [appName]="peopleAppName" [roles]="peopleRoles" [mode]="peopleMode"></adf-cloud-people>
+            <adf-cloud-people
+                [preSelectUsers]="preSelectUsers"
+                [validate]="peoplePreselectValidation"
+                [appName]="peopleAppName"
+                [roles]="peopleRoles"
+                [appName]="peopleAppName"
+                [mode]="peopleMode"></adf-cloud-people>
        </div>

        <div class="adf-people-list" *ngIf="canShowPeopleList()">
--- a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts
@@ -17,7 +17,7 @@

 import { Component, ViewEncapsulation } from '@angular/core';
 import { PeopleCloudComponent, GroupCloudComponent, GroupModel } from '@alfresco/adf-process-services-cloud';
-import { MatRadioChange } from '@angular/material';
+import { MatRadioChange, MatCheckboxChange } from '@angular/material';

@Component({
    selector: 'app-people-groups-cloud',
@@ -29,13 +29,14 @@ export class PeopleGroupCloudDemoComponent {

    DEFAULT_FILTER_MODE: string = 'appName';
    DEFAULT_GROUP_PLACEHOLDER: string = `[{"id": "1", "name":"activitiUserGroup"}]`;
-    DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"email": "example@alfresco.com", "firstName":"Administrator", "lastName": "ADF"}]`;
+    DEFAULT_PEOPLE_PLACEHOLDER: string = `[{"id": "1", email": "user@user.com", "firstName":"user", "lastName": "lastName", "username": "user"}]`;

    peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
    preSelectUsers: string[] = [];
    peopleRoles: string[] = [];
    peopleAppName: string;
    peopleFilterMode: string = this.DEFAULT_FILTER_MODE;
+    peoplePreselectValidation: Boolean = false;

    groupMode: string = GroupCloudComponent.MODE_SINGLE;
    preSelectGroup: GroupModel[] = [];
@@ -112,6 +113,11 @@ export class PeopleGroupCloudDemoComponent {
        }
    }

+    onChangePeopleValidation(event: MatCheckboxChange) {
+        this.peoplePreselectValidation = event.checked;
+        this.preSelectUsers = [...this.preSelectUsers];
+    }
+
    isStringArray(str: string) {
        try {
            const result = JSON.parse(str);
--- a/docs/core/identity-user.service.md
+++ b/docs/core/identity-user.service.md
@@ -5,7 +5,7 @@ Status: Active
 Last reviewed: 2019-02-08
 ---

-# [Identity user service](../../lib/core/userinfo/services/identity-user.service.ts "Defined in identity-user.service.ts")
+# [Identity user service](../../lib/lib/core/userinfo/services/identity-user.service.ts "Defined in identity-user.service.ts")

 Gets OAuth2 personal details and roles for users.

@@ -40,9 +40,21 @@ Gets OAuth2 personal details and roles for users.
    -   _userId:_ `string`  - ID of the target user
    -   _roleNames:_ `string[]`  - Array of roles to check for
    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<boolean>` - True if the user has one of the roles, false otherwise
+-   **findUserByEmail**(email: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Find users based on email input.
+    -   _email:_ `string`  - [Search](../../lib/node_modules/@alfresco/js-api/src/api-legacy/legacy.ts) query string
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - List of users
+-   **findUserById**(id: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Find users based on id input.
+    -   _id:_ `string`  - [Search](../../lib/node_modules/@alfresco/js-api/src/api-legacy/legacy.ts) query string
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - users object
+-   **findUserByUsername**(username: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Find users based on username input.
+    -   _username:_ `string`  - [Search](../../lib/node_modules/@alfresco/js-api/src/api-legacy/legacy.ts) query string
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - List of users
 -   **findUsersByName**(search: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
    Find users based on search input.
-    -   _search:_ `string`  - Search query string
+    -   _search:_ `string`  - [Search](../../lib/node_modules/@alfresco/js-api/src/api-legacy/legacy.ts) query string
    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - List of users
 -   **getClientIdByApplicationName**(applicationName: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<string>`<br/>
    Gets the client ID for an application.
@@ -59,8 +71,8 @@ Gets OAuth2 personal details and roles for users.
 -   **getUserRoles**(userId: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityRoleModel`](../../lib/core/userinfo/models/identity-role.model.ts)`[]>`<br/>
    Gets a list of roles for a user.
    -   _userId:_ `string`  - ID of the user
-    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityRoleModel`](../../lib/core/userinfo/models/identity-role.model.ts)`[]>` - Array of role info objects
-   **getUsers**(): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityUserModel`](../../lib/core/userinfo/models/identity-user.model.ts)`[]>`<br/>
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityRoleModel`](../../lib/lib/core/userinfo/models/identity-role.model.ts)`[]>` - Array of role info objects
+-   **getUsers**(): [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityUserModel`](../../lib/lib/core/userinfo/models/identity-user.model.ts)`[]>`<br/>
    Gets details for all users.
    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`IdentityUserModel`](../../lib/core/userinfo/models/identity-user.model.ts)`[]>` - Array of user info objects
 -   **getUsersByRolesWithCurrentUser**(roleNames: `string[]`): [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)`<`[`IdentityUserModel`](../../lib/core/userinfo/models/identity-user.model.ts)`[]>`<br/>
--- a/docs/process-services-cloud/people-cloud.component.md
+++ b/docs/process-services-cloud/people-cloud.component.md
@@ -26,13 +26,14 @@ Allows one or more users to be selected (with auto-suggestion) based on the inpu
 | ---- | ---- | ------------- | ----------- |
 | appName | `string` |  | Name of the application. If specified, this shows the users who have access to the app. |
 | mode | `string` |  | User selection mode (single/multiple). |
-| preSelectUsers | [`IdentityUserModel`](../../lib/core/userinfo/models/identity-user.model.ts)`[]` |  | Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. |
+| preSelectUsers | [`IdentityUserModel`](../../lib/core/userinfo/models/identity-user.model.ts)`[]` |  | Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. Mandatory properties are: id, email, username |
 | roles | `string[]` |  | Role names of the users to be listed. |
+| validate | `Boolean` | false | This flag enables the validation on the preSelectUsers passed as input. In case the flag is true the components call the identity service to verify the validity of the information passed as input. Otherwise, no check will be done. |

 ### Events

 | Name | Type | Description |
 | ---- | ---- | ----------- |
-| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
 | removeUser | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityUserModel`](../../lib/core/userinfo/models/identity-user.model.ts)`>` | Emitted when a selected user is removed in multi selection mode. |
 | selectUser | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityUserModel`](../../lib/core/userinfo/models/identity-user.model.ts)`>` | Emitted when a user is selected. |
+| warning | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an warning occurs. |
--- a/lib/core/userinfo/services/identity-user.service.ts
+++ b/lib/core/userinfo/services/identity-user.service.ts
@@ -40,7 +40,7 @@ export class IdentityUserService {
    constructor(
        private helper: JwtHelperService,
        private apiService: AlfrescoApiService,
-        private appConfigService: AppConfigService) {}
+        private appConfigService: AppConfigService) { }

    /**
     * Gets the name and other basic details of the current user.
@@ -80,7 +80,67 @@ export class IdentityUserService {
            return of([]);
        }
        const url = this.buildUserUrl();
-        const httpMethod = 'GET', pathParams = {}, queryParams = {search: search}, bodyParam = {}, headerParams = {},
+        const httpMethod = 'GET', pathParams = {}, queryParams = { search: search }, bodyParam = {}, headerParams = {},
+            formParams = {}, contentTypes = ['application/json'], accepts = ['application/json'];
+
+        return (from(this.apiService.getInstance().oauth2Auth.callCustomApi(
+            url, httpMethod, pathParams, queryParams,
+            headerParams, formParams, bodyParam,
+            contentTypes, accepts, Object, null, null)
+        ));
+    }
+
+    /**
+     * Find users based on username input.
+     * @param username Search query string
+     * @returns List of users
+     */
+    findUserByUsername(username: string): Observable<any> {
+        if (username === '') {
+            return of([]);
+        }
+        const url = this.buildUserUrl();
+        const httpMethod = 'GET', pathParams = {}, queryParams = { username: username }, bodyParam = {}, headerParams = {},
+            formParams = {}, contentTypes = ['application/json'], accepts = ['application/json'];
+
+        return (from(this.apiService.getInstance().oauth2Auth.callCustomApi(
+            url, httpMethod, pathParams, queryParams,
+            headerParams, formParams, bodyParam,
+            contentTypes, accepts, Object, null, null)
+        ));
+    }
+
+    /**
+     * Find users based on email input.
+     * @param email Search query string
+     * @returns List of users
+     */
+    findUserByEmail(email: string): Observable<any> {
+        if (email === '') {
+            return of([]);
+        }
+        const url = this.buildUserUrl();
+        const httpMethod = 'GET', pathParams = {}, queryParams = { email: email }, bodyParam = {}, headerParams = {},
+            formParams = {}, contentTypes = ['application/json'], accepts = ['application/json'];
+
+        return (from(this.apiService.getInstance().oauth2Auth.callCustomApi(
+            url, httpMethod, pathParams, queryParams,
+            headerParams, formParams, bodyParam,
+            contentTypes, accepts, Object, null, null)
+        ));
+    }
+
+    /**
+     * Find users based on id input.
+     * @param id Search query string
+     * @returns users object
+     */
+    findUserById(id: string): Observable<any> {
+        if (id === '') {
+            return of([]);
+        }
+        const url = this.buildUserUrl() + '/' + id;
+        const httpMethod = 'GET', pathParams = {}, queryParams = {}, bodyParam = {}, headerParams = {},
            formParams = {}, contentTypes = ['application/json'], accepts = ['application/json'];

        return (from(this.apiService.getInstance().oauth2Auth.callCustomApi(
@@ -160,7 +220,7 @@ export class IdentityUserService {
     */
    getClientIdByApplicationName(applicationName: string): Observable<string> {
        const url = this.buildGetClientsUrl();
-        const httpMethod = 'GET', pathParams = {}, queryParams = {clientId: applicationName}, bodyParam = {}, headerParams = {}, formParams = {},
+        const httpMethod = 'GET', pathParams = {}, queryParams = { clientId: applicationName }, bodyParam = {}, headerParams = {}, formParams = {},
            contentTypes = ['application/json'], accepts = ['application/json'];
        return from(this.apiService.getInstance()
            .oauth2Auth.callCustomApi(url, httpMethod, pathParams, queryParams, headerParams,
--- a/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.spec.ts
@@ -85,7 +85,7 @@ describe('PeopleCloudComponent', () => {
    it('should emit selectedUser if option is valid', async(() => {
        fixture.detectChanges();
        let selectEmitSpy = spyOn(component.selectUser, 'emit');
-        component.onSelect(new IdentityUserModel({ username: 'username'}));
+        component.onSelect(new IdentityUserModel({ username: 'username' }));
        fixture.whenStable().then(() => {
            expect(selectEmitSpy).toHaveBeenCalled();
        });
@@ -130,7 +130,7 @@ describe('PeopleCloudComponent', () => {
    it('should pre-select all preSelectUsers when mode=multiple', async(() => {
        spyOn(identityService, 'getUsersByRolesWithCurrentUser').and.returnValue(Promise.resolve(mockUsers));
        component.mode = 'multiple';
-        component.preSelectUsers = <any> [{id: mockUsers[1].id}, {id: mockUsers[2].id}];
+        component.preSelectUsers = <any> [{ id: mockUsers[1].id }, { id: mockUsers[2].id }];
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            fixture.detectChanges();
@@ -153,7 +153,7 @@ describe('PeopleCloudComponent', () => {
    it('should pre-select preSelectUsers[0] when mode=single', async(() => {
        spyOn(identityService, 'getUsersByRolesWithCurrentUser').and.returnValue(Promise.resolve(mockUsers));
        component.mode = 'single';
-        component.preSelectUsers = <any> [{id: mockUsers[1].id}, {id: mockUsers[2].id}];
+        component.preSelectUsers = <any> [{ id: mockUsers[1].id }, { id: mockUsers[2].id }];
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            const selectedUser = component.searchUserCtrl.value;
@@ -176,7 +176,7 @@ describe('PeopleCloudComponent', () => {
        let removeUserSpy = spyOn(component.removeUser, 'emit');

        component.mode = 'multiple';
-        component.preSelectUsers = <any> [{id: mockUsers[1].id}, {id: mockUsers[2].id}];
+        component.preSelectUsers = <any> [{ id: mockUsers[1].id }, { id: mockUsers[2].id }];
        fixture.detectChanges();

        fixture.whenStable().then(() => {
@@ -296,10 +296,10 @@ describe('PeopleCloudComponent', () => {
        });
    }));

-    it('should load the clients if appName change', async( () => {
+    it('should load the clients if appName change', async(() => {
        component.appName = 'ADF';
        fixture.detectChanges();
-        fixture.whenStable().then( () => {
+        fixture.whenStable().then(() => {
            fixture.detectChanges();
            expect(loadClientsByApplicationNameSpy).toHaveBeenCalled();
        });
@@ -310,9 +310,91 @@ describe('PeopleCloudComponent', () => {
        fixture.detectChanges();
        component.appName = 'ADF';
        fixture.detectChanges();
-        fixture.whenStable().then( () => {
+        fixture.whenStable().then(() => {
            fixture.detectChanges();
            expect(checkUserHasAccessSpy).toHaveBeenCalled();
        });
    }));
+
+    it('should not validate preselect values if preselectValidation flag is set to false', () => {
+        component.mode = 'multiple';
+        component.validate = false;
+        component.preSelectUsers = <any> [{ id: mockUsers[1].id }, { id: mockUsers[2].id }];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(component.validatePreselectUsers).not.toHaveBeenCalled();
+        });
+    });
+
+    it('should filter users when validation flag is true', async(() => {
+        component.mode = 'multiple';
+        component.validate = true;
+        component.preSelectUsers = <any> [{ id: mockUsers[1].id }, { id: mockUsers[2].id }];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            component.filterPreselectUsers().then((result) => {
+                expect(component.userExists(result)).toEqual(false);
+            });
+        });
+    }));
+
+    it('should emit warning if are invalid users', async((done) => {
+        const warningSpy = spyOn(component.warning, 'emit').and.returnValue(of(false));
+        component.mode = 'single';
+        component.validate = true;
+        component.preSelectUsers = <any> [{ username: 'invalidUsername' }];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            component.loadSinglePreselectUser().then((result) => {
+                fixture.detectChanges();
+                expect(warningSpy).toHaveBeenCalled();
+            });
+        });
+    }));
+
+    it('should filter user by id if validate true', async((done) => {
+        const findByIdSpy = spyOn(identityService, 'findUserById').and.returnValue(Promise.resolve(mockUsers));
+        component.mode = 'multiple';
+        component.validate = true;
+        component.preSelectUsers = <any> [{ id: mockUsers[1].id }, { id: mockUsers[2].id }];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            component.filterPreselectUsers().then((result) => {
+                expect(findByIdSpy).toHaveBeenCalled();
+                expect(component.userExists(result)).toEqual(true);
+                done();
+            });
+        });
+    }));
+
+    it('should filter user by username if validate true', async((done) => {
+        const findUserByUsernameSpy = spyOn(identityService, 'findUserByUsername').and.returnValue(Promise.resolve(mockUsers));
+        component.mode = 'multiple';
+        component.validate = true;
+        component.preSelectUsers = <any> [{ username: mockUsers[1].username }, { username: mockUsers[2].username }];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            component.filterPreselectUsers().then((result) => {
+                expect(findUserByUsernameSpy).toHaveBeenCalled();
+                expect(component.userExists(result)).toEqual(true);
+                done();
+            });
+        });
+    }));
+
+    it('should filter user by email if validate true', async((done) => {
+        const findUserByEmailSpy = spyOn(identityService, 'findUserByEmail').and.returnValue(Promise.resolve(mockUsers));
+        component.mode = 'multiple';
+        component.validate = true;
+        component.preSelectUsers = <any> [{ email: mockUsers[1].email }, { email: mockUsers[2].email }];
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            component.filterPreselectUsers().then((result) => {
+                expect(findUserByEmailSpy).toHaveBeenCalled();
+                expect(component.userExists(result)).toEqual(true);
+                done();
+            });
+        });
+    }));
 });
--- a/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts
+++ b/lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts
@@ -19,7 +19,7 @@ import { FormControl } from '@angular/forms';
 import { Component, OnInit, Output, EventEmitter, ViewEncapsulation, Input, ViewChild, ElementRef, SimpleChanges, OnChanges } from '@angular/core';
 import { Observable, of, BehaviorSubject } from 'rxjs';
 import { switchMap, debounceTime, distinctUntilChanged, mergeMap, tap, filter } from 'rxjs/operators';
-import { FullNamePipe, IdentityUserModel, IdentityUserService } from '@alfresco/adf-core';
+import { FullNamePipe, IdentityUserModel, IdentityUserService, LogService } from '@alfresco/adf-core';
 import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
@@ -28,9 +28,9 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
    styleUrls: ['./people-cloud.component.scss'],
    animations: [
        trigger('transitionMessages', [
-            state('enter', style({opacity: 1, transform: 'translateY(0%)'})),
+            state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
            transition('void => enter', [
-                style({opacity: 0, transform: 'translateY(-100%)'}),
+                style({ opacity: 0, transform: 'translateY(-100%)' }),
                animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')
            ])
        ])
@@ -56,10 +56,17 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
    @Input()
    roles: string[];

-    /**
-     * Array of users to be pre-selected. All users in the
+    /** This flag enables the validation on the preSelectUsers passed as input.
+     * In case the flag is true the components call the identity service to verify the validity of the information passed as input.
+     * Otherwise, no check will be done.
+     */
+    @Input()
+    validate: Boolean = false;
+
+    /** Array of users to be pre-selected. All users in the
     * array are pre-selected in multi selection mode, but only the first user
     * is pre-selected in single selection mode.
+     * Mandatory properties are: id, email, username
     */
    @Input()
    preSelectUsers: IdentityUserModel[];
@@ -72,9 +79,9 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
    @Output()
    removeUser: EventEmitter<IdentityUserModel> = new EventEmitter<IdentityUserModel>();

-    /** Emitted when an error occurs. */
+    /** Emitted when an warning occurs. */
    @Output()
-    error: EventEmitter<any> = new EventEmitter<any>();
+    warning: EventEmitter<any> = new EventEmitter<any>();

    @ViewChild('userInput')
    private userInput: ElementRef<HTMLInputElement>;
@@ -93,7 +100,9 @@ export class PeopleCloudComponent implements OnInit, OnChanges {

    isFocused: boolean;

-    constructor(private identityUserService: IdentityUserService) {
+    invalidUsers: IdentityUserModel[];
+
+    constructor(private identityUserService: IdentityUserService, private logService: LogService) {
        this.searchUsersSubject = new BehaviorSubject<IdentityUserModel[]>(this._searchUsers);
        this.searchUsers$ = this.searchUsersSubject.asObservable();
    }
@@ -102,11 +111,18 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
        this.selectedUsersSubject = new BehaviorSubject<IdentityUserModel[]>(this.preSelectUsers);
        this.selectedUsers$ = this.selectedUsersSubject.asObservable();
        this.initSearch();
+
+        if (this.appName) {
+            this.disableSearch();
+            this.loadClientId();
+        }
    }

    ngOnChanges(changes: SimpleChanges) {
-        if (changes.preSelectUsers && this.hasPreSelectUsers()) {
+        if (this.isPreselectedUserChanged(changes) && this.isValidationEnabled()) {
            this.loadPreSelectUsers();
+        } else {
+            this.loadNoValidationPreselctUsers();
        }

        if (changes.appName && this.isAppNameChanged(changes.appName)) {
@@ -121,6 +137,70 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
        return change.previousValue !== change.currentValue && this.appName && this.appName.length > 0;
    }

+    isPreselectedUserChanged(changes: SimpleChanges) {
+        return changes.preSelectUsers
+            && changes.preSelectUsers.previousValue !== changes.preSelectUsers.currentValue
+            && this.hasPreSelectUsers();
+    }
+
+    isValidationEnabled() {
+        return this.validate === true;
+    }
+
+    async validatePreselectUsers(): Promise<any> {
+        this.invalidUsers = [];
+        let filteredPreSelectUsers: IdentityUserModel[];
+
+        try {
+            filteredPreSelectUsers = await this.filterPreselectUsers();
+        } catch (error) {
+            filteredPreSelectUsers = [];
+            this.logService.error(error);
+        }
+
+        return filteredPreSelectUsers.reduce((validUsers, user: IdentityUserModel) => {
+            if (this.userExists(user)) {
+                validUsers.push(user);
+            } else {
+                this.invalidUsers.push(user);
+            }
+            return validUsers;
+        }, []);
+    }
+
+    async filterPreselectUsers() {
+        const promiseBatch = this.preSelectUsers.map(async (user: IdentityUserModel) => {
+            let result: any;
+
+            try {
+                result = await this.searchUser(user);
+            } catch (error) {
+                result = [];
+                this.logService.error(error);
+            }
+            const isUserValid: Boolean = this.userExists(result);
+            return isUserValid ? new IdentityUserModel(result[0]) : user;
+        });
+        return await Promise.all(promiseBatch);
+    }
+
+    async searchUser(user: IdentityUserModel) {
+        const key: string = Object.keys(user)[0];
+        switch (key) {
+            case 'id': return this.identityUserService.findUserById(user[key]).toPromise();
+            case 'username': return this.identityUserService.findUserByUsername(user[key]).toPromise();
+            case 'email': return this.identityUserService.findUserByEmail(user[key]).toPromise();
+            default: return of([]);
+        }
+    }
+
+    public userExists(result: any) {
+        return result.length > 0 ||
+         result.id !== undefined ||
+         result.username !== undefined ||
+         result.amil !== undefined;
+    }
+
    private initSearch() {
        this.searchUserCtrl.valueChanges.pipe(
            filter((value) => {
@@ -190,7 +270,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
    private isUserAlreadySelected(user: IdentityUserModel): boolean {
        if (this.preSelectUsers && this.preSelectUsers.length > 0) {
            const result = this.preSelectUsers.find((selectedUser) => {
-                return selectedUser.id === user.id || selectedUser.email  === user.email;
+                return selectedUser.id === user.id || selectedUser.email === user.email || selectedUser.username === user.username;
            });

            return !!result;
@@ -200,15 +280,46 @@ export class PeopleCloudComponent implements OnInit, OnChanges {

    private loadPreSelectUsers() {
        if (!this.isMultipleMode()) {
-            this.searchUserCtrl.setValue(this.preSelectUsers[0]);
-            this.preSelectUsers = [];
+            this.loadSinglePreselectUser();
        } else {
+            this.loadMultiplePreselectUsers();
+        }
+        if (this.userInput) {
+            this.userInput.nativeElement.click();
+        }
+    }
+
+    loadNoValidationPreselctUsers() {
+        if (this.isMultipleMode()) {
            this.selectedUsersSubject.next(this.preSelectUsers);
+        } else {
+            this.searchUserCtrl.setValue(this.preSelectUsers[0]);
+        }
+    }
+
+    public async loadSinglePreselectUser() {
+        const users = await this.validatePreselectUsers();
+        this.checkPreselectValidationErrors();
+        this.searchUserCtrl.setValue(users[0]);
+    }
+
+    public async loadMultiplePreselectUsers() {
+        let users = await this.validatePreselectUsers();
+        this.checkPreselectValidationErrors();
+        this.preSelectUsers = [...users];
+        this.selectedUsersSubject.next(users);
+    }
+
+    public checkPreselectValidationErrors() {
+        if (this.invalidUsers.length > 0) {
+            this.warning.emit({
+                message: 'INVALID_PRESELECTED_USERS',
+                users: this.invalidUsers
+            });
        }
    }

    private async loadClientId() {
-
        this.clientId = await this.identityUserService.getClientIdByApplicationName(this.appName).toPromise();

        if (this.clientId) {
@@ -260,7 +371,7 @@ export class PeopleCloudComponent implements OnInit, OnChanges {
    }

    private setError() {
-        this.searchUserCtrl.setErrors({invalid: true});
+        this.searchUserCtrl.setErrors({ invalid: true });
    }

    private clearError() {