Update cookies page

Includes:
- new content
- added option to turn analytics on/off
- non-js version for the on/off switch
- a banner to confirm user's choice was saved,
  shown when they click the save button
- the cookie banner that appears on all other
  pages removed from this page

app/assets/javascripts/cookieSettings.js

@@ -0,0 +1,84 @@
+window.GOVUK = window.GOVUK || {};
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function CookieSettings () {}
+
+  CookieSettings.prototype.start = function ($module) {
+    this.$module = $module[0];
+
+    this.$module.submitSettingsForm = this.submitSettingsForm.bind(this);
+
+    document.querySelector('form[data-module=cookie-settings]')
+      .addEventListener('submit', this.$module.submitSettingsForm);
+
+    this.setInitialFormValues();
+  };
+
+  CookieSettings.prototype.setInitialFormValues = function () {
+    var currentConsentCookie = window.GOVUK.getConsentCookie('consent');
+
+    if (!currentConsentCookie) { return; }
+
+    var radioButton;
+
+    if (currentConsentCookie.analytics) {
+      radioButton = document.querySelector('input[name=cookies-analytics][value=on]');
+    } else {
+      radioButton = document.querySelector('input[name=cookies-analytics][value=off]');
+    }
+
+    radioButton.checked = true;
+  };
+
+  CookieSettings.prototype.submitSettingsForm = function (event) {
+    event.preventDefault();
+
+    var formInputs = event.target.querySelectorAll("input[name=cookies-analytics]");
+    var options = {};
+
+    for ( var i = 0; i < formInputs.length; i++ ) {
+      var input = formInputs[i];
+      if (input.checked) {
+        var value = input.value === "on" ? true : false;
+
+        options.analytics = value;
+        break;
+      }
+    }
+
+    window.GOVUK.setConsentCookie(options);
+
+    this.showConfirmationMessage();
+
+    if(window.GOVUK.hasConsentFor('analytics')) {
+      window.GOVUK.initAnalytics();
+    }
+
+    return false;
+  };
+
+  CookieSettings.prototype.showConfirmationMessage = function () {
+    var confirmationMessage = document.querySelector('div[data-cookie-confirmation]');
+    var previousPageLink = document.querySelector('.cookie-settings__prev-page');
+    var referrer = CookieSettings.prototype.getReferrerLink();
+
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+
+    if (referrer && referrer !== document.location.pathname) {
+      previousPageLink.href = referrer;
+      previousPageLink.style.display = "block";
+    } else {
+      previousPageLink.style.display = "none";
+    }
+
+    confirmationMessage.style.display = "block";
+  };
+
+  CookieSettings.prototype.getReferrerLink = function () {
+    return document.referrer ? new URL(document.referrer).pathname : false;
+  };
+
+  Modules.CookieSettings = CookieSettings;
+})(window.GOVUK.Modules);
+

app/assets/stylesheets/govuk-frontend/_all.scss

@@ -25,6 +25,7 @@ $govuk-assets-path: "/static/";
 @import 'components/back-link/_back-link';
 @import 'components/button/_button';
 @import 'components/details/_details';
+@import 'components/radios/_radios';
 
 @import "utilities/all";
 @import "overrides/all";

app/assets/stylesheets/main.scss

@@ -82,6 +82,7 @@ $path: '/static/images/';
 @import 'views/send';
 @import 'views/get_started';
 @import 'views/history';
+@import 'views/cookies';
 
 // TODO: break this up
 @import 'app';

app/assets/stylesheets/views/cookies.scss

@@ -0,0 +1,17 @@
+.cookie-settings__form-wrapper {
+  display: none;
+
+  .js-enabled & {
+    display: block;
+  }
+}
+
+.cookie-settings__no-js {
+  .js-enabled & {
+    display: none;
+  }
+}
+
+.cookie-settings__confirmation {
+  display: none;
+}

app/templates/views/cookies.html

@@ -1,27 +1,31 @@
 {% extends "withoutnav_template.html" %}
+{% from "components/banner.html" import banner %}
 
 {% block per_page_title %}
   Cookies
 {% endblock %}
 
+{% block cookie_message %}{% endblock %}
+
 {% block maincolumn_content %}
 
 <div class="grid-row">
   <div class="column-two-thirds">
+    <div class="cookie-settings__confirmation banner banner-with-tick" data-cookie-confirmation="true" role="group" tabindex="-1">
+      <h2 class="banner-title">Your cookie settings were saved</h2>
+      <a class="govuk_link cookie-settings__prev-page govuk-!-margin-top-1" href="#" data-module="track-click" data-track-category="cookieSettings" data-track-action="Back to previous page">
+        Go back to the page you were looking at
+      </a>
+    </div>
     <h1 class="heading-large">Cookies</h1>
     <p class="summary">
