diff --git a/app/assets/javascripts/cookieSettings.js b/app/assets/javascripts/cookieSettings.js new file mode 100644 index 000000000..684b70a7e --- /dev/null +++ b/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); + diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss index c1609b511..9b8755367 100644 --- a/app/assets/stylesheets/govuk-frontend/_all.scss +++ b/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"; diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index b1cb870aa..26b07297d 100644 --- a/app/assets/stylesheets/main.scss +++ b/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'; diff --git a/app/assets/stylesheets/views/cookies.scss b/app/assets/stylesheets/views/cookies.scss new file mode 100644 index 000000000..05974bb08 --- /dev/null +++ b/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; +} diff --git a/app/templates/views/cookies.html b/app/templates/views/cookies.html index 0a2f1e16b..5559185b7 100644 --- a/app/templates/views/cookies.html +++ b/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 %}
+

Cookies

- GOV.UK Notify puts small files (known as ‘cookies’) - onto your computer. -

-

These cookies are used to remember you once you’ve logged in.

-

- Find out how to manage cookies. + Cookies are small files saved on your phone, tablet or computer when you visit a website.

+

We use cookies to make GOV.UK Notify work and collect information about how you use our service.

-

Session cookies

+

Essential cookies

- 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.

@@ -37,21 +41,43 @@ notify_admin_session + + + + +
- Used to keep you logged in + Used to keep you signed in 20 hours
+ cookie_policy + + Saves your cookie consent settings + + 1 year +
-

Introductory message cookie

+

Analytics cookies (optional)

- 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. +
+ This information helps us to improve our service.

+

+ Google is not allowed to use or share our analytics data with anyone. +

+

+ Google Analytics cookies collect and store anonymised data about: +

+ @@ -63,18 +89,62 @@ + + + + +
- seen_cookie_message + _ga - Saves a message to let us know that you have seen our cookie - message + Checks if you’ve visited GOV.UK Notify before - 1 month + 2 years +
+ _gid + + Checks if you’ve visited GOV.UK Notify before + + 24 hours
+
+

Do you want to accept analytics cookies?

+

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:

+
    +
  • reloading the page
    • +
  • turning on Javascript in your browser
    • +
+
+
+
+
+
+ + Do you want to accept analytics cookies? + +
+
+ + +
+
+ + +
+
+
+
+ +
+
diff --git a/gulpfile.js b/gulpfile.js index 8e8893a64..52f713f2b 100644 --- a/gulpfile.js +++ b/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',