#878 fix user info demo

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

@@ -20,54 +20,53 @@ import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { CoreModule } from 'ng2-alfresco-core';
-import { LoginModule } from 'ng2-alfresco-login';
+import { LoginModule } from 'ng2-alfresco-login';
 import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'alfresco-app-demo',
-    template: `
-            <label for="host"><b>Insert the ip of your Alfresco and Activiti instance:</b></label><br>
-               ECM Host:  <input id="ecmHost" type="text" size="48" (change)="updateEcmHost()" [(ngModel)]="ecmHost"><br>
-               BPM Host:  <input id="bpmHost" type="text" size="48" (change)="updateBpmHost()" [(ngModel)]="bpmHost"><br>
-               <div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; right: 10px;
-               top: 120px; 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" checked
-                     (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"
-                         (click)="toggleBPM(bpm.checked)" #bpm>
-                        <span class="mdl-switch__label">BPM</span>
-                    </label>
-                </p>
-                <p style="width:120px;margin: 20px;">
-                    <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-                        <input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
-                        <span class="mdl-switch__label">CSRF</span>
-                    </label>
-                </p>
-                <p style="width:120px;margin: 20px;">
-                    <button (click)="logout()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Logout</button>
-                </p>
-                </div>
-               {{ status }}
-               <hr>
-
-               <!-- USER INFO COMPONENT -->
-               <div style="position: absolute;z-index: 2;">
-                    <ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo>
+    template: `
+            <label for="host"><b>Insert the ip of your Alfresco and Activiti instance:</b></label><br>
+               ECM Host:  <input id="ecmHost" type="text" size="48" (change)="updateEcmHost()" [(ngModel)]="ecmHost"><br>
+               BPM Host:  <input id="bpmHost" type="text" size="48" (change)="updateBpmHost()" [(ngModel)]="bpmHost"><br>
+               <div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; right: 10px;
+               top: 120px; 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" checked
+                     (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"
+                         (click)="toggleBPM(bpm.checked)" #bpm>
+                        <span class="mdl-switch__label">BPM</span>
+                    </label>
+                </p>
+                <p style="width:120px;margin: 20px;">
+                    <label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                        <input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
+                        <span class="mdl-switch__label">CSRF</span>
+                    </label>
+                </p>
+                <p style="width:120px;margin: 20px;">
+                    <button (click)="logout()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Logout</button>
+                </p>
+                </div>
+               {{ status }}
+               <hr>
+
+               <!-- USER INFO COMPONENT -->
+               <div style="position: absolute;z-index: 2;">
+                    <ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo>
                </div>
-
-
-               <!-- LOGIN COMPONENT -->
-                      <alfresco-login [providers]="providers"
-                       [disableCsrf]="disableCsrf"></alfresco-login>`,
+
+               <!-- LOGIN COMPONENT -->
+                      <alfresco-login [providers]="providers"
+                       [disableCsrf]="disableCsrf"></alfresco-login>`,
     styles: [
         ':host > .container {padding: 10px}',
         '.p-10 { padding: 10px; }'
@@ -75,93 +74,93 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfr
 })
 class UserInfoDemo implements OnInit {
 
-    public ecmHost: string = 'http://localhost:8080';
-
-    public bpmHost: string = 'http://localhost:9999';
-
-    public userToLogin: string = 'admin';
-
-    public password: string = 'admin';
-
-    public loginErrorMessage: string;
-
-    public providers: string = 'BPM';
-
-    private authenticated: boolean;
+    public ecmHost: string = 'http://localhost:8080';
 
-    private token: any;
+    public bpmHost: string = 'http://localhost:9999';
 
-    public disableCsrf: boolean = false;
-
-    constructor(private authService: AlfrescoAuthenticationService,
-                private settingsService: AlfrescoSettingsService) {
-        settingsService.ecmHost = this.ecmHost;
-        settingsService.bpmHost = this.bpmHost;
-    }
-
-    ngOnInit() {
-        this.settingsService.setProviders(this.providers);
-    }
-
-    logout() {
-        this.authService.logout();
-    }
-
-    login(user, password) {
+    public userToLogin: string = 'admin';
+
+    public password: string = 'admin';
+
+    public loginErrorMessage: string;
+
+    public providers: string = 'BPM';
+
+    private authenticated: boolean;
+
+    private token: any;
+
+    public disableCsrf: boolean = false;
+
+    constructor(private authService: AlfrescoAuthenticationService,
+                private settingsService: AlfrescoSettingsService) {
+        settingsService.ecmHost = this.ecmHost;
+        settingsService.bpmHost = this.bpmHost;
+    }
+
+    ngOnInit() {
         this.settingsService.setProviders(this.providers);
-        this.authService.login(user, password).subscribe(
-            token => {
-                console.log(token);
-                this.token = token;
-                this.authenticated = true;
-            },
-            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;
-        }
-    }
-
-    toggleCSRF() {
-        this.disableCsrf = !this.disableCsrf;
-    }
+    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;
+                this.authenticated = true;
+            },
+            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;
+        }
+    }
+
+    toggleCSRF() {
+        this.disableCsrf = !this.disableCsrf;
+    }
 }
 
 @NgModule({
     imports: [
         BrowserModule,
         CoreModule.forRoot(),
-        UserInfoComponentModule.forRoot(),
-        LoginModule
+        UserInfoComponentModule.forRoot(),
+        LoginModule
     ],
-    declarations: [UserInfoDemo],
-    bootstrap: [UserInfoDemo]
+    declarations: [UserInfoDemo],
+    bootstrap: [UserInfoDemo]
 })
-export class AppModule {
-}
+export class AppModule {
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

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

@@ -1,4 +1,4 @@
-<div id="userinfo_container">
+<div id="userinfo_container" *ngIf="isLoggedIn()">
     <div *ngIf="ecmUser || bpmUser" class="button-profile" id="user-profile" data-automation-id="user-profile">
         <img id="logged-user-img"
              [src]="getUserAvatar()"

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

@@ -47,9 +47,13 @@ export class UserInfoComponent implements AfterViewChecked, OnInit {
     private baseComponentPath = module.id.replace('components/user-info.component.js', '');
 
     ecmUser: EcmUserModel;
+
     bpmUser: BpmUserModel;
+
     anonymousImageUrl: string = this.baseComponentPath + 'img/anonymous.gif';
+
     bpmUserImage: any;
+
     ecmUserImage: any;
 
     constructor(private ecmUserService: EcmUserService,
@@ -59,6 +63,10 @@ export class UserInfoComponent implements AfterViewChecked, OnInit {
         if (translate) {
             translate.addTranslationFolder('node_modules/ng2-alfresco-userinfo/src');
         }
+
+        authService.loginSubject.subscribe((response) => {
+            this.getUserInfo();
+        });
     }
 
     ngAfterViewChecked() {
@@ -69,10 +77,18 @@ export class UserInfoComponent implements AfterViewChecked, OnInit {
     }
 
     ngOnInit() {
+        this.getUserInfo();
+    }
+
+    getUserInfo() {
         this.getEcmUserInfo();
         this.getBpmUserInfo();
     }
 
+    isLoggedIn() {
+        return this.authService.isLoggedIn();
+    }
+
     getEcmUserInfo(): void {
         if (this.authService.isEcmLoggedIn()) {
             this.ecmUserService.getCurrentUserInfo()