Prototype cookie banner

src/main/resources/messages_en_GB.properties

@@ -90,6 +90,7 @@ legal.terms=Terms and Conditions
 legal.accessibility=Accessibility
 legal.cookie=Cookie Policy
 legal.impressum=Impressum
+legal.showCookieBanner=Cookie Preferences
 
 ###############
 #   Pipeline  #
@@ -135,6 +136,7 @@ analytics.enable=Enable analytics
 analytics.disable=Disable analytics
 analytics.settings=You can change the settings for analytics in the config/settings.yml file
 
+
 #############
 #  NAVBAR   #
 #############
@@ -1399,3 +1401,29 @@ validateSignature.cert.version=Version
 validateSignature.cert.keyUsage=Key Usage
 validateSignature.cert.selfSigned=Self-Signed
 validateSignature.cert.bits=bits
+
+# Cookie banner 
+## pop up modal
+cookieBanner.popUp.title=How we use Cookies
+cookieBanner.popUp.description=Stirling PDF uses cookies and similar technologies to improve your experience and measure usage of our tools. This enables us to continue developing great features and continue support for our users. \n Clicking \"No Thanks\" will set only cookies that are strictly necessary.
+cookieBanner.popUp.acceptAllBtn=Okay
+cookieBanner.popUp.acceptNecessaryBtn=No Thanks
+cookieBanner.popUp.showPreferencesBtn=Manage preferences
+## preferences Modal
+cookieBanner.preferencesModal.title=Consent Preferences Center
+cookieBanner.preferencesModal.acceptAllBtn=Accept all
+cookieBanner.preferencesModal.acceptNecessaryBtn=Reject all
+cookieBanner.preferencesModal.savePreferencesBtn=Save preferences
+cookieBanner.preferencesModal.closeIconLabel=Close modal
+cookieBanner.preferencesModal.serviceCounterLabel=Service|Services
+cookieBanner.preferencesModal.subtitle=Cookie Usage
+cookieBanner.preferencesModal.description=Stirling PDF uses cookies and similar technologies to improve your experience and measure usage of our tools. This enables us to continue developing great features and continue support for our users. \n \n <b>Strirling PDF can not and will not ever track the documents used within Stirling PDF.<b>
+cookieBanner.preferencesModal.necessary.title=Strictly Necessary Cookies <span class=\"pm__badge\">Always Enabled</span>
+cookieBanner.preferencesModal.necessary.description=These cookies are essential for you to browse the website and use its features, such as setting your privacy preferences, logging in, or filling in forms (which is why you can’t opt out of them)
+cookieBanner.preferencesModal.analytics.title=Analytics
+cookieBanner.preferencesModal.analytics.description=These cookies allow us to track visits, tool usage and searches so we can measure and improve the performance of our website. Strirling PDF can not and will not ever track the documents used within Stirling PDF
+
+                        
+                    
+
+                    

src/main/resources/static/css/cookieconsentCustomisation.css

@@ -0,0 +1,50 @@
+.cc--darkmode{
+    --cc-bg: var(--md-sys-color-surface);
+    --cc-primary-color: var(--md-sys-color-on-surface);
+    --cc-secondary-color: var(--md-sys-color-on-surface);
+
+    --cc-btn-primary-bg: var(--md-sys-color-secondary);
+    --cc-btn-primary-color: var(--cc-bg);
+    --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
+    --cc-btn-primary-hover-bg: var(--md-sys-color-surface-3);
+    --cc-btn-primary-hover-color: var(--md-sys-color-on-secondary-container);
+    --cc-btn-primary-hover-border-color: var(--md-sys-color-surface-3);
+
+    --cc-btn-secondary-bg: var(--md-sys-color-surface-3);
+    --cc-btn-secondary-color: var(--md-sys-color-on-secondary-container);
+    --cc-btn-secondary-border-color: var(--md-sys-color-surface-3);
+    --cc-btn-secondary-hover-bg:var(--md-sys-color-secondary);
+    --cc-btn-secondary-hover-color: var(--cc-bg);
+    --cc-btn-secondary-hover-border-color: var(--md-sys-color-secondary);
+/*
+    --cc-separator-border-color: #222a30;
+
+    --cc-toggle-on-bg: var(--cc-btn-primary-bg);
+    --cc-toggle-off-bg: #525f6b;
+    --cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
+    --cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
+
+    --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);   
+    --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);  
+
+    --cc-toggle-readonly-bg: #343e45;
+    --cc-toggle-readonly-knob-bg: #5f6b72;
+    --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
+
+    --cc-section-category-border: #1e2428;
+
+    --cc-cookie-category-block-bg: #1e2428;
+    --cc-cookie-category-block-border: var(--cc-section-category-border);
+    --cc-cookie-category-block-hover-bg: #242c31;
+    --cc-cookie-category-block-hover-border: #232a2f;
+    --cc-cookie-category-expanded-block-bg: transparent;
+    --cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg);
+
+    --cc-overlay-bg: rgba(0, 0, 0, 0.65);
+    --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
+    --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
+*/
+    --cc-footer-bg: var(--cc-bg);
+    --cc-footer-color: var(--cc-primary-color);
+    --cc-footer-border-color: var(--cc-bg); 
+}

