Use vanilla-cookieconsent to be fully GDPR compliant #22
5 changed files with 3460 additions and 3284 deletions
|
|
@ -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';
|
||||
|
||||
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
|
||||
});
|
||||
import './cc'
|
||||
107
assets/cc.js
Normal file
107
assets/cc.js
Normal file
|
|
@ -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>.',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
13
package-lock.json
generated
13
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue