Merge pull request #391 from Alfresco/dev-mvitale-343

Adapt the Login component to works also with activiti

ng2-components/ng2-alfresco-login/README.md

@@ -80,7 +80,7 @@ Also make sure you include these dependencies in your .html page:
 
 
 ```html
-<alfresco-login></alfresco-login>
+<alfresco-login providers=['ECM','BPM']></alfresco-login>
 ```
 
 Example of an App that use Alfresco login component :
@@ -100,7 +100,12 @@ import {
 
 @Component({
     selector: 'my-app',
-    template: '<alfresco-login (onSuccess)="mySuccessMethod($event)" (onError)="myErrorMethod($event)"></alfresco-login>',
+    template: '
+    <alfresco-login 
+        providers=['ECM'] 
+        (onSuccess)="mySuccessMethod($event)" 
+        (onError)="myErrorMethod($event)">
+    </alfresco-login>',
     directives: [AlfrescoLoginComponent]
 })
 export class AppComponent {
@@ -133,8 +138,14 @@ bootstrap(AppComponent, [
 
 #### Options
 
-**method**: {string} optional) default POST. The method attribute specifies how to send form-data
-The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").<br />
+**providers**: { string[] } optional) default ECM. 
+Using the providers attribute, you can specify in which system 
+(ECM or BPM) you want to be logged in.
+By selecting one of the options only the relative components  will be
+ accesible. For instance if you activate the ECM login then only the
+   ECM component will be visible,same behaviour for BPM selection.
+You can also specify ECM and BPM, in this case both system components
+ are accessible.<br />
 
 ## Build from sources
 Alternatively you can build component from sources with the following commands:

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

@@ -30,9 +30,25 @@ import {
     selector: 'my-app',
     template: `<label for="token"><b>Insert the ip of your Alfresco instance:</b></label><br>
                <input id="token" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><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">
+                        <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>
+                </div>
                {{ status }}
                <hr>
-               <alfresco-login (onSuccess)="mySuccessMethod($event)" (onError)="myErrorMethod($event)"></alfresco-login>`,
+
+               <alfresco-login [providers]="providers" (onSuccess)="mySuccessMethod($event)"
+               (onError)="myErrorMethod($event)"></alfresco-login>`,
     directives: [AlfrescoLoginComponent]
 })
 export class AppComponent {
@@ -43,6 +59,8 @@ export class AppComponent {
 
     public status: string = '';
 
+    public providers: string [] = ['ECM'];
+
     constructor(public auth: AlfrescoAuthenticationService,
                 private alfrescoSettingsService: AlfrescoSettingsService) {
         alfrescoSettingsService.host = this.host;
@@ -61,6 +79,22 @@ export class AppComponent {
         console.log('Error Login EventEmitt called with: ' + $event.value);
         this.status = $event.value;
     }
+
+    toggleECM(checked) {
+        if (checked) {
+            this.providers[0] = 'ECM';
+        } else {
+            this.providers[0] = '';
+        }
+    }
+
+    toggleBPM(checked) {
+        if (checked) {
+            this.providers[1] = 'BPM';
+        } else {
+            this.providers[1] = '';
+        }
+    }
 }
 
 bootstrap(AppComponent, [

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators } from '@angular/common';
 import {
     AlfrescoTranslationService,
@@ -41,6 +41,9 @@ export class AlfrescoLoginComponent {
 
     isPasswordShow: boolean = false;
 
+    @Input()
+    providers: string [] ;
+
     @Output()
     onSuccess = new EventEmitter();
     @Output()
@@ -102,7 +105,7 @@ export class AlfrescoLoginComponent {
         if (event) {
             event.preventDefault();
         }
-        this.auth.login(value.username, value.password)
+        this.auth.login(value.username, value.password, this.providers)
             .subscribe(
                 (token: any) => {
                     this.success = true;