Merge pull request #1028 from Alfresco/dev-valbano-933

Reflect Api changes for Activiti user image
2026-09-09 18:03:21 +00:00 · 2016-11-09 10:54:24 +00:00
parent 15455276f9 46ac3ebb1a
commit f9d78d7b15
17 changed files with 608 additions and 330 deletions
@@ -9,5 +9,9 @@
 }

 .user-profile {
-    margin-right: 3px;
+    margin-right: 50px;
+}
+
+.mdl-button-padding {
+    padding-left: 20px;
 }
@@ -2,7 +2,14 @@
 <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <div *ngIf="!isLoginPage()">
        <header class="mdl-layout__header">
-            <div class="mdl-layout__header-row">
+            <div class="mdl-button-padding mdl-layout__header-row">
+
+                <div *ngIf="isLoggedIn()">
+                    <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
+                    </ng2-alfresco-userinfo>
+                </div>
+
+
                <!-- Title -->
                <span class="mdl-layout-title">Demo Application</span>
                <!-- Add spacer, to align navigation to the right -->
@@ -23,10 +30,6 @@
                    <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
                </nav>

-                <div class="user-profile" *ngIf="isLoggedIn()">
-                    <ng2-alfresco-userinfo></ng2-alfresco-userinfo>
-                </div>
-
                <!-- Right aligned menu below button -->
                <button id="demo-menu-lower-right" data-automation-id="right-action-menu"
                        class="mdl-button mdl-js-button mdl-button--icon">
@@ -1,5 +1,38 @@
 # Alfresco User Info Component for Angular 2
-This component will show the user information for ECM and BPM
+<p>
+  <a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
+    <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master'  alt='travis
+    Status' />
+  </a>
+  <a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
+    <img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components'  alt='travis
+    Status' />
+  </a>
+  <a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
+    <img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
+  </a>
+  <a href='https://www.npmjs.com/package/ng2-alfresco-login'>
+    <img src='https://img.shields.io/npm/dt/ng2-alfresco-login.svg' alt='npm downloads' />
+  </a>
+  <a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
+     <img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
+  </a>
+  <a href='https://www.alfresco.com/'>
+     <img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
+  </a>
+  <a href='https://angular.io/'>
+     <img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
+  </a>
+  <a href='https://www.typescriptlang.org/docs/tutorial.html'>
+     <img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
+  </a>
+  <a href='https://www.alfresco.com/'>
+     <img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
+  </a>
+</p>
+
+### Node
+To correctly use this component check that on your machine is running Node version 5.0.0 or higher.


 ## Prerequisites
@@ -48,9 +81,25 @@ Also make sure you include these dependencies in your `index.html` file:
 	
 ## Example

+## Basic usage
+
 ```html
-<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
+<alfresco-document-list
+    [ecmBackgroundImage]="pathToEcmBannerImage"
+    [bpmBackgroundImage]="pathToBpmBannerImage"
+    [fallBackThumbnailImage]="pathToDefaultImage">
+</alfresco-document-list>
 ```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ecmBackgroundImage | string |  | Custom path for the background banner image for ECM users |
+| bpmBackgroundImage | string |  | Custom path for the background banner image for BPM users |
+| menuOpenType | string | bottom-right  | Custom choice for opening menu bottom right or bottom left  |
+| fallBackThumbnailImage | string | image at ng2-alfresco-userinfo/src/img/anonymous.gif | Fallback image for profile when thubnail is missing|
+
 This will show a round icon with user and on click some user information are showed.
 If user is logged in with ECM and BPM the ECM image will be showed.

@@ -24,8 +24,8 @@ module.exports = function (config) {
      'node_modules/zone.js/dist/fake-async-test.js',

      // RxJs
-      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+      {pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false},

      // Paths loaded via module imports:
      // Angular itself
@@ -44,11 +44,13 @@ module.exports = function (config) {
      {pattern: 'dist/**/*.css', included: true, served: true, watched: true},

      // ng2-components
-      { pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false },
+      {pattern: 'node_modules/ng2-alfresco-core/dist/**/*.js', included: false, served: true, watched: false},
      // Fake files
-      { pattern: 'src/assets/ecmImg.gif', included: false, watched: true, served: true },
-      { pattern: 'src/assets/bpmImg.gif', included: false, watched: true, served: true },
-      { pattern: 'src/img/anonymous.gif', included: false, watched: true, served: true },
+      {pattern: 'src/assets/ecmImg.gif', included: false, watched: true, served: true},
+      {pattern: 'src/assets/bpmImg.gif', included: false, watched: true, served: true},
+      {pattern: 'src/img/anonymous.gif', included: false, watched: true, served: true},
+      {pattern: 'src/img/blueBanner.png', included: false, watched: true, served: true},
+      {pattern: 'src/img/orangeBanner.png', included: false, watched: true, served: true},

      // paths to support debugging with source maps in dev tools
      {pattern: 'src/**/*.ts', included: false, watched: false},
@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Observable } from 'rxjs/Rx';
+import { EventEmitter } from '@angular/core';
+
+export interface LangChangeEvent {
+    lang: string;
+    translations: any;
+}
+
+export class TranslationMock {
+
+    public onLangChange: EventEmitter<LangChangeEvent> = new EventEmitter<LangChangeEvent>();
+
+    addTranslationFolder() {
+
+    }
+
+    public get(key: string|Array<string>, interpolateParams?: Object): Observable<string|any> {
+        return Observable.of(key);
+    }
+}
@@ -7,6 +7,7 @@
  cursor: pointer;
  border: 1px solid #999999;
  vertical-align: middle;
+  background-color:white;;
 }

 .button-profile {
@@ -16,7 +17,6 @@
 }

 .detail-user-profile-list-mdl{
-    margin-right: 10px;
    padding: 0px 0;
 }

