BETTERZON-37: Adding cookie notice popup (#23)

Frontend/src/app/app.component.ts

@@ -1,10 +1,69 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {NgcCookieConsentService, NgcInitializeEvent, NgcNoCookieLawEvent, NgcStatusChangeEvent} from 'ngx-cookieconsent';
+import {Subscription} from 'rxjs';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'Betterzon';
+export class AppComponent implements OnInit, OnDestroy {
+    title = 'Betterzon';
+
+    // Cookie popup stuff
+    // Docs on https://www.npmjs.com/package/ngx-cookieconsent
+    private popupOpenSubscription: Subscription;
+    private popupCloseSubscription: Subscription;
+    private initializeSubscription: Subscription;
+    private statusChangeSubscription: Subscription;
+    private revokeChoiceSubscription: Subscription;
+    private noCookieLawSubscription: Subscription;
+
+    constructor(
+        private ccService: NgcCookieConsentService
+    ) {
+    }
+
+    ngOnInit(): void {
+        // subscribe to cookieconsent observables to react to main events
+        this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(
+            () => {
+                // you can use this.ccService.getConfig() to do stuff...
+            });
+
+        this.popupCloseSubscription = this.ccService.popupClose$.subscribe(
+            () => {
+                // you can use this.ccService.getConfig() to do stuff...
+            });
+
+        this.initializeSubscription = this.ccService.initialize$.subscribe(
+            (event: NgcInitializeEvent) => {
+                // you can use this.ccService.getConfig() to do stuff...
+            });
+
+        this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
+            (event: NgcStatusChangeEvent) => {
+                // you can use this.ccService.getConfig() to do stuff...
+            });
+
+        this.revokeChoiceSubscription = this.ccService.revokeChoice$.subscribe(
+            () => {
+                // you can use this.ccService.getConfig() to do stuff...
+            });
+
+        this.noCookieLawSubscription = this.ccService.noCookieLaw$.subscribe(
+            (event: NgcNoCookieLawEvent) => {
+                // you can use this.ccService.getConfig() to do stuff...
+            });
+    }
+
+    ngOnDestroy(): void {
+        // unsubscribe to cookieconsent observables to prevent memory leaks
+        this.popupOpenSubscription.unsubscribe();
+        this.popupCloseSubscription.unsubscribe();
+        this.initializeSubscription.unsubscribe();
+        this.statusChangeSubscription.unsubscribe();
+        this.revokeChoiceSubscription.unsubscribe();
+        this.noCookieLawSubscription.unsubscribe();
+    }
 }

Frontend/src/app/app.module.ts

@@ -15,8 +15,48 @@ import {HeaderComponent} from './components/header/header.component';
 import {NewestPricesListComponent} from './components/newest-prices-list/newest-prices-list.component';
 import {FormsModule} from '@angular/forms';
 import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
-import { ImprintComponent } from './pages/imprint/imprint.component';
-import { PrivacyComponent } from './pages/privacy/privacy.component';
+import {ImprintComponent} from './pages/imprint/imprint.component';
+import {PrivacyComponent} from './pages/privacy/privacy.component';
+import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';
+
+// For cookie popup
+const cookieConfig: NgcCookieConsentConfig = {
+    cookie: {
+        domain: 'betterzon.xyz'
+    },
+    palette: {
+        popup: {
+            background: '#000'
+        },
+        button: {
+            background: '#f1d600'
+        }
+    },
+    theme: 'edgeless',
+    type: 'opt-out',
+    layout: 'my-custom-layout',
+    layouts: {
+        'my-custom-layout': '{{messagelink}}{{compliance}}'
+    },
+    elements: {
+        messagelink: `
+    <span id="cookieconsent:desc" class="cc-message">{{message}}
+      <a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="{{whatAreCookiesHref}}" target="_blank">{{whatAreCookiesLink}}</a>
+      <a aria-label="learn more about our privacy policy" tabindex="1" class="cc-link" href="{{privacyPolicyHref}}" target="_blank">{{privacyPolicyLink}}</a>
+    </span>
+    `,
+    },
+    content: {
+        // Custom message
+        //message: 'By using our site, you acknowledge that you have read and understand our ',
+
+        whatAreCookiesLink: 'Learn more',
+        whatAreCookiesHref: 'https://www.cookiesandyou.com/',
+
+        privacyPolicyLink: 'Privacy Policy',
+        privacyPolicyHref: '/datenschutz',
+    }
+};
 
 @NgModule({
     declarations: [
@@ -38,7 +78,8 @@ import { PrivacyComponent } from './pages/privacy/privacy.component';
         AppRouting,
         HttpClientModule,
         NgApexchartsModule,
-        FormsModule
+        FormsModule,
+        NgcCookieConsentModule.forRoot(cookieConfig)
     ],
     providers: [],
     bootstrap: [AppComponent]

Frontend/src/index.html

@@ -1,13 +1,15 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Betterzon</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+    <head>
+        <meta charset="utf-8">
+        <title>Betterzon</title>
+        <base href="/">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+        <link rel="stylesheet" type="text/css" href="node_modules/cookieconsent/build/cookieconsent.min.css"/>
+        <script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
+    </head>
+    <body>
+        <app-root></app-root>
+    </body>
 </html>