From 0b3b82b4853acc1ac5444f5ff32ca1eb824eb856 Mon Sep 17 00:00:00 2001 From: lotte Date: Mon, 24 Aug 2020 15:18:20 +0200 Subject: [PATCH] finished basic Klaro setup --- src/app/app.component.ts | 5 +- src/app/footer/footer.component.html | 27 +++++--- src/app/footer/footer.component.scss | 39 ++++++++--- src/app/footer/footer.component.ts | 8 +++ src/app/shared/cookies/cookies.service.ts | 81 +++++++++++++++++++---- src/assets/i18n/en.json5 | 58 +++++++++++++++- 6 files changed, 186 insertions(+), 32 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4ee0da048e..d576780d59 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -71,6 +71,7 @@ export class AppComponent implements OnInit, AfterViewInit { private localeService: LocaleService, @Optional() private cookiesService: CookiesService ) { + /* Use models object so all decorators are actually called */ this.models = models; // Load all the languages that are defined as active from the config file @@ -82,6 +83,8 @@ export class AppComponent implements OnInit, AfterViewInit { // set the current language code this.localeService.setCurrentLanguageCode(); + this.cookiesService.initialize(); + angulartics2GoogleAnalytics.startTracking(); angulartics2DSpace.startTracking(); @@ -92,7 +95,6 @@ export class AppComponent implements OnInit, AfterViewInit { } this.storeCSSVariables(); - this.cookiesService.initialize(); } ngOnInit() { @@ -147,6 +149,7 @@ export class AppComponent implements OnInit, AfterViewInit { this.isLoading$.next(false); } }); + this.translate.get('loading.default').subscribe(t => console.log(t)); } @HostListener('window:resize', ['$event']) diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html index fec75b2fd3..6d30302f80 100644 --- a/src/app/footer/footer.component.html +++ b/src/app/footer/footer.component.html @@ -1,10 +1,21 @@ diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index 51201774d5..c8adf9909f 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -4,15 +4,34 @@ $footer-padding: $spacer * 1.5; $footer-logo-height: 55px; .footer { - background-color: $footer-bg; - border-top: $footer-border; - text-align: center; - padding: $footer-padding; + background-color: $footer-bg; + border-top: $footer-border; + text-align: center; + padding: $footer-padding; + padding-bottom: $spacer; - p { - margin: 0; - } - img { - height: $footer-logo-height; - } + p { + margin: 0; + } + + img { + height: $footer-logo-height; + } + + ul li { + padding-top: $spacer * 0.5; + + a { + color: inherit + } + + &:not(:last-child) { + &:after { + content: ''; + border-right: 1px map-get($theme-colors, secondary) solid; + margin: 0 $spacer/2; + } + + } + } } diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts index 94b239d204..da71ac635d 100644 --- a/src/app/footer/footer.component.ts +++ b/src/app/footer/footer.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { CookiesService } from '../shared/cookies/cookies.service'; @Component({ selector: 'ds-footer', @@ -6,7 +7,14 @@ import { Component } from '@angular/core'; templateUrl: 'footer.component.html' }) export class FooterComponent { + constructor(private cookies: CookiesService) { + + } dateObj: number = Date.now(); + showCookieSettings() { + this.cookies.showSettings(); + return false; + } } diff --git a/src/app/shared/cookies/cookies.service.ts b/src/app/shared/cookies/cookies.service.ts index 7f625681c5..86f2288fc9 100644 --- a/src/app/shared/cookies/cookies.service.ts +++ b/src/app/shared/cookies/cookies.service.ts @@ -5,6 +5,8 @@ import { TOKENITEM } from '../../core/auth/models/auth-token-info.model'; import { IMPERSONATING_COOKIE, REDIRECT_COOKIE } from '../../core/auth/auth.service'; import { LANG_COOKIE } from '../../core/locale/locale.service'; import { TranslateService } from '@ngx-translate/core'; +import { environment } from '../../../environments/environment'; +import { take } from 'rxjs/operators'; export const HAS_AGREED_END_USER = 'hasAgreedEndUser'; export const KLARO = 'klaro'; @@ -22,6 +24,8 @@ export class CookiesService { message$: BehaviorSubject = new BehaviorSubject(''); klaroConfig = { + privacyPolicy: '/info/privacy', + /* Setting 'hideLearnMore' to 'true' will hide the "learn more / customize" link in the consent notice. We strongly advise against using this under most @@ -43,7 +47,7 @@ export class CookiesService { */ cookieExpiresAfterDays: 365, - htmlText: true, + htmlTexts: true, /* You can overwrite existing translations and add translations for your app @@ -53,8 +57,33 @@ export class CookiesService { */ translations: { en: { + acceptAll: 'cookies.consent.accept-all', + acceptSelected: 'cookies.consent.accept-selected', + app: { + optOut: { + description: 'cookies.consent.app.opt-out.description', + title: 'cookies.consent.app.opt-out.title' + }, + purpose: 'cookies.consent.app.purpose', + purposes: 'cookies.consent.app.purposes', + required: { + description: 'cookies.consent.app.required.description', + title: 'cookies.consent.app.required.title' + } + }, + close: 'cookies.consent.close', + decline: 'cookies.consent.decline', consentNotice: { - description: 'We collect and process your personal information for the following purposes: {purposes}.
To learn more, please read our {privacyPolicy}' + description: 'cookies.consent.content-notice.description', + learnMore: 'cookies.consent.content-notice.learnMore' + }, + consentModal: { + description: 'cookies.consent.content-modal.description', + privacyPolicy: { + name: 'cookies.consent.content-modal.privacy-policy.name', + text: 'cookies.consent.content-modal.privacy-policy.text' + }, + title: 'cookies.consent.content-modal.title' }, purposes: {} } @@ -168,25 +197,53 @@ export class CookiesService { } initialize() { + this.addAppMessages(); + + this.translateService.setDefaultLang(environment.defaultLanguage); + this.translateService.get('loading.default').pipe(take(1)).subscribe(() => { + this.translateConfiguration(); + if (!Klaro.getManager(this.klaroConfig).confirmed) { + Klaro.show(this.klaroConfig, false); + } + }) + } + + private getTitleTranslation(title: string) { + return cookieNameMessagePrefix + title; + } + + private getDescriptionTranslation(description: string) { + return cookieDescriptionMessagePrefix + description; + } + + private getPurposeTranslation(purpose: string) { + return cookiePurposeMessagePrefix + purpose; + } + + showSettings() { + Klaro.show(this.klaroConfig); + } + + addAppMessages() { this.klaroConfig.apps.forEach((app) => { this.klaroConfig.translations.en[app.name] = { title: this.getTitleTranslation(app.name), description: this.getDescriptionTranslation(app.name) }; app.purposes.forEach((purpose) => { this.klaroConfig.translations.en.purposes[purpose] = this.getPurposeTranslation(purpose); }) }); - - Klaro.show(this.klaroConfig); } - private getTitleTranslation(title: string) { - return this.translateService.instant(cookieNameMessagePrefix + title); + translateConfiguration() { + this.translate(this.klaroConfig.translations.en); } - private getDescriptionTranslation(description: string) { - return this.translateService.instant(cookieDescriptionMessagePrefix + description); - } - - private getPurposeTranslation(purpose: string) { - return this.translateService.instant(cookiePurposeMessagePrefix + purpose); + private translate(object) { + if (typeof (object) === 'string') { + return this.translateService.instant(object); + } + Object.entries(object).forEach(([key, value]: [string, any]) => { + object[key] = this.translate(value); + }); + return object; } } diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 54a7ec7d2e..8beb133758 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -937,6 +937,38 @@ + "cookies.consent.accept-all": "Accept all", + + "cookies.consent.accept-selected": "Accept selected", + + "cookies.consent.app.opt-out.description": "This app is loaded by default (but you can opt out)", + + "cookies.consent.app.opt-out.title": "(opt-out)", + + "cookies.consent.app.purpose": "purpose", + + "cookies.consent.app.required.description": "This application is always required", + + "cookies.consent.app.required.title": "(always required)", + + "cookies.consent.close": "Close", + + "cookies.consent.decline": "Decline", + + "cookies.consent.content-notice.description": "We collect and process your personal information for the following purposes: {purposes}.
To learn more, please read our {privacyPolicy}.", + + "cookies.consent.content-notice.learnMore": "Customize", + + "cookies.consent.content-modal.description": "Here you can see and customize the information that we collect about you.", + + "cookies.consent.content-modal.privacy-policy.name": "privacy policy", + + "cookies.consent.content-modal.privacy-policy.text": "To learn more, please read our {privacyPolicy}.", + + "cookies.consent.content-modal.title": "Information that we collect", + + + "cookies.consent.app.title.token_item": "User Token", "cookies.consent.app.description.token_item": "User login identification", @@ -949,19 +981,36 @@ + "cookies.consent.app.title.redirect": "Redirect", + + "cookies.consent.app.description.redirect": "", + + + + "cookies.consent.app.title.language": "Language", + + "cookies.consent.app.description.language": "", + + + "cookies.consent.app.title.klaro": "Klaro", "cookies.consent.app.description.klaro": "Cookie consent preferences", - "cookies.consent.app.title.has_agreed_end_user": "Has agreed end user", "cookies.consent.app.description.has_agreed_end_user": "", + "cookies.consent.app.title.google-analytics": "Google Analytics", + + "cookies.consent.app.description.google-analytics": "", + + + "cookies.consent.purpose.authentication": "Authentication", "cookies.consent.purpose.statistics": "Statistics", @@ -1086,6 +1135,13 @@ "footer.link.duraspace": "DuraSpace", + "footer.link.cookies": "Cookie settings", + + "footer.link.privacy-policy": "Privacy policy", + + "footer.link.end-user-agreement":"End User Agreement", + + "forgot-email.form.header": "Forgot Password",