#878 doc,demo and code improvements userinfo component

ng2-components/ng2-activiti-analytics/README.md

@@ -302,6 +302,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-activiti-diagrams/README.md

@@ -211,6 +211,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-activiti-form/README.md

@@ -371,6 +371,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-activiti-processlist/README.md

@@ -411,6 +411,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-activiti-tasklist/README.md

@@ -343,6 +343,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-core/README.md

@@ -246,6 +246,16 @@ before performing unit testing.
 npm run coverage
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -105,10 +105,10 @@ export class AlfrescoAuthenticationService {
      * @returns {Observable<R>|Observable<T>}
      */
     public logout() {
+        this.removeTicket();
         return Observable.fromPromise(this.callApiLogout())
             .map(res => <any> res)
             .do(response => {
-                this.removeTicket();
                 return response;
             })
             .catch(this.handleError);

ng2-components/ng2-alfresco-datatable/README.md

@@ -482,6 +482,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-documentlist/README.md

@@ -779,6 +779,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-login/README.md

@@ -312,6 +312,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-search/README.md

@@ -285,6 +285,16 @@ platformBrowserDynamic().bootstrapModule(AppModule);
  npm start
  ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
  ## License
 
  [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-tag/README.md

@@ -308,6 +308,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-upload/README.md

@@ -311,6 +311,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-userinfo/README.md

@@ -1,4 +1,5 @@
 # Alfresco User Info Component for Angular 2
+
 <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
@@ -11,8 +12,8 @@
   <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'>
+  <a href='https://www.npmjs.com/package/ng2-alfresco-userinfo'>
-    <img src='https://img.shields.io/npm/dt/ng2-alfresco-login.svg' alt='npm downloads' />
+    <img src='https://img.shields.io/npm/dt/ng2-alfresco-userinfo.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' />
@@ -31,78 +32,130 @@
   </a>
 </p>
 
-### Node
-To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
-
-
 ## Prerequisites
 
 Before you start using this development framework, make sure you have installed all required software and done all the
-necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
+necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
 
-## Installation
+## Install
 
-```bash
+Follow the 3 steps below:
-npm install ng2-alfresco-userinfo --save
-```
-## Dependencies
 
-Add the following dependency to your index.html:
+1. Npm
-```html
-<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
-```
 
-You must separately install the following libraries for your application:
+    ```sh
+    npm install ng2-alfresco-userinfo --save
+    ```
 
-- [ng2-translate](https://github.com/ocombe/ng2-translate)
+2. Html
-- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
 
-```sh
+    Include these dependencies in your index.html page:
-npm install --save ng2-translate ng2-alfresco-core
-```
 
-#### Material Design Lite
+    ```html
 
-The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
+      <!-- Google Material Design Lite -->
-design dependency to your project:
+      <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+      <script src="node_modules/material-design-lite/material.min.js"></script>
+      <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 
-```sh
+      <!-- Polyfill(s) for Safari (pre-10.x) -->
-npm install --save material-design-icons material-design-lite
+      <script src="node_modules/intl/dist/Intl.min.js"></script>
-```
+      <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
 
-Also make sure you include these dependencies in your `index.html` file:
+      <!-- Polyfill(s) for older browsers -->
+      <script src="node_modules/core-js/client/shim.min.js"></script>
+      <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
+      <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
 
-```html
+      <!-- Polyfill(s) for dialogs -->
-<!-- Google Material Design Lite -->
+      <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+      <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-<script src="node_modules/material-design-lite/material.min.js"></script>
+      <style>._dialog_overlay { position: static !important; } </style>
-<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-```
 
-## Example
+      <!-- Modules  -->
+      <script src="node_modules/zone.js/dist/zone.js"></script>
+      <script src="node_modules/reflect-metadata/Reflect.js"></script>
+      <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    ```
+
+3. SystemJs
+
+    Add the following components to your systemjs.config.js file:
+
+    - ng2-translate
+    - alfresco-js-api
+    - ng2-alfresco-core
+    - ng2-alfresco-userinfo
+
+    Please refer to the following example file: [systemjs.config.js](demo/systemjs
+    .config.js) .
 
 ## Basic usage
 
 ```html
-<alfresco-document-list
+<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
-    [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 |
+| `ecmBackgroundImage` | string | ng2-alfresco-userinfo/src/img/orangeBanner.gif  | Custom path for the background banner image for ECM  users |
-| bpmBackgroundImage | string |  | Custom path for the background banner image for BPM users |
+| `bpmBackgroundImage` | string | ng2-alfresco-userinfo/src/img/blueBanner.gif | Custom path for the background banner image for BPM users |
-| menuOpenType | string | bottom-right  | Custom choice for opening menu bottom right or bottom left  |
+| `menuOpenType` | string | right  | Custom choice for opening menu bottom : `right` or `left`  |
-| fallBackThumbnailImage | string | image at ng2-alfresco-userinfo/src/img/anonymous.gif | Fallback image for profile when thubnail is missing|
+| `fallBackThumbnailImage` | string | 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.
 
+## Build from sources
+
+Alternatively you can build component from sources with the following commands:
+
+
+```sh
+npm install
+npm run build
+```
+
+### Build the files and keep watching for changes
+
+```sh
+$ npm run build:w
+```
+
+## Running unit tests
+
+```sh
+npm test
+```
+
+### Running unit tests in browser
+
+```sh
+npm test-browser
+```
+
+This task rebuilds all the code, runs tslint, license checks and other quality check tools
+before performing unit testing.
+
+### Code coverage
+
+```sh
+npm run coverage
+```
+
+## Demo
+
+If you want have a demo of how the component works, please check the demo folder :
+
+```sh
+cd demo
+npm install
+npm start
+```
+
 ## NPM scripts
 
 | Command | Description |
@@ -113,10 +166,6 @@ If user is logged in with ECM and BPM the ECM image will be showed.
 | npm run test-browser | Run unit tests in the browser
 | npm run coverage | Run unit tests and display code coverage report |
 
-## History
+## License
 
-For detailed changelog, check [Releases](https://github.com/alfresco/ng2-alfresco-userinfo/releases).
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
-
-## Contributors
-
-[Contributors](https://github.com/alfresco/ng2-alfresco-userinfo/graphs/contributors)

ng2-components/ng2-alfresco-userinfo/demo/package.json

@@ -16,28 +16,6 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "material-design-icons": "2.2.3",
-    "material-design-lite": "1.2.1",
-    "ng2-translate": "2.5.0",
-
-    "alfresco-js-api": "^0.3.0",
-    "ng2-alfresco-core": "^0.3.0",
     "ng2-alfresco-userinfo": "0.3.2"
   },
   "devDependencies": {

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

@@ -43,7 +43,7 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfr
                  </p>
                </div>
                <div *ngIf="isLoggedIn()">
-                   <ng2-alfresco-userinfo></ng2-alfresco-userinfo>
+                   <ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo>
                </div>
                <p></p>
                <div>

ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js

@@ -38,7 +38,6 @@
                 defaultExtension: 'js'
             },
             'ng2-translate': { defaultExtension: 'js' },
-
             'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
             'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}

ng2-components/ng2-alfresco-userinfo/package.json

@@ -31,24 +31,6 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "alfresco-js-api": "^0.3.0",
-    "ng2-translate": "2.5.0",
     "ng2-alfresco-core": "0.3.2"
   },
   "devDependencies": {

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

@@ -15,12 +15,14 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, AfterViewChecked } 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, AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
+
+declare let componentHandler: any;
 
 @Component({
     selector: 'ng2-alfresco-userinfo',
@@ -28,8 +30,7 @@ import { AlfrescoSettingsService, AlfrescoTranslationService } from 'ng2-alfresc
     styleUrls: ['./user-info.component.css'],
     templateUrl: './user-info.component.html'
 })
-
+export class UserInfoComponent implements AfterViewChecked, OnInit {
-export class UserInfoComponent implements OnInit {
 
     @Input()
     ecmBackgroundImage: string;
@@ -53,16 +54,27 @@ export class UserInfoComponent implements OnInit {
 
     constructor(private ecmUserService: EcmUserService,
                 private bpmUserService: BpmUserService,
-                public setting: AlfrescoSettingsService,
+                private authService: AlfrescoAuthenticationService,
                 private translate: AlfrescoTranslationService) {
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-alfresco-userinfo/src');
         }
     }
 
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
     ngOnInit() {
-        if (this.setting.getProviders() === 'ECM' ||
+        this.getEcmUserInfo();
-            this.setting.getProviders() === 'ALL') {
+        this.getBpmUserInfo();
+    }
+
+    getEcmUserInfo(): void {
+        if (this.authService.isEcmLoggedIn()) {
             this.ecmUserService.getCurrentUserInfo()
                 .subscribe((res) => {
                         this.ecmUser = <EcmUserModel> res;
@@ -70,9 +82,10 @@ export class UserInfoComponent implements OnInit {
                     }
                 );
         }
+    }
 
-        if (this.setting.getProviders() === 'BPM' ||
+    getBpmUserInfo(): void {
-            this.setting.getProviders() === 'ALL') {
+        if (this.authService.isBpmLoggedIn()) {
             this.bpmUserService.getCurrentUserInfo()
                 .subscribe((res) => {
                     this.bpmUser = <BpmUserModel> res;

ng2-components/ng2-alfresco-viewer/README.md

@@ -267,6 +267,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

ng2-components/ng2-alfresco-webscript/README.md

@@ -328,6 +328,16 @@ npm install
 npm start
 ```
 
+## NPM scripts
+
+| Command | Description |
+| --- | --- |
+| npm run build | Build component |
+| npm run build:w | Build component and keep watching the changes |
+| npm run test | Run unit tests in the console |
+| npm run test-browser | Run unit tests in the browser
+| npm run coverage | Run unit tests and display code coverage report |
+
 ## License
 
 [Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)