!!!TASK: use Klaro v0.7.3, breaking configuration changes, improve co…

…ntent placeholder UX

Classes/Eel/Helper/KlaroHelper.php

@@ -7,28 +7,28 @@
 class KlaroHelper implements ProtectedContextAwareInterface
 {
     /**
-     * Build apps config
+     * Build services config
      *
      * @param array $apps
      * @return array
      */
-    public function buildAppsConfig(array $apps) {
+    public function buildServicesConfig(array $services) {
 
         // Remove disabled apps and set default position
-        $appsConfig = [];
-        foreach ($apps as $appName => $appSettings) {
-            if (isset($appSettings['enabled']) && $appSettings['enabled'] === true) {
-                $appSettings['klaro']['position'] = isset($appSettings['position']) ? $appSettings['position'] : 0;
-                $appsConfig[] = $appSettings['klaro'];
+        $servicesConfig = [];
+        foreach ($services as $serviceName => $serviceSettings) {
+            if (isset($serviceSettings['enabled']) && $serviceSettings['enabled'] === true) {
+                $serviceSettings['klaro']['position'] = isset($serviceSettings['position']) ? $serviceSettings['position'] : 0;
+                $servicesConfig[] = $serviceSettings['klaro'];
             }
         }
 
         // Sort by position key
-        usort($appsConfig, function ($app1, $app2) {
-            return $app1['position'] <=> $app2['position'];
+        usort($servicesConfig, function ($service1, $service2) {
+            return $service1['position'] <=> $service2['position'];
         });
 
-        return $appsConfig;
+        return $servicesConfig;
     }
 
     /**

Configuration/Settings.Consent.Cloudflare.yaml

@@ -10,7 +10,7 @@ Tms:
           cloudflare:
             description: 'Protects us from attackers and helps to distribute our content quickly worldwide.'
 
-      apps:
+      services:
         cloudflare:
           enabled: false
 

Configuration/Settings.Consent.GoogleAnalytics.yaml

@@ -10,7 +10,7 @@ Tms:
           googleAnalytics:
             description: 'Allows us to analyse website usage anonymously (e.g. pageviews, channels, devices, screen resolutions, etc.)'
 
-      apps:
+      services:
         googleAnalytics:
           enabled: false
 

Configuration/Settings.Consent.GoogleMaps.yaml

@@ -10,7 +10,7 @@ Tms:
           googleMaps:
             description: 'Allow embedded Google Maps on this site'
 
-      apps:
+      services:
         googleMaps:
           enabled: false
 
@@ -21,5 +21,5 @@ Tms:
             name: googleMaps
             default: false
             title: 'Google Maps'
-            purposes: ['functionality']
+            purposes: ['content']
             callback: toggleNoConsentPlaceholders

Configuration/Settings.Consent.Matomo.yaml

@@ -4,13 +4,13 @@ Tms:
       translations:
         de:
           matomo:
-            description: 'Ermöglicht uns eine anonymisierte Auswertung der Website Nutzung (z.B. Seitenaufrufe, Kanäle, Endgeräte, Bildschirmauflösungen, etc.)'
+            description: 'Ermöglicht uns eine Auswertung der Website Nutzung (z.B. Seitenaufrufe, Kanäle, Endgeräte, Bildschirmauflösungen, etc.)'
 
         en:
           matomo:
-            description: 'Allows us to analyse website usage anonymously (e.g. pageviews, channels, devices, screen resolutions, etc.)'
+            description: 'Allows us to analyse website usage (e.g. pageviews, channels, devices, screen resolutions, etc.)'
 
-      apps:
+      services:
         matomo:
           # Each app must include the 'enabled' key and should be disabled
           # by default within this package
@@ -22,9 +22,9 @@ Tms:
           klaro:
             name: matomo
 
-            # If "default" is set to true, the app will be enabled by default
+            # If "default" is set to true, the service will be enabled by default
             # Overwrites global "default" setting.
-            # We recommend leaving this to "false" for apps that collect
+            # We recommend leaving this to "false" for services that collect
             # personal information.
             default: false
 
@@ -40,7 +40,7 @@ Tms:
             # given app, Klaro will then automatically delete all matching
             # cookies.
             # You can also explicitly provide a path and a domain for
-            # a given cookie. This is necessary if you have apps that
+            # a given cookie. This is necessary if you have services that
             # set cookies for a path that is not "/" or a domain that
             # is not the current domain. If you do not set these values
             # properly, the cookie can't be deleted by Klaro

Configuration/Settings.Consent.Youtube.yaml

@@ -10,7 +10,7 @@ Tms:
           youtube:
             description: 'Allow embedded Youtube videos on this site'
 
-      apps:
+      services:
         youtube:
           enabled: false
 
@@ -21,5 +21,5 @@ Tms:
             name: youtube
             default: false
             title: 'Youtube'
-            purposes: ['functionality']
+            purposes: ['content']
             callback: toggleNoConsentPlaceholders

Configuration/Settings.Translations.De.yaml

@@ -3,14 +3,27 @@ Tms:
     config:
       translations:
         de:
+          # See default DE translation - https://github.com/kiprotect/klaro/blob/master/src/translations/de.yml
           consentNotice:
             learnMore: 'Anpassen'
 
-          acceptAll: 'Alle Anwendungen akzeptieren'
+          decline: 'Ablehnen'
+          ok: 'Alle Dienste akzeptieren'
           acceptSelected: 'Auswahl speichern'
 
           purposes:
-            performance: 'Sicherheit & Performance'
-            functionality: 'Funktionalität'
-            analytics: 'Webstatistik'
-            targeting: 'Anzeigen von Werbung'
+            performance:
+              title: 'Sicherheit und Performance'
+              description: ''
+            functionality:
+              title: 'Funktionalität'
+              description: ''
+            content:
+              title: 'Externe Inhalte'
+              description: ''
+            analytics:
+              title: 'Webanalyse'
+              description: ''
+            marketing:
+              title: 'Marketing'
+              description: ''

Configuration/Settings.Translations.En.yaml

@@ -3,14 +3,31 @@ Tms:
     config:
       translations:
         en:
+          # See default EN translation - https://github.com/kiprotect/klaro/blob/master/src/translations/en.yml
           consentNotice:
             learnMore: 'Customize'
 
-          acceptAll: 'Accept all applications'
+          decline: 'Decline'
+          ok: 'Accept all services'
           acceptSelected: 'Accept selected'
 
+          service:
+            purpose: Purpose
+            purposes: Purposes
+
           purposes:
-            performance: 'Security & Performance'
-            functionality: 'Functionality'
-            analytics: 'Analytics'
-            targeting: 'Targeting and Advertising'
+            performance:
+              title: 'Security and Performance'
+              description: ''
+            functionality:
+              title: 'Functionality'
+              description: ''
+            content:
+              title: 'External Content'
+              description: ''
+            analytics:
+              title: 'Analytics'
+              description: ''
+            marketing:
+              title: 'Marketing'
+              description: ''

Configuration/Settings.yaml

@@ -11,11 +11,13 @@ Tms:
   Consent:
     enabled: true
 
+    # Disable includes if you use your own or want to add them to your favorite build tool
     autoInclude:
       config: true
       scripts: true
       styles: true
 
+
     enableStickyConsentSettingsButton: true
 
     config:
@@ -26,8 +28,8 @@ Tms:
       privacyPolicy: ''
 
       # Find all general translations in setting files, separated by language - see 'Settings.Translations.De.yaml'
-      # App related translations should be within each app setting file - see 'Settings.Apps.Matomo.yaml'
+      # App related translations should be within each app setting file - see 'Settings.Consent.Matomo.yaml'
       translations: []
 
-      # Find individual app configurations in separated setting files
-      apps: []
+      # Find individual service configurations in separated setting files
+      services: []

README.md

@@ -6,8 +6,6 @@ Let your users decide, which scripts should be loaded and executed while visitin
 
 ---
 
-**!!! This is currently experimental code, please do not rely on any parts yet.**
-
 **IMPORTANT: We are developers, no lawyers. Using this package without further adaptation will most likely NOT result in GDPR, ePrivacy nor CCPA compliance!**
 
 ---
@@ -18,11 +16,20 @@ Let your users decide, which scripts should be loaded and executed while visitin
 composer require tms/consent
 ```
 
+## What's included?
+
+* Klaro Script + opinionated Klaro Config (override or use your own anytime)
+* Klaro Config editing via `Settings.yaml` & predefined services
+* Klaro default styles & themes [`/Resources/Private/Styles/Theme`](https://github.com/tmsdev/Tms.Consent/tree/master/Resources/Private/Styles/Theme)
+* Placeholder for blocked content elements (Fusion Component + JS)
+* Consent settings button (Fusion Component + JS)
+* Overrides for common Neos packages [`/Resources/Private/Fusion/PresetPackages`](https://github.com/tmsdev/Tms.Consent/tree/master/Resources/Private/Fusion/PresetPackages)
+
 ## Usage
 
-### Step 1: App configuration via `YAML` settings
+### Step 1: Service configuration via `YAML` settings
 
-This package includes default consent management settings for these apps
+This package includes default consent management settings for the following services. Enable them in your `Settings.yaml` or add your own services.
 
 * Cloudflare
 * Matomo
@@ -31,74 +38,72 @@ This package includes default consent management settings for these apps
 * Youtube
 
 ```yaml
-# Example configuration
+# Example Tms.Consent configuration
 Tms:
   Consent:
     config:
       # The privacy policy uri can be specified by node type, path, identifier or simply an absolute/relative link
       privacyPolicy: '#4999814e-61c2-4ce1-ab46-c1145f2285d7'
 
-      # Enable the apps you need consent management for
-      apps:
+      # Enable the services you need consent management for
+      services:
         matomo:
           enabled: true
+          # Use the position key to render services in your favorite order
+          position: 100
         youtube:
           enabled: true
+          position: 200
 ```
 
-#### Extend your apps
+#### Extend your services
 
 Simply extend the `YAML` settings within your Neos package.
 
 ```yaml
 Tms:
   Consent:
     config:
-      apps:
-        yourAppName:
+      services:
+        yourServiceName:
           enabled: true
 
           # -----------------------------------------------------------------
           # Klaro! Config
           # -----------------------------------------------------------------
           klaro:
-            name: yourAppName
-            title: 'Your App Title'
-            description: 'Short description, why your website use the app...'
+            name: yourServiceName
+            title: 'Your Service Title'
+            description: 'Short description, why your website use this service...'
             purposes: ['functionality']
 ```
 
-Think your app configuration is useful for others too?
-Don't hesitate to submit a PR. All the app related configuration should be combined in one settings
-file named like `Settings.Consent.YourAppName.yaml`.
+Think your service configuration is useful for others too?
+Don't hesitate to submit a PR. All the service related configuration should be combined in one settings
+file named like `Settings.Consent.YourServiceName.yaml`.
 
 ### Step 2: Modify HTML
 
-In order to control your configured apps (e.g. to stop loading and/or execution without consent) it is necessary to
+In order to control your configured services (e.g. to stop loading and/or execution without consent) it is necessary to
 modify the resulting HTML of your webpages.
 
 This can be achieved by simply replacing some attributes - see https://github.com/KIProtect/klaro#managing-third-party-appstrackers
 
 We try to provide preconfigured solutions for some common Neos packages, please have a look at [`/Resources/Private/Fusion/PresetPackages`](https://github.com/tmsdev/Tms.Consent/tree/master/Resources/Private/Fusion/PresetPackages)
-what we've already covered. Your package is missing? Submit a PR, if you think the app configuration could be useful for others.
+what we've already covered. Your package is missing? Submit a PR, if you think the service configuration could be useful for others.
 
 ### Step 3: Verify
 
-Check your site - have you blocked all your critical apps?
+Check your site - have you blocked all your critical services?
 
 * by using the dev tools of your favorite browser
 * or simply run a check on https://webbkoll.dataskydd.net/
 
 ## Wishlist
 
 * Add multi-site support
-* Make it work with lazyloaded elements
-* Make apps sortable
-* Placeholder for blocked content elements (like Youtube, Maps, etc.)
-* Support more apps by default
 * Backend module with some basic statistics on acceptance rate
 * User location based configurations
-* Additional layouts & styles
 
 Any feedback, pull request or other contribution is very welcome!
 

Resources/Private/Fusion/Component/Atom/NoConsentPlaceholder/NoConsentPlaceholder.fusion

@@ -1,18 +1,19 @@
 prototype(Tms.Consent:Component.Atom.NoConsentPlaceholder) < prototype(Neos.Fusion:Component) {
     @if.consentEnabled = ${Configuration.setting('Tms.Consent.enabled')}
-    @if.appConfiguredAndEnabled = ${this.appName && Configuration.setting('Tms.Consent.config.apps.' + this.appName + '.enabled')}
+    @if.serviceConfiguredAndEnabled = ${this.serviceName && Configuration.setting('Tms.Consent.config.services.' + this.serviceName + '.enabled')}
 
-    appName = ''
+    serviceName = ''
     imageUri = ''
 
     i18nContentBlocked = ${Translation.translate('noConsentPlaceholder.contentBlocked', 'content blocked', [], null, 'Tms.Consent')}
-    i18nReviewSettings = ${Translation.translate('noConsentPlaceholder.reviewSettings', 'review your consent settings', [], null, 'Tms.Consent')}
+    i18nConsentButton = ${Translation.translate('noConsentPlaceholder.consentButton', 'Show this content', [], null, 'Tms.Consent')}
 
     renderer = afx`
-        <div class="tms-consent_no-consent-placeholder" data-name={props.appName}>
+        <div class="tms-consent_no-consent-placeholder" data-name={props.serviceName}>
             <p>
-                <span data-klaro-app-title={props.appName}>{props.appName}</span> {props.i18nContentBlocked} - <a href="#" onclick="return klaro.show();">{props.i18nReviewSettings}</a>
+                <span data-klaro-service-title={props.serviceName}>{props.serviceName}</span> {props.i18nContentBlocked}
             </p>
+            <button data-consent-button="true" data-name={props.serviceName}>{props.i18nConsentButton}</button>
             <img @if.hasImage={props.imageUri} src={props.imageUri} alt="" loading="lazy" />
         </div>
     `