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

Frontend/angular.json

@@ -24,9 +24,12 @@
                             "src/assets"
                         ],
                         "styles": [
-              "src/styles.css"
+                            "src/styles.css",
+                            "./node_modules/cookieconsent/build/cookieconsent.min.css"
                         ],
-            "scripts": []
+                        "scripts": [
+                            "./node_modules/cookieconsent/build/cookieconsent.min.js"
+                        ]
                     },
                     "configurations": {
                         "production": {
@@ -88,9 +91,12 @@
                             "src/assets"
                         ],
                         "styles": [
-              "src/styles.css"
+                            "src/styles.css",
+                            "./node_modules/cookieconsent/build/cookieconsent.min.css"
                         ],
-            "scripts": []
+                        "scripts": [
+                            "./node_modules/cookieconsent/build/cookieconsent.min.js"
+                        ]
                     }
                 },
                 "lint": {
@@ -119,6 +125,7 @@
                     }
                 }
             }
-    }},
+        }
+    },
     "defaultProject": "Betterzon"
 }

Frontend/package.json

@@ -21,8 +21,10 @@
         "@angular/platform-browser-dynamic": "^10.2.3",
         "@angular/router": "^10.2.3",
         "apexcharts": "^3.22.3",
+        "cookieconsent": "^3.1.1",
         "ng": "0.0.0",
         "ng-apexcharts": "^1.5.6",
+        "ngx-cookieconsent": "^2.2.3",
         "rxjs": "~6.6.0",
         "tslib": "^2.0.3",
         "zone.js": "~0.10.2"

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']
 })
-export class AppComponent {
+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

@@ -17,6 +17,46 @@ 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 {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

@@ -6,6 +6,8 @@
         <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>