mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-07 06:28:24 -04:00
Cookie streamlining (#493)
* remove cookie banner * remove form from cookies.html * move cookie content to privacy page
This commit is contained in:
Steven Reilly
@@ -1,84 +0,0 @@
|
||||
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);
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
// GOV.UK Publishing components cookie banner styles
|
||||
// https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
|
||||
|
||||
// component uses .govuk-body and .govuk-button classes from govuk-frontend
|
||||
@import 'core/typography';
|
||||
@import 'components/button/_button';
|
||||
|
||||
.notify-cookie-banner__wrapper {
|
||||
@include govuk-responsive-padding(4, "top");
|
||||
@include govuk-responsive-padding(5, "bottom");
|
||||
}
|
||||
|
||||
// component should only be shown if JS is available, by the cookieMessage JS, so hide by default
|
||||
.notify-cookie-banner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notify-cookie-banner__buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__button,
|
||||
.notify-cookie-banner__link {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.notify-cookie-banner__button {
|
||||
display: inline-block;
|
||||
flex: 1 0;
|
||||
padding-left: govuk-spacing(9);
|
||||
padding-right: govuk-spacing(9);
|
||||
margin-bottom: govuk-spacing(2);
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
flex: 0 0 150px;
|
||||
padding-left: govuk-spacing(2);
|
||||
padding-right: govuk-spacing(2);
|
||||
margin-bottom: govuk-spacing(1);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__button-accept {
|
||||
margin-right: govuk-spacing(4);
|
||||
}
|
||||
|
||||
.notify-cookie-banner__link {
|
||||
@include govuk-font(19);
|
||||
line-height: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 9px 0px 6px;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
display: inline;
|
||||
width: auto;
|
||||
margin-left: govuk-spacing(6);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__confirmation {
|
||||
display: none;
|
||||
position: relative;
|
||||
padding: govuk-spacing(4) 0;
|
||||
|
||||
@include govuk-media-query($from: desktop) {
|
||||
padding: govuk-spacing(4);
|
||||
}
|
||||
|
||||
// This element is focused using JavaScript so that it's being read out by screen readers
|
||||
// for this reason we don't want to show the default outline or emphasise it visually using `govuk-focused-text`
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__confirmation-message,
|
||||
.notify-cookie-banner__hide-button {
|
||||
display: block;
|
||||
|
||||
@include govuk-media-query($from: desktop) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__confirmation-message {
|
||||
margin-right: govuk-spacing(4);
|
||||
|
||||
@include govuk-media-query($from: desktop) {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-cookie-banner__hide-button {
|
||||
@include govuk-font($size: 19);
|
||||
color: $govuk-link-colour;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
text-decoration: underline;
|
||||
padding: govuk-spacing(0);
|
||||
margin-top: govuk-spacing(2);
|
||||
right: govuk-spacing(3);
|
||||
cursor: pointer;
|
||||
|
||||
@include govuk-media-query($from: desktop) {
|
||||
margin-top: govuk-spacing(0);
|
||||
position: absolute;
|
||||
right: govuk-spacing(4);
|
||||
}
|
||||
}
|
||||
|
||||
// Additions
|
||||
|
||||
// Override margin-bottom, inherited from using .govuk-body class
|
||||
.notify-cookie-banner__confirmation-message {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -37,7 +37,6 @@ $path: '/static/images/';
|
||||
// Specific to this application
|
||||
@import 'local/typography';
|
||||
@import 'grids';
|
||||
@import 'components/cookie-message';
|
||||
@import 'components/site-footer';
|
||||
@import 'components/placeholder';
|
||||
@import 'components/sms-message';
|
||||
@@ -81,7 +80,6 @@ $path: '/static/images/';
|
||||
@import 'views/send';
|
||||
@import 'views/get_started';
|
||||
@import 'views/history';
|
||||
@import 'views/cookies';
|
||||
@import 'views/webauthn';
|
||||
|
||||
// TODO: break this up
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
.cookie-settings__form-wrapper {
|
||||
display: none;
|
||||
|
||||
.js-enabled & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.cookie-settings__no-js {
|
||||
.js-enabled & {
|
||||
display: none;
|
||||
|
||||
@@ -41,11 +41,6 @@ def error(status_code):
|
||||
abort(status_code)
|
||||
|
||||
|
||||
@main.route('/cookies')
|
||||
def cookies():
|
||||
return render_template('views/cookies.html')
|
||||
|
||||
|
||||
@main.route('/privacy')
|
||||
def privacy():
|
||||
return render_template('views/privacy.html')
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
{% extends "main_template.html" %}
|
||||
{% from "components/banner.html" import banner %}
|
||||
{% from "components/cookie-banner.html" import cookie_banner %}
|
||||
|
||||
{% block headIcons %}
|
||||
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
|
||||
@@ -41,10 +40,6 @@
|
||||
{% block bodyStart %}
|
||||
{% block extra_javascripts_before_body %}
|
||||
{% endblock %}
|
||||
|
||||
{% block cookie_message %}
|
||||
{{ cookie_banner() }}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
{% macro cookie_banner(id='global-cookie-message') %}
|
||||
|
||||
<div id="{{ id }}" class="notify-cookie-banner" data-module="cookie-banner" role="region" aria-label="cookie banner">
|
||||
<div class="notify-cookie-banner__wrapper govuk-width-container">
|
||||
<h2 class="notify-cookie-banner__heading govuk-heading-m" id="notify-cookie-banner__heading">Can we store analytics cookies on your device?</h2>
|
||||
<p class="govuk-body">Analytics cookies help us understand how our website is being used.</p>
|
||||
<div class="notify-cookie-banner__buttons">
|
||||
<button class="govuk-button notify-cookie-banner__button notify-cookie-banner__button-accept" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
|
||||
Yes<span class="govuk-visually-hidden">, Notify can store analytics cookies on your device</span>
|
||||
</button>
|
||||
<button class="govuk-button notify-cookie-banner__button notify-cookie-banner__button-reject" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
|
||||
No<span class="govuk-visually-hidden">, Notify cannot store analytics cookies on your device</span>
|
||||
</button>
|
||||
<a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notify-cookie-banner__confirmation govuk-width-container" tabindex="-1">
|
||||
<p class="notify-cookie-banner__confirmation-message govuk-body">
|
||||
You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.
|
||||
</p>
|
||||
<button class="notify-cookie-banner__hide-button govuk-link" data-hide-cookie-banner="true" role="link">Hide<span class="govuk-visually-hidden"> cookies message</span></button>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
@@ -1,151 +0,0 @@
|
||||
{% 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="govuk-grid-row">
|
||||
<div class="govuk-grid-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">
|
||||
Cookies are small files saved on your phone, tablet or computer when you visit a website.
|
||||
</p>
|
||||
<p class="govuk-body">We use cookies to make U.S. Notify work and collect information about how you use our service.</p>
|
||||
|
||||
<h2 class="heading-medium" id="essential-cookies">Essential cookies</h2>
|
||||
<p class="govuk-body">
|
||||
Essential cookies keep your information secure while you use Notify. We do not need to ask permission to use them.
|
||||
</p>
|
||||
<table>
|
||||
<caption class="govuk-visually-hidden">Essential cookies</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Purpose</th>
|
||||
<th>Expires</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
notify_admin_session
|
||||
</td>
|
||||
<td width="50%">
|
||||
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" id="analytics-cookies">Analytics cookies (optional)</h2>
|
||||
<p class="govuk-body">
|
||||
With your permission, we use Google Analytics to collect data about how you use Notify. This information helps us to improve our service.
|
||||
</p>
|
||||
<p class="govuk-body">
|
||||
Google is not allowed to use or share our analytics data with anyone.
|
||||
</p>
|
||||
<p class="govuk-body">
|
||||
Google Analytics stores anonymised information about:
|
||||
</p>
|
||||
<ul class="govuk-list govuk-list--bullet">
|
||||
<li>how you got to U.S. Notify</li>
|
||||
<li>the pages you visit on Notify and how long you spend on them</li>
|
||||
<li>any errors you see while using Notify</li>
|
||||
</ul>
|
||||
<table>
|
||||
<caption class="govuk-visually-hidden">Google Analytics cookies</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Purpose</th>
|
||||
<th>Expires</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
_ga
|
||||
</td>
|
||||
<td width="50%">
|
||||
Checks if you’ve visited Notify before. This helps us count how many people visit our site.
|
||||
</td>
|
||||
<td>
|
||||
2 years
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
_gid
|
||||
</td>
|
||||
<td width="50%">
|
||||
Checks if you’ve visited Notify before. This helps us count how many people visit our site.
|
||||
</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 class="govuk-body">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>
|
||||
|
||||
{% endblock %}
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
{{ content_metadata(
|
||||
data={
|
||||
"Last updated": "21 November 2022"
|
||||
"Last updated": "May 3, 2023"
|
||||
}
|
||||
) }}
|
||||
|
||||
@@ -92,6 +92,101 @@
|
||||
|
||||
<p class="govuk-body">If you have any of these requests, get in contact with our Data Protection Officer - you can find their contact details below.</p> -->
|
||||
|
||||
<h2 class="heading-medium">Cookies</h1>
|
||||
<p class="summary">
|
||||
Cookies are small files saved on your phone, tablet or computer when you visit a website.
|
||||
</p>
|
||||
<p class="govuk-body">We use cookies to make U.S. Notify work and collect information about how you use our service.</p>
|
||||
|
||||
<h3 class="heading-small" id="essential-cookies">Essential cookies</h2>
|
||||
<p class="govuk-body">
|
||||
Essential cookies keep your information secure while you use Notify. We do not need to ask permission to use them.
|
||||
</p>
|
||||
<table>
|
||||
<caption class="govuk-visually-hidden">Essential cookies</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Purpose</th>
|
||||
<th>Expires</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
notify_admin_session
|
||||
</td>
|
||||
<td width="50%">
|
||||
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>
|
||||
|
||||
<h3 class="heading-small" id="analytics-cookies">Analytics cookies</h2>
|
||||
<p class="govuk-body">
|
||||
We also use Google Analytics to collect data about how you use Notify. This information helps us to improve our service.
|
||||
</p>
|
||||
<p class="govuk-body">
|
||||
Google is not allowed to use or share our analytics data with anyone.
|
||||
</p>
|
||||
<p class="govuk-body">
|
||||
Google Analytics stores anonymised information about:
|
||||
</p>
|
||||
<ul class="govuk-list govuk-list--bullet">
|
||||
<li>how you got to U.S. Notify</li>
|
||||
<li>the pages you visit on Notify and how long you spend on them</li>
|
||||
<li>any errors you see while using Notify</li>
|
||||
</ul>
|
||||
<table>
|
||||
<caption class="govuk-visually-hidden">Google Analytics cookies</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Purpose</th>
|
||||
<th>Expires</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
_ga
|
||||
</td>
|
||||
<td width="50%">
|
||||
Checks if you’ve visited Notify before. This helps us count how many people visit our site.
|
||||
</td>
|
||||
<td>
|
||||
2 years
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
_gid
|
||||
</td>
|
||||
<td width="50%">
|
||||
Checks if you’ve visited Notify before. This helps us count how many people visit our site.
|
||||
</td>
|
||||
<td>
|
||||
24 hours
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 class="heading-medium" id="changes-to-this-notice">Changes to this notice</h2>
|
||||
|
||||
<p class="govuk-body">We may modify or amend this privacy notice at our discretion at any time. When we make changes to this notice, we will amend the last modified date at the top of this page. Any modification or amendment to this privacy notice will be applied
|
||||
|
||||
Reference in New Issue
Block a user