#1387 fix img for systemjs and refactoring apiservice (#1421)

ng2-components/ng2-alfresco-core/src/services/AlfrescoAuthentication.service.ts

@@ -20,16 +20,14 @@ import { LogService } from './log.service';
 import { SettingsService } from './settings.service';
 import { StorageService } from './storage.service';
 import { AlfrescoApiService } from './alfresco-api.service';
-import { AuthService } from './auth.service';
 
 /** @deprecated AlfrescoAuthenticationService is deprecated. Use AuthService instead */
 @Injectable()
-export class AlfrescoAuthenticationService extends AuthService {
+export class AlfrescoAuthenticationService {
     constructor(settingsService: SettingsService,
                 apiService: AlfrescoApiService,
                 storage: StorageService,
                 logService: LogService) {
-        super(settingsService, apiService, storage, logService);
+        logService.error('ERROR: AlfrescoAuthenticationService is deprecated. Use AuthService instead.');
-        logService.warn('Warning: AlfrescoAuthenticationService is deprecated. Use AuthService instead.');
     }
 }

ng2-components/ng2-alfresco-core/src/services/AlfrescoContent.service.ts

@@ -18,17 +18,15 @@
 import { Injectable } from '@angular/core';
 import { LogService } from './log.service';
 import { AuthService } from './auth.service';
-import { ContentService } from './content.service';
 import { AlfrescoApiService } from './alfresco-api.service';
 
 /** @deprecated AlfrescoContentService is deprecated. Use ContentService instead */
 @Injectable()
-export class AlfrescoContentService extends ContentService {
+export class AlfrescoContentService {
 
     constructor(authService: AuthService,
                 apiService: AlfrescoApiService,
                 logService: LogService) {
-        super(authService, apiService);
+        logService.error('ERROR: AlfrescoContentService is deprecated. Use ContentService instead.');
-        logService.warn('Warning: AlfrescoContentService is deprecated. Use ContentService instead.');
     }
 }

ng2-components/ng2-alfresco-core/src/services/AlfrescoSettings.service.ts

@@ -16,15 +16,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { SettingsService } from './settings.service';
 import { LogService } from './log.service';
 
 /** @deprecated AlfrescoSettingsService is deprecated. Use SettingsService instead */
 @Injectable()
-export class AlfrescoSettingsService extends SettingsService {
+export class AlfrescoSettingsService {
 
     constructor(logService: LogService) {
-        super();
+        logService.error('ERROR: AlfrescoSettingsService is deprecated. Use SettingsService instead.');
-        logService.warn('Warning: AlfrescoSettingsService is deprecated. Use SettingsService instead.');
     }
 }

ng2-components/ng2-alfresco-core/src/services/AlfrescoTranslation.service.ts

@@ -17,17 +17,15 @@
 
 import { Injectable } from '@angular/core';
 import { TranslateService } from 'ng2-translate/ng2-translate';
-import { AlfrescoTranslateService } from './translate.service';
 import { LogService } from './log.service';
 
 /** @deprecated AlfrescoTranslationService is deprecated. Use AlfrescoTranslateService instead */
 @Injectable()
-export class AlfrescoTranslationService extends AlfrescoTranslateService {
+export class AlfrescoTranslationService {
 
     constructor(translate: TranslateService,
                 logService: LogService) {
-        super(translate);
+        logService.error('ERROR: AlfrescoTranslationService is deprecated. Use AlfrescoTranslateService instead.');
-        logService.warn('Warning: AlfrescoTranslationService is deprecated. Use AlfrescoTranslateService instead.');
     }
 
 }

ng2-components/ng2-alfresco-core/src/services/alfresco-api.service.ts

@@ -16,32 +16,94 @@
  */
 
 import { Injectable } from '@angular/core';
-import * as alfrescoApi from  'alfresco-js-api';
 import { AlfrescoApi } from  'alfresco-js-api';
+import * as alfrescoApi from  'alfresco-js-api';
+import { SettingsService } from './settings.service';
+import { StorageService } from './storage.service';
 
 @Injectable()
 export class AlfrescoApiService {
 
-    private _instance: AlfrescoApi;
+    private alfrescoApi: AlfrescoApi;
+
+    private provider: string;
+
+    private ticketEcm: string;
+
+    private ticketBpm: string;
+
+    private hostEcm: string;
+
+    private hostBpm: string;
+
+    private contextRoot: string;
+
+    private disableCsrf: boolean;
 
     public getInstance(): AlfrescoApi {
-        return this._instance;
+        return this.alfrescoApi;
     }
 
-    public setInstance(value: AlfrescoApi) {
+    constructor(private settingsService: SettingsService,
-        this._instance = value;
+                private storage: StorageService) {
-    }
 
-    constructor() {
+        this.provider = this.settingsService.getProviders();
-        this._instance = <AlfrescoApi>new alfrescoApi({
+        this.ticketEcm = this.getTicketEcm();
-            provider: 'ALL',
+        this.ticketBpm = this.getTicketBpm();
-            ticketEcm: null,
+        this.hostEcm = this.settingsService.ecmHost;
-            ticketBpm: null,
+        this.hostBpm = this.settingsService.bpmHost;
-            hostEcm: 'http://localhost:8080',
+        this.contextRoot = 'alfresco';
-            hostBpm: 'http://localhost:9999',
+        this.disableCsrf = false;
-            contextRoot: 'alfresco',
+
-            disableCsrf: true
+        this.init();
+
+        settingsService.bpmHostSubject.subscribe((hostBpm) => {
+            this.hostBpm = hostBpm;
+            this.init();
+        });
+
+        settingsService.ecmHostSubject.subscribe((hostEcm) => {
+            this.hostEcm = hostEcm;
+            this.init();
+        });
+
+        settingsService.csrfSubject.subscribe((disableCsrf) => {
+            this.disableCsrf = disableCsrf;
+            this.init();
+        });
+
+        settingsService.providerSubject.subscribe((provider) => {
+            this.provider = provider;
+            this.init();
         });
     }
 
+    private init() {
+        this.alfrescoApi = <AlfrescoApi>new alfrescoApi({
+            provider: this.provider,
+            ticketEcm: this.ticketEcm,
+            ticketBpm: this.ticketBpm,
+            hostEcm: this.hostEcm,
+            hostBpm: this.hostBpm,
+            contextRoot: this.contextRoot,
+            disableCsrf: this.disableCsrf
+        });
+    }
+
+    /**
+     * The method return the ECM ticket stored in the Storage
+     * @returns ticket
+     */
+    private getTicketEcm(): string {
+        return this.storage.getItem('ticket-ECM');
+    }
+
+    /**
+     * The method return the BPM ticket stored in the Storage
+     * @returns ticket
+     */
+    private getTicketBpm(): string {
+        return this.storage.getItem('ticket-BPM');
+    }
+
 }

ng2-components/ng2-alfresco-core/src/services/auth.service.spec.ts

@@ -76,7 +76,7 @@ describe('AuthService', () => {
             authService.login('fake-username', 'fake-password').subscribe(() => {
                 expect(authService.isLoggedIn()).toBe(true);
                 expect(authService.getTicketBpm()).toBeNull();
-                expect(authService.alfrescoApi.bpmAuth.isLoggedIn()).toBeFalsy();
+                expect(authService.alfrescoApi.getInstance().bpmAuth.isLoggedIn()).toBeFalsy();
                 done();
             });
 
@@ -201,7 +201,7 @@ describe('AuthService', () => {
             authService.login('fake-username', 'fake-password').subscribe(() => {
                 expect(authService.isLoggedIn()).toBe(true);
                 expect(authService.getTicketEcm()).toBeNull();
-                expect(authService.alfrescoApi.ecmAuth.isLoggedIn()).toBeFalsy();
+                expect(authService.alfrescoApi.getInstance().ecmAuth.isLoggedIn()).toBeFalsy();
                 done();
             });
 
@@ -296,19 +296,19 @@ describe('AuthService', () => {
         it('should host ecm url change be reflected in the api configuration', () => {
             settingsService.ecmHost = '127.99.99.99';
 
-            expect(authService.alfrescoApi.config.hostEcm).toBe('127.99.99.99');
+            expect(authService.alfrescoApi.getInstance().config.hostEcm).toBe('127.99.99.99');
         });
 
         it('should host bpm url change be reflected in the api configuration', () => {
             settingsService.bpmHost = '127.99.99.99';
 
-            expect(authService.alfrescoApi.config.hostBpm).toBe('127.99.99.99');
+            expect(authService.alfrescoApi.getInstance().config.hostBpm).toBe('127.99.99.99');
         });
 
         it('should host bpm provider change be reflected in the api configuration', () => {
             settingsService.setProviders('ECM');
 
-            expect(authService.alfrescoApi.config.provider).toBe('ECM');
+            expect(authService.alfrescoApi.getInstance().config.provider).toBe('ECM');
         });
 
     });

ng2-components/ng2-alfresco-core/src/services/auth.service.ts

@@ -19,49 +19,18 @@ import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs/Rx';
 import { SettingsService } from './settings.service';
 import { StorageService } from './storage.service';
-import { AlfrescoApiService } from './alfresco-api.service';
-import * as alfrescoApi from  'alfresco-js-api';
-import { AlfrescoApi } from  'alfresco-js-api';
 import { LogService } from './log.service';
+import { AlfrescoApiService } from './alfresco-api.service';
 
 @Injectable()
 export class AuthService {
-
-    alfrescoApi: AlfrescoApi;
     loginSubject: Subject<any> = new Subject<any>();
     logoutSubject: Subject<any> = new Subject<any>();
 
     constructor(private settingsService: SettingsService,
-                private apiService: AlfrescoApiService,
+                public alfrescoApi: AlfrescoApiService,
                 private storage: StorageService,
                 private logService: LogService) {
-        this.alfrescoApi = <AlfrescoApi>new alfrescoApi({
-            provider: this.settingsService.getProviders(),
-            ticketEcm: this.getTicketEcm(),
-            ticketBpm: this.getTicketBpm(),
-            hostEcm: this.settingsService.ecmHost,
-            hostBpm: this.settingsService.bpmHost,
-            contextRoot: 'alfresco',
-            disableCsrf: true
-        });
-
-        settingsService.bpmHostSubject.subscribe((bpmHost) => {
-            this.alfrescoApi.changeBpmHost(bpmHost);
-        });
-
-        settingsService.ecmHostSubject.subscribe((ecmHost) => {
-            this.alfrescoApi.changeEcmHost(ecmHost);
-        });
-
-        settingsService.csrfSubject.subscribe((csrf) => {
-            this.alfrescoApi.changeCsrfConfig(csrf);
-        });
-
-        settingsService.providerSubject.subscribe((value) => {
-            this.alfrescoApi.config.provider = value;
-        });
-
-        this.apiService.setInstance(this.alfrescoApi);
     }
 
     /**
@@ -69,7 +38,7 @@ export class AuthService {
      * @returns {boolean}
      */
     isLoggedIn(): boolean {
-        return !!this.alfrescoApi.isLoggedIn();
+        return !!this.alfrescoApi.getInstance().isLoggedIn();
     }
 
     /**
@@ -96,7 +65,7 @@ export class AuthService {
      * @returns {*|Observable<any>}
      */
     private callApiLogin(username: string, password: string) {
-        return this.alfrescoApi.login(username, password);
+        return this.alfrescoApi.getInstance().login(username, password);
     }
 
     /**
@@ -120,8 +89,8 @@ export class AuthService {
      * @returns {*|Observable<string>|Observable<any>|Promise<T>}
      */
     private callApiLogout(): Promise<any> {
-        if (this.alfrescoApi) {
+        if (this.alfrescoApi.getInstance()) {
-            return this.alfrescoApi.logout();
+            return this.alfrescoApi.getInstance().logout();
         }
     }
 
@@ -131,7 +100,7 @@ export class AuthService {
     removeTicket(): void {
         this.storage.removeItem('ticket-ECM');
         this.storage.removeItem('ticket-BPM');
-        this.alfrescoApi.setTicket(undefined, undefined);
+        this.alfrescoApi.getInstance().setTicket(undefined, undefined);
     }
 
     /**
@@ -170,8 +139,8 @@ export class AuthService {
      * The method save the ECM ticket in the Storage
      */
     saveTicketEcm(): void {
-        if (this.alfrescoApi && this.alfrescoApi.getTicketEcm()) {
+        if (this.alfrescoApi.getInstance() && this.alfrescoApi.getInstance().getTicketEcm()) {
-            this.storage.setItem('ticket-ECM', this.alfrescoApi.getTicketEcm());
+            this.storage.setItem('ticket-ECM', this.alfrescoApi.getInstance().getTicketEcm());
         }
     }
 
@@ -179,8 +148,8 @@ export class AuthService {
      * The method save the BPM ticket in the Storage
      */
     saveTicketBpm(): void {
-        if (this.alfrescoApi && this.alfrescoApi.getTicketBpm()) {
+        if (this.alfrescoApi.getInstance() && this.alfrescoApi.getInstance().getTicketBpm()) {
-            this.storage.setItem('ticket-BPM', this.alfrescoApi.getTicketBpm());
+            this.storage.setItem('ticket-BPM', this.alfrescoApi.getInstance().getTicketBpm());
         }
     }
 
@@ -188,14 +157,14 @@ export class AuthService {
      * The method return true if user is logged in on ecm provider
      */
     isEcmLoggedIn() {
-        return this.alfrescoApi.ecmAuth && !!this.alfrescoApi.ecmAuth.isLoggedIn();
+        return this.alfrescoApi.getInstance().ecmAuth && !!this.alfrescoApi.getInstance().ecmAuth.isLoggedIn();
     }
 
     /**
      * The method return true if user is logged in on bpm provider
      */
     isBpmLoggedIn() {
-        return this.alfrescoApi.bpmAuth && !!this.alfrescoApi.bpmAuth.isLoggedIn();
+        return this.alfrescoApi.getInstance().bpmAuth && !!this.alfrescoApi.getInstance().bpmAuth.isLoggedIn();
     }
 
     /**

ng2-components/ng2-alfresco-core/src/services/renditions.service.spec.ts

@@ -18,6 +18,8 @@
 import { ReflectiveInjector } from '@angular/core';
 import { AlfrescoApiService } from './alfresco-api.service';
 import { RenditionsService } from './renditions.service';
+import { SettingsService } from './settings.service';
+import { StorageService } from './storage.service';
 import { LogService } from './log.service';
 import { fakeRedition, fakeReditionCreated, fakeReditionsList } from '../assets/renditionsService.mock';
 
@@ -31,6 +33,8 @@ describe('RenditionsService', () => {
         injector = ReflectiveInjector.resolveAndCreate([
             AlfrescoApiService,
             RenditionsService,
+            SettingsService,
+            StorageService,
             LogService
         ]);
     });
@@ -38,7 +42,6 @@ describe('RenditionsService', () => {
     beforeEach(() => {
         jasmine.Ajax.install();
         service = injector.get(RenditionsService);
-        service.apiService.setInstance(new AlfrescoApi({}));
     });
 
     afterEach(() => {
@@ -60,7 +63,7 @@ describe('RenditionsService', () => {
 
     it('Create redition service should call the server with the ID passed and the asked encoding', (done) => {
         service.createRendition('fake-node-id', 'pdf').subscribe((res) => {
-            expect(jasmine.Ajax.requests.mostRecent().url).toBe('http://127.0.0.1:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/fake-node-id/renditions');
+            expect(jasmine.Ajax.requests.mostRecent().url).toBe('http://localhost:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/fake-node-id/renditions');
             done();
         });
 

ng2-components/ng2-alfresco-documentlist/src/assets/document-list.service.mock.ts

@@ -22,7 +22,7 @@ import { DocumentListService } from './../services/document-list.service';
 import {
     SettingsService,
     AuthService,
-    AlfrescoContentService,
+    ContentService,
     AlfrescoApiService,
     LogService
 } from 'ng2-alfresco-core';
@@ -36,7 +36,7 @@ export class DocumentListServiceMock extends DocumentListService {
     constructor(
         settings?: SettingsService,
         authService?: AuthService,
-        contentService?: AlfrescoContentService,
+        contentService?: ContentService,
         apiService?: AlfrescoApiService,
         logService?: LogService,
     ) {

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -21,7 +21,7 @@
                     <div class="document-list__this-space-is-empty">This folder is empty</div>
                     <div class="document-list__drag-drop">Drag and Drop</div>
                     <div class="document-list__any-files-here-to-add">any files here to add</div>
-                    <img [src]="baseComponentPath + '/../assets/images/empty_doc_lib.svg'" class="document-list__empty_doc_lib">
+                    <img [src]="baseComponentPath + '/assets/images/empty_doc_lib.svg'" class="document-list__empty_doc_lib">
                 </div>
             </template>
         </no-content-template>

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts

@@ -41,7 +41,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     baseComponentPath = module.id.replace('/components/document-list.js', '');
 
     @Input()
-    fallbackThubnail: string = this.baseComponentPath + '/../assets/images/ft_ic_miscellaneous.svg';
+    fallbackThubnail: string = this.baseComponentPath + '/assets/images/ft_ic_miscellaneous.svg';
 
     @Input()
     navigate: boolean = true;
@@ -120,7 +120,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         private ngZone: NgZone,
         private translateService: AlfrescoTranslateService) {
 
-        this.data = new ShareDataTableAdapter(this.documentListService, './..', []);
+        this.data = new ShareDataTableAdapter(this.documentListService, './', []);
 
         if (translateService) {
             translateService.addTranslationFolder('ng2-alfresco-documentlist', 'node_modules/ng2-alfresco-documentlist/src');

ng2-components/ng2-alfresco-login/demo/src/main.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { NgModule, Component } from '@angular/core';
+import { NgModule, Component, OnInit } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
@@ -32,14 +32,14 @@ import { LoginModule } from 'ng2-alfresco-login';
 
         <p style="width:120px;margin: 20px;">
         <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch1" class="mdl-switch__input" checked
+            <input type="checkbox" id="switch1" class="mdl-switch__input" [checked]="isECM"
              (click)="toggleECM(ecm.checked)" #ecm>
             <span class="mdl-switch__label">ECM</span>
         </label>
         </p>
         <p style="width:120px;margin: 20px;">
             <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-                <input type="checkbox" id="switch2" class="mdl-switch__input"
+                <input type="checkbox" id="switch2" class="mdl-switch__input" [checked]="isBPM"
                  (click)="toggleBPM(bpm.checked)" #bpm>
                 <span class="mdl-switch__label">BPM</span>
             </label>
@@ -59,14 +59,16 @@ import { LoginModule } from 'ng2-alfresco-login';
                        (onSuccess)="mySuccessMethod($event)"
                        (onError)="myErrorMethod($event)"></alfresco-login>`
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
     ecmHost: string = 'http://localhost:8080';
     bpmHost: string = 'http://localhost:9999';
     ticket: string;
     status: string = '';
-    providers: string = 'ECM';
+    providers: string = 'ALL';
     disableCsrf: boolean = false;
+    isECM: boolean = true;
+    isBPM: boolean = false;
 
     constructor(private authService: AuthService,
                 private settingsService: SettingsService,
@@ -77,6 +79,11 @@ export class AppComponent {
         settingsService.bpmHost = this.bpmHost;
     }
 
+    ngOnInit() {
+        this.settingsService.setProviders(this.providers);
+        this.initProviders();
+    }
+
     updateEcmHost(): void {
         this.settingsService.ecmHost = this.ecmHost;
     }
@@ -95,26 +102,49 @@ export class AppComponent {
         this.status = $event.value;
     }
 
-    toggleECM(checked) {
+    initProviders() {
-        if (checked && this.providers === 'BPM') {
+        if (this.providers === 'BPM') {
-            this.providers = 'ALL';
+            this.isECM = false;
-        } else if (checked) {
+            this.isBPM = true;
-            this.providers = 'ECM';
+        } else if (this.providers === 'ECM') {
-        } else if (!checked && this.providers === 'ALL') {
+            this.isECM = true;
-            this.providers = 'BPM';
+            this.isBPM = false;
+        } else if (this.providers === 'ALL') {
+            this.isECM = true;
+            this.isBPM = true;
         }
     }
 
-    toggleBPM(checked) {
+    toggleECM() {
-        if (checked && this.providers === 'ECM') {
+        this.isECM = !this.isECM;
-            this.providers = 'ALL';
+        this.settingsService.setProviders(this.updateProvider());
-        } else if (checked) {
-            this.providers = 'BPM';
-        } else if (!checked && this.providers === 'ALL') {
-            this.providers = 'ECM';
-        }
     }
 
+    toggleBPM() {
+        this.isBPM = !this.isBPM;
+        this.settingsService.setProviders(this.updateProvider());
+    }
+
+    updateProvider() {
+        if (this.isBPM && this.isECM) {
+            this.providers = 'ALL';
+            return this.providers;
+        }
+
+        if (this.isECM) {
+            this.providers = 'ECM';
+            return this.providers;
+        }
+
+        if (this.isBPM) {
+            this.providers = 'BPM';
+            return this.providers;
+        }
+
+        this.providers = '';
+        return this.providers;
+    };
+
     toggleCSRF() {
         this.disableCsrf = !this.disableCsrf;
     }

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html

@@ -3,7 +3,8 @@
     <div class="login-card-wide mdl-card mdl-shadow--4dp">
         <form [formGroup]="form" (submit)="onSubmit(form.value, $event)">
             <div class="mdl-card__title alfresco-logo">
-                <img class="center" [src]="logoImageUrl || baseComponentPath + '/../assets/images/alfresco-logo.svg'" alt="{{'LOGIN.LOGO' | translate }}">
+                <img class="center" [src]="logoImageUrl || baseComponentPath + '/../assets/images/alfresco-logo.svg'"
+                     alt="{{'LOGIN.LOGO' | translate }}">
             </div>
             <div class="mdl-card__supporting-text">
                 <div>

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts

@@ -127,6 +127,7 @@ export class AlfrescoLoginComponent implements OnInit {
      * @param data
      */
     onValueChanged(data: any) {
+        this.success = false;
         this.disableError();
         for (let field in this.formError) {
             if (field) {

ng2-components/ng2-alfresco-userinfo/demo/src/main.ts

@@ -33,15 +33,15 @@ import { LoginModule } from 'ng2-alfresco-login';
 
                 <p style="width:120px;margin: 20px;">
                 <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-                    <input type="checkbox" id="switch1" class="mdl-switch__input" checked
+                    <input type="checkbox" id="switch1" class="mdl-switch__input" [checked]="isECM"
-                     (click)="toggleECM(ecm.checked)" #ecm>
+                     (click)="toggleECM()" #ecm>
                     <span class="mdl-switch__label">ECM</span>
                 </label>
                 </p>
                 <p style="width:120px;margin: 20px;">
                     <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-                        <input type="checkbox" id="switch2" class="mdl-switch__input"
+                        <input type="checkbox" id="switch2" class="mdl-switch__input" [checked]="isBPM"
-                         (click)="toggleBPM(bpm.checked)" #bpm>
+                         (click)="toggleBPM()" #bpm>
                         <span class="mdl-switch__label">BPM</span>
                     </label>
                 </p>
@@ -78,12 +78,14 @@ class UserInfoDemo implements OnInit {
     userToLogin: string = 'admin';
     password: string = 'admin';
     loginErrorMessage: string;
-    providers: string = 'BPM';
+    providers: string = 'ALL';
 
     private authenticated: boolean;
     private token: any;
 
     disableCsrf: boolean = false;
+    isECM: boolean = true;
+    isBPM: boolean = false;
 
     constructor(private authService: AuthService,
                 private settingsService: SettingsService,
@@ -94,6 +96,7 @@ class UserInfoDemo implements OnInit {
 
     ngOnInit() {
         this.settingsService.setProviders(this.providers);
+        this.initProviders();
     }
 
     logout() {
@@ -115,33 +118,60 @@ class UserInfoDemo implements OnInit {
             });
     }
 
-    isLoggedIn(): boolean {
+    initProviders() {
-        return this.authService.isLoggedIn();
+        if (this.providers === 'BPM') {
+            this.isECM = false;
+            this.isBPM = true;
+        } else if (this.providers === 'ECM') {
+            this.isECM = true;
+            this.isBPM = false;
+        } else if (this.providers === 'ALL') {
+            this.isECM = true;
+            this.isBPM = true;
+        }
     }
 
-    toggleECM(checked) {
+    toggleECM() {
-        if (checked && this.providers === 'BPM') {
+        this.isECM = !this.isECM;
+        this.settingsService.setProviders(this.updateProvider());
+    }
+
+    toggleBPM() {
+        this.isBPM = !this.isBPM;
+        this.settingsService.setProviders(this.updateProvider());
+    }
+
+    updateProvider() {
+        if (this.isBPM && this.isECM) {
             this.providers = 'ALL';
-        } else if (checked) {
+            return this.providers;
+        }
+
+        if (this.isECM) {
             this.providers = 'ECM';
-        } else {
+            return this.providers;
-            this.providers = undefined;
         }
-    }
 
-    toggleBPM(checked) {
+        if (this.isBPM) {
-        if (checked && this.providers === 'ECM') {
-            this.providers = 'ALL';
-        } else if (checked) {
             this.providers = 'BPM';
-        } else {
+            return this.providers;
-            this.providers = undefined;
         }
-    }
+
+        this.providers = '';
+        return this.providers;
+    };
 
     toggleCSRF() {
         this.disableCsrf = !this.disableCsrf;
     }
+
+    updateEcmHost(): void {
+        this.settingsService.ecmHost = this.ecmHost;
+    }
+
+    updateBpmHost(): void {
+        this.settingsService.bpmHost = this.bpmHost;
+    }
 }
 
 @NgModule({

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html

@@ -21,7 +21,7 @@
                         <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 + '/../assets/images/ecm-background.png')+')'">
+                                 [style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/assets/images/ecm-background.png')+')'">
                                 <img class="profile-picture"
                                      id="ecm-user-detail-image"
                                      alt="ecm-profile-image"
@@ -52,7 +52,7 @@
                         <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 + '/../assets/images/bpm-background.png')+')'">
+                                 [style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/assets/images/bpm-background.png')+')'">
                                 <img class="profile-picture"
                                      id="bpm-user-detail-image"
                                      alt="bpm-profile-image"

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts

@@ -50,7 +50,7 @@ export class UserInfoComponent implements OnInit {
 
     bpmUser: BpmUserModel;
 
-    anonymousImageUrl: string = this.baseComponentPath + '/../assets/images/anonymous.gif';
+    anonymousImageUrl: string = this.baseComponentPath + '/assets/images/anonymous.gif';
 
     bpmUserImage: any;
 

ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.ts

@@ -29,7 +29,7 @@ import { BpmUserModel } from '../models/bpm-user.model';
 @Injectable()
 export class BpmUserService {
 
-    constructor(private alfrescoJsApi: AlfrescoApiService,
+    constructor(private apiService: AlfrescoApiService,
                 private logService: LogService) {
     }
 
@@ -38,13 +38,13 @@ export class BpmUserService {
      * @param userName - the user name
      */
     getCurrentUserInfo(): Observable<BpmUserModel> {
-        return Observable.fromPromise(this.alfrescoJsApi.getInstance().activiti.profileApi.getProfile())
+        return Observable.fromPromise(this.apiService.getInstance().activiti.profileApi.getProfile())
             .map((data) => <BpmUserModel> data)
             .catch(err => this.handleError(err));
     }
 
     getCurrentUserProfileImage(): string {
-        return this.alfrescoJsApi.getInstance().activiti.profileApi.getProfilePictureUrl();
+        return this.apiService.getInstance().activiti.profileApi.getProfilePictureUrl();
     }
 
     /**