Merge pull request #599 from Alfresco/dev-denys-534

#534 login customisation support

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

@@ -45,7 +45,7 @@ Components included:
 * Alfresco Login Component
 * Alfresco Authentication Service
 
-#### Dependencies
+## Dependencies
 
 Add the following dependency to your index.html:
 
@@ -63,7 +63,7 @@ Please refer to the following example to have an idea of how your systemjs.confi
 
 https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
 
-#### Style
+## Style
 The style of this component is based on material design, so if you want to visualize it correctly you have to add the material
 design dependency to your project:
 
@@ -80,8 +80,7 @@ Also make sure you include these dependencies in your .html page:
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
 
-#### Basic usage
-
+## Basic usage
 
 ```html
 <alfresco-login [providers]="['ECM','BPM']"></alfresco-login>
@@ -89,7 +88,7 @@ Also make sure you include these dependencies in your .html page:
 
 Example of an App that use Alfresco login component :
 
-main.ts
+**main.ts**
 ```ts
 
 import { Component } from '@angular/core';
@@ -136,13 +135,16 @@ bootstrap(AppComponent, [
 
 ```
 #### Events
-**onSuccess**: The event is emitted when the login is done
-**onError**: The event is emitted when the login fails<br />
 
+| Name | Description |
+| --- | --- |
+| onSuccess | The event is emitted when the login is done |
+| onError | The event is emitted when the login fails |
 
 #### Options
 
 **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
@@ -151,7 +153,29 @@ By selecting one of the options only the relative components  will be
 You can also specify ECM and BPM, in this case both system components
  are accessible.<br />
  
+ 
+## Custom logo and background
+
+It is possible changing logo and background images to custom values.
+
+```html
+<style>
    
+alfresco-login >>> .login-content {

+    background-image: url(http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg) !important;
    
+}
+
</style>
+
+<alfresco-login

+    [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)
+
 ## Build from sources
+
 Alternatively you can build component from sources with the following commands:
 
 
@@ -160,7 +184,7 @@ npm install
 npm run build
 ```
 
-##Build the files and keep watching for changes
+### Build the files and keep watching for changes
 
 ```sh
 $ npm run build:w
@@ -172,7 +196,7 @@ npm run build
 npm test
 ```
 
-## Running unit tests in browser
+### Running unit tests in browser
 
 ```sh
 npm test-browser
@@ -181,7 +205,7 @@ npm test-browser
 This task rebuilds all the code, runs tslint, license checks and other quality check tools 
 before performing unit testing. 
 
-## Code coverage
+### Code coverage
 
 ```sh
 npm run coverage
@@ -197,3 +221,6 @@ npm install
 npm start
 ```
 
+## License
+
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)

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

@@ -51,6 +51,10 @@
     margin-top: 5px;
 }
 
+:host .alfresco-logo > img {
+    max-height: 43px;
+}
+
 :host .mdl-button--raised.mdl-button--colored {
     width: 98%;
     height: 36px;

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

@@ -1,8 +1,8 @@
-<div class="content-grid mdl-grid content-layout">
+<div class="content-grid mdl-grid content-layout login-content">
     <div class="login-card-wide mdl-card mdl-shadow--4dp">
         <form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
             <div class="mdl-card__title alfresco-logo">
-                <img class="center" [src]="baseComponentPath + '/../assets/images/alfresco-logo.svg'" alt="{{'LOGIN.LOGO' | translate }}">
+                <img class="center" [src]="logoImageUrl || baseComponentPath + '/../assets/images/alfresco-logo.svg'" alt="{{'LOGIN.LOGO' | translate }}">
             </div>
             <div class="mdl-card__supporting-text">
                 <div>

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

@@ -41,11 +41,15 @@ export class AlfrescoLoginComponent {
 
     isPasswordShow: boolean = false;
 
+    @Input()
+    logoImageUrl: string;
+
     @Input()
     providers: string [] ;
 
     @Output()
     onSuccess = new EventEmitter();
+
     @Output()
     onError = new EventEmitter();
 
@@ -55,8 +59,7 @@ export class AlfrescoLoginComponent {
 
     formError: { [id: string]: string };
 
-    private _message: { [id: string]: { [id: string]: string }
-    };
+    private _message: { [id: string]: { [id: string]: string } };
 
     /**
      * Constructor
@@ -91,7 +94,6 @@ export class AlfrescoLoginComponent {
         translate.addTranslationFolder('node_modules/ng2-alfresco-login/dist/src');
 
         this.form.valueChanges.subscribe(data => this.onValueChanged(data));
-
     }
 
     /**