From 68e73cf2c9164c1b153f477e0e00d5aed74c2cfb Mon Sep 17 00:00:00 2001 From: Marco Herzog <marco.herzog@mni.thm.de> Date: Thu, 5 Sep 2019 13:32:22 +0200 Subject: [PATCH] Add cookie dialog --- src/app/app.module.ts | 9 +-- .../_dialogs/cookies/cookies.component.html | 43 ++++++++++++ .../_dialogs/cookies/cookies.component.scss | 4 ++ .../cookies/cookies.component.spec.ts | 25 +++++++ .../_dialogs/cookies/cookies.component.ts | 21 ++++++ .../data-protection.component.html | 31 ++++++++- .../data-protection.component.ts | 7 +- .../shared/footer/footer.component.ts | 69 ++++--------------- .../shared/imprint/imprint.component.ts | 8 +-- src/assets/i18n/home/de.json | 3 + src/assets/i18n/home/en.json | 3 + 11 files changed, 149 insertions(+), 74 deletions(-) create mode 100644 src/app/components/home/_dialogs/cookies/cookies.component.html create mode 100644 src/app/components/home/_dialogs/cookies/cookies.component.scss create mode 100644 src/app/components/home/_dialogs/cookies/cookies.component.spec.ts create mode 100644 src/app/components/home/_dialogs/cookies/cookies.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 06f16ff35..7181b51f5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -44,7 +44,8 @@ import { CommentSettingsService } from './services/http/comment-settings.service import { ModeratorModule } from './components/moderator/moderator.module'; import { ImprintComponent } from './components/shared/imprint/imprint.component'; import { DataProtectionComponent } from './components/shared/data-protection/data-protection.component'; -import { HelpPageComponent} from './components/shared/help-page/help-page.component'; +import { HelpPageComponent } from './components/shared/help-page/help-page.component'; +import { CookiesComponent } from './components/home/_dialogs/cookies/cookies.component'; export function dialogClose(dialogResult: any) { } @@ -67,15 +68,15 @@ export function initializeApp(appConfig: AppConfig) { HomeParticipantPageComponent, ImprintComponent, DataProtectionComponent, - HelpPageComponent + HelpPageComponent, + CookiesComponent ], entryComponents: [ RegisterComponent, PasswordResetComponent, UserActivationComponent, DemoVideoComponent, - ImprintComponent, - DataProtectionComponent, + CookiesComponent ], imports: [ AppRoutingModule, diff --git a/src/app/components/home/_dialogs/cookies/cookies.component.html b/src/app/components/home/_dialogs/cookies/cookies.component.html new file mode 100644 index 000000000..78522067d --- /dev/null +++ b/src/app/components/home/_dialogs/cookies/cookies.component.html @@ -0,0 +1,43 @@ +<h1 mat-dialog-title>Cookies</h1> + +<mat-divider></mat-divider> + +<mat-dialog-content> + <h2> LOREM</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest textTest text test + textTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test text</p> + + <h2> IPSUM</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest textTest text test + textTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test text</p> + + <h2> DOLOR</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest textTest text test + textTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test text</p> + + <h2> IPSUM</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest textTest text test + textTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test text</p> + + <h2> DOLOR</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest textTest text test + textTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test text</p> +</mat-dialog-content> + +<mat-divider></mat-divider> + +<mat-dialog-actions> + <button mat-raised-button mat-dialog-close (click)="acceptCookies()"> + <span *ngIf="deviceType === 'desktop'"> {{ 'cookies.accept' | translate }}</span> + </button> +</mat-dialog-actions> diff --git a/src/app/components/home/_dialogs/cookies/cookies.component.scss b/src/app/components/home/_dialogs/cookies/cookies.component.scss new file mode 100644 index 000000000..f7a8134c2 --- /dev/null +++ b/src/app/components/home/_dialogs/cookies/cookies.component.scss @@ -0,0 +1,4 @@ +.mat-raised-button { + background-color: var(--primary); + color: var(--on-primary); +} diff --git a/src/app/components/home/_dialogs/cookies/cookies.component.spec.ts b/src/app/components/home/_dialogs/cookies/cookies.component.spec.ts new file mode 100644 index 000000000..332267e7c --- /dev/null +++ b/src/app/components/home/_dialogs/cookies/cookies.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CookiesComponent } from './cookies.component'; + +describe('CookiesComponent', () => { + let component: CookiesComponent; + let fixture: ComponentFixture<CookiesComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CookiesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CookiesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/home/_dialogs/cookies/cookies.component.ts b/src/app/components/home/_dialogs/cookies/cookies.component.ts new file mode 100644 index 000000000..65e2d401f --- /dev/null +++ b/src/app/components/home/_dialogs/cookies/cookies.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-cookies', + templateUrl: './cookies.component.html', + styleUrls: ['./cookies.component.scss'] +}) +export class CookiesComponent implements OnInit { + + deviceType: string; + + constructor() { } + + ngOnInit() { + } + + acceptCookies() { + localStorage.setItem('cookieAccepted', 'true'); + } + +} diff --git a/src/app/components/shared/data-protection/data-protection.component.html b/src/app/components/shared/data-protection/data-protection.component.html index 7d50cf4e7..26f799677 100644 --- a/src/app/components/shared/data-protection/data-protection.component.html +++ b/src/app/components/shared/data-protection/data-protection.component.html @@ -1,8 +1,33 @@ <div> - <p> - data-protection works! - </p> + <h1>DATA-PROTECTION</h1> + <div> + <h2> CONSECUTOR</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest textTest text test + textTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test text</p> + + <h2> ALARIS</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest textTest text test + textTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test textextTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test textextTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test textext + Test text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test text</p> + + <h2> DELUM</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest textTest text test + textTest text test textTest text test texttest textTest text test textTest text test textTest + text test texttest textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test text</p> + + <h2> SIT</h2> + <p>Test text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text test textTest text + test textTest text test textTest text test textTest text test texttest textTest text test textTest text test textTest text test texttest tex </p> + </div> </div> diff --git a/src/app/components/shared/data-protection/data-protection.component.ts b/src/app/components/shared/data-protection/data-protection.component.ts index 2d4650b68..7a7906368 100644 --- a/src/app/components/shared/data-protection/data-protection.component.ts +++ b/src/app/components/shared/data-protection/data-protection.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { Location } from '@angular/common'; @Component({ selector: 'app-data-protection', @@ -10,13 +9,9 @@ export class DataProtectionComponent implements OnInit { deviceType: string; - constructor(private location: Location) { } + constructor() { } ngOnInit() { } - goBack() { - this.location.back(); - } - } diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts index 53cf4a097..1caaee707 100644 --- a/src/app/components/shared/footer/footer.component.ts +++ b/src/app/components/shared/footer/footer.component.ts @@ -9,8 +9,7 @@ import { User } from '../../../models/user'; import { Room } from '../../../models/room'; import { DemoVideoComponent } from '../../home/_dialogs/demo-video/demo-video.component'; import { ThemeService } from '../../../../theme/theme.service'; -import { ImprintComponent } from '../imprint/imprint.component'; -import { DataProtectionComponent } from '../data-protection/data-protection.component'; +import { CookiesComponent } from '../../home/_dialogs/cookies/cookies.component'; @Component({ selector: 'app-footer', @@ -48,6 +47,11 @@ export class FooterComponent implements OnInit { this.translateService.get('footer.open').subscribe(message => { this.open = message; }); + + if (!localStorage.getItem('cookieAccepted')) { + this.showCookieModal(); + } + } navToBlog() { @@ -63,58 +67,6 @@ export class FooterComponent implements OnInit { }); } - // check if still needed - navToDSGVO() { - this.translateService.get('footer.will-open').subscribe(message => { - this.translateService.get('footer.dsgvo').subscribe(what => { - this.notificationService.show(what + message, this.open, { - duration: 4000 - }); - }); - }); - this.notificationService.snackRef.afterDismissed().subscribe(info => { - if (info.dismissedByAction === true) { - window.open(this.dsgvoUrl, '_blank'); - } - }); - } - - showDSGVO() { - const dialogRef = this.dialog.open(DataProtectionComponent, { - maxWidth: '100vw', - maxHeight: '100vh', - height: '95%', - width: '50%' - }); - dialogRef.componentInstance.deviceType = this.deviceType; - } - - // check if still needed - navToImprint() { - this.translateService.get('footer.will-open').subscribe(message => { - this.translateService.get('footer.imprint').subscribe(what => { - this.notificationService.show(what + message, this.open, { - duration: 4000 - }); - }); - }); - this.notificationService.snackRef.afterDismissed().subscribe(info => { - if (info.dismissedByAction === true) { - window.open(this.imprUrl, '_blank'); - } - }); - } - - showImprint() { - const dialogRef = this.dialog.open(ImprintComponent, { - maxWidth: '100vw', - maxHeight: '100vh', - height: '95%', - width: '50%' - }); - dialogRef.componentInstance.deviceType = this.deviceType; - } - showDemo() { const dialogRef = this.dialog.open(DemoVideoComponent, { position: { @@ -129,6 +81,15 @@ export class FooterComponent implements OnInit { dialogRef.componentInstance.deviceType = this.deviceType; } + showCookieModal() { + const dialogRef = this.dialog.open(CookiesComponent, { + height: '95%', + width: '60%' + }); + dialogRef.disableClose = true; + dialogRef.componentInstance.deviceType = this.deviceType; + } + useLanguage(language: string) { this.translateService.use(language); localStorage.setItem('currentLang', language); diff --git a/src/app/components/shared/imprint/imprint.component.ts b/src/app/components/shared/imprint/imprint.component.ts index aea0395d4..16efb12ee 100644 --- a/src/app/components/shared/imprint/imprint.component.ts +++ b/src/app/components/shared/imprint/imprint.component.ts @@ -1,6 +1,4 @@ import { Component, OnInit } from '@angular/core'; -import { Location } from '@angular/common'; - @Component({ selector: 'app-imprint', @@ -11,13 +9,9 @@ export class ImprintComponent implements OnInit { deviceType: string; - constructor(private location: Location) { } + constructor() { } ngOnInit() { } - goBack() { - this.location.back(); - } - } diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json index bed78dd04..d214d683c 100644 --- a/src/assets/i18n/home/de.json +++ b/src/assets/i18n/home/de.json @@ -104,5 +104,8 @@ "language": "Sprache", "english": "Englisch", "german": "Deutsch" + }, + "cookies": { + "accept": "Bestätigen" } } diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json index 4c34681e2..9d6342dff 100644 --- a/src/assets/i18n/home/en.json +++ b/src/assets/i18n/home/en.json @@ -104,5 +104,8 @@ "language": "Language", "english": "English", "german": "German" + }, + "cookies": { + "accept": "Accept" } } -- GitLab