zenon/web-application-engineering
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fully implemented cookie-banner.

Browse Source
This commit is contained in:
Martin 2021-05-20 17:33:39 +02:00
parent 2a6d390466
commit 86da51ef24
6 changed files with 99 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/component/landing/landing.component.html
View File

@ -1,6 +1,12 @@
<div class="router-wrapper">
<router-outlet></router-outlet>
</div>
<button *ngIf="!showCookieBanner" (click)="this.showCookieBanner = true"> Show cookie banner</button>
<waecm-g4-y21-cookiebanner *ngIf="showCookieBanner" (on-accept)="hint($event)" [applicationName]="'WAECMG4Y21'" [link]="'https://www.rocketbeans.tv/'"></waecm-g4-y21-cookiebanner>
<div class="footer">
<button class="center" *ngIf="hideCookieBanner" (click)="showBanner()">Cookie Einstellungen</button>
</div>
<waecm-g4-y21-cookiebanner *ngIf="!hideCookieBanner" (on-accept)="cookieCallback($event)"
[applicationName]="appname" [link]="datenschutzlink"
[statistik]="this.statistik" [marketing]="this.marketing">
</waecm-g4-y21-cookiebanner>

37
frontend/src/app/component/landing/landing.component.ts
View File

@ -1,4 +1,7 @@
import {Component} from '@angular/core';
import {CookieService} from '../../services/cookie.service';
import {environment} from '../../../environments/environment';
import {SnackbarService} from '../../services/snackbar.service';
@Component({
selector: 'app-landing',
@ -6,12 +9,34 @@ import {Component} from '@angular/core';
styleUrls: ['./landing.component.css']
})
export class LandingComponent {
showCookieBanner = true;
constructor() {
hideCookieBanner = false;
statistik = false;
marketing = false;
appname = environment.title;
datenschutzlink = window.location + 'assets/datenschutz.html';
constructor(private cookieService: CookieService, private snackbarService: SnackbarService) {
const hasAccepted = cookieService.hasAccepted();
this.hideCookieBanner = hasAccepted;
if (hasAccepted) {
this.statistik = cookieService.hasStatistik();
this.marketing = cookieService.hasMarketing();
}
}
hint(event): void {
console.log('Cookie-Banner accepted');
console.log(event);
this.showCookieBanner = false;
cookieCallback(event): void {
const detail = event.detail;
this.statistik = detail.Statistik;
this.marketing = detail.Marketing;
this.cookieService.accept(detail.Statistik, detail.Marketing);
this.hideCookieBanner = true;
this.snackbarService.show('Datenschutz-Richtlinie zugestimmt', 'Ok');
}
showBanner(): void {
this.statistik = this.cookieService.hasStatistik();
this.marketing = this.cookieService.hasMarketing();
this.hideCookieBanner = false;
}
}

2
frontend/src/app/custom-elements/waecm-g4-y21-cookiebanner.js
View File

File diff suppressed because one or more lines are too long

32
frontend/src/app/services/cookie.service.ts Normal file
View File

@ -0,0 +1,32 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CookieService {
keyPflicht = 'g4_cookie_pflicht';
keyStatistik = 'g4_cookie_statistik';
keyMarketing = 'g4_cookie_marketing';
constructor() { }
hasAccepted(): boolean {
return (sessionStorage.getItem(this.keyPflicht) === String(true));
}
hasStatistik(): boolean {
return (sessionStorage.getItem(this.keyStatistik) === String(true));
}
hasMarketing(): boolean {
return (sessionStorage.getItem(this.keyMarketing) === String(true));
}
accept(statistik: boolean, marketing: boolean): void {
sessionStorage.setItem(this.keyPflicht, String(true));
sessionStorage.setItem(this.keyStatistik, String(statistik));
sessionStorage.setItem(this.keyMarketing, String(marketing));
}
}

13
frontend/src/assets/datenschutz.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Datenschutz-Richtlinie</h1>
<p>Hier finden Sie Datenschutz-Informationen in einer eigenen Seite,
ohne jegliche Scripts oder sonstige bedenkliche Internet-Dinge!</p>
</body>
</html>

14
frontend/src/styles.css
View File

@ -7,12 +7,18 @@
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html {
height: 100%;
}
a {
text-decoration: underline;
cursor: auto;
}
body {
height: 100%;
width: 60%;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
@ -29,6 +35,13 @@ body {
background: white;
}
.footer {
display: block;
bottom: 0;
padding-top: 1em;
padding-bottom: 1em;
}
.content {
padding-top: 1em;
margin-left: auto;
@ -44,6 +57,7 @@ body {
}
.router-wrapper {
min-height: 90vh;
}
.center {