Commit 5bf7d289 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Add cookie banner component

parent e8ad2c90
......@@ -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",
......
<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>
@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
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;
}
}
......@@ -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,
];
......@@ -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>
......
......@@ -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,
......
......@@ -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>
......@@ -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>
......@@ -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.',
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment