Skip to content

Commit 9b9c33c

Browse files
KlemenSprukKlemenSpruk
authored
#34 Cookie notice (#44)
* added cookie display library * added cokkie notice component * functional notice * better cookie lib * new js build * general guidelines for cookies * removed old cookie lib
1 parent 81ec630 commit 9b9c33c

File tree

14 files changed

+323
-35
lines changed

14 files changed

+323
-35
lines changed

‎django_project_base/js_app/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@
1313
"bootstrap": "^4.6.0",
1414
"browser-update": "^3.3.37",
1515
"core-js": "^3.6.5",
16-
"dynamicforms": "^0.1.0",
16+
"dynamicforms": "^0.1.125",
1717
"es6-promise": "^4.2.8",
1818
"jquery": "^3.6.0",
1919
"lodash": "^4.17.15",
20+
"vanilla-cookieconsent": "^2.8.0",
2021
"vue": "^2.6.11",
2122
"vue-notification": "^1.3.20",
2223
"webpack": "^4.46.0"

‎django_project_base/js_app/public/index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,103 @@
1616
<body>
1717
<div id="app"></div>
1818
<div id="modal-app"></div>
19+
<div id="cookie"></div>
1920
<!-- built files will be auto injected -->
2021
</body>
2122
<script>
2223
createApp('app', '<BrowserCheck :hidePageIfUnSupportedBrowser="false"><TitleBar v-slot:content :projectlistVisible="true"/></BrowserCheck>', 'modal-app');
24+
25+
var opt = {
26+
current_lang: 'en',
27+
autoclear_cookies: true,
28+
page_scripts: true,
29+
languages: {
30+
'en': {
31+
consent_modal: {
32+
title: 'We use cookies!',
33+
description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to ' +
34+
'understand how you interact with it. The latter will be set only after ' +
35+
'consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
36+
primary_btn: {
37+
text: 'Accept all',
38+
role: 'accept_all',
39+
},
40+
secondary_btn: {
41+
text: 'Reject all',
42+
role: 'accept_necessary',
43+
}
44+
},
45+
settings_modal: {
46+
title: 'Cookie preferences',
47+
save_settings_btn: 'Save settings',
48+
accept_all_btn: 'Accept all',
49+
reject_all_btn: 'Reject all',
50+
close_btn_label: 'Close',
51+
cookie_table_headers: [
52+
{col1: 'Name'},
53+
{col2: 'Domain'},
54+
{col3: 'Expiration'},
55+
{col4: 'Description'}
56+
],
57+
blocks: [
58+
{
59+
title: 'Cookie usage 📢',
60+
description: 'I use cookies to ensure the basic functionalities of the website and to enhance your ' +
61+
'online experience. You can choose for each category to opt-in/out whenever you want. For more ' +
62+
'details relative to cookies and other sensitive data, please read ' +
63+
'the full <a href="#" class="cc-link">privacy policy</a>.'
64+
}, {
65+
title: 'Strictly necessary cookies',
66+
description: 'These cookies are essential for the proper functioning of my website. ' +
67+
'Without these cookies, the website would not work properly',
68+
toggle: {
69+
value: 'necessary',
70+
enabled: true,
71+
readonly: true
72+
}
73+
}, {
74+
title: 'Performance and Analytics cookies',
75+
description: 'These cookies allow the website to remember the choices you have made in the past',
76+
toggle: {
77+
value: 'analytics',
78+
enabled: false,
79+
readonly: false
80+
},
81+
cookie_table: [
82+
{
83+
col1: '^_ga',
84+
col2: 'google.com',
85+
col3: '2 years',
86+
col4: 'description ...',
87+
is_regex: true
88+
},
89+
{
90+
col1: '_gid',
91+
col2: 'google.com',
92+
col3: '1 day',
93+
col4: 'description ...',
94+
}
95+
]
96+
}, {
97+
title: 'Advertisement and Targeting cookies',
98+
description: 'These cookies collect information about how you use the website, which pages you ' +
99+
'visited and which links you clicked on. All of the data is anonymized and ' +
100+
'cannot be used to identify you',
101+
toggle: {
102+
value: 'targeting',
103+
enabled: false,
104+
readonly: false
105+
}
106+
}, {
107+
title: 'More information',
108+
description: 'For any queries in relation to our policy on cookies and your ' +
109+
'choices, please <a class="cc-link" href="#yourcontactpage">contact us</a>.',
110+
}
111+
]
112+
}
113+
}
114+
}
115+
};
116+
createApp('cookie', '<CookieNotice/>', 'modal-app', opt);
23117
</script>
24118
</html>

‎django_project_base/js_app/src/apps.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import ProjectList from './components/bootstrap/projectlist.vue';
1313
import TitleBar from './components/bootstrap/titlebar.vue';
1414
import UserProfile from './components/bootstrap/userprofile.vue';
1515
import BrowserCheck from './components/browser-check.vue';
16+
import CookieNotice from './components/cookie-notice.vue';
1617
import Notification from './components/notification.vue';
1718

1819
const componentsConfig = {
@@ -23,9 +24,10 @@ const componentsConfig = {
2324
UserProfile,
2425
Notification,
2526
BrowserCheck,
27+
CookieNotice,
2628
};
2729

28-
const createApp = (elementId, template, modalId) => {
30+
const createApp = (elementId, template, modalId, data = {}) => {
2931
if (typeof window.dynamicforms === 'undefined') {
3032
window.dynamicforms = {};
3133
}
@@ -42,6 +44,7 @@ const createApp = (elementId, template, modalId) => {
4244
return new Vue({
4345
el: `#${elementId}`,
4446
components: componentsConfig,
47+
data,
4548
template,
4649
});
4750
};

‎django_project_base/js_app/src/components/cookie-notice.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div/>
3+
</template>
4+
<script>
5+
// eslint-disable-next-line import/extensions
6+
import 'vanilla-cookieconsent/src/cookieconsent.js';
7+
import _ from 'lodash';
8+
9+
export default {
10+
name: 'CookieNotice',
11+
props: {
12+
options: {
13+
type: Object,
14+
default() {
15+
return {};
16+
},
17+
},
18+
},
19+
mounted() {
20+
try {
21+
const cookieConsent = window.initCookieConsent();
22+
cookieConsent.run(_.size(this.options) > 0 ? this.options : (this.$root.$data || {}));
23+
} catch (error) {
24+
console.error('Invalid options for cookie notice.');
25+
}
26+
},
27+
};
28+
</script>
29+
30+
<style scoped>
31+
@import '~vanilla-cookieconsent/dist/cookieconsent.css';
32+
</style>

‎django_project_base/js_app/vue.config.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ const libraryFileName = 'django-project-base';
77
module.exports = {
88
outputDir: path.resolve(__dirname, `../static/${libraryFileName}/`),
99
css: {
10-
extract: {
11-
ignoreOrder: true,
12-
filename: `css/${libraryFileName}.css`,
13-
chunkFilename: `css/${libraryFileName}-vendor.css`,
14-
},
10+
extract: false,
1511
},
1612
configureWebpack: {
1713
resolve: {

0 commit comments

Comments
 (0)