Add cookie banner component

package-lock.json

@@ -6982,6 +6982,11 @@
       "integrity": "sha1-6tOjx6S1t6iEjBkMQVB5w2ib/Rw=",
       "dev": true
     },
+    "ngx-cookie-service": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-2.1.0.tgz",
+      "integrity": "sha512-7g7NEo7dYp6ap0j5qZ4Nf6nrU4WVdx8ycRQbWyLPps6mrR/+5vKU73ie0CMuKzl625bDTBjjJ60AmqTsp4l+AQ=="
+    },
     "ngx-infinite-scroll": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-6.0.1.tgz",

package.json

@@ -43,6 +43,7 @@
     "lodash.clonedeep": "^4.5.0",
     "mapbox-gl": "^0.47.0",
     "ng-inline-svg": "^8.2.1",
+    "ngx-cookie-service": "^2.1.0",
     "ngx-infinite-scroll": "^6.0.1",
     "node-rsa": "^1.0.3",
     "rxjs": "^6.4.0",

src/app/core/components/cookie-banner/cookie-banner.component.html

+<div class="cookie-baner-container" *ngIf="displayCookieBanner">
+  <div>
+    <p><span i18n="@@cookieBanner.message">By continuing to browse this site, you agree to the use of cookies to generate visit statistics. </span>
+    <a class="link-without-decoration" [routerLink]="['/', AppRoutes.legalNotices.uri]" i18n="@@cookieBanner.more"> Learn more</a></p>
+  </div>
+  <div>
+    <button class="button" (click)="hideCookieBanner()">OK</button>
+  </div>
+</div>

src/app/core/components/cookie-banner/cookie-banner.component.scss

+@import '../../../../scss/variables.scss';
+@import '../../../../scss/init_bulma.scss';
+
+.cookie-baner-container {
+  height: 4.3125rem;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+  background-color: $brand-color;
+  
+
+  p, a, span {
+    color: white;
+    font-size: 16px;
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+    padding: 0 2.5rem;
+  }
+
+  a {
+    color: $tomato-color;
+    font-weight: 600;    
+    display: inline-block;
+    
+  }
+
+  button.button {
+    height: 43px;
+    width: 85px;
+    border: 1px solid white;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: bold;
+    background-color: transparent;
+    color: white;
+
+    &:hover {
+      border-color: $tomato-color;
+    }
+  }
+
+  @media screen and (max-width: $tablet) {
+
+    height: unset;
+    display: block;
+
+    div {
+      padding: 1rem 2.5rem;
+      &:last-of-type {
+        justify-content: center;
+        padding-top: 0;
+      }
+    }
+  }
+}
\ No newline at end of file

src/app/core/components/cookie-banner/cookie-banner.component.ts

+import { Component, OnInit } from '@angular/core';
+import { AppRoutes } from '../../../routes';
+import { CookieService } from 'ngx-cookie-service';
+
+@Component({
+  selector: 'app-cookie-banner',
+  templateUrl: './cookie-banner.component.html',
+  styleUrls: ['./cookie-banner.component.scss'],
+})
+export class CookieBannerComponent implements OnInit {
+
+  AppRoutes = AppRoutes;
+  private cookiesAccepted: boolean;
+  private cookiesAcceptedKey = 'COOKIES_ACCEPTED';
+
+  constructor(
+    private _cookieService: CookieService,
+  ) {
+    this.cookiesAccepted = (this._cookieService.get(this.cookiesAcceptedKey) === 'true');
+    this._cookieService.set(
+      this.cookiesAcceptedKey, // Key
+      'true', // Value
+      new Date(new Date().setFullYear(new Date().getFullYear() + 1)), // Expiration date now + 1 year
+    );
+  }
+
+  ngOnInit() {
+  }
+
+  hideCookieBanner() {
+    this.cookiesAccepted = true;
+  }
+
+  get displayCookieBanner() {
+    return !this.cookiesAccepted;
+  }
+
+}

