diff --git a/src/app/pages/customization/Border.component.ts b/src/app/pages/customization/Border.component.ts
new file mode 100644
index 0000000..03949b1
--- /dev/null
+++ b/src/app/pages/customization/Border.component.ts
@@ -0,0 +1,56 @@
+import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
+
+
+@Component({
+ selector: 'border',
+ template: `
+
+
+
+
Style:
+
+
+
+
+
+
+
+ `
+})
+
+export class BorderComponent implements OnInit {
+ @Input() radius:number =0;
+ @Input() width:number =0;
+ @Input() style = 'solid';
+ // @Input() addMargin: boolean = false;
+ @Output() borderChange = new EventEmitter();
+
+
+ constructor() {
+ }
+
+
+ ngOnInit() {
+ }
+
+ borderChanged() {
+ this.borderChange.emit({radius:this.radius, width:this.width, style:this.style});
+ }
+
+
+}
diff --git a/src/app/pages/customization/Color.component.ts b/src/app/pages/customization/Color.component.ts
new file mode 100644
index 0000000..b83d8e9
--- /dev/null
+++ b/src/app/pages/customization/Color.component.ts
@@ -0,0 +1,38 @@
+import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
+
+
+@Component({
+ selector: 'color',
+ template: `
+
+ `
+})
+
+export class ColorComponent implements OnInit {
+ @Input() color = 'white';
+ @Input() label = 'Color';
+ @Input() addMargin: boolean = false;
+ @Output() colorChange = new EventEmitter();
+
+
+ constructor() {
+ }
+
+
+ ngOnInit() {
+ }
+
+ colorChanged() {
+ this.colorChange.emit(this.color);
+ }
+
+
+}
diff --git a/src/app/pages/customization/FontSize.component.ts b/src/app/pages/customization/FontSize.component.ts
new file mode 100644
index 0000000..dcb069e
--- /dev/null
+++ b/src/app/pages/customization/FontSize.component.ts
@@ -0,0 +1,60 @@
+import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
+
+
+@Component({
+ selector: 'font-size',
+ template: `
+
+
Font:
+
+
+
+
+
+
+
+
+ `
+})
+
+export class FontSizeComponent implements OnInit {
+ @Input() font="";
+ @Input() size:number;
+ @Input() weight:number;
+ @Output() fontChange = new EventEmitter();
+
+
+ constructor( ) {
+ }
+
+
+ ngOnInit() {
+
+
+ }
+
+ fontChanged() {
+ console.log({font:this.font, size:this.size, weight:this.weight});
+ this.fontChange.emit({font:this.font, size:this.size, weight:this.weight});
+ }
+
+
+}
diff --git a/src/app/pages/customization/customization-routing.module.ts b/src/app/pages/customization/customization-routing.module.ts
new file mode 100644
index 0000000..38ace2d
--- /dev/null
+++ b/src/app/pages/customization/customization-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {CustomizationComponent} from './customization.component';
+import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
+import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([
+ { path: '', canActivate: [/*IsCommunity, ConnectAdminLoginGuard*/], component: CustomizationComponent}
+ ])
+ ]
+})
+export class CustomizationRoutingModule { }
diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html
new file mode 100644
index 0000000..aa845dc
--- /dev/null
+++ b/src/app/pages/customization/customization.component.html
@@ -0,0 +1,561 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts
new file mode 100644
index 0000000..aca7f76
--- /dev/null
+++ b/src/app/pages/customization/customization.component.ts
@@ -0,0 +1,158 @@
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+
+import {Session} from '../../openaireLibrary/login/utils/helper.class';
+import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
+import {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
+import {DomSanitizer} from '@angular/platform-browser';
+import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
+import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
+
+@Component({
+ selector: 'customization',
+ templateUrl: './customization.component.html',
+})
+
+export class CustomizationComponent implements OnInit {
+
+ menuSelected = 'main';
+ color = 'white';
+ communityUrl = 'http://scoobydoo.di.uoa.gr:4200/?communityId=ee';
+ customizationOptions: CustomizationOptions = new CustomizationOptions();
+ appliedCustomizationOptions: CustomizationOptions = this.copyObject(this.customizationOptions);
+ previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
+ buttonDarkBackgroundPreview;
+ buttonLightBackgroundPreview;
+ linkDarkBackgroundPreview;
+ linkLightBackgroundPreview;
+ public showLoading = true;
+ public updateErrorMessage = '';
+ public successfulSaveMessage = '';
+
+ public curatorsEnabled;
+ public newCurator;
+
+ public communityId = null;
+
+ public affiliationsChanged = false;
+ public hasChanged = false;
+ public curatorId = null;
+ public curator: Curator = null;
+ public photo: any = null;
+ public properties: EnvProperties = null;
+
+ private file: File = null;
+ private maxsize: number = 200 * 1024;
+ public enabled = true;
+ private deletePhoto = false;
+
+
+ constructor(private element: ElementRef,
+ private route: ActivatedRoute,
+ private _router: Router,
+ private sanitizer: DomSanitizer) {
+ }
+
+
+ ngOnInit() {
+ this.initializeCustomizationOptions();
+ this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+ this.properties = data.envSpecific;
+ if (!Session.isLoggedIn()) {
+ this._router.navigate(['/user-info'], {
+ queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
+ });
+ } else {
+ this.route.queryParams.subscribe((params) => {
+ this.communityId = params['communityId'];
+ this.showLoading = true;
+ this.updateErrorMessage = '';
+ // this.curatorId = Session.getUser().id;
+
+ });
+ }
+ });
+
+ }
+
+ initializeCustomizationOptions() {
+ this.buttonDarkBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.buttons.darkBackground);
+ this.buttonLightBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.buttons.lightBackground);
+ this.linkDarkBackgroundPreview = this.changeFontsStyle(this.appliedCustomizationOptions.links.darkBackground, this.appliedCustomizationOptions.links.darkBackground.color);
+ this.linkLightBackgroundPreview = this.changeStyle(this.appliedCustomizationOptions.links.lightBackground, this.appliedCustomizationOptions.links.lightBackground.color);
+ // this.previewUrl = this.getCommunityUrlSatinized(this.appliedCustomizationOptions);
+ }
+
+ changeStyle(colorOptions, borderOptions=null) {
+ let style = '';
+ if(!borderOptions){
+ borderOptions = colorOptions;
+ }
+ if (colorOptions.color) {
+ style += '; color:' + colorOptions.color;
+ }
+ if (colorOptions.backgroundColor) {
+ style += '; background-color:' + colorOptions.backgroundColor;
+ }
+ if (colorOptions.borderColor) {
+ style += '; border-color:' + colorOptions.borderColor;
+ }
+ if (borderOptions.borderStyle) {
+ style += '; border-style:' + borderOptions.borderStyle;
+ }
+ if (borderOptions.borderWidth) {
+ style += '; border-width:' + borderOptions.borderWidth+'px';
+ }
+ if (borderOptions.borderRadius) {
+ style += '; border-radius:' + borderOptions.borderRadius+'px';
+ }
+
+ return this.sanitizer.bypassSecurityTrustStyle(style);
+ }
+
+
+ changeFontsStyle(options, color=null) {
+ let style = '';
+
+
+ if (options.family) {
+ style += '; font-family:' + options.family;
+ }
+
+ if (options.size) {
+ style += '; font-size:' + options.size+'px';
+ }
+
+ if (options.weight) {
+ style += '; font-weight:' + options.weight;
+ }
+
+ if (color) {
+ style += '; color:' + color;
+ }
+
+ return this.sanitizer.bypassSecurityTrustStyle(style);
+ }
+
+ getCommunityUrlSatinized(customization: CustomizationOptions) {
+ return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(customization));
+ }
+
+ getCommunityUrlNewLayout(customization: CustomizationOptions) {
+ // console.log("here!");
+ let layout = JSON.stringify(customization);
+ // console.log(layout);
+ return this.communityUrl + '&layout=' + StringUtils.URIEncode(layout);
+ }
+copyObject(obj){
+ return JSON.parse(JSON.stringify(obj));
+}
+
+resetBackgroundsBanners(){
+ this.appliedCustomizationOptions.panel.onDarkBackground = this.customizationOptions.panel.onDarkBackground;
+ this.appliedCustomizationOptions.panel.background.color = this.customizationOptions.panel.background.color;
+}
+
+}
diff --git a/src/app/pages/customization/customization.module.ts b/src/app/pages/customization/customization.module.ts
new file mode 100644
index 0000000..7bb2c46
--- /dev/null
+++ b/src/app/pages/customization/customization.module.ts
@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+
+import {CustomizationComponent} from './customization.component';
+
+import {CustomizationRoutingModule} from './customization-routing.module';
+// import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
+// import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
+
+import { ColorPickerModule } from 'ngx-color-picker';
+import {FontSizeComponent} from './FontSize.component';
+import {ColorComponent} from './Color.component';
+import {BorderComponent} from './Border.component';
+@NgModule({
+ imports: [
+ CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule
+ ],
+ declarations: [
+ CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent
+ ],
+ providers: [
+
+ ],
+ exports: [
+ CustomizationComponent
+ ]
+})
+export class CustomizationModule { }