Merge pull request #158 from luk27official/cookies

luk27official · web-flow · commit 6f33464233ba · 2025-02-16T19:35:30.000+01:00
Cookies
diff --git a/frontend/client/about/about.html b/frontend/client/about/about.html
@@ -168,6 +168,7 @@ <h3>Lukáš Polák</h3>
     </div>
 
     @require("../partials/footer.html")
+    @require("../partials/ga.html")
 
   </div>
 </body>
diff --git a/frontend/client/analyze/analyze.html b/frontend/client/analyze/analyze.html
@@ -45,6 +45,7 @@
       </code>
     </div>
     @require("../partials/footer.html")
+    @require("../partials/ga.html")
   </div>
 </body>
 
diff --git a/frontend/client/help/help.html b/frontend/client/help/help.html
@@ -255,6 +255,7 @@ <h2 id="contact-us">Contact us</h2>
     </p>
 
     @require("../partials/footer.html")
+    @require("../partials/ga.html")
 
   </div>
 </body>
diff --git a/frontend/client/index/index.html b/frontend/client/index/index.html
@@ -145,6 +145,7 @@ <h1 class="text-center">
         </div>
 
     </div>
+    @require("../partials/ga.html")
 </body>
 
 </html>
diff --git a/frontend/client/partials/ga.html b/frontend/client/partials/ga.html
@@ -0,0 +1,6 @@
+<script type="module" src="./assets/scripts/cookieconsent-config.js"></script>
+<script
+  type="text/plain"
+  data-category="analytics">
+  @googleAnalytics()
+</script>
diff --git a/frontend/client/partials/head.html b/frontend/client/partials/head.html
@@ -3,5 +3,5 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Prank WebApp">
   <link rel="icon" type="image/png" href="./assets/images/icon.png"/>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.css">
   <title>PrankWeb</title>
-  @googleAnalytics()
diff --git a/frontend/client/privacy/privacy.html b/frontend/client/privacy/privacy.html
@@ -59,10 +59,16 @@ <h3>Data retention</h3>
 
     <h3>Cookies</h3>
     <div class="contentBox">
-        We do not store any cookies for this website.
+        We store Google Analytics cookies for the purpose of monitoring the
+        website traffic. This is optional and the user is asked for consent
+        before the cookies are stored. To change your cookie settings, please
+        click the button below.
+        <br />
+        <button type="button" data-cc="show-consentModal" class="btn btn-primary">View Consent Modal</button>
     </div>
 
     @require("../partials/footer.html")
+    @require("../partials/ga.html")
 
 </div>
 </body>
diff --git a/frontend/client/terms/terms.html b/frontend/client/terms/terms.html
@@ -107,6 +107,7 @@ <h2>ELIXIR CZ Terms of Use of the ELIXIR CZ Services</h2>
   </ol>
 
   @require("../partials/footer.html")
+  @require("../partials/ga.html")
 
 </div>
 </body>
diff --git a/frontend/client/viewer/viewer.html b/frontend/client/viewer/viewer.html
@@ -27,6 +27,7 @@
   <div id="footer">
     @require("../partials/footer.html")
   </div>
+  @require("../partials/ga.html")
 </body>
 
 </html>
diff --git a/frontend/client/visualize/visualize.html b/frontend/client/visualize/visualize.html
@@ -13,6 +13,7 @@
     <div id="root">
         <div id="content"></div>
     </div>
+    @require("../partials/ga.html")
 </body>
 
 </html>
diff --git a/frontend/public/assets/scripts/cookieconsent-config.js b/frontend/public/assets/scripts/cookieconsent-config.js
@@ -0,0 +1,118 @@
+import 'https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.umd.js';
+
+/**
+ * All config. options available here:
+ * https://cookieconsent.orestbida.com/reference/configuration-reference.html
+ */
+CookieConsent.run({
+
+    root: 'body',
+    autoShow: true,
+    disablePageInteraction: false,
+    hideFromBots: true,
+    mode: 'opt-in',
+
+    // https://cookieconsent.orestbida.com/reference/configuration-reference.html#guioptions
+    guiOptions: {
+        consentModal: {
+            layout: 'cloud inline',
+            position: 'bottom right',
+            equalWeightButtons: true,
+            flipButtons: false
+        }
+    },
+
+    // onFirstConsent: ({ cookie }) => {
+    //     console.log('onFirstConsent fired', cookie);
+    // },
+
+    // onConsent: ({ cookie }) => {
+    //     console.log('onConsent fired!', cookie);
+    // },
+
+    // onChange: ({ changedCategories, changedServices }) => {
+    //     console.log('onChange fired!', changedCategories, changedServices);
+    // },
+
+    categories: {
+        analytics: {
+            autoClear: {
+                cookies: [
+                    {
+                        name: /^_ga/,   // regex: match all cookies starting with '_ga'
+                    },
+                    {
+                        name: '_gid',   // string: exact cookie name
+                    }
+                ]
+            },
+
+            // https://cookieconsent.orestbida.com/reference/configuration-reference.html#category-services
+            services: {
+                ga: {
+                    label: 'Google Analytics',
+                    onAccept: () => { },
+                    onReject: () => { }
+                }
+            }
+        }
+    },
+
+    language: {
+        default: 'en',
+        translations: {
+            en: {
+                consentModal: {
+                    title: 'We use cookies',
+                    description: 'We store Google Analytics cookies for the purpose of monitoring the website traffic. This is optional.',
+                    acceptAllBtn: 'Accept all',
+                    acceptNecessaryBtn: 'Reject all',
+                    showPreferencesBtn: 'Manage Individual preferences',
+                    footer: `
+                        <a href="./privacy" target="_blank">Privacy Policy</a>
+                    `,
+                },
+                preferencesModal: {
+                    title: 'Manage cookie preferences',
+                    acceptAllBtn: 'Accept all',
+                    acceptNecessaryBtn: 'Reject all',
+                    savePreferencesBtn: 'Accept current selection',
+                    closeIconLabel: 'Close modal',
+                    serviceCounterLabel: 'Service|Services',
+                    sections: [
+                        {
+                            title: 'Your Privacy Choices',
+                            description: `In this panel you can express some preferences related to the processing of your personal information. You may review and change expressed choices at any time by resurfacing this panel via the provided link. To deny your consent to the specific processing activities described below, switch the toggles to off or use the “Reject all” button and confirm you want to save your choices.`,
+                        },
+                        {
+                            title: 'Performance and Analytics',
+                            description: 'These cookies collect information about website traffic. All of the data is anonymized and cannot be used to identify you.',
+                            linkedCategory: 'analytics',
+                            cookieTable: {
+                                caption: 'Cookie table',
+                                headers: {
+                                    name: 'Cookie',
+                                    desc: 'Description'
+                                },
+                                body: [
+                                    {
+                                        name: '_ga',
+                                        desc: 'Google Analytics',
+                                    },
+                                    {
+                                        name: '_gid',
+                                        desc: 'Google Analytics',
+                                    }
+                                ]
+                            }
+                        },
+                        {
+                            title: 'More information',
+                            description: 'For any queries in relation to my policy on cookies and your choices, please <a href="./about">contact us</a>'
+                        }
+                    ]
+                }
+            }
+        }
+    }
+});

-Original file line number
+Diff line change
         </div>
     </div>
 +    @require("../partials/ga.html")
 </body>
 </html>