Cookie consent #18

docs/app/app.component.html

@@ -15,7 +15,7 @@
 <router-outlet></router-outlet>
 
 <scroll-top label="Back to top"></scroll-top>
-
+<alert-cookie [GA_ID]="'test'"></alert-cookie>
 <footer role="contentinfo" class="o-footer">
     <h1 class="sr-only">footer - site map & informations</h1>
     <div class="o-footer-top">
@@ -28,6 +28,7 @@ <h1 class="sr-only">footer - site map & informations</h1>
             <ul class="nav">
                 <li class="nav-item"><span class="nav-link">© Orange 2018</span></li>
                 <li class="nav-item"><span class="nav-link">v{{globals.ngBoostedVersion}}</span></li>
+                <li class="nav-item"><span class="nav-link"></span><a href="/" aria-label="remove all the cookies saved in your browser"class="nav-link" target="_self" (click)="this.reset()">Reset My Cookie Consentment</a></li>
                 <li class="nav-item"><span class="nav-link">Code licensed under</span><a class="nav-link" href="https://github.com/Orange-OpenSource/Orange-Boosted-Angular/blob/master/LICENSE">MIT license</a></li>
                 <li class="nav-item"><span class="nav-link">Documentation licensed under</span><a class="nav-link" href="https://github.com/Orange-OpenSource/Orange-Boosted-Angular/blob/master/docs/LICENSE">CC BY 3.0</a></li>
             </ul>

docs/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { CookieManagerService } from './util/cookie-utils';
 import { Globals } from './global';
 
 @Component({
@@ -8,5 +9,11 @@ import { Globals } from './global';
 })
 
 export class AppComponent {
-    constructor(public globals: Globals) {}
+
+    constructor(public globals: Globals, private cookiemanager: CookieManagerService) {}
+
+    public reset() {
+        this.cookiemanager.rejectCookie('test');
+        return;
+    }
  }

docs/app/app.module.ts

@@ -1,13 +1,17 @@
-import { NgModule, ApplicationRef } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule }   from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgBoostedModule } from '../../dist';
 
-import { AppComponent }   from './app.component';
+import { AppComponent } from './app.component';
 import { HomeComponent } from './home.component';
 import { StartComponent } from './start.component';
 import { DocsComponent } from './docs.component';
@@ -48,11 +52,26 @@ import { DocOToggle } from './docs/o-toggle.component';
 import { CodeBox } from './docs/code-box.component';
 
 import { Globals } from './global';
+import { CookieManagerService } from './util/cookie-utils';
+import { AlertCookieComponent } from './cookie-interface/alert-cookie';
+
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+      }
+    }),
     RouterModule.forRoot([
       {
         path: 'home',
@@ -146,6 +165,7 @@ import { Globals } from './global';
   ],
   declarations: [
     AppComponent,
+    AlertCookieComponent,
     HomeComponent,
     StartComponent,
     DocsComponent,
@@ -183,7 +203,7 @@ import { Globals } from './global';
     DocOToggle,
     CodeBox
   ],
-  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, Globals],
+  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, Globals, CookieManagerService],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

docs/app/cookie-interface/alert-cookie.css

@@ -0,0 +1,15 @@
+.alert-cookie {
+    color: #fff;
+    background-color: #000;
+}
+
+.bottom {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+}
+
+.alert {
+    margin-bottom: 0 !important
+}

docs/app/cookie-interface/alert-cookie.html

@@ -0,0 +1,15 @@
+<ngb-alert [dismissible]="false" [type]="dark" *ngIf="this.showAlertCookie" class="alert-cookie fixed-bottom" attr.aria-label="{{ cookieAlert.header }}">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-sm-10">
+                <p>
+                    <b>{{ cookieAlert.message }}</b>
+                </p>
+            </div>
+            <div class="col-sm-2">
+                <button type="button" class="btn btn-inverse btn-link" (click)="this.deny()">{{ cookieAlert.deny }}</button>
+                <button type="button" class="btn btn-inverse btn-warning" (click)="this.allow()">{{ cookieAlert.allow }}</button>
+            </div>
+        </div>
+    </div>
+</ngb-alert>

docs/app/cookie-interface/alert-cookie.ts