src/main/resources/static/css/footer.css

@@ -35,4 +35,5 @@
 
 .footer-link {
   text-decoration: none;
+  cursor: pointer;
 }

src/main/resources/static/js/thirdParty/cookieconsent-config.js

@@ -0,0 +1,66 @@
+import './cookieconsent.umd.js';
+import 'https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.umd.js';
+
+// Enable dark mode
+document.documentElement.classList.add('cc--darkmode');
+
+CookieConsent.run({
+    guiOptions: {
+        consentModal: {
+            layout: "box",
+            position: "bottom left",
+            equalWeightButtons: true,
+            flipButtons: false
+        },
+        preferencesModal: {
+            layout: "box",
+            position: "right",
+            equalWeightButtons: true,
+            flipButtons: false
+        }
+    },
+    categories: {
+        necessary: {
+            readOnly: true
+        },
+        analytics: {}
+    },
+    language: {
+        default: "en",
+        translations: {
+            en: {
+                consentModal: {
+                    title: cookieBannerPopUpTitle,
+                    description: cookieBannerPopUpDescription,
+                    acceptAllBtn: cookieBannerPopUpAcceptAllBtn,
+                    acceptNecessaryBtn: cookieBannerPopUpAcceptNecessaryBtn,
+                    showPreferencesBtn: cookieBannerPopUpShowPreferencesBtn,
+                },
+                preferencesModal: {
+                    title: cookieBannerPreferencesModalTitle,
+                    acceptAllBtn: cookieBannerPreferencesModalAcceptAllBtn,
+                    acceptNecessaryBtn: cookieBannerPreferencesModalAcceptNecessaryBtn,
+                    savePreferencesBtn: cookieBannerPreferencesModalSavePreferencesBtn,
+                    closeIconLabel: cookieBannerPreferencesModalCloseIconLabel,
+                    serviceCounterLabel: cookieBannerPreferencesModalServiceCounterLabel,
+                    sections: [
+                        {
+                            title: cookieBannerPreferencesModalSubtitle,
+                            description: cookieBannerPreferencesModalDescription
+                        },
+                        {
+                            title:cookieBannerPreferencesModalNecessaryTitle,
+                            description: cookieBannerPreferencesModalNecessaryDescription,
+                            linkedCategory: "necessary"
+                        },
+                        {
+                            title: cookieBannerPreferencesModalAnalyticsTitle,
+                            description: cookieBannerPreferencesModalAnalyticsDescription,
+                            linkedCategory: "analytics"
+                        }
+                    ]
+                }
+            }
+        }
+    }
+});

src/main/resources/templates/fragments/common.html

@@ -66,7 +66,9 @@
   <link rel="stylesheet" th:href="@{'/css/footer.css'}">
 
   <link rel="preload" th:href="@{'/fonts/google-symbol.woff2'}" as="font" type="font/woff2" crossorigin="anonymous">
-
+  <link rel="stylesheet" th:href="@{'/css/cookieconsent.css'}">
+  <link rel="stylesheet" th:href="@{'/css/cookieconsentCustomisation.css'}">
+  <script type="module" th:src="@{'/js/thirdParty/cookieconsent-config.js'}"></script>
   <script th:src="@{'/js/thirdParty/fontfaceobserver.standalone.js'}"></script>
 
   <!-- Google MD Icons -->
@@ -80,9 +82,33 @@
   <script th:src="@{'/js/darkmode.js'}"></script>
   <script th:src="@{'/js/csrf.js'}"></script>
   <script th:inline="javascript">