@@ -24,6 +24,7 @@
    max-height: 450px;
    min-width: 450px;
    overflow: auto;
+    padding:0px;
 }

 .header-profile{
@@ -53,3 +54,33 @@ span.role-label-user{
 .truncate-long-names{
    text-overflow: ellipsis;
 }
+.demo-card-wide.mdl-card {
+    width: inherit;
+}
+.demo-card-wide > .mdl-card__title {
+    color: #fff;
+    height: 176px;
+}
+.demo-card-wide > .mdl-card__menu {
+    color: #fff;
+}
+
+.card-title__option{
+    height: 100px!important;
+}
+
+img.profile-picture {
+    background-color: white;
+    background-size: cover;
+    border-radius: 50%;
+    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px rgba(0,0,0,0.3);
+    height: 80px;
+    width: 80px;
+    z-index: 3;
+    margin-left: 0px;
+    margin-right: 8px;
+}
+
+.menu-container__items{
+
+}
@@ -1,65 +1,83 @@
 <div id="userinfo_container">
-    <span id="ecm_username" *ngIf="ecmUser">{{ecmUser.firstName || ecmUser.lastName}}</span>
-    <span id="bpm_username" *ngIf="bpmUser && !ecmUser">
-        {{ formatValue(bpmUser.firstName) ||
-           formatValue(bpmUser.lastName)  ||
-           formatValue(bpmUser.fullname) }}
-    </span>
    <div *ngIf="ecmUser || bpmUser" class="button-profile" id="user-profile" data-automation-id="user-profile">
-                <img id="logged-user-img"
-                     [src]="getUserAvatar()"
-                     class="profile-image"/>
+        <img id="logged-user-img"
+             [src]="getUserAvatar()"
+             alt="user-info-profile-button"
+             (error)="onImageLoadingError($event)"
+             class="profile-image"/>
    </div>
    <div *ngIf="ecmUser || bpmUser" id="user-profile-lists" class="user-profile-list-mdl
-                mdl-menu mdl-menu--bottom-right
-                mdl-js-menu mdl-js-ripple-effect"
-                for="user-profile">
-            <ul class='detail-user-profile-list-mdl mdl-list'>
-                <div id="ecm-user-detail" *ngIf="ecmUser">
-                    <hr class="title-start">
-                    <span id="ecm_title" class="header-profile"><b>ECM</b></span>
-                    <li class="mdl-list__item mdl-list__item--two-line">
-                        <span class="mdl-list__item-primary-content">
-                          <i class="mdl-list__item-avatar">
-                              <img id="ecm-user-detail-image"
-                                   [src]="getEcmUserAvatar()"
-                                   class="profile-image"/>
-                          </i>
-                          <span id="ecm-full-name" class="truncate-long-names">
-                              {{ecmUser.firstName}} {{ecmUser.lastName}}
-                          </span>
-                          <span  id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
-                        </span>
-                        <span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
-                            <span class="role-label-user">Job Role</span>
-                            {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }}
-                        </span>
-                    </li>
-                    <br>
+                mdl-menu mdl-js-menu mdl-js-ripple-effect"
+         [class.mdl-menu--bottom-left]="menuOpenType === 'left'? true : false"
+         [class.mdl-menu--bottom-right]="menuOpenType === 'right'? true : false"
+         for="user-profile" (click)="stopClosing($event)">
+        <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect menu-container__items">
+            <div id="tab-bar-env" class="mdl-tabs__tab-bar" [hidden]="!(ecmUser && bpmUser)">
+                <a href="#ecm-panel" id="ecm-tab" class="mdl-tabs__tab is-active">ECM</a>
+                <a href="#bpm-panel" id="bpm-tab" class="mdl-tabs__tab">BPM</a>
+            </div>
+            <div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" id="ecm-panel">
+                <div class="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
+                    <div class="demo-card-wide mdl-card">
+                        <div class="card-title__option mdl-card__title"
+                             id="ecm-background-image"
+                             [style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/../img/orangeBanner.png')+')'">
+                            <img class="profile-picture"
+                                 id="ecm-user-detail-image"
+                                 alt="ecm-profile-image"
+                                 (error)="onImageLoadingError($event)"
+                                 [src]="getEcmUserAvatar()"/>
+                            <h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <li class="mdl-list__item mdl-list__item--two-line">
+                                <span class="mdl-list__item-primary-content">
+                                  <span id="ecm-full-name" class="truncate-long-names">
+                                      {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
+                                  </span>
+                                  <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
+                                </span>
+                                <span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
+                                    <span
+                                        class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
+                                    {{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
+                                </span>
+                            </li>
+                        </div>
+                    </div>
                </div>
-                <div id="bpm-user-detail" *ngIf="bpmUser">
-                    <hr class="title-start">
-                    <span  id="bpm_title" class="header-profile"><b>BPM</b></span>
-                    <li class="mdl-list__item mdl-list__item--two-line">
+            </div>
+            <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
+                <div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
+                    <div class="demo-card-wide mdl-card">
+                        <div class="card-title__option mdl-card__title"
+                             id="bpm-background-image"
+                             [style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/../img/blueBanner.png')+')'">
+                            <img class="profile-picture"
+                                 id="bpm-user-detail-image"
+                                 alt="bpm-profile-image"
+                                 (error)="onImageLoadingError($event)"
+                                 [src]="getBpmUserAvatar()"/>
+                            <h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
+                        </div>
+                        <div class="mdl-card__supporting-text">
+                            <li class="mdl-list__item mdl-list__item--two-line">
                        <span class="mdl-list__item-primary-content">
-                          <i class="mdl-list__item-avatar">
-                              <img id="bpm-user-detail-image"
-                                   [src]="getBpmUserAvatar()"
-                                   class="profile-image"/>
-                          </i>
-                          <span  id="bpm-full-name" class="truncate-long-names">
+                          <span id="bpm-full-name" class="truncate-long-names">
                              {{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
                          </span>
                          <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
                        </span>
-                        <span  id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
-                            <span class="role-label-user">Tenant</span>
+                                <span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
+                            <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
                            {{bpmUser.tenantName}}
                        </span>
-                    </li>
+                            </li>
+                        </div>
+                    </div>
                </div>
-            </ul>
+            </div>
+        </div>
    </div>
+
 </div>
-
-
@@ -18,47 +18,72 @@
 import { UserInfoComponent } from './user-info.component';
 import { EcmUserService } from '../services/ecm-user.service';
 import { BpmUserService } from '../services/bpm-user.service';
-import { FakeEcmUserService } from '../assets/fake-ecm-user.service.mock';
-import { fakeEcmEditedUser } from '../assets/fake-ecm-user.service.mock';
-import { FakeBpmUserService } from '../assets/fake-bpm-user.service.mock';
-import { fakeBpmEditedUser } from '../assets/fake-bpm-user.service.mock';
-import { AlfrescoContentService, AlfrescoSettingsService } from 'ng2-alfresco-core';
+import { BpmUserModel } from '../models/bpm-user.model';
+import { TranslationMock } from '../assets/translation.service.mock';
+import {
+    CoreModule,
+    AlfrescoSettingsService,
+    AlfrescoContentService,
+    AlfrescoTranslationService
+} from 'ng2-alfresco-core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';

-class StubSetting {
-    provider: string;
+declare let jasmine: any;

-    setProviders(provider: string) {
-        this.provider = provider;
-    };
-
-    getProviders() {
-        return this.provider;
-    };
-}
-
-class StubAlfrescoContentService {
-    getContentUrl() {
-        return 'fake/url/image/for/ecm/user';
-    };
-}
+const fakeBpmUser: BpmUserModel = <BpmUserModel>{
+    'id': 'fake-id',
+    'firstName': 'fake-bpm-first-name',
+    'lastName': 'fake-bpm-last-name',
+    'created': null,
+    'lastUpdate': null,
+    'latestSyncTimeStamp': null,
+    'email': 'fake-bpm-email',
+    'externalId': null,
+    'company': null,
+    'pictureId': null,
+    'fullname': 'fake-full-name',
+    'password': null,
+    'type': 'enterprise',
+    'status': 'active',
+    'tenantId': '1',
+    'groups': [{
+        'id': 1,
+        'name': 'analytics-users',
+        'externalId': null,
+        'status': 'active',
+        'tenantId': 1,
+        'type': 0,
+        'parentGroupId': null,
+        'lastSyncTimeStamp': null,
+        'userCount': null,
+        'users': null,
+        'capabilities': null,
+        'groups': null,
+        'manager': null
+    }],
+    'capabilities': null,
+    'apps': [],
+    'primaryGroup': null,
+    'tenantPictureId': null,
+    'tenantName': 'fake-tenant-name'
+};

 describe('User info component', () => {

    let userInfoComp: UserInfoComponent;
    let fixture: ComponentFixture<UserInfoComponent>;
-    let stubSetting: StubSetting;
-    let fakeEcmService: FakeEcmUserService;
-    let fakeBpmService: FakeBpmUserService;
    let element: HTMLElement;
+    let stubSetting: AlfrescoSettingsService;
+    let stubContent: AlfrescoContentService;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
+            imports: [CoreModule],
            declarations: [UserInfoComponent],
-            providers: [{provide: EcmUserService, useClass: FakeEcmUserService},
-                {provide: BpmUserService, useClass: FakeBpmUserService},
-                {provide: AlfrescoSettingsService, useClass: StubSetting},
-                {provide: AlfrescoContentService, useClass: StubAlfrescoContentService}
+            providers: [EcmUserService,
+                BpmUserService,
+                AlfrescoSettingsService,
+                {provide: AlfrescoTranslationService, useClass: TranslationMock}
            ]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(UserInfoComponent);
@@ -67,13 +92,17 @@ describe('User info component', () => {
        });
    }));

+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
    it('should not show any image if the user is not logged in', () => {
        expect(element.querySelector('#userinfo_container')).toBeDefined();
        expect(element.querySelector('#logged-user-img')).toBeNull();
    });

    it('should NOT have users immediately after ngOnInit', () => {
-        fixture.detectChanges();
        expect(element.querySelector('#userinfo_container')).toBeDefined();
        expect(element.querySelector('#ecm_username')).toBeNull();
        expect(element.querySelector('#bpm_username')).toBeNull();
@@ -82,174 +111,213 @@ describe('User info component', () => {

    it('should format null string values in null value', () => {
        let res = userInfoComp.formatValue('null');
-
        expect(res).toBeDefined();
        expect(res).toBeNull();
    });

    it('should return the value when it is not null string', () => {
        let res = userInfoComp.formatValue('fake-value');
-
        expect(res).toBeDefined();
        expect(res).not.toBeNull();
        expect(res).toEqual('fake-value');
    });

+    it('should return the anonymous avatar when users do not have images', () => {
+        let event = <any> {
+            target: {
+                src: ''
+            }
+        };
+        userInfoComp.onImageLoadingError(event);
+        expect(event.target.src).toContain('src/img/anonymous.gif');
+    });
+
    describe('when user is logged on ecm', () => {

-        beforeEach(async(() => {
+        beforeEach(() => {
            stubSetting = fixture.debugElement.injector.get(AlfrescoSettingsService);
-            fakeEcmService = fixture.debugElement.injector.get(EcmUserService);
+            stubContent = fixture.debugElement.injector.get(AlfrescoContentService);
+            spyOn(stubSetting, 'getProviders').and.returnValue('ECM');
+        });

-            stubSetting.setProviders('ECM');
-            fixture.detectChanges();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
+        beforeEach(() => {
+            jasmine.Ajax.install();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        describe('and has image', () => {
+
+            beforeEach(() => {
+                fixture.detectChanges();
+                jasmine.Ajax.requests.mostRecent().respondWith({
+                    status: 200,
+                    contentType: 'json',
+                    responseText: {
+                        'entry': {
+                            'id': 'fake-id',
+                            'firstName': 'fake-ecm-first-name',
+                            'lastName': 'fake-ecm-last-name',
+                            'description': 'i am a fake user for test',
+                            'avatarId': 'fake-avatar-id',
+                            'email': 'fakeEcm@ecmUser.com'
+                        }
+                    }
                });
-        }));
+            });

-        it('should get the ecm current user image from the service', () => {
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#logged-user-img')).toBeDefined();
-            expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
-        });
-
-        it('should get the ecm user informations from the service', () => {
-            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#ecm_username')).toBeDefined();
-            expect(element.querySelector('#ecm_title')).toBeDefined();
-            expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
-            expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
-            expect(element.querySelector('#ecm-full-name').innerHTML).toContain('fake-first-name fake-last-name');
-            expect(element.querySelector('#ecm-job-title').innerHTML).toContain('test job');
-        });
-
-        it('should return the anonymous user avatar image url when user does not have avatarId', () => {
-            fakeEcmService.respondWithTheUserWithoutImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getEcmUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src'))
-                        .toContain('src/img/anonymous.gif');
-                });
-        });
-
-        it('should show N/A when the job title is null', () => {
-            fakeEcmEditedUser.jobTitle = null;
-            fakeEcmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
+            it('should show ecm only last name when user first name is null ', async(() => {
+                spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
+                fixture.whenStable().then(() => {
+                    userInfoComp.ecmUser.firstName = null;
                    fixture.detectChanges();
                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#ecm-job-title')).toBeDefined();
-                    expect(element.querySelector('#ecm-job-title').innerHTML).toContain('N/A');
+                    expect(element.querySelector('#ecm-username')).toBeDefined();
+                    expect(element.querySelector('#ecm-username').textContent).not.toContain('fake-ecm-first-name');
                });
+            }));
+
+            it('should get the ecm current user image from the service', async(() => {
+                spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(element.querySelector('#userinfo_container')).toBeDefined();
+                    expect(element.querySelector('#logged-user-img')).toBeDefined();
+                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
+                });
+            }));
+
+            it('should get the ecm user informations from the service', async(() => {
+                spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
+                fixture.whenStable().then(() => {
+                    fixture.detectChanges();
+                    expect(element.querySelector('#userinfo_container')).toBeDefined();
+                    expect(element.querySelector('#ecm_username')).toBeDefined();
+                    expect(element.querySelector('#ecm_title')).toBeDefined();
+                    expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
+                    expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
+                    expect(element.querySelector('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+                    expect(element.querySelector('#ecm-job-title').textContent).toContain('USER_PROFILE.LABELS.ECM.JOB_TITLE');
+                });
+            }));
        });
+
+        describe('and has no image', () => {
+
+            beforeEach(async(() => {
+                userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+                fixture.detectChanges();
+                jasmine.Ajax.requests.mostRecent().respondWith({
+                    status: 200,
+                    contentType: 'json',
+                    responseText: {
+                        'entry': {
+                            'id': 'fake-id',
+                            'firstName': 'fake-first-name',
+                            'lastName': 'fake-last-name',
+                            'description': 'i am a fake user for test',
+                            'email': 'fakeEcm@ecmUser.com'
+                        }
+                    }
+                });
+            }));
+
+            it('should show N/A when the job title is null', async(() => {
+                fixture.detectChanges();
+                expect(element.querySelector('#userinfo_container')).toBeDefined();
+                expect(element.querySelector('#ecm-job-title')).toBeDefined();
+                expect(element.querySelector('#ecm-job-title').textContent).toContain('N/A');
+            }));
+
+            it('should not show the tabs', () => {
+                fixture.detectChanges();
+                expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
+            });
+        });
+
    });

    describe('when user is logged on bpm', () => {

-        beforeEach(async(() => {
-            stubSetting = fixture.debugElement.injector.get(AlfrescoSettingsService);
-            fakeBpmService = fixture.debugElement.injector.get(BpmUserService);
+        let fakeBpmUserForTest;

-            stubSetting.setProviders('BPM');
+        beforeEach(() => {
+            stubSetting = fixture.debugElement.injector.get(AlfrescoSettingsService);
+            spyOn(stubSetting, 'getProviders').and.returnValue('BPM');
+            jasmine.Ajax.install();
+            fakeBpmUserForTest = fakeBpmUser;
+        });
+
+        beforeEach(async(() => {
+            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
            fixture.detectChanges();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                });
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: fakeBpmUserForTest
+            });
        }));

-        it('should get the bpm current user image from the service', () => {
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
+        it('should get the bpm current user image from the service', async(() => {
            expect(element.querySelector('#userinfo_container')).toBeDefined();
            expect(element.querySelector('#logged-user-img')).toBeDefined();
-            expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/bpmImg.gif');
-        });
+            expect(element.querySelector('#logged-user-img').getAttribute('src'))
+                .toContain('activiti-app/app/rest/admin/profile-picture');

-        it('should show last name if first name is null', () => {
-            fakeBpmEditedUser.firstName = null;
-            fakeBpmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#bpm_username')).toBeDefined();
-                    expect(element.querySelector('#bpm_username').innerHTML).toContain('fake-last-name');
-                });
-        });
+        }));

-        it('should show full name if first and last name are null', () => {
-            fakeBpmEditedUser.firstName = null;
-            fakeBpmEditedUser.lastName = null;
-            fakeBpmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#bpm_username')).toBeDefined();
-                    expect(element.querySelector('#bpm_username').innerHTML).toContain('fake-full-name');
-                });
-        });
-
-        it('should not show first name if it is null string', () => {
-            fakeBpmEditedUser.firstName = 'null';
-            fakeBpmEditedUser.lastName = 'fake-last-name';
-            fakeBpmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#bpm-full-name')).toBeDefined();
-                    expect(element.querySelector('#bpm-full-name').innerHTML).not.toContain('fake-first-name');
-                    expect(element.querySelector('#bpm-full-name').innerHTML).toContain('fake-last-name');
-                });
-        });
-
-        it('should not show last name if it is null string', () => {
-            fakeBpmEditedUser.lastName = 'null';
-            fakeBpmEditedUser.firstName = 'fake-first-name';
-            fakeBpmService.respondWithEditedUser();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#bpm-full-name')).toBeDefined();
-                    expect(element.querySelector('#bpm-full-name').innerHTML).toContain('fake-first-name');
-                    expect(element.querySelector('#bpm-full-name').innerHTML).not.toContain('fake-last-name');
-                });
-        });
-
-        it('should get the bpm user informations from the service', () => {
+        it('should show last name if first name is null', async(() => {
+            userInfoComp.bpmUser.firstName = null;
+            fixture.detectChanges();
            expect(element.querySelector('#userinfo_container')).toBeDefined();
-            expect(element.querySelector('#bpm_username')).toBeDefined();
-            expect(element.querySelector('#bpm_title')).toBeDefined();
-            expect(element.querySelector('#bpm-user-detail-image')).toBeDefined();
-            expect(element.querySelector('#bpm-user-detail-image').getAttribute('src')).toEqual('src/assets/bpmImg.gif');
-            expect(element.querySelector('#bpm-full-name').innerHTML).toContain('fake-first-name fake-last-name');
-            expect(element.querySelector('#bpm-tenant').innerHTML).toContain('fake-tenant-name');
-        });
+            expect(element.querySelector('#bpm-username')).not.toBeNull();
+            expect(element.querySelector('#bpm-username').textContent).toContain('fake-bpm-last-name');

-        it('should return the anonymous user avatar image url when user does not have avatarId', () => {
-            fakeBpmService.respondWithTheUserWithoutImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getBpmUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src'))
-                        .toContain('src/img/anonymous.gif');
-                });
+        }));
+
+        it('should show full name if first and last name are null', async(() => {
+            userInfoComp.bpmUser.firstName = null;
+            userInfoComp.bpmUser.lastName = null;
+            fixture.detectChanges();
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#bpm-username')).toBeDefined();
+            expect(element.querySelector('#bpm-username').innerHTML).toContain('fake-full-name');
+
+        }));
+
+        it('should not show first name if it is null string', async(() => {
+            userInfoComp.bpmUser.firstName = 'null';
+            userInfoComp.bpmUser.lastName = 'fake-last-name';
+            fixture.detectChanges();
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#bpm-full-name')).toBeDefined();
+            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-last-name');
+            expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
+        }));
+
+        it('should not show last name if it is null string', async(() => {
+            userInfoComp.bpmUser.firstName = 'fake-first-name';
+            userInfoComp.bpmUser.lastName = 'null';
+            fixture.detectChanges();
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#bpm-full-name')).toBeDefined();
+            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-first-name');
+            expect(element.querySelector('#bpm-full-name').textContent).not.toContain('null');
+        }));
+
+        it('should not show the tabs', () => {
+            fixture.detectChanges();
+            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).not.toBeNull();
        });
    });

@@ -257,25 +325,56 @@ describe('User info component', () => {

        beforeEach(async(() => {
            stubSetting = fixture.debugElement.injector.get(AlfrescoSettingsService);
-            fakeBpmService = fixture.debugElement.injector.get(BpmUserService);
-            fakeEcmService = fixture.debugElement.injector.get(EcmUserService);
-
-            stubSetting.setProviders('ALL');
-            fixture.detectChanges();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                });
+            stubContent = fixture.debugElement.injector.get(AlfrescoContentService);
+            spyOn(stubSetting, 'getProviders').and.returnValue('ALL');
+            spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
+            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+            jasmine.Ajax.install();
+            fakeBpmUser.firstName = 'fake-bpm-first-name';
+            fakeBpmUser.lastName = 'fake-bpm-last-name';
        }));

+        beforeEach(async(() => {
+            fixture.detectChanges();
+            jasmine.Ajax.requests.first().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: {
+                    'entry': {
+                        'id': 'fake-id',
+                        'firstName': 'fake-ecm-first-name',
+                        'lastName': 'fake-ecm-last-name',
+                        'description': 'i am a fake user for test',
+                        'avatarId': 'fake-ecm-avatar-id',
+                        'email': 'fakeEcm@ecmUser.com',
+                        'jobTitle': 'job-ecm-test'
+                    }
+                }
+            });
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: fakeBpmUser
+            });
+        }));
+
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        afterEach(() => {
+            jasmine.Ajax.uninstall();
+        });
+
        it('should get the bpm user informations from the service', () => {
            expect(element.querySelector('#userinfo_container')).toBeDefined();
            expect(element.querySelector('#bpm_username')).toBeDefined();
            expect(element.querySelector('#bpm_title')).toBeDefined();
            expect(element.querySelector('#bpm-user-detail-image')).toBeDefined();
-            expect(element.querySelector('#bpm-user-detail-image').getAttribute('src')).toEqual('src/assets/bpmImg.gif');
-            expect(element.querySelector('#bpm-full-name').innerHTML).toContain('fake-first-name fake-last-name');
-            expect(element.querySelector('#bpm-tenant').innerHTML).toContain('fake-tenant-name');
+            expect(element.querySelector('#bpm-user-detail-image').getAttribute('src'))
+                .toContain('app/rest/admin/profile-picture');
+            expect(element.querySelector('#bpm-full-name').textContent).toContain('fake-bpm-first-name fake-bpm-last-name');
+            expect(element.querySelector('#bpm-tenant').textContent).toContain('fake-tenant-name');
        });

        it('should get the ecm user informations from the service', () => {
@@ -284,53 +383,39 @@ describe('User info component', () => {
            expect(element.querySelector('#ecm_title')).toBeDefined();
            expect(element.querySelector('#ecm-user-detail-image')).toBeDefined();
            expect(element.querySelector('#ecm-user-detail-image').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
-            expect(element.querySelector('#ecm-full-name').innerHTML).toContain('fake-first-name fake-last-name');
-            expect(element.querySelector('#ecm-job-title').innerHTML).toContain('test job');
-        });
-
-        it('should return the anonymous avatar when users do not have images', () => {
-            fakeBpmService.respondWithTheUserWithoutImage();
-            fakeEcmService.respondWithTheUserWithoutImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('src/img/anonymous.gif');
-                });
+            expect(element.querySelector('#ecm-full-name').textContent).toContain('fake-ecm-first-name fake-ecm-last-name');
+            expect(element.querySelector('#ecm-job-title').textContent).toContain('job-ecm-test');
        });

        it('should show the ecm image if exists', () => {
-            fakeBpmService.respondWithTheUserWithImage();
-            fakeEcmService.respondWithTheUserWithImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
-                });
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#logged-user-img')).toBeDefined();
+            expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/ecmImg.gif');
        });

        it('should show the bpm image if ecm does not have it', () => {
-            fakeBpmService.respondWithTheUserWithImage();
-            fakeEcmService.respondWithTheUserWithoutImage();
-            userInfoComp.ngOnInit();
-            fixture.whenStable()
-                .then(() => {
-                    fixture.detectChanges();
-                    let res = userInfoComp.getUserAvatar();
-                    expect(res).toBeDefined();
-                    expect(element.querySelector('#userinfo_container')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img')).toBeDefined();
-                    expect(element.querySelector('#logged-user-img').getAttribute('src')).toEqual('src/assets/bpmImg.gif');
-                });
+            userInfoComp.ecmUserImage = null;
+            fixture.detectChanges();
+            expect(element.querySelector('#userinfo_container')).toBeDefined();
+            expect(element.querySelector('#logged-user-img')).toBeDefined();
+            expect(element.querySelector('#logged-user-img').getAttribute('src')).toContain('rest/admin/profile-picture');
+        });
+
+        it('should show the tabs for the env', () => {
+            expect(element.querySelector('#tab-bar-env')).toBeDefined();
+            expect(element.querySelector('#tab-bar-env')).not.toBeNull();
+            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull();
+            expect(element.querySelector('#ecm-tab')).not.toBeNull();
+            expect(element.querySelector('#bpm-tab')).not.toBeNull();
+        });
+
+        it('should not close the menu when a tab is clicked', () => {
+            expect(element.querySelector('#tab-bar-env')).toBeDefined();
+            expect(element.querySelector('#tab-bar-env')).not.toBeNull();
+            expect(element.querySelector('#tab-bar-env').getAttribute('hidden')).toBeNull();
+            let bpmTab = <HTMLElement>element.querySelector('#bpm-tab');
+            bpmTab.click();
+            expect(element.querySelector('#user-profile-lists')).not.toBeNull();
        });
    });
 });