-        GOV.UK Notify puts small files (known as ‘cookies’)
-        onto your computer.
-    </p>
-    <p>These cookies are used to remember you once you’ve logged in.</p>
-    <p>
-        Find out <a href="https://ico.org.uk/for-the-public/online/cookies/">how to manage cookies</a>.
+        Cookies are small files saved on your phone, tablet or computer when you visit a website.
     </p>
+    <p>We use cookies to make GOV.UK Notify work and collect information about how you use our service.</p>
 
-    <h2 class="heading-medium">Session cookies</h2>
+    <h2 class="heading-medium">Essential cookies</h2>
     <p>
-        We store session cookies on your computer to help keep your information
-        secure while you use the service.
+      Essential cookies keep your information secure while you use Notify. We do not need to ask permission to use them.
     </p>
     <table>
         <thead>
@@ -37,21 +41,43 @@
                   notify_admin_session
                 </td>
                 <td width="50%">
-                  Used to keep you logged in
+                  Used to keep you signed in
                 </td>
                 <td>
                   20 hours
                 </td>
             </tr>
+            <tr>
+                <td>
+                  cookie_policy
+                </td>
+                <td width="50%">
+                  Saves your cookie consent settings
+                </td>
+                <td>
+                  1 year
+                </td>
+            </tr>
         </tbody>
     </table>
 
-    <h2 class="heading-medium">Introductory message cookie</h2>
+    <h2 class="heading-medium">Analytics cookies (optional)</h2>
     <p>
-        When you first use the service, you may see a pop-up ‘welcome’ message.
-        Once you’ve seen the message, we store a cookie on your computer so it
-        knows not to show it again.
+      With your permission, we use Google Analytics to collect data about how you use Notify.
+      <br />
+      This information helps us to improve our service.
     </p>
+    <p>
+      Google is not allowed to use or share our analytics data with anyone.
+    </p>
+    <p>
+      Google Analytics cookies collect and store anonymised data about:
+    </p>
+    <ul class="govuk-list govuk-list--bullet">
+      <li>unique users</li>
+      <li>informing referring sites</li>
+      <li>visitor and session counts</li>
+    </ul>
     <table>
         <thead>
             <tr>
@@ -63,18 +89,62 @@
         <tbody>
             <tr>
                 <td>
-                  seen_cookie_message
+                  _ga 
                 </td>
                 <td width="50%">
-                    Saves a message to let us know that you have seen our cookie
-                    message
+                  Checks if you’ve visited GOV.UK Notify before
                 </td>
                 <td>
-                  1 month
+                  2 years
+                </td>
+            </tr>
+            <tr>
+                <td>
+                  _gid
+                </td>
+                <td width="50%">
+                  Checks if you’ve visited GOV.UK Notify before
+                </td>
+                <td>
+                  24 hours
                 </td>
             </tr>
         </tbody>
     </table>
+    <div class="cookie-settings__no-js">
+      <h2 class="govuk-heading-s govuk-!-margin-top-6">Do you want to accept analytics cookies?</h2>
+      <p>We use Javascript to set our analytics cookies. Unfortunately Javascript is not running on your browser, so you cannot change your settings. You can try:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>reloading the page</li>
+        <li>turning on Javascript in your browser</li>
+      </ul>
+    </div>
+    <div class="cookie-settings__form-wrapper">
+      <form data-module="cookie-settings">
+        <div class="govuk-form-group govuk-!-margin-top-6">
+          <fieldset class="govuk-fieldset" aria-describedby="changed-name-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
+              Do you want to accept analytics cookies?
+            </legend>
+            <div class="govuk-radios govuk-radios--inline">
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="cookies-analytics-yes" name="cookies-analytics" type="radio" value="on">
+                <label class="govuk-label govuk-radios__label" for="cookies-analytics-yes">
+                  Yes
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="cookies-analytics-no" name="cookies-analytics" type="radio" value="off">
+                <label class="govuk-label govuk-radios__label" for="cookies-analytics-no">
+                  No
+                </label>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+        <button class="govuk-button" type="submit">Save cookie settings</button>
+      </form>
+    </div>
   </div>
 </div>
 

gulpfile.js

@@ -146,6 +146,7 @@ const javascripts = () => {
     paths.src + 'javascripts/analytics/analytics.js',
     paths.src + 'javascripts/analytics/init.js',
     paths.src + 'javascripts/cookieMessage.js',
+    paths.src + 'javascripts/cookieSettings.js',
     paths.src + 'javascripts/stick-to-window-when-scrolling.js',
     paths.src + 'javascripts/apiKey.js',
     paths.src + 'javascripts/autofocus.js',