From 20cbf1737e522ca33c9cb4337c04e788d1a27962 Mon Sep 17 00:00:00 2001
From: mauriziovitale84 <maurizio.vitale@alfresco.com>
Date: Fri, 8 Jul 2016 15:57:10 +0100
Subject: [PATCH] Integrate providers configuration button inside demo

---
 .../ng2-alfresco-login/demo/src/main.ts       | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/ng2-components/ng2-alfresco-login/demo/src/main.ts b/ng2-components/ng2-alfresco-login/demo/src/main.ts
index ca25fcadc3..008231c276 100644
--- a/ng2-components/ng2-alfresco-login/demo/src/main.ts
+++ b/ng2-components/ng2-alfresco-login/demo/src/main.ts
@@ -30,6 +30,20 @@ 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>
 
@@ -65,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, [