Use vanilla-cookieconsent to be GDPR compliant

assets/app.js

@@ -18,31 +18,4 @@ import '@fortawesome/fontawesome-free/js/regular'
 import '@fortawesome/fontawesome-free/js/brands'
 
 // Cookie-consent
-import 'cookie-notice/dist/cookie.notice.min';
+import './cc'
-
-new cookieNoticeJS({
-    // Position for the cookie-notifier (default=bottom)
-    'cookieNoticePosition': 'bottom',
-
-    // The message will be shown again in X days
-    'expiresIn': 365,
-
-    // Specify a custom font family and size in pixels
-    'fontFamily': 'inherit',
-    'fontSize': '.9rem',
-
-    // Dismiss button background color
-    'buttonBgColor': '#343a40',
-
-    // Dismiss button text color
-    'buttonTextColor': '#fff',
-
-    // Notice background color
-    'noticeBgColor': '#000',
-
-    // Notice text color
-    'noticeTextColor': '#fff',
-
-    // Print debug output to the console (default=false)
-    'debug': false
-});

assets/cc.js

@@ -0,0 +1,107 @@
+import 'vanilla-cookieconsent/dist/cookieconsent'
+
+window.addEventListener('load', function(){
+
+    // obtain plugin
+    var cc = initCookieConsent();
+
+    // run plugin with your configuration
+    cc.run({
+        current_lang: 'en',
+        autoclear_cookies: true,                   // default: false
+        theme_css: require('vanilla-cookieconsent/dist/cookieconsent.css'),  // 🚨 replace with a valid path
+        page_scripts: true,                        // default: false
+
+        // mode: 'opt-in'                          // default: 'opt-in'; value: 'opt-in' or 'opt-out'
+        // delay: 0,                               // default: 0
+        // auto_language: '',                      // default: null; could also be 'browser' or 'document'
+        // autorun: true,                          // default: true
+        // force_consent: true,                   // default: false
+        // hide_from_bots: false,                  // default: false
+        // remove_cookie_tables: false             // default: false
+        // cookie_name: 'cc_cookie',               // default: 'cc_cookie'
+        // cookie_expiration: 182,                 // default: 182 (days)
+        // cookie_necessary_only_expiration: 182   // default: disabled
+        // cookie_domain: location.hostname,       // default: current domain
+        // cookie_path: '/',                       // default: root
+        // cookie_same_site: 'Lax',                // default: 'Lax'
+        // use_rfc_cookie: false,                  // default: false
+        // revision: 0,                            // default: 0
+
+        onFirstAction: function(user_preferences, cookie){
+            // callback triggered only once on the first accept/reject action
+        },
+
+        onAccept: function (cookie) {
+            // callback triggered on the first accept/reject action, and after each page load
+        },
+
+        onChange: function (cookie, changed_categories) {
+            // callback triggered when user changes preferences after consent has already been given
+        },
+
+        languages: {
+            'en': {
+                consent_modal: {
+                    title: 'Yep, we too use cookies.',
+                    description: 'This website uses essential cookies to ensure its proper operation and basic tracking cookies to understand how many peaple visit the site. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
+                    primary_btn: {
+                        text: 'Accept all',
+                        role: 'accept_all'              // 'accept_selected' or 'accept_all'
+                    },
+                    secondary_btn: {
+                        text: 'Reject all',
+                        role: 'accept_necessary'        // 'settings' or 'accept_necessary'
+                    }
+                },
+                settings_modal: {
+                    title: 'Cookie preferences',
+                    save_settings_btn: 'Save settings',
+                    accept_all_btn: 'Accept all',
+                    reject_all_btn: 'Reject all',
+                    close_btn_label: 'Close',
+                    cookie_table_headers: [
+                        {col1: 'Name'},
+                        {col2: 'Domain'},
+                        {col3: 'Expiration'},
+                        {col4: 'Description'}
+                    ],
+                    blocks: [
+                        {
+                            title: 'Cookie usage 📢',
+                            description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="beta.pflaenz.li/imprint" class="cc-link">privacy policy</a>.'
+                        }, {
+                            title: 'Strictly necessary cookies',
+                            description: 'These cookies are essential for the proper functioning of this website. Without these cookies, the website would not work properly (like sessions, login tokens, etc)',
+                            toggle: {
+                                value: 'necessary',
+                                enabled: true,
+                                readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
+                            }
+                        }, {
+                            title: 'Analytics cookies',
+                            description: 'These cookies allow the website to remember the choices you have made in the past and to distinguish you from other users.',
+                            toggle: {
+                                value: 'analytics',     // your cookie category
+                                enabled: false,
+                                readonly: false
+                            },
+                            cookie_table: [             // list of all expected cookies
+                                {
+                                    col1: '^_pk',       // match all cookies starting with "_ga"
+                                    col2: 'analytics.thisfro.ch',
+                                    col3: 'Up to 13 months',
+                                    col4: 'Tracking by selfhosted Matomo. <a href="https://matomo.org/faq/general/faq_146/" target="_blank">More details</a>',
+                                    is_regex: true
+                                },
+                            ]
+                        }, {
+                            title: 'More information',
+                            description: 'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="mailto:contact@pflaenz.li">contact us</a>.',
+                        }
+                    ]
+                }
+            }
+        }
+    });
+});

package-lock.json

@@ -8,7 +8,8 @@
             "dependencies": {
                 "@snyk/protect": "^1.834.0",
                 "cookie-notice": "^1.3.6",
-                "friendly-challenge": "^0.8.5"
+                "friendly-challenge": "^0.8.5",
+                "vanilla-cookieconsent": "^2.8.0"
             },
             "devDependencies": {
                 "@fortawesome/fontawesome-free": "^5.15.3",
@@ -7852,6 +7853,11 @@
                 "uuid": "dist/bin/uuid"
             }
         },
+        "node_modules/vanilla-cookieconsent": {
+            "version": "2.8.0",
+            "resolved": "https://registry.npmjs.org/vanilla-cookieconsent/-/vanilla-cookieconsent-2.8.0.tgz",
+            "integrity": "sha512-ouffZlaEkrGBvYJtYt1p4tB4IQ9gdw1dZR+yJmlTjpA14PUKCWpx9gblWeujpwD5OjXI0/aWHb0M0wdYd2uJ2g=="
+        },
         "node_modules/vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -14320,6 +14326,11 @@
             "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
             "dev": true
         },
+        "vanilla-cookieconsent": {
+            "version": "2.8.0",
+            "resolved": "https://registry.npmjs.org/vanilla-cookieconsent/-/vanilla-cookieconsent-2.8.0.tgz",
+            "integrity": "sha512-ouffZlaEkrGBvYJtYt1p4tB4IQ9gdw1dZR+yJmlTjpA14PUKCWpx9gblWeujpwD5OjXI0/aWHb0M0wdYd2uJ2g=="
+        },
         "vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -23,8 +23,9 @@
         "test": "snyk test"
     },
     "dependencies": {
+        "@snyk/protect": "^1.834.0",
         "cookie-notice": "^1.3.6",
         "friendly-challenge": "^0.8.5",
-        "@snyk/protect": "^1.834.0"
+        "vanilla-cookieconsent": "^2.8.0"
     }
 }