customization: add alert for unsaved changes

src/app/pages/customization/customization.component.html

@@ -305,3 +305,4 @@
     </button>
 
 </ng-template>
+<modal-alert #leaveModal [overflowBody]="false" (alertOutput)="confirmClose()" ></modal-alert>

src/app/pages/customization/customization.component.ts

@@ -15,6 +15,7 @@ import {Subscription} from 'rxjs';
 import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
 import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
 import {MenuItem} from "../../openaireLibrary/sharedComponents/menu";
+import {AlertModal} from "../../openaireLibrary/utils/modal/alert";
 
 declare var UIkit;
 
@@ -77,6 +78,7 @@ export class CustomizationComponent implements OnInit {
 sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
   {name:"Backgrounds", id : "backgrounds", icon: "wallpaper" },
   {name:"Buttons", id : "buttons", icon: "smart_button" }]
+  @ViewChild('leaveModal') closeModal: AlertModal;
 
   constructor(private element: ElementRef,
               private route: ActivatedRoute,
@@ -290,7 +292,16 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
     if(!this.hasChanges(this.publishedCustomizationOptions, this.draftCustomizationOptions)) {
       this._router.navigate(["../info/profile"], {relativeTo: this.route});
     }else{
-      alert("TODO " + "Changes that you made may not be saved."+" Με buttons από κάτω cancel (αριστερά) και leave (δεξιά)");
+      this.closeModal.alertTitle = "Discard changes";
+      this.closeModal.message = "Unsaved changes will be lost.";
+      this.closeModal.okButtonText = "Leave";
+      this.closeModal.cancelButtonText = "Cancel";
+      this.closeModal.okButtonLeft = false;
+      this.closeModal.open();
     }
   }
+
+  confirmClose(){
+    this._router.navigate(["../info/profile"], {relativeTo: this.route});
+  }
 }