Stole cookie banner, js and cookie policy page from main digital land…

… site. Refactored js a bit

application/blueprints/main/views.py

@@ -12,6 +12,11 @@ def index():
     return render_template("index.html")
 
 
+@main.route("/cookies")
+def cookies():
+    return render_template("cookies.html")
+
+
 @main.route("/data-design-process")
 def data_design_process():
     return render_template("data-design-process.html")

application/static/javascripts/application.js

@@ -734,12 +734,188 @@
     this.addTag(newTag);
   };
 
+  const cookieTypes = {
+    cookies_policy: "essential",
+    cookies_preferences_set: "essential",
+    _ga: "usage",
+    _gid: "usage",
+    _gat: "usage",
+  };
+
+  // Initialize GA measurement ID cookie type if present
+  if (typeof window !== 'undefined' && window.gaMeasurementId) {
+    cookieTypes[`_ga_${window.gaMeasurementId}`] = 'usage';
+  }
+
+  function showCookieBannerIfNotSetAndSetTrackingCookies() {
+    if(window.gaMeasurementId){
+      cookieTypes[`_ga_${window.gaMeasurementId}`] = 'usage';
+    }
+
+    showCookieBanner();
+    if (getCookie('cookies_preferences_set')) {
+      hideCookieBanner();
+    }
+
+    setTrackingCookies();
+  }
+
+  function deleteCookie(name) {
+    document.cookie = name + "=;expires=" + new Date + ";domain=" + window.location.hostname + ";path=/";
+  }
+
+  function setCookie(name, value, days) {
+    var expires = '';
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+      expires = '; expires=' + date.toUTCString();
+    }
+    document.cookie = name + '=' + (value || '') + expires + '; path=/';
+  }
+
+  function getCookie(name) {
+    var nameEQ = name + '=';
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+      var c = ca[i];
+      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length)
+    }
+    return null
+  }
+
+  function acceptCookies(cookiePrefs = { essential: true, settings: true, usage: true, campaigns: true }) { // eslint-disable-line no-unused-vars
+    setCookie('cookies_preferences_set', true, 365);
+    setCookie('cookies_policy', JSON.stringify(cookiePrefs), 365);
+    hideCookieBanner();
+    showCookieConfirmation();
+    setTrackingCookies();
+  }
+
+  function hideCookieBanner() {
+    var cookieBanner = document.getElementById('cookie-banner');
+    if(cookieBanner){
+      cookieBanner.style.display = 'none';
+      cookieBanner.ariaHidden = true;
+    }
+  }
+
+  function showCookieBanner() {
+    var cookieBanner = document.getElementById('cookie-banner');
+    if(cookieBanner){
+      cookieBanner.style.display = 'block';
+      cookieBanner.ariaHidden = false;
+    }
+  }
+
+  function hideCookieConfirmation() {
+    hideCookieBanner();
+    var cookieBanner = document.getElementById('cookie-confirmation');
+    if(cookieBanner){
+      cookieBanner.style.display = 'none';
+      cookieBanner.ariaHidden = true;
+    }
+  }
+
+  function showCookieConfirmation() {
+    var cookieBanner = document.getElementById('cookie-confirmation');
+    if(cookieBanner){
+      cookieBanner.style.display = 'block';
+      cookieBanner.ariaHidden = false;
+    }
+  }
+
+  function setTrackingCookies() {
+    JSON.parse(getCookie('cookies_policy'));
+    {
+      if(window.gaMeasurementId){
+        window[`ga-disable-${window.gaMeasurementId}`] = true;
+      }
+    }
+  }
+
+  class cookiePrefs {
+    static essential = true;
+    static settings = false;
+    static usage = false;
+    static campaigns = false;
+
+    static get = () => {
+      var cookiesPolicy = JSON.parse(getCookie('cookies_policy'));
+      if(cookiesPolicy){
+        this.setEssential(cookiesPolicy.essential);
+        this.setSettings(cookiesPolicy.settings);
+        this.setUsage(cookiesPolicy.usage);
+        this.setCampaigns(cookiesPolicy.campaigns);
+      }
+    }
+
+    static setEssential = (value) => this.essential = value;
+    static setSettings = (value) => this.settings = value;
+    static setUsage = (value) => this.usage = value;
+    static setCampaigns = (value) => this.campaigns = value;
+
+    static save = (expires = 365) => {
+      setCookie('cookies_preferences_set', true, expires);
+      setCookie('cookies_policy', JSON.stringify({
+        essential: this.essential,
+        settings: this.settings,
+        usage: this.usage,
+        campaigns: this.campaigns
+      }), expires);
+      hideCookieBanner();
+      this.invalidateRejectedCookies();
+      setTrackingCookies();
+    }
+
+    static invalidateRejectedCookies = () => {
+      for (const name in cookieTypes){
+        if(!this.essential && cookieTypes[name] == 'essential'){
+          deleteCookie(name);
+        }
+        if(!this.settings && cookieTypes[name] == 'settings'){
+          deleteCookie(name);
+        }
+        if(!this.usage && cookieTypes[name] == 'usage'){
+          deleteCookie(name);
+        }
+        if(!this.campaigns && cookieTypes[name] == 'campaigns'){
+          deleteCookie(name);
+        }
+      }
+    }
+  }
+
+  var cookies = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    showCookieBannerIfNotSetAndSetTrackingCookies: showCookieBannerIfNotSetAndSetTrackingCookies,
+    deleteCookie: deleteCookie,
+    setCookie: setCookie,
+    getCookie: getCookie,
+    acceptCookies: acceptCookies,
+    hideCookieBanner: hideCookieBanner,
+    showCookieBanner: showCookieBanner,
+    hideCookieConfirmation: hideCookieConfirmation,
+    showCookieConfirmation: showCookieConfirmation,
+    setTrackingCookies: setTrackingCookies,
+    cookiePrefs: cookiePrefs
+  });
+
   /* global fetch, turf */
 
   window.dptp = {
     SelectOrNew: SelectOrNew,
     MultiSelect: MultiSelect,
-    MultiSelectOrNew: MultiSelectOrNew
+    MultiSelectOrNew: MultiSelectOrNew,
+    cookies: cookies
   };
 
