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

2025-05-26 17:24:56 +00:00 · 2017-01-10 16:59:08 +00:00 · 2017-01-10 16:59:08 +00:00 · 9fb085eb3a
commit 9fb085eb3a
parent c5dca890b7
18 changed files with 222 additions and 134 deletions
--- a/ng2-components/ng2-alfresco-core/src/services/AlfrescoAuthentication.service.ts
+++ b/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.warn('Warning: AlfrescoAuthenticationService is deprecated. Use AuthService instead.');
+        logService.error('ERROR: AlfrescoAuthenticationService is deprecated. Use AuthService instead.');
    }
 }
--- a/ng2-components/ng2-alfresco-core/src/services/AlfrescoContent.service.ts
+++ b/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.warn('Warning: AlfrescoContentService is deprecated. Use ContentService instead.');
+        logService.error('ERROR: AlfrescoContentService is deprecated. Use ContentService instead.');
    }
 }
--- a/ng2-components/ng2-alfresco-core/src/services/AlfrescoSettings.service.ts
+++ b/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.warn('Warning: AlfrescoSettingsService is deprecated. Use SettingsService instead.');
+        logService.error('ERROR: AlfrescoSettingsService is deprecated. Use SettingsService instead.');
    }
 }
--- a/ng2-components/ng2-alfresco-core/src/services/AlfrescoTranslation.service.ts
+++ b/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.warn('Warning: AlfrescoTranslationService is deprecated. Use AlfrescoTranslateService instead.');
+        logService.error('ERROR: AlfrescoTranslationService is deprecated. Use AlfrescoTranslateService instead.');
    }

 }
--- a/ng2-components/ng2-alfresco-core/src/services/alfresco-api.service.ts
+++ b/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) {
-        this._instance = value;
-    }
+    constructor(private settingsService: SettingsService,
+                private storage: StorageService) {

-    constructor() {
-        this._instance = <AlfrescoApi>new alfrescoApi({
-            provider: 'ALL',
-            ticketEcm: null,
-            ticketBpm: null,
-            hostEcm: 'http://localhost:8080',
-            hostBpm: 'http://localhost:9999',
-            contextRoot: 'alfresco',
-            disableCsrf: true
+        this.provider = this.settingsService.getProviders();
+        this.ticketEcm = this.getTicketEcm();
+        this.ticketBpm = this.getTicketBpm();
+        this.hostEcm = this.settingsService.ecmHost;
+        this.hostBpm = this.settingsService.bpmHost;
+        this.contextRoot = 'alfresco';
+        this.disableCsrf = false;
+
+        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');
+    }
+
 }
--- a/ng2-components/ng2-alfresco-core/src/services/auth.service.spec.ts
+++ b/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');
        });

    });
--- a/ng2-components/ng2-alfresco-core/src/services/auth.service.ts
+++ b/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) {
-            return this.alfrescoApi.logout();
+        if (this.alfrescoApi.getInstance()) {
+            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()) {
-            this.storage.setItem('ticket-ECM', this.alfrescoApi.getTicketEcm());
+        if (this.alfrescoApi.getInstance() && this.alfrescoApi.getInstance().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()) {
-            this.storage.setItem('ticket-BPM', this.alfrescoApi.getTicketBpm());
+        if (this.alfrescoApi.getInstance() && this.alfrescoApi.getInstance().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();
    }

    /**
--- a/ng2-components/ng2-alfresco-core/src/services/renditions.service.spec.ts
+++ b/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();
        });

--- a/ng2-components/ng2-alfresco-documentlist/src/assets/document-list.service.mock.ts
+++ b/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,
    ) {
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
+++ b/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>
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts
+++ b/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');
--- a/ng2-components/ng2-alfresco-login/demo/src/main.ts
+++ b/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) {
-        if (checked && this.providers === 'BPM') {
-            this.providers = 'ALL';
-        } else if (checked) {
-            this.providers = 'ECM';
-        } else if (!checked && this.providers === 'ALL') {
-            this.providers = 'BPM';
+    initProviders() {
+        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;
        }
    }

-    toggleBPM(checked) {
-        if (checked && this.providers === 'ECM') {
-            this.providers = 'ALL';
-        } else if (checked) {
-            this.providers = 'BPM';
-        } else if (!checked && this.providers === 'ALL') {
-            this.providers = 'ECM';
-        }
+    toggleECM() {
+        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';
+            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;
    }
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
+++ b/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>
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
+++ b/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) {
--- a/ng2-components/ng2-alfresco-userinfo/demo/src/main.ts
+++ b/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
-                     (click)="toggleECM(ecm.checked)" #ecm>
+                    <input type="checkbox" id="switch1" class="mdl-switch__input" [checked]="isECM"
+                     (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"
-                         (click)="toggleBPM(bpm.checked)" #bpm>
+                        <input type="checkbox" id="switch2" class="mdl-switch__input" [checked]="isBPM"
+                         (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 {
-        return this.authService.isLoggedIn();
+    initProviders() {
+        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) {
-        if (checked && this.providers === 'BPM') {
+    toggleECM() {
+        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 {
-            this.providers = undefined;
+            return this.providers;
        }
-    }

-    toggleBPM(checked) {
-        if (checked && this.providers === 'ECM') {
-            this.providers = 'ALL';
-        } else if (checked) {
+        if (this.isBPM) {
            this.providers = 'BPM';
-        } else {
-            this.providers = undefined;
+            return this.providers;
        }
-    }
+
+        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({
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html
+++ b/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"
--- a/ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts
+++ b/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;

--- a/ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.ts
+++ b/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();
    }

    /**