updates to customization component to use the background image for the forms

src/app/app.component.ts

@@ -169,7 +169,7 @@ export class AppComponent {
     this.configurationService.initCommunityInformation(this.properties, (communityId) ? communityId : this.properties.adminToolsPortalType);
   }
   initLayout(communityId){
-    if(!this.layout) {
+    if(!this.layout && location.pathname.indexOf("/preview") == -1) {
       this._layoutService.getLayout(this.properties, communityId).subscribe(
         layout => {
           if (layout) {

src/app/utils/customization/customization.component.ts

@@ -62,15 +62,19 @@ export class CustomizationComponent {
     :root {
       --portal-main-color: ` + this.layout.identity.mainColor+`;
       --portal-dark-color: ` + this.layout.identity.secondaryColor+`;
+      --background-light-color:` + this.layout.backgrounds.light.color+`;
     }
     `;
-    //Search SVG
-    let search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 532"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:{{color}};mix-blend-mode:multiply;}</style></defs><title>Asset 3</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-2" d="M0,431s362,109,841,62,632,68,1159-9V0H0Z"/><path class="cls-2" d="M0,514s1401,71,2000-69V0H0Z"/></g></g></g></svg>`;;
-    let svg = 'data:image/svg+xml,' + encodeURIComponent(search.replace('{{color}}', this.layout.backgrounds.form.color));
-    this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {');
-    this.customizationCss = this.customizationCss.concat(' background:  ' + "url('" + svg + "') transparent no-repeat center bottom; ");
-    this.customizationCss = this.customizationCss.concat("  background-size: cover !important;  ");
-    this.customizationCss = this.customizationCss.concat("  height: inherit; }");
+    console.log(" create form css " , this.layout.backgrounds.form)
+      //Search SVG
+      let search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 532"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:{{color}};mix-blend-mode:multiply;}</style></defs><title>Asset 3</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-2" d="M0,431s362,109,841,62,632,68,1159-9V0H0Z"/><path class="cls-2" d="M0,514s1401,71,2000-69V0H0Z"/></g></g></g></svg>`;
+      ;
+      let svg = 'data:image/svg+xml,' + encodeURIComponent(search.replace('{{color}}', this.layout.backgrounds.form.color));
+      this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {');
+      this.customizationCss = this.customizationCss.concat(' background:  '
+      + "url('" + (this.layout.backgrounds.form.imageFile?(this.properties.utilsService + '/download/' +this.layout.backgrounds.form.imageFile): svg) + "') transparent no-repeat "+this.layout.backgrounds.form.position+" ;");
+      this.customizationCss = this.customizationCss.concat("  background-size: cover !important;  ");
+      this.customizationCss = this.customizationCss.concat("  height: inherit; }");
 
     //Button link SVG
     let arrow = `<svg width="23" height="11" viewBox="0 0 23 11" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="{{color}}" points="17 1 22 5.5 17 10 " /><line fill="none" stroke="{{color}}" x1="0" y1="5.5" x2="22.4" y2="5.5" /></svg>`;;

src/app/utils/piwikHelper.ts

@@ -24,7 +24,8 @@ export class PiwikHelper{
     "gotriple":490,
     "neanias-underwater":474,
     "inspired-ris":530,
-    "citizen-science":538
+    "citizen-science":538,
+    "eut":558
   };
   public static getSiteId(communityId:string, environment:string){
     return this.siteIDs[communityId];