Creates cookies message. (Issue #203)

dmp-frontend/angular.json

@@ -23,9 +23,12 @@
 						"styles": [
 							"src/styles.scss",
 							"src/assets/scss/material-dashboard.scss",
-							"src/assets/css/demo.css"
+							"src/assets/css/demo.css",
+							"../dmp-frontend/node_modules/cookieconsent/build/cookieconsent.min.css"
 						],
-						"scripts": []
+						"scripts": [
+							"../dmp-frontend/node_modules/cookieconsent/build/cookieconsent.min.js"
+						]
 					},
 					"configurations": {
 						"production": {

dmp-frontend/package.json

@@ -24,11 +24,13 @@
     "@swimlane/ngx-datatable": "^16.0.2",
     "@w11k/angular-sticky-things": "^1.1.2",
     "bootstrap": "^4.3.1",
+    "cookieconsent": "^3.1.1",
     "core-js": "^2.5.5",
     "file-saver": "^2.0.2",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.26",
     "ngx-cookie-service": "^2.2.0",
+    "ngx-cookieconsent": "^2.2.3",
     "rxjs": "^6.3.2",
     "tslib": "^1.10.0",
     "web-animations-js": "^2.3.2",

dmp-frontend/src/app/app.component.ts

@@ -1,7 +1,7 @@
 
-import {of as observableOf,  Observable } from 'rxjs';
+import { of as observableOf, Subscription } from 'rxjs';
 
-import {switchMap,  filter, map } from 'rxjs/operators';
+import { switchMap, filter, map } from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -10,6 +10,8 @@ import { AuthService } from './core/services/auth/auth.service';
 import { CultureService } from './core/services/culture/culture-service';
 import { BreadCrumbResolverService } from './ui/misc/breadcrumb/service/breadcrumb.service';
 import { Title } from '@angular/platform-browser';
+import { NgcCookieConsentService, NgcStatusChangeEvent } from "ngx-cookieconsent";
+import { CookieService } from "ngx-cookie-service";
 
 
 declare const gapi: any;
@@ -25,6 +27,7 @@ export class AppComponent implements OnInit {
 	hasBreadCrumb = observableOf(false);
 	sideNavOpen = false;
 	helpContentEnabled = environment.HelpService.Enabled;
+	private statusChangeSubscription: Subscription;
 
 	constructor(
 		private router: Router,
@@ -34,7 +37,9 @@ export class AppComponent implements OnInit {
 		private breadCrumbResolverService: BreadCrumbResolverService,
 		private titleService: Title,
 		private language: TranslateService,
-		private cultureService: CultureService
+		private cultureService: CultureService,
+		private cookieService: CookieService,
+		private ccService: NgcCookieConsentService
 	) {
 		this.initializeServices();
 	}
@@ -48,12 +53,16 @@ export class AppComponent implements OnInit {
 	}
 
 	ngOnInit() {
+		if (!this.cookieService.check("cookiesConsent")) {
+			this.cookieService.set("cookiesConsent", "false", 356);
+		}
+
 		this.hasBreadCrumb = this.router.events.pipe(
 			filter(event => event instanceof NavigationEnd),
 			map(() => this.route),
 			map(route => route.firstChild),
 			switchMap(route => route.data),
-			map(data => data['breadcrumb']),);
+			map(data => data['breadcrumb']));
 
 		const appTitle = this.titleService.getTitle();
 		this.router
@@ -72,7 +81,7 @@ export class AppComponent implements OnInit {
 			).subscribe((ttl: string) => {
 				if (ttl.length > 0) {
 					this.language.get(ttl).subscribe((translated: string) => {
-						this.language.get('GENERAL.TITLES.PREFIX').subscribe( (titlePrefix: string) => {
+						this.language.get('GENERAL.TITLES.PREFIX').subscribe((titlePrefix: string) => {
 							this.titleService.setTitle(titlePrefix + translated);
 						});
 					});
@@ -82,6 +91,22 @@ export class AppComponent implements OnInit {
 					});
 				}
 			});
+
+		this.statusChangeSubscription = this.ccService.statusChange$
+			.subscribe((event: NgcStatusChangeEvent) => {
+				if (event.status == "dismiss") {
+					this.cookieService.set("cookiesConsent", "true", 365);
+				}
+			});
+		if (this.cookieService.get("cookiesConsent") == "true") {
+			this.ccService.getConfig().enabled = false;
+			this.ccService.destroy();
+			this.ccService.init(this.ccService.getConfig());
+		}
+	}
+
+	ngOnDestroy() {
+		this.statusChangeSubscription.unsubscribe();
 	}
 
 	login() {

dmp-frontend/src/app/app.module.ts

@@ -23,12 +23,45 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { DatasetCreateWizardModule } from './ui/dataset-create-wizard/dataset-create-wizard.module';
 import { NavbarModule } from './ui/navbar/navbar.module';
 import { SidebarModule } from './ui/sidebar/sidebar.module';
+import { NgcCookieConsentModule, NgcCookieConsentConfig } from 'ngx-cookieconsent';
+import { CookieService } from "ngx-cookie-service";
+import { environment } from '../environments/environment';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient) {
 	return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
 }
 
+const cookieConfig: NgcCookieConsentConfig = {
+	enabled: true,
+	cookie: {
+		domain: environment.App // or 'your.domain.com' // it is mandatory to set a domain, for cookies to work properly (see https://goo.gl/S2Hy2A)
+	},
+	palette: {
+		popup: {
+			background: "#000000",
+			text: "#ffffff",
+			link: "#ffffff"
+		},
+		button: {
+			background: "#00b29f",
+			text: "#ffffff",
+			border: "transparent"
+		}
+	},
+	content: {
+		message: "This website uses cookies to enhance the user experience.",
+		dismiss: "Got it!",
+		deny: "Refuse cookies",
+		link: "Learn more",
+		href: "http://localhost:4200/terms-of-service",
+		policy: "Cookie Policy"
+	},
+	position: "bottom-right",
+	theme: 'edgeless',
+	type: 'info'
+};
+
 @NgModule({
 	imports: [
 		BrowserModule,
@@ -57,7 +90,8 @@ export function HttpLoaderFactory(http: HttpClient) {
 		FormsModule,
 		DatasetCreateWizardModule,
 		NavbarModule,
-		SidebarModule
+		SidebarModule,
+		NgcCookieConsentModule.forRoot(cookieConfig)
 	],
 	declarations: [
 		AppComponent
@@ -75,7 +109,8 @@ export function HttpLoaderFactory(http: HttpClient) {
 			deps: [CultureService],
 			useFactory: (cultureService) => cultureService.getCurrentCulture().name
 		},
-		Title
+		Title,
+		CookieService
 	],
 	bootstrap: [AppComponent]
 })