finished basic Klaro setup

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'])

src/app/footer/footer.component.html

@@ -1,10 +1,21 @@
 <footer class="footer">
-  <div class="container-fluid content-container-fluid">
-    <img src="assets/images/dspace-logo.png" />
-    <p>
-      <a href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
-      {{ 'footer.copyright' | translate:{year : dateObj | date:'y'} }}
-      <a href="http://www.duraspace.org/">{{ 'footer.link.duraspace' | translate}}</a>
-    </p>
-  </div>
+    <div class="container-fluid content-container-fluid">
+        <img src="assets/images/dspace-logo.png"/>
+        <p>
+            <a href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+            {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
+            <a href="http://www.duraspace.org/">{{ 'footer.link.duraspace' | translate}}</a>
+        </p>
+        <ul class="list-unstyled small d-flex justify-content-center mb-0 text-secondary">
+            <li>
+                <a href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
+            </li>
+            <li>
+                <a routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+            </li>
+            <li>
+                <a routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+            </li>
+        </ul>
+    </div>
 </footer>

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;
+            }
+
+        }
+    }
 }

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;
+  }
 }

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<string> = new BehaviorSubject<string>('');
 
   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}.<br>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;
   }
 }

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}. <br/> 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",