+  // Initialize cookie banner when the module loads
+  if (typeof document !== 'undefined') {
+    document.addEventListener('DOMContentLoaded', function() {
+      showCookieBannerIfNotSetAndSetTrackingCookies();
+    });
+  }
+
 })();

application/templates/cookies.html

@@ -0,0 +1,130 @@
+{% extends "layouts/base.html" %}
+
+{% set htmlgovukNotificationBanner %}
+  <p class="govuk-notification-banner__heading">
+    You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="javascript:history.back()">Go back to the page you were looking at</a>.
+  </p>
+{% endset %}
+
+{% block pageTitle %}Cookies - Design Planning Data{% endblock %}
+{% set mainClasses = "govuk-main-wrapper--l" %}
+
+{% block content %}
+
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <div data-cookie-confirmation="true" style="display: none">
+        {{ govukNotificationBanner({
+          "type": "success",
+          "html": htmlgovukNotificationBanner
+        }) }}
+      </div>
+      <h1 class="govuk-heading-xl">Cookies on the Design Planning Data website</h1>
+      <p class="govuk-body">The Design Planning Data website puts cookies onto your computer to collect information about how you browse the site. This helps us to:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <!-- <li>update and improve the website based on your needs</li> -->
+        <li>remember the notifications you’ve seen so that we do not show them to you again</li>
+      </ul>
+      <p class="govuk-body">We do not collect any personal information that could be used to identify you.</p>
+      <p class="govuk-body">Find out more about <a href="https://ico.org.uk/your-data-matters/online/cookies/">how to manage cookies</a>.</p>
+      <h3 class="govuk-heading-m" id="essential-cookies">Essential cookies</h3>
+      <p class="govuk-body">Essential cookies are needed for the service to work. We do not need to ask for permission to use them.</p>
+      <h2 class="govuk-heading-l" id="how-cookies-are-used-on-the-digital-land-website">How cookies are used on the Design Planning Data website</h2>
+      <h3 class="govuk-heading-m" id="our-cookie-banner">Our cookie banner (essential)</h3>
+      <p class="govuk-body">When you first visit the Design Planning Data website, you will see a banner asking if you accept cookies. We’ll store a cookie to remember which option you selected. You can always change your mind and change your choice on this page.</p>
+      <p class="govuk-body">Next time you visit the site, we will remember your preference and not show the banner again.</p>
+      <p class="govuk-body">To do this, the Design Planning Data website sets the following cookies:</p>
+      <table class="govuk-table">
+        <thead class="govuk-table__head">
+          <tr class="govuk-table__row">
+            <th scope="row" class="govuk-table__header">Name</th>
+            <th scope="row" class="govuk-table__header">Purpose</th>
+            <th scope="row" class="govuk-table__header">Expires</th>
+          </tr>
+        </thead>
+        <tbody class="govuk-table__body">
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">cookies_preferences_set</td>
+            <td class="govuk-table__cell">Lets us know you've seen our cookie message.</td>
+            <td class="govuk-table__cell">1 year</td>
+          </tr>
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">cookies_policy</td>
+            <td class="govuk-table__cell">Saves your cookie choices.</td>
+            <td class="govuk-table__cell">1 year</td>
+          </tr>
+        </tbody>
+      </table>
+      <h3 class="govuk-heading-m" id="google-analytics-cookies">Google Analytics cookies (optional)</h3>
+      <p class="govuk-body">We use Google Analytics to measure how you use the Design Planning Data website. This helps us to improve the website experience and make sure it’s meeting your needs.</p>
+      <p class="govuk-body">Google Analytics sets cookies that store information about:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>the pages you visit on this website</li>
+        <li>how long you spend on each page</li>
+        <li>how you got to the site</li>
+        <li>what you click on whilst on the website</li>
+      </ul>
+
+      <div class="govuk-inset-text">
+      We do not allow Google to use or share our analytics data.
+      </div>
+
+      <p class="govuk-body">Google Analytics sets the following cookies.</p>
+      <table class="govuk-table">
+        <thead class="govuk-table__head">
+          <tr class="govuk-table__row">
+            <th scope="row" class="govuk-table__header">Name</th>
+            <th scope="row" class="govuk-table__header">Purpose</th>
+            <th scope="row" class="govuk-table__header">Expires</th>
+          </tr>
+        </thead>
+        <tbody class="govuk-table__body">
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">_ga</td>
+            <td class="govuk-table__cell">Counts the number of visitors by tracking if you've visited this website before.</td>
+            <td class="govuk-table__cell">2 years</td>
+          </tr>
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">_gid</td>
+            <td class="govuk-table__cell">Counts the number of visitors in the UK by tracking if you've visited this website before.</td>
+            <td class="govuk-table__cell">24 hours</td>
+          </tr>
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">_gat</td>
+            <td class="govuk-table__cell">Used to manage the rate at which page view requests are made.</td>
+            <td class="govuk-table__cell">10 minutes</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- section for cookie options HTML -->
+      <form id="cookie-form" class="govuk-form govuk-!-margin-top-9" onsubmit="return false;">
+        <fieldset class="govuk-fieldset">
+          <legend class="govuk-fieldset__legend govuk-fieldset__legend--l govuk-!-margin-bottom-6">Change your cookie options</legend>
+          <div class="govuk-form-group govuk-radios">
+            <div class="govuk-radios__item" data-children-count="1">
+              <input type="radio" name="cookies-usage" id="radio-ga-on" value="on" class="govuk-radios__input" onclick="cookiePrefs.setUsage(true);">
+              <label for="radio-ga-on" class="govuk-label govuk-radios__label">Use cookies that measure my website use</label>
+            </div>
+            <div class="govuk-radios__item" data-children-count="1">
+              <input type="radio" name="cookies-usage" id="radio-ga-off" value="off" class="govuk-radios__input" onclick="cookiePrefs.setUsage(false);">
+              <label for="radio-ga-off" class="govuk-label govuk-radios__label">Do not use cookies that measure my website use</label>
+            </div>
+          </div>
+        </fieldset>
+
+        <button class="govuk-button" type="submit" onclick="cookiePrefs.save();showSuccessBanner();">Save changes</button>
+      </form>
+
+      <script>
+        function showSuccessBanner() {
+          const popup = document.querySelector('[data-cookie-confirmation]');
+          popup.style.display = 'block';
+          popup.scrollIntoView();
+        }
+      </script>
+
+    </div>
+  </div>
+{% endblock %}