+
+    function UpdatePosthogConsent(){
+      window.CookieConsent.acceptedCategory('analytics')?
+        posthog.opt_in_capturing() : posthog.opt_out_capturing();
+      console.log("Posthog: Opted " + (posthog.has_opted_out_capturing()? "out" : "in"));
+    }
     const stirlingPDFLabel = /*[[${@StirlingPDFLabel}]]*/ '';
     const analyticsEnabled = /*[[${@analyticsEnabled}]]*/ false;
 
+    const cookieBannerPopUpTitle = /*[[#{cookieBanner.popUp.title}]]*/ "How we use Cookies";
+    const cookieBannerPopUpDescription = /*[[#{cookieBanner.popUp.description}]]*/ "";
+    const cookieBannerPopUpAcceptAllBtn = /*[[#{cookieBanner.popUp.acceptAllBtn}]]*/ "";
+    const cookieBannerPopUpAcceptNecessaryBtn = /*[[#{cookieBanner.popUp.acceptNecessaryBtn}]]*/ "";
+    const cookieBannerPopUpShowPreferencesBtn = /*[[#{cookieBanner.popUp.showPreferencesBtn}]]*/ "";
+    const cookieBannerPreferencesModalTitle = /*[[#{cookieBanner.preferencesModal.title}]]*/ "";
+    const cookieBannerPreferencesModalAcceptAllBtn = /*[[#{cookieBanner.preferencesModal.acceptAllBtn}]]*/ "";
+    const cookieBannerPreferencesModalAcceptNecessaryBtn = /*[[#{cookieBanner.preferencesModal.acceptNecessaryBtn}]]*/ "";
+    const cookieBannerPreferencesModalSavePreferencesBtn = /*[[#{cookieBanner.preferencesModal.savePreferencesBtn}]]*/ "";
+    const cookieBannerPreferencesModalCloseIconLabel = /*[[#{cookieBanner.preferencesModal.closeIconLabel}]]*/ "";
+    const cookieBannerPreferencesModalServiceCounterLabel = /*[[#{cookieBanner.preferencesModal.serviceCounterLabel}]]*/ "";
+    const cookieBannerPreferencesModalSubtitle = /*[[#{cookieBanner.preferencesModal.subtitle}]]*/ "";
+    const cookieBannerPreferencesModalDescription = /*[[#{cookieBanner.preferencesModal.description}]]*/ "";
+    const cookieBannerPreferencesModalNecessaryTitle = /*[[#{cookieBanner.preferencesModal.necessary.title}]]*/ "";
+    const cookieBannerPreferencesModalNecessaryDescription = /*[[#{cookieBanner.preferencesModal.necessary.description}]]*/ "";
+    const cookieBannerPreferencesModalAnalyticsTitle = /*[[#{cookieBanner.preferencesModal.analytics.title}]]*/ "";
+    const cookieBannerPreferencesModalAnalyticsDescription = /*[[#{cookieBanner.preferencesModal.analytics.description}]]*/ "";
+
     if (analyticsEnabled) {
       !function (t, e) {
         var o, n, p, r;
@@ -110,7 +136,8 @@
         persistence: 'localStorage',
         person_profiles: 'always',
         mask_all_text: true,
-        mask_all_element_attributes: true
+        mask_all_element_attributes: true,
+        opt_out_capturing_by_default: true
       })
       const baseUrl = window.location.hostname;
       posthog.register_once({
@@ -118,6 +145,9 @@
         'UUID': /*[[${@UUID}]]*/ ''
       })
     }
+
+    window.addEventListener("cc:onConsent", UpdatePosthogConsent);
+    window.addEventListener("cc:onChange", UpdatePosthogConsent);
   </script>
 
 

src/main/resources/templates/fragments/footer.html

@@ -11,6 +11,7 @@
         <li th:if="${@accessibilityStatement != ''}"><a class="footer-link px-2" target="_blank" th:href="${@accessibilityStatement}" th:text="#{legal.accessibility}">accessibilityStatement</a></li>
         <li th:if="${@cookiePolicy != ''}"><a class="footer-link px-2" target="_blank" th:href="${@cookiePolicy}" th:text="#{legal.cookie}">cookiePolicy</a></li>
         <li th:if="${@impressum != ''}"><a class="footer-link px-2" target="_blank" th:href="${@impressum}" th:text="#{legal.impressum}">impressum</a></li>
+        <li><a class="footer-link px-2" id="cookieBanner" target="_blank"  th:text="#{legal.showCookieBanner}" onClick="CookieConsent.show(true)">Cookie Preferences</a></li>
       </ul>
     </div>