Added the change for user image

demo-shell-ng2/app/components/profile/AboutComponent.java

@@ -0,0 +1,55 @@
+/*!
+ * @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 { Component, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import {
+    ALFRESCO_DATATABLE_DIRECTIVES,
+    ObjectDataTableAdapter /*,
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataColumn*/
+} from 'ng2-alfresco-datatable';
+
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'about-page',
+    templateUrl: './about.component.html',
+    directives: [ALFRESCO_DATATABLE_DIRECTIVES]
+})
+export class AboutComponent implements OnInit {
+
+    data: ObjectDataTableAdapter;
+
+    constructor(private http: Http) {}
+
+    ngOnInit() {
+        // this.data = new ObjectDataTableAdapter();
+        this.http.get('/versions').subscribe(response => {
+            let data = response.json() || {};
+            let packages = data.packages || [];
+
+            this.data = new ObjectDataTableAdapter(packages, [
+                { type: 'text', key: 'name', title: 'Name', sortable: true },
+                { type: 'text', key: 'version', title: 'Version', sortable: true }
+            ]);
+        });
+
+    }
+}

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

@@ -11,7 +11,43 @@ import {
 
 @Component({
   selector: 'my-app',
-  template: `<h4>START</h4><ng2-alfresco-userinfo [userEmail]="'test'"></ng2-alfresco-userinfo>`,
+  styles: [`:host h1 { font-size:22px }`],
+  template: `
+<h4> START DEMO USERINFO </h4>
+<div style="border-radius: 8px; position: absolute; background-color:papayawhip; color: cadetblue; left: 320px; top: 30px; z-index: 1;">
+  <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"
+       (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" checked
+           (click)="toggleBPM(bpm.checked)" #bpm>
+          <span class="mdl-switch__label">BPM</span>
+      </label>
+  </p>
+</div>
+<div *ngIf="isLoggedIn()">
+    <ng2-alfresco-userinfo [userEmail]=userToLogin></ng2-alfresco-userinfo>
+</div>
+<p></p>
+<div>
+    <p>
+        <span>Username</span>
+        <input id="user" type="text" [(ngModel)]="userToLogin" value="admin"/>
+    </p>
+    <p>
+        <span>Password</span>
+        <input id="passw" type="password" [(ngModel)]="password" value="admin"/>
+    </p>
+<button type="submit" (click)="attemptLogin()"> Login !</button>
+</div>
+<span>{{loginErrorMessage}}</span>
+
+<button (click)="logout()">Logout</button>`,
   directives: [ UserInfoComponent ],
   providers: [AlfrescoAuthenticationService, AlfrescoSettingsService]
 })
@@ -19,20 +55,33 @@ import {
 
 class UserInfoDemo implements OnInit {
 
+      public userToLogin: string = 'admin';
+      public password: string = 'admin';
+      public loginErrorMessage: string;
+      public providers: string = 'BPM';
       private authenticated: boolean;
       private token: any;
 
       constructor(private authService: AlfrescoAuthenticationService,
                   private settingsService: AlfrescoSettingsService) {
-            this.settingsService.setProviders('ALL');
       }
 
-      public ngOnInit(): void {
-          this.login();
+      ngOnInit() {
+        this.settingsService.setProviders(this.providers);
       }
 
-    login() {
-        this.authService.login('test', 'test').subscribe(
+      attemptLogin() {
+          this.loginErrorMessage = '';
+          this.login(this.userToLogin, this.password);
+      }
+
+      logout() {
+          this.authService.logout();
+      }
+
+      login(user, password) {
+          this.settingsService.setProviders(this.providers);
+          this.authService.login(user, password).subscribe(
               token => {
                   console.log(token);
                   this.token = token;
@@ -41,8 +90,33 @@ class UserInfoDemo implements OnInit {
               error => {
                   console.log(error);
                   this.authenticated = false;
+                  this.loginErrorMessage = error;
               });
       }
+
+      isLoggedIn(): boolean {
+          return this.authService.isLoggedIn();
+      }
+
+      toggleECM(checked) {
+          if (checked && this.providers === 'BPM') {
+              this.providers = 'ALL';
+          } else if (checked) {
+              this.providers = 'ECM';
+          } else {
+              this.providers = undefined;
+          }
+      }
+
+      toggleBPM(checked) {
+          if (checked && this.providers === 'ECM') {
+              this.providers = 'ALL';
+          } else if (checked) {
+              this.providers = 'BPM';
+          } else {
+              this.providers = undefined;
+          }
+      }
 }
 
 bootstrap(UserInfoDemo, [

ng2-components/ng2-alfresco-userinfo/src/services/bpmUser.service.ts

@@ -18,7 +18,7 @@
 import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs/Rx';
 import { BpmUserModel } from '../models/bpmUser.model';
 /**
  *
@@ -46,10 +46,25 @@ export class BPMUserService {
             .catch(this.handleError);
     }
 
+    /**
+     * get User Information via ECM
+     * @param userName - the user name
+     */
+    getCurrentUserProfileImage(): Observable<BpmUserModel> {
+        return Observable.fromPromise(this.callApiGetProfileImage())
+            .do(
+                 data => console.log('Node data', data)
+                ) // eyeball results in the console
+            .catch(this.handleError);
+    }
+
+    private callApiGetProfileImage() {
+        return this.authService.getAlfrescoApi().activiti.profileApi.getProfilePicture();
+    }
+
     private callApiGetProfile() {
         return this.authService.getAlfrescoApi().activiti.profileApi.getProfile();
     }
-
     /**
      * Throw the error
      * @param error

ng2-components/ng2-alfresco-userinfo/src/services/ecmUser.service.ts

@@ -18,7 +18,7 @@
 import { AlfrescoApiService } from 'ng2-alfresco-core';
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs/Rx';
 import { EcmUserModel } from '../models/ecmUser.model';
 /**
  *

ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css

@@ -0,0 +1,14 @@
+.profile-image {
+  text-align: center;
+  border-radius: 90%;
+  width: 40px;
+  margin-right: 0%;
+  cursor: pointer;
+  border: 2px solid #999999;
+}
+
+.button-profile {
+  display: inline-block;
+  margin-right: -10px;
+  border: 0px;
+}

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

@@ -1,139 +1,9 @@
-<main class="mdl-layout__content">
-<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
-    <!-- Tab Bars -->
-    <div class="mdl-tabs__tab-bar">
-        <a *ngIf="ecmUser" href="#ecm-panel" class="mdl-tabs__tab is-active">ECM</a>
-        <a *ngIf="bpmUser" href="#bpm-panel" class="mdl-tabs__tab">BPM</a>
-    </div>
-
-    <!-- MDL tab panels, is-active to denote currently active -->
-    <div *ngIf="ecmUser" class="mdl-tabs__panel" id="ecm-panel">
-        <ul class="demo-list-control mdl-list">
-            <li class="mdl-list__item">
-                    <span class="mdl-list__item-primary-content">
-                      <i class="material-icons  mdl-list__item-avatar">person</i>
-                      {{ecmUser.firstName}} {{ecmUser.lastName}}
-                    </span>
-            </li>
-            <li *ngIf="ecmUser.id" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Id: </span>
-                <label title="Id">
-                    {{ecmUser.id}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.description" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Description: </span>
-                <label title="description">
-                    {{ecmUser.description}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.email" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Email: </span>
-                <label title="email">
-                    {{ecmUser.email}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.skypeId" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Skype Id: </span>
-                <label title="skypeId">
-                    {{ecmUser.skypeId}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.googleId" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Google Id: </span>
-                <label title="googleId">
-                    {{ecmUser.googleId}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.instantMessageId" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Instant Message Id: </span>
-                <label title="instantMessageId">
-                    {{ecmUser.instantMessageId}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.jobTitle" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Job Title: </span>
-                <label title="jobTitle">
-                    {{ecmUser.jobTitle}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.location" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Location: </span>
-                <label title="location">
-                    {{ecmUser.location}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.mobile" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Mobile: </span>
-                <label title="mobile">
-                    {{ecmUser.mobile}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.telephone" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Telephone: </span>
-                <label title="telephone">
-                    {{ecmUser.telephone}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.userStatus" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">User Status: </span>
-                <label title="userStatus">
-                    {{ ecmUser.userStatus? 'Active':'Inactive' }}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.enabled" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Enabled: </span>
-                <label title="enabled">
-                    {{ecmUser.enabled}}
-                </label>
-            </li>
-            <li *ngIf="ecmUser.emailNotificationsEnabled" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Email Notifications: </span>
-                <label title="emailNotificationsEnabled">
-                    {{ecmUser.emailNotificationsEnabled? 'Enabled': 'Disabled'}}
-                </label>
-            </li>
-        </ul>
-    </div>
-    <div *ngIf="bpmUser" class="mdl-tabs__panel" id="bpm-panel">
-        <ul class="demo-list-control mdl-list">
-            <li class="mdl-list__item">
-                    <span class="mdl-list__item-primary-content">
-                      <i class="material-icons  mdl-list__item-avatar">person</i>
-                      {{bpmUser.fullname}}
-                    </span>
-            </li>
-            <li *ngIf="bpmUser.id" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Id: </span>
-                <label title="Id">
-                    {{bpmUser.id}}
-                </label>
-            </li>
-            <li *ngIf="bpmUser.email" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Email: </span>
-                <label title="email">
-                    {{bpmUser.email}}
-                </label>
-            </li>
-            <li *ngIf="bpmUser.status" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Status: </span>
-                <label title="jobTitle">
-                    {{bpmUser.status}}
-                </label>
-            </li>
-            <li *ngIf="bpmUser.tenantName" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Tenant Name: </span>
-                <label title="tenantName">
-                    {{bpmUser.tenantName}}
-                </label>
-            </li>
-            <li *ngIf="bpmUser.company" class="mdl-list__item">
-                <span class="mdl-list__item-primary-content">Company: </span>
-                <label title="company">
-                    {{bpmUser.company}}
-                </label>
-            </li>
-        </ul>
+<div id="profile-container">
+    <div class="button-profile" id="demo-menu-lower-right" data-automation-id="right-action-menu">
+        <span *ngIf="ecmUser">{{ecmUser.firstName}} {{ecmUser.lastName}}</span>
+        <span *ngIf="bpmUser">{{bpmUser.fullname}}</span>
+        <img id="logged-user-img"
+             src="{{ getUserAvatar() }}"
+             class="profile-image"/>
     </div>
 </div>
-</main>

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

@@ -1,3 +1,19 @@
+/*!
+ * @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 { Component, OnInit, Input } from '@angular/core';
 import { ECMUserService } from './services/ecmUser.service';
@@ -11,7 +27,7 @@ declare let __moduleName: string;
 @Component({
     selector: 'ng2-alfresco-userinfo',
     moduleId: __moduleName,
-    styles: [`:host h1 { font-size:22px }`],
+    styleUrls: ['./userinfo.component.css'],
     templateUrl: './userinfo.component.html',
     providers: [ ECMUserService, BPMUserService, AlfrescoContentService ]
 })
@@ -23,6 +39,10 @@ export class UserInfoComponent implements OnInit {
 
     private  ecmUser: EcmUserModel;
     private  bpmUser: BpmUserModel;
+    public   bpmUserImage: any;
+    public   ecmUserImage: any;
+
+    private baseComponentPath = __moduleName.replace('userinfo.component.js', '');
 
     constructor(private ecmUserService: ECMUserService,
                 private bpmUserService: BPMUserService,
@@ -32,15 +52,45 @@ export class UserInfoComponent implements OnInit {
     ngOnInit() {
         this.ecmUserService.getUserInfo(this.userEmail)
                                 .subscribe(
-                                      res => this.ecmUser = <EcmUserModel> res
+                                      res => {
+                                        this.ecmUser = <EcmUserModel> res;
+                                        this.getUserProfileImage();
+                                        console.log(this.ecmUserImage);
+                                      }
                                 );
         this.bpmUserService.getCurrentUserInfo()
                                 .subscribe(
-                                      res => this.bpmUser = <BpmUserModel> res
+                                      res => {
+                                        this.bpmUser = <BpmUserModel> res;
+                                      }
                                 );
+
     }
 
-    public getDocumentThumbnailUrl(avatarId: string): string {
-        return this.contentService.getDocumentThumbnailUrl(document);
+    private getUserProfileImage() {
+      if (this.ecmUser && this.ecmUser.avatarId) {
+          let nodeObj = { entry: { id: this.ecmUser.avatarId } };
+          this.ecmUserImage = this.contentService.getContentUrl(nodeObj);
       }
+      if (this.bpmUser) {
+          this.bpmUserService.getCurrentUserProfileImage()
+                                .subscribe(
+                                      res => this.bpmUserImage = res
+                                );
+      }
+    }
+
+    public getUserAvatar() {
+      if (this.ecmUserImage) {
+         return this.ecmUserImage;
+      }
+      if (this.bpmUserImage) {
+         return this.bpmUserImage;
+      }
+      if (!this.ecmUserImage && !this.bpmUserImage) {
+         return  this.baseComponentPath + '/img/anonymous.gif';
+      }
+    }
+
+
 }