#679 support for additional content (#1187)

- allow custom content within login dialog
- move demo shell login switches inside the dialog
- readme updates and fixes
- fixes #679

demo-shell-ng2/app/components/login/login-demo.component.css

@@ -1,14 +1,6 @@
-.setting {
-    border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 10px;  z-index: 1;
-}
-.banned{
-    width:130px;margin: 10px;
-}
-
-.toggle {
-    width:120px;margin: 20px;
-}
-
 .setting-button {
-     position: absolute;  right: 10px; top: 10px;   z-index: 1;
+     position: absolute;
+     right: 10px;
+     top: 10px;
+     z-index: 1;
 }

demo-shell-ng2/app/components/login/login-demo.component.html

@@ -1,36 +1,39 @@
-<div class="setting">
-    <p class="toggle">
-        <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
-                   (click)="toggleECM(ecm.checked)" #ecm>
-            <span class="mdl-switch__label">ECM</span>
-        </label>
-    </p>
-    <p class="toggle">
-        <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
-            <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
-                   (click)="toggleBPM(bpm.checked)" #bpm>
-            <span class="mdl-switch__label">BPM</span>
-        </label>
-    </p>
-    <p class="toggle">
-        <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 class="banned">
-        <label for="blacklistusername">Banned username</label><br>
-        <input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername"/>
-    </p>
-</div>
-
 <a class="mdl-navigation__link setting-button" data-automation-id="settings" href="" routerLink="/settings">
     <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
         <i class="material-icons">settings</i>
     </button>
 </a>
-<alfresco-login [providers]="providers" [fieldsValidation]="customValidation" [disableCsrf]="disableCsrf"
+<alfresco-login #alfrescologin
+                [providers]="providers"
+                [fieldsValidation]="customValidation"
+                [disableCsrf]="disableCsrf"
                 (executeSubmit)="validateForm($event)"
                 (onSuccess)="onLogin($event)"
-                (onError)="onError($event)" #alfrescologin></alfresco-login>
+                (onError)="onError($event)">
+    <div>
+        <p>
+            <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch1" [checked]="isECM" class="mdl-switch__input"
+                    (click)="toggleECM(ecm.checked)" #ecm>
+                <span class="mdl-switch__label">ECM</span>
+            </label>
+        </p>
+        <p>
+            <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+                <input type="checkbox" id="switch2" [checked]="isBPM" class="mdl-switch__input"
+                    (click)="toggleBPM(bpm.checked)" #bpm>
+                <span class="mdl-switch__label">BPM</span>
+            </label>
+        </p>
+        <p>
+            <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 class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="blackListUsername" id="blacklistusername"/>
+            <label class="mdl-textfield__label" for="blacklistusername">Banned username</label>
+        </div>
+    </div>
+</alfresco-login>

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

@@ -165,28 +165,45 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 | `providers`         | *string*    |   ECM     | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
 | `disableCsrf`         | *boolean*    |   false     | To prevent the CSRF Token from been submitted. Only for Activiti call |
 
- 
+
+## Extra content
+
+You can put additional html content between `alfresco-login` tags to get it rendered as part of the login dialog.
+This becomes handy in case you need extending it with custom input fields handled by your application or parent component:
+
+```html
+<alfresco-login ...>
+    <div>
+        <div>You extra content</div>
+    </div>
+</alfresco-login>
+```
+
+Here's an example of custom content:
+
+<img src="assets/login-extra-content.png" height="400" />
+
 ## Custom logo and background
 
 It is possible changing logo and background images to custom values.
 
 ```html
-<alfresco-login

+<alfresco-login 
     [backgroundImageUrl]="'http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg'"
-    [logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'"
>
+    [logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'">
 </alfresco-login>
 ```
 
 Should give you something like the following:
 
-![custom login](assets/custom-login.png)
+<img src="assets/custom-login.png" width="600" />
 
 Alternatively you can bind to your component properties and provide values dynamically if needed:
 
 ```html
-<alfresco-login

+<alfresco-login
     [backgroundImageUrl]="myCustomBackground"
-    [logoImageUrl]="myCustomLogo"
>
+    [logoImageUrl]="myCustomLogo">
 </alfresco-login>
 ```
 
@@ -196,9 +213,12 @@ If needed it is possible customize the validation rules of the login
 form. You can add/modify the default rules of the login form.
 
 **MyCustomLogin.component.html**
+
 ```html
-<alfresco-login [fieldsValidation]="customValidation"
+<alfresco-login 
-#alfrescologin></alfresco-login>
+    [fieldsValidation]="customValidation"
+    #alfrescologin>
+</alfresco-login>
 ```
 
 **MyCustomLogin.component.ts**
@@ -233,14 +253,17 @@ This allows for example having custom form validation scenarios and/or additiona
 Alternatively you may want just running additional code without suppressing default one.
 
 **MyCustomLogin.component.html**
+
 ```html
-<alfresco-login (executeSubmit)="validateForm($event)" 
+<alfresco-login 
-#alfrescologin></alfresco-login>
+    (executeSubmit)="validateForm($event)" 
+    #alfrescologin>
+</alfresco-login>
 ```
 
 **MyCustomLogin.component.ts**
-```ts
 
+```ts
 export class MyCustomLogin {
 
     validateForm(event: any) {
@@ -273,7 +296,7 @@ npm run build
 ### Build the files and keep watching for changes
 
 ```sh
-$ npm run build:w
+npm run build:w
 ```
     
 ## Running unit tests

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

@@ -45,6 +45,7 @@
                             <span id="password-required" class="mdl-textfield__error" style="visibility: visible" data-automation-id="password-required">{{formError.password | translate }}</span>
                     </span>
                 </div>
+                <ng-content></ng-content>
                 <br>
                 <button type="submit" id="login-button" tabindex="3"
                         class="center mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"