#878 demo userinfo component

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

@@ -16,7 +16,8 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "ng2-alfresco-userinfo": "0.3.2"
+    "ng2-alfresco-userinfo": "0.3.2",
+    "ng2-alfresco-login": "^0.3.2"
   },
   "devDependencies": {
     "@types/core-js": "^0.9.32",

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

@@ -20,45 +20,54 @@ 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 { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'alfresco-app-demo',
-    template: `<h4> START DEMO USERINFO </h4>
+    template: `
-               <div style="border-radius: 8px; position: absolute; background-color:papayawhip; color: cadetblue; left: 320px; top: 30px; z-index: 1;">
+            <label for="host"><b>Insert the ip of your Alfresco and Activiti instance:</b></label><br>
-                 <p style="width:120px;margin: 20px;">
+               ECM Host:  <input id="ecmHost" type="text" size="48" (change)="updateEcmHost()" [(ngModel)]="ecmHost"><br>
-                 <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+               BPM Host:  <input id="bpmHost" type="text" size="48" (change)="updateBpmHost()" [(ngModel)]="bpmHost"><br>
-                     <input type="checkbox" id="switch1" class="mdl-switch__input"
+               <div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; right: 10px;
-                      (click)="toggleECM(ecm.checked)" #ecm>
+               top: 120px; z-index: 1;">
-                     <span class="mdl-switch__label">ECM</span>
+
-                 </label>
+                <p style="width:120px;margin: 20px;">
-                 </p>
+                <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-                 <p style="width:120px;margin: 20px;">
+                    <input type="checkbox" id="switch1" class="mdl-switch__input" checked
-                     <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                     (click)="toggleECM(ecm.checked)" #ecm>
-                         <input type="checkbox" id="switch2" class="mdl-switch__input" checked
+                    <span class="mdl-switch__label">ECM</span>
-                          (click)="toggleBPM(bpm.checked)" #bpm>
+                </label>
-                         <span class="mdl-switch__label">BPM</span>
+                </p>
-                     </label>
+                <p style="width:120px;margin: 20px;">
-                 </p>
+                    <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>
-               <div *ngIf="isLoggedIn()">
+
-                   <ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo>
+
-               </div>
+               <!-- LOGIN COMPONENT -->
-               <p></p>
+                      <alfresco-login [providers]="providers"
-               <div>
+                       [disableCsrf]="disableCsrf"></alfresco-login>`,
-                   <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>`,
     styles: [
         ':host > .container {padding: 10px}',
         '.p-10 { padding: 10px; }'
@@ -66,80 +75,93 @@ import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfr
 })
 class UserInfoDemo implements OnInit {
 
-      public userToLogin: string = 'admin';
+    public ecmHost: string = 'http://localhost:8080';
-      public password: string = 'admin';
+
-      public loginErrorMessage: string;
+    public bpmHost: string = 'http://localhost:9999';
-      public providers: string = 'BPM';
+
-      private authenticated: boolean;
+    public userToLogin: string = 'admin';
-      private token: any;
+
+    public password: string = 'admin';
+
+    public loginErrorMessage: string;
+
+    public providers: string = 'BPM';
+
+    private authenticated: boolean;
 
-      constructor(private authService: AlfrescoAuthenticationService,
+    private token: any;
-                  private settingsService: AlfrescoSettingsService) {
-      }
 
-      ngOnInit() {
+    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) {
         this.settingsService.setProviders(this.providers);
-      }
+        this.authService.login(user, password).subscribe(
-
+            token => {
-      attemptLogin() {
+                console.log(token);
-          this.loginErrorMessage = '';
+                this.token = token;
-          this.login(this.userToLogin, this.password);
+                this.authenticated = true;
-      }
+            },
-
+            error => {
-      logout() {
+                console.log(error);
-          this.authService.logout();
+                this.authenticated = false;
-      }
+                this.loginErrorMessage = error;
-
+            });
-      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;
-          }
-      }
 
+    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()
+        UserInfoComponentModule.forRoot(),
+        LoginModule
     ],
-    declarations: [ UserInfoDemo ],
+    declarations: [UserInfoDemo],
-    bootstrap:    [ UserInfoDemo ]
+    bootstrap: [UserInfoDemo]
 })
-export class AppModule { }
+export class AppModule {
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

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

@@ -26,7 +26,8 @@
             'ng2-translate': 'npm:ng2-translate',
             'alfresco-js-api': 'npm:alfresco-js-api/dist',
             'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
-            'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist'
+            'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist',
+            'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist'
         },
         // packages tells the System loader how to load when no filename and/or no extension
         packages: {
@@ -40,7 +41,8 @@
             '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'}
+            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
+            'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'}
         }
     });
 })(this);