#534 improved login background customisation

- now login background can be defined via property
- readme updates

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

@@ -159,13 +159,8 @@ You can also specify ECM and BPM, in this case both system components
 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

+    [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'"
>
 </alfresco-login>
 ```
@@ -174,6 +169,15 @@ Should give you something like the following:
 
 ![custom login](assets/custom-login.png)
 
+Alternatively you can bind to your component properties and provide values dynamically if needed:
+
+```html
+<alfresco-login

+    [backgroundImageUrl]="myCustomBackground"
+    [logoImageUrl]="myCustomLogo"
>
+</alfresco-login>
+```
+
 ## Build from sources
 
 Alternatively you can build component from sources with the following commands:

ng2-components/ng2-alfresco-login/src/assets/images/background.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="2560px"
+	 height="2560px" viewBox="0 0 2560 2560" enable-background="new 0 0 2560 2560" xml:space="preserve">
+<g id="B">
+	<rect y="0" fill="#FAFAFA" width="2560" height="2560"/>
+	<g>
+		<defs>
+			<rect id="SVGID_1_" width="2560" height="2560"/>
+		</defs>
+		<clipPath id="SVGID_2_">
+			<use xlink:href="#SVGID_1_"  overflow="visible"/>
+		</clipPath>
+		<g clip-path="url(#SVGID_2_)">
+			<circle opacity="0.8" fill="#8BC34A" cx="16" cy="6272" r="5120"/>
+			<circle opacity="0.6" fill="#03A9F4" cx="4096" cy="2048" r="2560"/>
+			<circle opacity="0.8" fill="#FF9800" cx="0" cy="-256" r="1920"/>
+			<circle opacity="0.3" fill="#FFD600" cx="-384" cy="1280" r="1280"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_2" display="none">
+	<rect y="640" display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="2560" height="1280"/>
+</g>
+</svg>

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

@@ -22,7 +22,8 @@
 }
 
 :host .content-layout {
-    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTI4MHB4Ig0KCSBoZWlnaHQ9IjEyODBweCIgdmlld0JveD0iMCAwIDEyODAgMTI4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI4MCAxMjgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJCIj4NCgk8Zz4NCgkJPGRlZnM+DQoJCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9Ii01MTIwIiB5PSIwIiB3aWR0aD0iMjU2MCIgaGVpZ2h0PSIyNTYwIi8+DQoJCTwvZGVmcz4NCgkJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJCTwvY2xpcFBhdGg+DQoJCTxnIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiPg0KCQkJPGNpcmNsZSBvcGFjaXR5PSIwLjgiIGZpbGw9IiM4QkMzNEEiIGN4PSItNTEwNCIgY3k9IjYyNzIiIHI9IjUxMjAiLz4NCgkJCTxjaXJjbGUgb3BhY2l0eT0iMC42IiBmaWxsPSIjMDNBOUY0IiBjeD0iLTEwMjQiIGN5PSIyMDQ4IiByPSIyNTYwIi8+DQoJCTwvZz4NCgk8L2c+DQoJPHJlY3QgeT0iMCIgZmlsbD0iI0ZBRkFGQSIgd2lkdGg9IjEyODAiIGhlaWdodD0iMTI4MCIvPg0KCTxnPg0KCQk8ZGVmcz4NCgkJCTxyZWN0IGlkPSJTVkdJRF8zXyIgd2lkdGg9IjEyODAiIGhlaWdodD0iMTI4MCIvPg0KCQk8L2RlZnM+DQoJCTxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iPg0KCQkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfM18iICBvdmVyZmxvdz0idmlzaWJsZSIvPg0KCQk8L2NsaXBQYXRoPg0KCQk8ZyBjbGlwLXBhdGg9InVybCgjU1ZHSURfNF8pIj4NCgkJCTxjaXJjbGUgb3BhY2l0eT0iMC44IiBmaWxsPSIjOEJDMzRBIiBjeD0iOCIgY3k9IjMxMzYiIHI9IjI1NjAiLz4NCgkJCTxjaXJjbGUgb3BhY2l0eT0iMC42IiBmaWxsPSIjMDNBOUY0IiBjeD0iMjA0OCIgY3k9IjEwMjQiIHI9IjEyODAiLz4NCgkJCTxjaXJjbGUgb3BhY2l0eT0iMC44IiBmaWxsPSIjRkY5ODAwIiBjeD0iMCIgY3k9Ii0xMjgiIHI9Ijk2MCIvPg0KCQkJPGNpcmNsZSBvcGFjaXR5PSIwLjMiIGZpbGw9IiNGRkQ2MDAiIGN4PSItMTkyIiBjeT0iNjQwIiByPSI2NDAiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJMYXllcl8yIiBkaXNwbGF5PSJub25lIj4NCjwvZz4NCjwvc3ZnPg0K') center / cover;
+    background-size: cover;
+    background-position: center;
     height: 100%;
     padding: 0;
 }

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

@@ -1,4 +1,5 @@
-<div class="content-grid mdl-grid content-layout login-content">
+<div class="content-grid mdl-grid content-layout login-content"
+    [style.background-image]="'url(' + (backgroundImageUrl || baseComponentPath + '/../assets/images/background.svg') + ')'">
     <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">

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

@@ -44,6 +44,9 @@ export class AlfrescoLoginComponent {
     @Input()
     logoImageUrl: string;
 
+    @Input()
+    backgroundImageUrl: string;
+
     @Input()
     providers: string [] ;