#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>
+               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"
+                    <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" checked
+                        <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>
-               <div *ngIf="isLoggedIn()">
+               {{ status }}
+               <hr>
+
+               <!-- USER INFO COMPONENT -->
+               <div style="position: absolute;z-index: 2;">
                     <ng2-alfresco-userinfo [menuOpenType]="left"></ng2-alfresco-userinfo>
                </div>
-               <p></p>
+
-               <div>
+
-                   <p>
+               <!-- LOGIN COMPONENT -->
-                       <span>Username</span>
+                      <alfresco-login [providers]="providers"
-                       <input id="user" type="text" [(ngModel)]="userToLogin" value="admin"/>
+                       [disableCsrf]="disableCsrf"></alfresco-login>`,
-                   </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,26 +75,34 @@ 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;
+
     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);
     }
 
-      attemptLogin() {
-          this.loginErrorMessage = '';
-          this.login(this.userToLogin, this.password);
-      }
-
     logout() {
         this.authService.logout();
     }
@@ -129,17 +146,22 @@ class UserInfoDemo implements OnInit {
         }
     }
 
+    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);