From 249e59bb2a503e15dc0f18620866b0f4768ccebb Mon Sep 17 00:00:00 2001 From: Sylvain Date: Thu, 13 Jun 2019 11:28:55 +0200 Subject: [PATCH] get user consent about cookies --- .eslintrc | 3 +- CHANGELOG.md | 1 + app/assets/javascripts/app.js | 20 ++++-- app/assets/javascripts/controllers/cookies.js | 64 +++++++++++++++++++ app/assets/javascripts/controllers/wallet.js | 13 +--- app/assets/javascripts/router.js.erb | 4 ++ app/assets/stylesheets/modules/cookies.scss | 21 +++--- app/assets/templates/shared/cookies.html | 10 +++ app/assets/templates/shared/header.html.erb | 10 --- app/models/stylesheet.rb | 3 +- app/views/application/index.html.erb | 3 +- config/locales/app.public.fr.yml | 2 +- lib/tasks/fablab/maintenance.rake | 5 ++ 13 files changed, 118 insertions(+), 41 deletions(-) create mode 100644 app/assets/javascripts/controllers/cookies.js create mode 100644 app/assets/templates/shared/cookies.html diff --git a/.eslintrc b/.eslintrc index 8753c7e69..4006a27f2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -6,7 +6,8 @@ "globals": { "Application": true, "angular": true, - "Fablab": true + "Fablab": true, + "moment": true, } } diff --git a/CHANGELOG.md b/CHANGELOG.md index cf52417f8..0522d9a8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ - [TODO DEPLOY] `rake db:seed` - [TODO DEPLOY] `rake fablab:setup:migrate_pdf_invoices_folders` - [TODO DEPLOY] `rake fablab:maintenance:delete_inactive_users` (will prompt for confirmation) +- [TODO DEPLOY] `rake fablab:maintenance:rebuild_stylesheet` ## v3.1.2 2019 May 27 diff --git a/app/assets/javascripts/app.js b/app/assets/javascripts/app.js index 70992969b..460516ca2 100644 --- a/app/assets/javascripts/app.js +++ b/app/assets/javascripts/app.js @@ -24,12 +24,20 @@ angular.module('application', ['ngCookies', 'ngResource', 'ngSanitize', 'ui.rout .config(['$httpProvider', 'AuthProvider', 'growlProvider', 'unsavedWarningsConfigProvider', 'AnalyticsProvider', 'uibDatepickerPopupConfig', '$provide', '$translateProvider', function ($httpProvider, AuthProvider, growlProvider, unsavedWarningsConfigProvider, AnalyticsProvider, uibDatepickerPopupConfig, $provide, $translateProvider) { // Google analytics - AnalyticsProvider.setAccount(Fablab.gaId); - // track all routes (or not) - AnalyticsProvider.trackPages(true); - AnalyticsProvider.setDomainName(Fablab.defaultHost); - AnalyticsProvider.useAnalytics(true); - AnalyticsProvider.setPageEvent('$stateChangeSuccess'); + // first we check the user acceptance + const cookiesConsent = document.cookie.replace(/(?:(?:^|.*;\s*)fab-manager-cookies-consent\s*=\s*([^;]*).*$)|^.*$/, '$1'); + if (cookiesConsent === 'accept') { + AnalyticsProvider.setAccount(Fablab.gaId); + // track all routes (or not) + AnalyticsProvider.trackPages(true); + AnalyticsProvider.setDomainName(Fablab.defaultHost); + AnalyticsProvider.useAnalytics(true); + AnalyticsProvider.setPageEvent('$stateChangeSuccess'); + } else { + // if the cookies were not explicitly accepted, delete them + document.cookie = '_ga=; expires=Thu, 01 Jan 1970 00:00:00 GMT'; + document.cookie = '_gid=; expires=Thu, 01 Jan 1970 00:00:00 GMT'; + } // Custom messages for the date-picker widget uibDatepickerPopupConfig.closeText = Fablab.translations.app.shared.buttons.close; diff --git a/app/assets/javascripts/controllers/cookies.js b/app/assets/javascripts/controllers/cookies.js new file mode 100644 index 000000000..8976a238d --- /dev/null +++ b/app/assets/javascripts/controllers/cookies.js @@ -0,0 +1,64 @@ +'use strict'; + +/** + * Controller used for the cookies consent modal + */ +Application.Controllers.controller('CookiesController', ['$scope', '$cookies', 'Setting', + function ($scope, $cookies, Setting) { + /* PUBLIC SCOPE */ + + // the acceptation state (undefined if no decision was made until now) + $scope.cookiesState = undefined; + + // link pointed by "learn more" + $scope.learnMoreUrl = 'https://www.cookiesandyou.com/'; + + // current user wallet + $scope.declineCookies = function () { + const expires = moment().add(13, 'months').toDate(); + $cookies.put('fab-manager-cookies-consent', 'decline', { expires }); + readCookie(); + }; + + // current wallet transactions + $scope.acceptCookies = function () { + const expires = moment().add(13, 'months').toDate(); + $cookies.put('fab-manager-cookies-consent', 'accept', { expires }); + readCookie(); + // enable tracking using code provided by google analytics + /* eslint-disable */ + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', Fablab.gaId, 'auto'); + ga('send', 'pageview'); + /* eslint-enable */ + }; + + /* PRIVATE SCOPE */ + + /** + * Kind of constructor: these actions will be realized first when the controller is loaded + */ + const initialize = function () { + readCookie(); + // if the privacy policy was defined, redirect the user to it + Setting.get({ name: 'privacy_body' }, data => { + if (data.setting.value) { + $scope.learnMoreUrl = '#!/privacy-policy'; + } + }); + // if the GA_ID environment variable was not set, only functional cookies will be set, so user consent is not required + $scope.cookiesState = 'ignore'; + }; + + const readCookie = function () { + $scope.cookiesState = $cookies.get('fab-manager-cookies-consent'); + }; + + // !!! MUST BE CALLED AT THE END of the controller + return initialize(); + } +]); diff --git a/app/assets/javascripts/controllers/wallet.js b/app/assets/javascripts/controllers/wallet.js index e2e24aaab..c0fb0701c 100644 --- a/app/assets/javascripts/controllers/wallet.js +++ b/app/assets/javascripts/controllers/wallet.js @@ -1,14 +1,3 @@ -/* eslint-disable - no-return-assign, - no-undef, -*/ -// TODO: This file was created by bulk-decaffeinate. -// Fix any style issues and re-enable lint. -/* - * decaffeinate suggestions: - * DS102: Remove unnecessary code created because of implicit returns - * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md - */ 'use strict'; Application.Controllers.controller('WalletController', ['$scope', 'walletPromise', 'transactionsPromise', @@ -19,6 +8,6 @@ Application.Controllers.controller('WalletController', ['$scope', 'walletPromise $scope.wallet = walletPromise; // current wallet transactions - return $scope.transactions = transactionsPromise; + $scope.transactions = transactionsPromise; } ]); diff --git a/app/assets/javascripts/router.js.erb b/app/assets/javascripts/router.js.erb index a5119b1ac..3616fac07 100644 --- a/app/assets/javascripts/router.js.erb +++ b/app/assets/javascripts/router.js.erb @@ -27,6 +27,10 @@ angular.module('application.router', ['ui.router']) templateUrl: '<%= asset_path "shared/leftnav.html" %>', controller: 'MainNavController' }, + 'cookies': { + templateUrl: '<%= asset_path "shared/cookies.html" %>', + controller: 'CookiesController' + }, 'main': {} }, resolve: { diff --git a/app/assets/stylesheets/modules/cookies.scss b/app/assets/stylesheets/modules/cookies.scss index 5ef3125d3..77afd4977 100644 --- a/app/assets/stylesheets/modules/cookies.scss +++ b/app/assets/stylesheets/modules/cookies.scss @@ -1,19 +1,21 @@ -#cookies-consent { +.cookies-consent { display: flex; position: fixed; - bottom: 2rem; - left: 2rem; + bottom: 3rem; + left: 3rem; width: 40rem; - height: 20rem; - background-color: blue; - color: white; - padding: 4rem; + background-color: #f5f5f5; + padding: 3rem; flex-direction: column; + z-index: 100; + -webkit-box-shadow: 0 4px 10px 2px rgba(224,224,224,0.43); + -moz-box-shadow: 0 4px 10px 2px rgba(224,224,224,0.43); + box-shadow: 0 4px 10px 2px rgba(224,224,224,0.43); .cookies-actions { + display: flex; button { - width: 50%; - + flex-basis: 50%; } button.decline { background-color: transparent; @@ -22,6 +24,7 @@ button.accept { background-color: red; border: 0; + font-size: 17px; } } } diff --git a/app/assets/templates/shared/cookies.html b/app/assets/templates/shared/cookies.html new file mode 100644 index 000000000..54230e068 --- /dev/null +++ b/app/assets/templates/shared/cookies.html @@ -0,0 +1,10 @@ +
+