application/templates/layouts/base.html

@@ -50,6 +50,10 @@
   {% block pageStylesheets %}{% endblock pageStylesheets %}
 {% endblock %}
 
+{% block cookieBanner %}
+  {% include 'partials/cookie-banner.html' %}
+{% endblock %}
+
 {% block mastHead %}
 <header class="govuk-header dl-header app-header" role="banner" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
@@ -176,16 +180,23 @@ <h1 class="govuk-heading-xl">{{ title | default('Index') }}</h1>
   <div class="govuk-width-container">
     <div class="govuk-footer__meta">
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-        {% if config.AUTHENTICATION_ON and session["user"] %}
+
           <h2 class="govuk-visually-hidden">Admin links</h2>
           <ul class="govuk-footer__inline-list">
             <li class="govuk-footer__inline-list-item">
-              <a class="govuk-footer__link" href="{{ url_for('tags.index') }}">
-                Tags
+              <a class="govuk-footer__link" href="{{ url_for('main.cookies') }}">
+                Cookies
               </a>
             </li>
+            {% if config.AUTHENTICATION_ON and session["user"] %}
+              <li class="govuk-footer__inline-list-item">
+                <a class="govuk-footer__link" href="{{ url_for('tags.index') }}">
+                  Tags
+                </a>
+              </li>
+            {% endif %}
           </ul>
-        {% endif %}
+
         <div class="govuk-footer__meta-custom">
           The <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/">software</a> and <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/">data</a> used to build these pages is <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/blob/master/LICENSE">open source</a>.
         </div>