Add missing user info reference

includes minor code readability improvements

demo-shell-ng2/app/app.component.css

@@ -4,9 +4,10 @@
     }
 }
 
-.mdl-layout-title{
+.mdl-layout-title {
     font-size: 17px;
 }
-.user-profile{
+
+.user-profile {
     margin-right: 3px;
 }

demo-shell-ng2/app/app.component.html

@@ -13,8 +13,7 @@
 
                 <!-- Navigation. We hide it in small screens. -->
                 <nav class="mdl-navigation mdl-layout--large-screen-only">
-                    <a class="mdl-navigation__link" data-automation-id="files" href=""
+                    <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
-                       routerLink="/files">DocumentList</a>
                     <a class="mdl-navigation__link" data-automation-id="datatable" href="" routerLink="/datatable">DataTable</a>
                     <a class="mdl-navigation__link" data-automation-id="uploader" href="" routerLink="/uploader">Uploader</a>
                     <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Activiti</a>
@@ -36,16 +35,26 @@
 
                 <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                     for="demo-menu-lower-right">
-                    <li class="mdl-menu__item" (click)="changeLanguage('en')"><span
+                    <li class="mdl-menu__item" (click)="changeLanguage('en')">
-                        class="flag-icon flag-icon-gb"></span><label tabindex="0"> English</label></li>
+                        <span class="flag-icon flag-icon-gb"></span>
-                    <li class="mdl-menu__item" (click)="changeLanguage('gr')"><span
+                        <label tabindex="0"> English</label>
-                        class="flag-icon flag-icon-gr"></span><label tabindex="0"> Greek</label></li>
+                    </li>
-                    <li class="mdl-menu__item" (click)="changeLanguage('it')"><span
+                    <li class="mdl-menu__item" (click)="changeLanguage('gr')">
-                        class="flag-icon flag-icon-it"></span><label tabindex="0"> Italian</label></li>
+                        <span class="flag-icon flag-icon-gr"></span>
-                    <a class="mdl-menu__item" routerLink="/about"><label tabindex="0">About</label></a>
+                        <label tabindex="0"> Greek</label>
-                    <a *ngIf="!isLoggedIn()" class="mdl-menu__item" routerLink="/login"><label
+                    </li>
-                        tabindex="0">Login</label></a>
+                    <li class="mdl-menu__item" (click)="changeLanguage('it')">
-                    <li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)"><label tabindex="0">Logout</label>
+                        <span class="flag-icon flag-icon-it"></span>
+                        <label tabindex="0"> Italian</label>
+                    </li>
+                    <a class="mdl-menu__item" routerLink="/about">
+                        <label tabindex="0">About</label>
+                    </a>
+                    <a *ngIf="!isLoggedIn()" class="mdl-menu__item" routerLink="/login">
+                        <label tabindex="0">Login</label>
+                    </a>
+                    <li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)">
+                        <label tabindex="0">Logout</label>
                     </li>
                 </ul>
             </div>
@@ -54,12 +63,10 @@
             <span class="mdl-layout-title">Components List</span>
             <nav class="mdl-navigation">
                 <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable
+                <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable Demo</a>
-                    Demo</a>
                 <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader Demo</a>
                 <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login Demo</a>
-                <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Activiti
+                <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Activiti Components Demo</a>
-                    Components Demo</a>
                 <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
                 <a class="mdl-navigation__link" href="" routerLink="/tag" (click)="hideDrawer()">Tag</a>
                 <a class="mdl-navigation__link" href="" routerLink="/settings" (click)="hideDrawer()">Settings</a>

demo-shell-ng2/app/app.component.ts

@@ -32,7 +32,6 @@ declare var document: any;
     styleUrls: ['app/app.component.css']
 })
 export class AppComponent {
-    translate: AlfrescoTranslationService;
     searchTerm: string = '';
 
     ecmHost: string = 'http://' + window.location.hostname + ':8080';
@@ -41,13 +40,14 @@ export class AppComponent {
     constructor(public auth: AlfrescoAuthenticationService,
                 public router: Router,
                 public alfrescoSettingsService: AlfrescoSettingsService,
-                translate: AlfrescoTranslationService) {
+                private translate: AlfrescoTranslationService) {
         this.setEcmHost();
         this.setBpmHost();
         this.setProvider();
 
-        this.translate = translate;
+        if (translate) {
-        this.translate.addTranslationFolder();
+            translate.addTranslationFolder();
+        }
     }
 
     isLoggedIn(): boolean {

demo-shell-ng2/index.html

@@ -9,32 +9,36 @@
     <link href="app/css/muli-font.css" rel="stylesheet">
 
     <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
+
     <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="./assets/material.orange-blue.min.css">
+    <link href="./assets/material.orange-blue.min.css" rel="stylesheet">
     <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+    <link href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">
+
     <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en'
+    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
-          rel='stylesheet' type='text/css'>
+    <link href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all" rel="stylesheet">
-    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
 
     <!-- 1. Load libraries -->
     <!-- Polyfill(s) for Safari (pre-10.x) -->
     <script src="node_modules/intl/dist/Intl.min.js"></script>
     <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-    <script src="node_modules/moment/min/moment.min.js"></script>
 
     <!-- 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>
 
+    <!-- Polyfill(s) for dialogs -->
+    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+    <link href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css" />
+
     <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>
 
+    <script src="node_modules/moment/min/moment.min.js"></script>
     <script src="/app/js/Polyline.js"></script>
-
     <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
     <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
     <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
@@ -44,10 +48,6 @@
     <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
     <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
 
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>

demo-shell-ng2/package.json

@@ -91,6 +91,7 @@
     "ng2-alfresco-viewer": "0.3.2",
     "ng2-activiti-form": "0.3.3",
     "ng2-activiti-tasklist": "0.3.3",
+    "ng2-alfresco-userinfo": "0.3.2",
     "ng2-activiti-processlist": "0.3.3",
     "ng2-alfresco-webscript": "0.3.2",
     "ng2-alfresco-tag": "0.3.2",