diff --git a/dmp-frontend/angular.json b/dmp-frontend/angular.json index 1ccca7310..957144b7f 100644 --- a/dmp-frontend/angular.json +++ b/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": { diff --git a/dmp-frontend/package.json b/dmp-frontend/package.json index 7c9527007..cc6e1ab8a 100644 --- a/dmp-frontend/package.json +++ b/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", diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts index af1c91559..c6f300902 100644 --- a/dmp-frontend/src/app/app.component.ts +++ b/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() { diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index aa65a7c4e..b82670f0c 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/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] })