get user consent about cookies

2025-02-19 13:54:25 +01:00 · 2019-06-13 11:28:55 +02:00 · 2019-06-13 11:28:55 +02:00 · 249e59bb2a
commit 249e59bb2a
parent 7fc03af6bc
13 changed files with 118 additions and 41 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -6,7 +6,8 @@
  "globals": {
    "Application": true,
    "angular": true,
-    "Fablab": true
+    "Fablab": true,
+    "moment": true,
  }
 }

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

--- 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;
--- a/app/assets/javascripts/controllers/cookies.js
+++ 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();
+  }
+]);
--- 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;
  }
 ]);
--- 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: {
--- 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;
    }
  }
 }
--- a/app/assets/templates/shared/cookies.html
+++ b/app/assets/templates/shared/cookies.html
@ -0,0 +1,10 @@
+<div class="cookies-consent" ng-hide="cookiesState">
+  <p class="cookies-infos">
+    <span translate>{{ 'cookies.about_cookies' }}</span>
+    <a ng-href="{{learnMoreUrl}}" translate>{{ 'cookies.learn_more' }}</a>
+  </p>
+  <div class="cookies-actions">
+    <button class="decline" ng-click="declineCookies()" translate>{{ 'cookies.decline' }}</button>
+    <button class="accept" ng-click="acceptCookies()" translate>{{ 'cookies.accept' }}</button>
+  </div>
+</div>
--- a/app/assets/templates/shared/header.html.erb
+++ b/app/assets/templates/shared/header.html.erb
@ -58,14 +58,4 @@
            <a href="<%= "/users/auth/#{active_provider.strategy_name}"%>" class="font-sbold  label text-md"><i class="fa fa-sign-in"></i> {{ 'sign_in' | translate }}</a>
        </li>
    <% end %>
-    <section id="cookies-consent">
-      <p class="cookies-infos">
-        <span translate>{{ 'cookies.about_cookies' }}</span>
-        <a ui-sref="app.public.privacy" translate>{{ 'cookies.learn_more' }}</a>
-      </p>
-      <div class="cookies-actions">
-        <button class="decline" translate>{{ 'cookies.decline' }}</button>
-        <button class="accept" translate>{{ 'cookies.accept' }}</button>
-      </div>
-    </section>
  </ul>
--- 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
--- a/app/views/application/index.html.erb
+++ b/app/views/application/index.html.erb
@ -92,10 +92,11 @@
          <section class="vbox">
            <section id="content-main" class="scrollable" ui-view="main">
            </section>
+            <section id="cookies-modal" ui-view="cookies">
+            </section>
          </section>
        </section>

-
      </section> <!-- /.hbox -->
    </section>

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