src/app/core/components/index.ts

@@ -6,9 +6,10 @@ import { ErrorComponent } from './error/error.component';
 import { ContactComponent } from './contact/contact.component';
 import { SideMenuComponent } from './main/side-menu/side-menu.component';
 import { FeedbackComponent } from './feedback/feedback.component';
+import { CookieBannerComponent } from './cookie-banner/cookie-banner.component';
 
 export { HeaderComponent, MainComponent, FooterComponent, NotificationsComponent,
-  ErrorComponent, ContactComponent, FeedbackComponent };
+  ErrorComponent, ContactComponent, FeedbackComponent, CookieBannerComponent };
 
 // tslint:disable-next-line:variable-name
 export const CoreComponents = [
@@ -20,4 +21,5 @@ export const CoreComponents = [
   ContactComponent,
   SideMenuComponent,
   FeedbackComponent,
+  CookieBannerComponent,
 ];

src/app/core/components/main/main.component.html

@@ -12,6 +12,8 @@
     <app-feedback class="is-hidden-mobile"></app-feedback>
 
     <app-notifications></app-notifications>
+
+    <app-cookie-banner></app-cookie-banner>
   </main>
 
   <app-footer class="site-footer"></app-footer>

src/app/core/core.module.ts

@@ -11,6 +11,7 @@ import { CoreServices } from './services';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { GeosourceModule } from '../geosource/geosource.module';
 import { InlineSVGModule } from 'ng-inline-svg';
+import { CookieService } from 'ngx-cookie-service';
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import { InlineSVGModule } from 'ng-inline-svg';
   declarations: [...CoreComponents],
   providers: [
     ...CoreServices,
+    CookieService,
     {
       provide: ErrorHandler,
       useClass: ErrorsHandler,

src/i18n/messages.en.xlf

@@ -1037,6 +1037,14 @@
         <source>Ouch!</source>
         <target>Ouch!</target>
       </trans-unit>
+      <trans-unit id="cookieBanner.message" datatype="html">
+        <source>By continuing to browse this site, you agree to the use of cookies to generate visit statistics. </source>
+        <target>By continuing to browse this site, you agree to the use of cookies to generate visit statistics. </target>
+      </trans-unit>
+      <trans-unit id="cookieBanner.more" datatype="html">
+        <source>Learn more</source>
+        <target>Learn more</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

src/i18n/messages.fr.xlf

@@ -1045,6 +1045,14 @@ La création d'un compte est gratuite et sans engagement. La désinscription est
         <source>Ouch!</source>
         <target>Aïe !</target>
       </trans-unit>
+      <trans-unit id="cookieBanner.message" datatype="html">
+        <source>By continuing to browse this site, you agree to the use of cookies to generate visit statistics. </source>
+        <target>En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies pour réaliser des statistiques de visites. </target>
+      </trans-unit>
+      <trans-unit id="cookieBanner.more" datatype="html">
+        <source>Learn more</source>
+        <target>En savoir plus</target>
+      </trans-unit>
     </body>
   </file>
 </xliff>

src/i18n/traductions.fr.ts

@@ -42,8 +42,8 @@ export const notificationMessages = {
   },
   userServices: {
     addSuccess: 'Vous avez demandé l\'accès à',
-    addFailed: 'Une erreur est survenu lors de la demande d\'accès aux services.',
-    addFailedDetailed: 'Une erreur est survenu lors de la demande d\'accès à ',
+    addFailed: 'Une erreur est survenue lors de la demande d\'accès aux services.',
+    addFailedDetailed: 'Une erreur est survenue lors de la demande d\'accès à ',
     failedToLoadUserResources: 'Une erreur est survenue lors du chargement de vos données.',
     initializationError: 'Une erreur est survenue lors de l\'initialization de la page.',
     removeFailed: 'Une erreur est survenue lors de la suppression de vos accès.',