@@ -0,0 +1,93 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { CookieManagerService } from '../util/cookie-utils';
+import { Alert } from './alert';
+
+@Component({
+    selector: 'alert-cookie',
+    templateUrl: './alert-cookie.html',
+    styles: [`
+        .alert-cookie {
+            color: #fff;
+            background-color: #000;
+        }
+
+        .bottom {
+            bottom: 0;
+            left: 0;
+            position: fixed;
+            right: 0;
+        }
+
+        .alert {
+            margin-bottom: 0 !important
+        }
+    `],
+    providers: [CookieManagerService, TranslateService]
+})
+export class AlertCookieComponent implements OnInit {
+
+    @Input() public GA_ID: string;
+
+    // keep refs to subscriptions to be able to unsubscribe later
+    private cookieAlert: Alert = {
+        header: 'warning',
+        message: 'This website uses cookies to ensure you get the best experience on our website.',
+        deny: 'Refuse Cookies',
+        allow: 'Accept Cookies',
+    };
+
+    private showAlertCookie: boolean;
+
+    constructor(private translateService: TranslateService, private cookiemanager: CookieManagerService) {}
+
+    public ngOnInit() {
+        this.translateService.addLangs(['en', 'fr']);
+        this.translateService.setDefaultLang('en');
+        const browserLang = this.translateService.getBrowserLang();
+        this.translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');
+
+        if (!this.cookiemanager.getCookie('consent')) {
+            this.showAlertCookie = true;
+        }
+
+        if (this.cookiemanager.getCookie('consent') && this.showAlertCookie) {
+            this.translateService.get(['cookie.header', 'cookie.message', 'cookie.allow', 'cookie.deny']).subscribe((data) => {
+            this.cookieAlert.header = data['cookie.header'];
+            this.cookieAlert.message = data['cookie.message'];
+            this.cookieAlert.deny = data['cookie.deny'];
+            this.cookieAlert.allow = data['cookie.allow'];
+          });
+            const TrackNavigator = navigator.doNotTrack;
+              // Check donotTrack and Cookie Consent and do nothing if those values are positive
+            if ( (TrackNavigator === '1' || TrackNavigator === 'yes' ) ) {
+              this.cookiemanager.rejectCookie(this.GA_ID);
+              this.showAlertCookie = false;
+              return;
+            }
+          // tslint:disable-next-line:max-line-length
+            if ( this.cookiemanager.getCookie('consent') === 'false' && ( (TrackNavigator === '1' || TrackNavigator === 'yes' ) )) {
+              this.cookiemanager.rejectCookie(this.GA_ID);
+              this.showAlertCookie = false;
+              return;
+            }
+            if ( this.cookiemanager.getCookie('consent') === 'false' ) {
+              this.cookiemanager.rejectCookie(this.GA_ID);
+              this.showAlertCookie = false;
+              return;
+          }
+        }
+      }
+
+    public deny() {
+        this.cookiemanager.rejectCookie(this.GA_ID);
+        this.showAlertCookie = false;
+        return;
+    }
+
+    public allow() {
+        this.cookiemanager.setCookie('consent', true);
+        this.showAlertCookie = false;
+        return;
+    }
+}

docs/app/cookie-interface/alert.ts

@@ -0,0 +1,6 @@
+export class Alert {
+    public header: string;
+    public message: string;
+    public deny: string;
+    public allow: string;
+}

docs/app/util/cookie-utils.ts

@@ -0,0 +1,40 @@
+/*
+ * General utils for managing cookies in Typescript.
+ */
+export class CookieManagerService {
+
+private GA_COOKIE_NAMES = ['_ga', '_gat'];
+
+public setCookie(name: string, val: boolean) {
+    const date = new Date();
+    const value = val;
+    // Set it expire in 395 days, compliance with Cookie Laws in EU
+    date.setTime(date.getTime() + (395 * 24 * 60 * 60 * 1000));
+    document.cookie = name + ' = ' + value + '; expires=' + date.toUTCString() + '; path=/';
+}
+
+public getCookie(name: string) {
+    const value = '; ' + document.cookie;
+    const parts = value.split('; ' + name + '=');
+    if (parts.length === 2) {
+        return parts.pop().split(';').shift();
+    }
+}
+
+public deleteCookie(name: string) {
+    const date = new Date();
+    date.setTime(date.getTime() + (-1 * 24 * 60 * 60 * 1000));
+    document.cookie = name + '=; expires=' + date.toUTCString() + '; path=/';
+}
+
+public rejectCookie(gaId: string) {
+    // disable GA
+    this.setCookie(`ga-disable-${gaId}`, true);
+    this.setCookie(`consent`, false);
+    window[`ga-disable-${gaId}`] = true;
+    this.GA_COOKIE_NAMES.forEach((cookieName) => {
+      this.deleteCookie(cookieName);
+    });
+  }
+
+}

docs/assets/lang/en.json

@@ -0,0 +1,8 @@
+{
+    "cookie": {
+        "header": "Cookies used on Ng-Boosted!",
+        "message": "This website uses cookies to ensure you get the best experience on our website.",
+        "allow": "Allow cookies",
+        "deny": "Decline"
+    }
+}

docs/assets/lang/fr.json

@@ -0,0 +1,8 @@
+{
+    "cookie": {
+        "header": "Ng-Boosted utilises des Cookies",
+        "message": "En poursuivant votre navigation, vous acceptez l'utilisation de services tiers pouvant installer des cookies.",
+        "allow": "Accepter les cookies",
+        "deny": "Refuser les cookies"
+    }
+}