+ {{ 'cookies.about_cookies' }} + {{ 'cookies.learn_more' }} +

+
+ + +
+
diff --git a/app/assets/templates/shared/header.html.erb b/app/assets/templates/shared/header.html.erb index fd910d41c..9a3fe9cfc 100644 --- a/app/assets/templates/shared/header.html.erb +++ b/app/assets/templates/shared/header.html.erb @@ -58,14 +58,4 @@ " class="font-sbold label text-md"> {{ 'sign_in' | translate }} <% end %> - diff --git a/app/models/stylesheet.rb b/app/models/stylesheet.rb index d3f1f62c7..e1f258b0f 100644 --- a/app/models/stylesheet.rb +++ b/app/models/stylesheet.rb @@ -81,6 +81,7 @@ class Stylesheet < ActiveRecord::Base .about-picture { background: linear-gradient( rgba(255,255,255,0.12), rgba(255,255,255,0.13) ), linear-gradient( #{Stylesheet.primary_with_alpha(0.78)}, #{Stylesheet.primary_with_alpha(0.82)} ), url('/about-fablab.jpg') no-repeat; } .social-icons > div:hover { background-color: #{Stylesheet.secondary}; } .profile-top { background: linear-gradient( rgba(255,255,255,0.12), rgba(255,255,255,0.13) ), linear-gradient(#{Stylesheet.primary_with_alpha(0.78)}, #{Stylesheet.primary_with_alpha(0.82)} ), url('#{CustomAsset.get_url('profile-image-file') || '/about-fablab.jpg'}') no-repeat; } - .profile-top .social-links a:hover { background-color: #{Stylesheet.secondary} !important; border-color: #{Stylesheet.secondary} !important; }" + .profile-top .social-links a:hover { background-color: #{Stylesheet.secondary} !important; border-color: #{Stylesheet.secondary} !important; } + section#cookies-modal div.cookies-consent .cookies-actions button.accept { background-color: #{Stylesheet.secondary}; }" end end diff --git a/app/views/application/index.html.erb b/app/views/application/index.html.erb index 29cb6eaf7..f01ef408c 100644 --- a/app/views/application/index.html.erb +++ b/app/views/application/index.html.erb @@ -92,10 +92,11 @@
+
+
- diff --git a/config/locales/app.public.fr.yml b/config/locales/app.public.fr.yml index 4c3ec5735..330dbd418 100644 --- a/config/locales/app.public.fr.yml +++ b/config/locales/app.public.fr.yml @@ -8,7 +8,7 @@ fr: # cookies cookies: - about_cookies: "Ce site web utilise des cookies à des fins statistiques de mesure d'audiance." + about_cookies: "Ce site web utilise des cookies à des fins de mesure d'audiance." learn_more: "En savoir plus" accept: "Accepter les cookies" decline: "Refuser" diff --git a/lib/tasks/fablab/maintenance.rake b/lib/tasks/fablab/maintenance.rake index 30feb025a..bd3303063 100644 --- a/lib/tasks/fablab/maintenance.rake +++ b/lib/tasks/fablab/maintenance.rake @@ -64,5 +64,10 @@ namespace :fablab do puts 'No inactive users to delete' end end + + desc '(re)build customization stylesheet' + task rebuild_stylesheet: :environment do + Stylesheet.build_sheet! + end end end