Fix compliance cookie not deleting if domain specified as .example.com

.gitignore

@@ -3,3 +3,4 @@ build
 __pycache__
 node_modules
 yarn.lock
+/nbproject/private/

README.md

@@ -125,6 +125,8 @@ If you want to customize Klaro or extend it, you can build it from scratch using
 npm install
 npm run-script make-dev #will run a development server
 npm run-script make #will build the production version
+
+SEPARATE_CSS=1 npm run-script make #will build the production version with no css
 ```
 
 If you have an environment where `make` is available, you can also run

examples/klaro-and-webpack/dist/index.html

@@ -20,6 +20,6 @@ <h1>Klaro Example</h1>
       the manager, which would usually be done by your app.
     </p>
     <button onClick="return klaro.show(klaroConfig, true);">show manager</button>
-    <button onClick="klaro.getManager(klaroConfig).resetConsents();klaro.show(klaroConfig);">reset consent</button>
+    <button onClick="klaro.getManager(klaroConfig).resetConsents(); klaro.show(klaroConfig);">reset consent</button>
   </body>
 </html>

examples/klaro-and-webpack/package.json

@@ -10,6 +10,7 @@
   "author": "KIProtect GmbH",
   "license": "BSD-3",
   "devDependencies": {
+    "css-loader": "^4.3.0",
     "klaro": "../..",
     "style-loader": "^1.2.1",
     "webpack": "^4.44.0",

examples/klaro-and-webpack/src/index.js

@@ -7,30 +7,34 @@ import "klaro/dist/klaro.css"
 
 // we define a minimal configuration
 const config = {
+    styling: { theme: ['light', 'bottom', 'wide'] },
+    acceptAll: true,
+    disablePoweredBy: true,
     translations: {
         en: {
             googleAnalytics: {
                 title: "Google Analytics",
-                description: "The analytics service ran by a most definitely non-evil company.",
+                description: "The analytics service ran by a most definitely non-evil company."
             },
             purposes: {
                 analytics: "Analytics",
-                styling: "Styling",
-            }
+                styling: "Styling"
+            },
+            ok: 'Accept All'
         }
     },
-    apps: [
+    services: [
         {
             name: "googleAnalytics",
-            purposes: ["analytics"],
+            purposes: ["analytics"]
         },
         {
             name: "bootstrap",
             title: "Bootstrap (external resource)",
             description: "Example for embedding external stylesheets.",
-            purposes: ["styling"],
-        },
-    ],
+            purposes: ["styling"]
+        }
+    ]
 };
 
 // we assign the Klaro module to the window, so that we can access it in JS

nbproject/project.properties

@@ -0,0 +1,3 @@
+files.encoding=UTF-8
+site.root.folder=
+source.folder=

nbproject/project.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://www.netbeans.org/ns/project/1">
+    <type>org.netbeans.modules.web.clientproject</type>
+    <configuration>
+        <data xmlns="http://www.netbeans.org/ns/clientside-project/1">
+            <name>klaro</name>
+        </data>
+    </configuration>
+</project>

package.json

@@ -78,5 +78,5 @@
     "make-dev": "cross-env APP_ENV=dev cross-env APP_DEV_MODE=server webpack-dev-server --host 0.0.0.0 --config webpack.config.js --history-api-fallback",
     "make-watch": "cross-env APP_ENV=dev cross-env APP_DEV_MODE=watch webpack --watch --config webpack.config.js"
   },
-  "version": "0.7.18"
+  "version": "0.7.19"
 }

releases.json

@@ -1,4 +1,52 @@
 [
+  {
+    "changelog": {
+      "en": "- Fix deleting cookie when domain specified as .example.com\n- Fix scolling page on accept to klaro div position (bottom of dom)\n"
+    },
+    "date": "2021-12-20",
+    "files": [
+      {
+        "name": "klaro.css",
+        "sha384": "NS72XPKd246k2ryQ8WeBBdK5AS+QPQtolKYbbt69kZdgYHoz0UWEinmOtQXNXLBi"
+      },
+      {
+        "name": "klaro.min.css",
+        "sha384": "VuePmq5T37XMu8lZQd7M6GiQdvdDL6/Rd/aXVDq8sfg/bxphobHzCtb4EBLkeKOw"
+      },
+      {
+        "name": "klaro-no-css.js",
+        "sha384": "+Q4MEn7BkMBtqd91IKfevRb1XeL2uoqqDufX1fZ0LY8ml+0QMJzwmfCXC18u4JLR"
+      },
+      {
+        "name": "cm.js",
+        "sha384": "uB/A7qOOJT6YO+EHdUE510TZHYL/VQ8hO4+zcqZhDUIodw3fNN9uFiwy3Djl2oDf"
+      },
+      {
+        "name": "ide.js",
+        "sha384": "rA54GNcdQssxtO7AtLtJiRSkSVb1yiHnSts0BokyuHkBR2wHg4HYzkaxeatnJAsO"
+      },
+      {
+        "name": "klaro-no-translations-no-css.js",
+        "sha384": "ZEgXstkOy9o/NMrFkLmxXiUETGsf/v9CRh3WlKBq7EhE7Vp9BrfdfmxA4BEcVqp5"
+      },
+      {
+        "name": "klaro-no-translations.js",
+        "sha384": "qwqSjZQEIwUddben+nE6SgMxx8aTsoxLfptj6H6EV6n5hZYcUIacmmtnPXonFnjR"
+      },
+      {
+        "name": "klaro.js",
+        "sha384": "FRIIS6QFQHwSgrKRiO7Yaj8r4Ih0fw++2oPKbHQLOC7vKVtr2a50ZYQ8udtvluJe"
+      },
+      {
+        "name": "translations.js",
+        "sha384": "ob7bzwDAkn/CaPyQd9MAmtWCSQPH8z4QLjjDGiPqItXRQqnsAZ8ZGtB4AcTk5mUZ"
+      }
+    ],
+    "tags": [
+      "improvements"
+    ],
+    "version": "0.7.19"
+  },
   {
     "changelog": {
       "de": "- Hinzuf\u00fcgen von tschechischen \u00dcbersetzungen und Verbessern der portugiesischen \u00dcbersetzungen.\n- Entfernen der '...' Platzhalter in der Einwilligungsnotiz, um eine Anpassung der Texte zu vereinfachen.\n- Hinzuf\u00fcgen eines `cookiePath` Parameters, der den Pfad des Klaro-Cookies kontrolliert.\n",

releases.yml

@@ -1,3 +1,57 @@
+- changelog:
+    en: |
+      - Fix error caused by focus when mustConsent enabled
+      - Implemented collapsed toggle options on forced modal
+  date: '2022-02-08'
+  files:
+  - name: klaro.css
+    sha384: 352ef65cf29ddb8ea4dabc90f1678105d2b9012f903d0b6894a61b6edebd919760607a33d145848a798eb505cd5cb062
+  - name: klaro.min.css
+    sha384: 56e78f9aae53dfb5ccbbc95941decce8689076f7432fafd177f697543abcb1f83f6f1a61a1b1f30ad6f81012e478a3b0
+  - name: klaro-no-css.js
+    sha384: 2f43f071bd2664dfcadc311ae32e195b3868f7794ed791372922ff125a184b908891fd9ef93061135096900428fd2eb6
+  - name: cm.js
+    sha384: b81fc0eea38e253e983be107754139d744d91d82ff550f213b8fb372a6610d4228770ddf34df6e162c32dc38e5da80df
+  - name: ide.js
+    sha384: 39e2bab198fc085c1385d3e08e0b065cabb560852945f440d987be321d4ce8f690a0802592f8aee8e5998c7b7d8da8c4
+  - name: klaro-no-translations-no-css.js
+    sha384: 2fef0346ad4e0788a0f368d546adb5a45d26df1276eb4885b6579dab22c9158e084730a42ae530ae95074979905a0fe8
+  - name: klaro-no-translations.js
+    sha384: d670c1a970881e8b3713caab7b51e99c779910dd2c00bc17c19963578812d6019fcb672caa4ab04b18d24ddf79355624
+  - name: klaro.js
+    sha384: 9c32400777bb043e068b41fc4d0f586d8d9e4045cecfa4cb93607638a6876438f17821b03c64744145b4818f0071c38c
+  - name: translations.js
+    sha384: eb870d216b42d198bf6d41aced017144b617ad1c2a19117275267220f9315f4befe4757a79f93919a68b900e45d62d3f
+  tags:
+  - improvements
+  version: 0.7.20
+- changelog:
+    en: |
+      - Fix deleting cookie when domain specified as .example.com
+      - Fix scolling page on accept to klaro div position (bottom of dom)
+  date: '2021-12-20'
+  files:
+  - name: klaro.css
+    sha384: NS72XPKd246k2ryQ8WeBBdK5AS+QPQtolKYbbt69kZdgYHoz0UWEinmOtQXNXLBi
+  - name: klaro.min.css
+    sha384: VuePmq5T37XMu8lZQd7M6GiQdvdDL6/Rd/aXVDq8sfg/bxphobHzCtb4EBLkeKOw
+  - name: klaro-no-css.js
+    sha384: +Q4MEn7BkMBtqd91IKfevRb1XeL2uoqqDufX1fZ0LY8ml+0QMJzwmfCXC18u4JLR
+  - name: cm.js
+    sha384: uB/A7qOOJT6YO+EHdUE510TZHYL/VQ8hO4+zcqZhDUIodw3fNN9uFiwy3Djl2oDf
+  - name: ide.js
+    sha384: rA54GNcdQssxtO7AtLtJiRSkSVb1yiHnSts0BokyuHkBR2wHg4HYzkaxeatnJAsO
+  - name: klaro-no-translations-no-css.js
+    sha384: ZEgXstkOy9o/NMrFkLmxXiUETGsf/v9CRh3WlKBq7EhE7Vp9BrfdfmxA4BEcVqp5
+  - name: klaro-no-translations.js
+    sha384: qwqSjZQEIwUddben+nE6SgMxx8aTsoxLfptj6H6EV6n5hZYcUIacmmtnPXonFnjR
+  - name: klaro.js
+    sha384: FRIIS6QFQHwSgrKRiO7Yaj8r4Ih0fw++2oPKbHQLOC7vKVtr2a50ZYQ8udtvluJe
+  - name: translations.js
+    sha384: ob7bzwDAkn/CaPyQd9MAmtWCSQPH8z4QLjjDGiPqItXRQqnsAZ8ZGtB4AcTk5mUZ
+  tags:
+  - improvements
+  version: 0.7.19
 - changelog:
     de: |
       - Hinzufügen von tschechischen Übersetzungen und Verbessern der portugiesischen Übersetzungen.

src/components/consent-modal.jsx

@@ -1,13 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Close } from './icons';
 import Services from './services';
 import Purposes from './purposes';
 import Text from './text';
 
 export default class ConsentModal extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            collapsed: this.props.collapsed
+        };
+    }
+
     componentDidMount() {
-        this.consentModalRef.focus();
+        if(!this.props.config.mustConsent) {
+            this.consentModalRef.focus();
+        }
     }
+
+    expandServices = () => {
+        this.setState({ collapsed: false });
+    };
 
     render() {
         const {
@@ -24,9 +38,10 @@ export default class ConsentModal extends React.Component {
         const { embedded } = config;
         const groupByPurpose =
             config.groupByPurpose !== undefined ? config.groupByPurpose : true;
+        const { collapsed } = this.state;
 
         let closeLink;
-        if (!config.mustConsent) {
+        if (!config.mustConsent || manager.confirmed) {
             closeLink = (
                 <button
                     title={t(['close'])}
@@ -45,8 +60,11 @@ export default class ConsentModal extends React.Component {
         }
 
         let declineButton;
+        let acceptAllButton;
+        let acceptButton;
+        let customizeButton;
 
-        if (!config.hideDeclineAll && !manager.confirmed)
+        if (!config.hideDeclineAll && !manager.confirmed) {
             declineButton = (
                 <button
                     disabled={confirming}
@@ -57,18 +75,35 @@ export default class ConsentModal extends React.Component {
                     {t(['decline'])}
                 </button>
             );
-        let acceptAllButton;
-        const acceptButton = (
-            <button
-                disabled={confirming}
-                className="cm-btn cm-btn-success cm-btn-info cm-btn-accept"
-                type="button"
-                onClick={saveAndHide}
-            >
-                {t([manager.confirmed ? 'save' : 'acceptSelected'])}
-            </button>
-        );
-        if (config.acceptAll && !manager.confirmed) {
+        }
+
+        if (!collapsed || manager.confirmed) {
+            acceptButton = (
+                <button
+                    disabled={confirming}
+                    className="cm-btn cm-btn-success cm-btn-info cm-btn-accept"
+                    type="button"
+                    onClick={saveAndHide}
+                >
+                    {t([manager.confirmed ? 'save' : 'acceptSelected'])}
+                </button>
+            );
+        }
+
+        if (collapsed && !manager.confirmed) {
+            customizeButton = (
+                <a
+                    key="learnMoreLink"
+                    className="cm-link cn-learn-more"
+                    href="#"
+                    onClick={this.expandServices}
+                >
+                    {t(['consentNotice', 'learnMore'])}
+                </a>
+            );
+        }
+
+        if (config.acceptAll) {
             acceptAllButton = (
                 <button
                     disabled={confirming}
@@ -114,7 +149,7 @@ export default class ConsentModal extends React.Component {
             servicesOrPurposes = (
                 <Services t={t} config={config} manager={manager} lang={lang} />
             );
-
+        
         const innerModal = (
             <div className="cm-modal cm-klaro">
                 <div className="cm-header">
@@ -140,11 +175,16 @@ export default class ConsentModal extends React.Component {
                         />
                     </p>
                 </div>
-                <div className="cm-body">{servicesOrPurposes}</div>
+
+                {(!collapsed || manager.confirmed) && (
+                    <div className="cm-body">{servicesOrPurposes}</div>
+                )}
+
                 <div className="cm-footer">
                     <div className="cm-footer-buttons">
                         {declineButton}
                         {acceptButton}
+                        {customizeButton}
                         {acceptAllButton}
                     </div>
                     {!config.disablePoweredBy && (
@@ -164,7 +204,7 @@ export default class ConsentModal extends React.Component {
                 </div>
             </div>
         );
-
+        
         if (embedded)
             return <div id="cookieScreen" className="cookie-modal cm-embedded">{innerModal}</div>;