@@ -15,12 +15,12 @@
 * limitations under the License.
 */

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { EcmUserModel } from './../models/ecm-user.model';
 import { BpmUserModel } from './../models/bpm-user.model';
 import { EcmUserService } from './../services/ecm-user.service';
 import { BpmUserService } from './../services/bpm-user.service';
-import { AlfrescoSettingsService } from 'ng2-alfresco-core';
+import { AlfrescoSettingsService, AlfrescoTranslationService } from 'ng2-alfresco-core';

@Component({
    selector: 'ng2-alfresco-userinfo',
@@ -31,6 +31,18 @@ import { AlfrescoSettingsService } from 'ng2-alfresco-core';

 export class UserInfoComponent implements OnInit {

+    @Input()
+    ecmBackgroundImage: string;
+
+    @Input()
+    bpmBackgroundImage: string;
+
+    @Input()
+    menuOpenType: string = 'right';
+
+    @Input()
+    fallBackThumbnailImage: string;
+
    private baseComponentPath = module.id.replace('components/user-info.component.js', '');

    ecmUser: EcmUserModel;
@@ -41,7 +53,11 @@ export class UserInfoComponent implements OnInit {

    constructor(private ecmUserService: EcmUserService,
                private bpmUserService: BpmUserService,
-                public setting: AlfrescoSettingsService) {
+                public setting: AlfrescoSettingsService,
+                private translate: AlfrescoTranslationService) {
+        if (translate) {
+            translate.addTranslationFolder('node_modules/ng2-alfresco-userinfo/src');
+        }
    }

    ngOnInit() {
@@ -61,12 +77,30 @@ export class UserInfoComponent implements OnInit {
                .subscribe((res) => {
                    this.bpmUser = <BpmUserModel> res;
                });
-            this.bpmUserService.getCurrentUserProfileImage()
-                .subscribe(
-                    (res) => {
-                        this.bpmUserImage = res;
-                    }
-                );
+            this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
+        }
+    }
+
+    onImageLoadingError(event) {
+        if (event) {
+            let element = <any> event.target;
+            element.src = this.fallBackThumbnailImage || this.anonymousImageUrl;
+        }
+    }
+
+    stopClosing(event) {
+        event.stopPropagation();
+    }
+
+    getUserNameHeaderFor(env: string) {
+        if (this.ecmUser && env === 'ECM') {
+            return this.ecmUser.firstName || this.ecmUser.lastName;
+        }
+
+        if (this.bpmUser && env === 'BPM') {
+            return this.formatValue(this.bpmUser.firstName) ||
+                this.formatValue(this.bpmUser.lastName) ||
+                this.formatValue(this.bpmUser.fullname);
        }
    }

@@ -75,15 +109,15 @@ export class UserInfoComponent implements OnInit {
    }

    getUserAvatar() {
-        return this.ecmUserImage || this.bpmUserImage || this.anonymousImageUrl;
+        return this.ecmUserImage || this.bpmUserImage;
    }

    getBpmUserAvatar() {
-        return this.bpmUserImage || this.anonymousImageUrl;
+        return this.bpmUserImage;
    }

    getEcmUserAvatar() {
-        return this.ecmUserImage || this.anonymousImageUrl;
+        return this.ecmUserImage;
    }

    formatValue(value: string) {
@@ -0,0 +1,13 @@
+{
+    "USER_PROFILE": {
+        "LABELS": {
+            "ECM": {
+                "JOB_TITLE": "Job Title"
+            },
+            "BPM": {
+                "TENANT": "Tenant"
+            }
+        }
+    }
+}
+
@@ -0,0 +1,12 @@
+{
+    "USER_PROFILE": {
+        "LABELS": {
+            "ECM": {
+                "JOB_TITLE": "Professione"
+            },
+            "BPM": {
+                "TENANT": "Organizzazione"
+            }
+        }
+    }
+}
@@ -25,7 +25,7 @@ declare let jasmine: any;

 describe('Bpm User service', () => {

-    let service, injector, authService;
+    let service, injector, authService, apiService;

    beforeEach(() => {
        injector = ReflectiveInjector.resolveAndCreate([
@@ -39,6 +39,7 @@ describe('Bpm User service', () => {
    beforeEach(() => {
        service = injector.get(BpmUserService);
        authService = injector.get(AlfrescoAuthenticationService);
+        apiService = injector.get(AlfrescoApiService);
        jasmine.Ajax.install();
    });

@@ -47,7 +48,7 @@ describe('Bpm User service', () => {
    });

    it('can instantiate service with authorization', () => {
-        let serviceTest = new BpmUserService(authService);
+        let serviceTest = new BpmUserService(authService, apiService);

        expect(serviceTest instanceof BpmUserService).toBe(true, 'new service should be ok');
    });
@@ -71,14 +72,10 @@ describe('Bpm User service', () => {
            });
        });

-        it('should retrieve avatar url for current user', (done) => {
-            spyOn(service, 'callGetProfilePictureApi').and.returnValue(Promise.resolve('fake/img/path'));
-            service.getCurrentUserProfileImage().subscribe(
-                (path) => {
-                    expect(path).toBeDefined();
-                    expect(path).toEqual('fake/img/path');
-                    done();
-                });
+        it('should retrieve avatar url for current user', () => {
+            let path = service.getCurrentUserProfileImage();
+            expect(path).toBeDefined();
+            expect(path).toContain('/app/rest/admin/profile-picture');
        });

        it('should catch errors on call for profile', (done) => {
@@ -91,16 +88,5 @@ describe('Bpm User service', () => {
                status: 403
            });
        });
-
-        it('should catch errors on call for profile picture', (done) => {
-            service.getCurrentUserProfileImage().subscribe(() => {
-            }, () => {
-                done();
-            });
-
-            jasmine.Ajax.requests.mostRecent().respondWith({
-                status: 403
-            });
-        });
    });
 });
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+import { AlfrescoApiService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
@@ -29,7 +29,8 @@ import { BpmUserModel } from '../models/bpm-user.model';
@Injectable()
 export class BpmUserService {

-    constructor(private authService: AlfrescoAuthenticationService) {
+    constructor(private authService: AlfrescoAuthenticationService,
+                private alfrescoJsApi: AlfrescoApiService) {
    }

    /**
@@ -37,19 +38,13 @@ export class BpmUserService {
     * @param userName - the user name
     */
    getCurrentUserInfo(): Observable<BpmUserModel> {
-        return Observable.fromPromise(this.authService.getAlfrescoApi().activiti.profileApi.getProfile())
+        return Observable.fromPromise(this.alfrescoJsApi.getInstance().activiti.profileApi.getProfile())
            .map((data) => <BpmUserModel> data)
            .catch(this.handleError);
    }

-    getCurrentUserProfileImage(): Observable<any> {
-        return Observable.fromPromise(this.callGetProfilePictureApi())
-            .map((data) => data)
-            .catch(this.handleError);
-    }
-
-    private callGetProfilePictureApi() {
-        return this.authService.getAlfrescoApi().activiti.profileApi.getProfilePicture();
+    getCurrentUserProfileImage(): string {
+        return this.alfrescoJsApi.getInstance().activiti.profileApi.getProfilePictureUrl();
    }

    /**
@@ -29,7 +29,7 @@ declare let jasmine: any;

 describe('Ecm User service', () => {

-    let service, injector, authService, contentService;
+    let service, injector, authService, contentService, apiService;

    beforeEach(() => {
        injector = ReflectiveInjector.resolveAndCreate([
@@ -43,20 +43,28 @@ describe('Ecm User service', () => {

    beforeEach(() => {
        service = injector.get(EcmUserService);
+        apiService = injector.get(AlfrescoApiService);
        authService = injector.get(AlfrescoAuthenticationService);
        contentService = injector.get(AlfrescoContentService);
    });

    it('can instantiate service with authorization', () => {
        expect(authService).not.toBeNull('authorization should be provided');
-        let serviceAuth = new EcmUserService(authService, null);
+        let serviceAuth = new EcmUserService(null, authService, null);

        expect(serviceAuth instanceof EcmUserService).toBe(true, 'new service should be ok');
    });

    it('can instantiate service with content service', () => {
        expect(contentService).not.toBeNull('contentService should be provided');
-        let serviceContent = new EcmUserService(null, contentService);
+        let serviceContent = new EcmUserService(null, null, contentService);
+
+        expect(serviceContent instanceof EcmUserService).toBe(true, 'new service should be ok');
+    });
+
+    it('can instantiate service with api service', () => {
+        expect(contentService).not.toBeNull('api service should be provided');
+        let serviceContent = new EcmUserService(apiService, null, null);

        expect(serviceContent instanceof EcmUserService).toBe(true, 'new service should be ok');
    });
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { AlfrescoAuthenticationService, AlfrescoContentService } from 'ng2-alfresco-core';
+import { AlfrescoAuthenticationService, AlfrescoContentService, AlfrescoApiService } from 'ng2-alfresco-core';
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Rx';
@@ -29,7 +29,8 @@ import { EcmUserModel } from '../models/ecm-user.model';
@Injectable()
 export class EcmUserService {

-    constructor(private authService: AlfrescoAuthenticationService,
+    constructor(private apiService: AlfrescoApiService,
+                private authService: AlfrescoAuthenticationService,
                private contentService: AlfrescoContentService) {
    }

@@ -50,7 +51,7 @@ export class EcmUserService {
    }

    private callApiGetPersonInfo(userName: string, opts?: any) {
-        return this.authService.getAlfrescoApi().core.peopleApi.getPerson(userName, opts);
+        return this.apiService.getInstance().core.peopleApi.getPerson(userName, opts);
    }

    getUserProfileImage(avatarId: string) {