#878 fix login component documentation and demo

ng2-components/ng2-alfresco-login/demo/index.html

@@ -11,9 +11,18 @@
     <script src="node_modules/material-design-lite/material.min.js"></script>
     <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 
-    <!-- 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>
+
     <!-- 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 rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>

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

@@ -25,8 +25,9 @@ import { LoginModule } from 'ng2-alfresco-login';
 @Component({
     selector: 'my-app',
     template: `
-    <label for="host"><b>Insert the ip of your Alfresco instance:</b></label><br>
-       <input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="ecmHost"><br><br>
+    <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; left: 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">
@@ -42,16 +43,26 @@ import { LoginModule } from 'ng2-alfresco-login';
                 <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>
         </div>
        {{ status }}
        <hr>
 
-       <alfresco-login [providers]="providers" (onSuccess)="mySuccessMethod($event)"
-       (onError)="myErrorMethod($event)"></alfresco-login>`
+       <alfresco-login [providers]="providers"
+                       [disableCsrf]="disableCsrf"
+                       (onSuccess)="mySuccessMethod($event)"
+                       (onError)="myErrorMethod($event)"></alfresco-login>`
 })
 export class AppComponent {
 
-    public ecmHost: string = 'http://devproducts-platform.alfresco.me';
+    public ecmHost: string = 'http://devproducts-platform.alfresco.me/alfresco';
+
+    public bpmHost: string = 'http://devproducts-platform.alfresco.me/activiti';
 
     public ticket: string;
 
@@ -59,15 +70,22 @@ export class AppComponent {
 
     public providers: string = 'ECM';
 
+    public disableCsrf: boolean = false;
+
     constructor(public auth: AlfrescoAuthenticationService,
                 private settingsService: AlfrescoSettingsService) {
         settingsService.ecmHost = this.ecmHost;
+        settingsService.bpmHost = this.bpmHost;
     }
 
-    public updateHost(): void {
+    public updateEcmHost(): void {
         this.settingsService.ecmHost = this.ecmHost;
     }
 
+    public updateBpmHost(): void {
+        this.settingsService.bpmHost = this.bpmHost;
+    }
+
     mySuccessMethod($event) {
         console.log('Success Login EventEmitt called with: ' + $event.value);
         this.status = $event.value;
@@ -83,8 +101,8 @@ export class AppComponent {
             this.providers = 'ALL';
         } else if (checked) {
             this.providers = 'ECM';
-        } else {
-            this.providers = undefined;
+        } else if (!checked && this.providers === 'ALL') {
+            this.providers = 'BPM';
         }
     }
 
@@ -93,10 +111,14 @@ export class AppComponent {
             this.providers = 'ALL';
         } else if (checked) {
             this.providers = 'BPM';
-        } else {
-            this.providers = undefined;
+        } else if (!checked && this.providers === 'ALL') {
+            this.providers = 'ECM';
         }
     }
+
+    toggleCSRF() {
+        this.disableCsrf = !this.disableCsrf;
+    }
 }
 
 @NgModule({
@@ -105,9 +127,10 @@ export class AppComponent {
         CoreModule.forRoot(),
         LoginModule
     ],
-    declarations: [ AppComponent ],
-    bootstrap:    [ AppComponent ]
+    declarations: [AppComponent],
+    bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);

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

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