get user consent about cookies

.eslintrc

@@ -6,7 +6,8 @@
   "globals": {
     "Application": true,
     "angular": true,
-    "Fablab": true
+    "Fablab": true,
+    "moment": true,
   }
 }
 

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
 

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);
+      // first we check the user acceptance
-      // track all routes (or not)
+      const cookiesConsent = document.cookie.replace(/(?:(?:^|.*;\s*)fab-manager-cookies-consent\s*=\s*([^;]*).*$)|^.*$/, '$1');
-      AnalyticsProvider.trackPages(true);
+      if (cookiesConsent === 'accept') {
-      AnalyticsProvider.setDomainName(Fablab.defaultHost);
+        AnalyticsProvider.setAccount(Fablab.gaId);
-      AnalyticsProvider.useAnalytics(true);
+        // track all routes (or not)
-      AnalyticsProvider.setPageEvent('$stateChangeSuccess');
+        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;

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();
+  }
+]);

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;
   }
 ]);

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

app/assets/stylesheets/modules/cookies.scss

@@ -1,19 +1,21 @@
-#cookies-consent {
+.cookies-consent {
   display: flex;
   position: fixed;
-  bottom: 2rem;
+  bottom: 3rem;
-  left: 2rem;
+  left: 3rem;
   width: 40rem;
-  height: 20rem;
+  background-color: #f5f5f5;
-  background-color: blue;
+  padding: 3rem;
-  color: white;
-  padding: 4rem;
   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;
     }
   }
 }

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>

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>

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

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>
 

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"

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