decidim-core 0.27.0.rc1 → 0.27.0

data/app/packs/src/decidim/{cookie_consent → data_consent}/consent_manager.js

@@ -2,10 +2,10 @@ import Cookies from "js-cookie";
 
 class ConsentManager {
   // Options should contain the following keys:
-  // - modal - HTML element of the cookie consent modal (e.g. "<div id="cc-modal">Foo bar</div>")
-  // - categories - Available cookie categories (e.g. ["essential", "preferences", "analytics", "marketing"])
+  // - modal - HTML element of the data consent modal (e.g. "<div id="dc-modal">Foo bar</div>")
+  // - categories - Available data consent categories (e.g. ["essential", "preferences", "analytics", "marketing"])
   // - cookieName - Name of the cookie saved in the browser (e.g. "decidim-consent")
-  // - warningElement - HTML element to be shown when user hasn't accepted necessary cookie(s) to display the content.
+  // - warningElement - HTML element to be shown when user has not given the necessary data consent to display the content.
   constructor(options) {
     this.modal = options.modal;
     this.categories = options.categories;
@@ -21,7 +21,12 @@ class ConsentManager {
 
   updateState(newState) {
     this.state = newState;
-    Cookies.set(this.cookieName, JSON.stringify(this.state));
+    Cookies.set(this.cookieName, JSON.stringify(this.state), {
+      domain: document.location.host.split(":")[0],
+      sameSite: "Lax",
+      expires: 365,
+      secure: window.location.protocol === "https:"
+    });
     this.updateModalSelections();
     this.triggerState();
   }
@@ -46,33 +51,31 @@ class ConsentManager {
   triggerIframes() {
     if (this.allAccepted()) {
       document.querySelectorAll(".disabled-iframe").forEach((original) => {
-        let newElement = this.transformElement(original, "iframe");
-        newElement.className = original.classList.toString().replace("disabled-iframe", "");
-        original.parentElement.appendChild(newElement);
-        original.remove();
-      })
+        if (original.childNodes && original.childNodes.length) {
+          const content = Array.from(original.childNodes).find((childNode) => {
+            return childNode.nodeType === Node.COMMENT_NODE;
+          });
+          if (!content) {
+            return;
+          }
+          const newElement = document.createElement("div");
+          newElement.innerHTML = content.nodeValue;
+          original.parentNode.replaceChild(newElement.firstElementChild, original);
+        }
+      });
     } else {
       document.querySelectorAll("iframe").forEach((original) => {
-        const newElement = this.transformElement(original, "div");
-        newElement.className = `disabled-iframe ${original.classList.toString()}`;
-        original.parentElement.appendChild(newElement);
-        original.remove();
-      })
+        const newElement = document.createElement("div");
+        newElement.className = "disabled-iframe";
+        newElement.appendChild(document.createComment(`${original.outerHTML}`));
+        original.parentNode.replaceChild(newElement, original);
+      });
     }
   }
 
-  transformElement(original, targetType) {
-    const newElement = document.createElement(targetType);
-    ["src", "allow", "frameborder", "style", "loading"].forEach((attribute) => {
-      newElement.setAttribute(attribute, original.getAttribute(attribute));
-    })
-
-    return newElement;
-  }
-
   triggerWarnings() {
     document.querySelectorAll(".disabled-iframe").forEach((original) => {
-      if (original.querySelector(".cookie-warning")) {
+      if (original.querySelector(".dataconsent-warning")) {
         return;
       }
 

data/app/packs/src/decidim/data_consent/consent_manager.test.js

@@ -0,0 +1,280 @@
+/* global global, jest */
+
+import Cookies from "js-cookie";
+import ConsentManager from "./consent_manager";
+
+// Mock js-cookie so that we can store the return values from the "set" method
+// in order to inspect their flags.
+jest.mock("js-cookie", () => {
+  const originalModule = jest.requireActual("js-cookie");
+
+  return {
+    // ...originalModule,
+    cookieStorage: {},
+    get: originalModule.get,
+    set: function (name, value, options) {
+      this.cookieStorage[name] = originalModule.set(name, value, options);
+    }
+  };
+});
+
+Reflect.deleteProperty(global.window, "location");
+global.window = Object.create(window);
+global.window.location = {
+  protocol: "https:",
+  hostname: "decidim.dev"
+};
+
+describe("ConsentManager", () => {
+  const dialogContent = `
+    <div id="dc-dialog-wrapper" class="flex-center" role="region">
+      <div class="dc-dialog padding-vertical-1">
+        <div class="row expanded">
+          <div class="columns medium-12 large-8">
+            <div class="dc-content">
+              <div class="h5">Information about the cookies used on the website</div>
+              <div>
+                We use cookies on our website to improve the performance and content of the site. The cookies enable us to provide a more individual user experience and social media channels.
+              </div>
+            </div>
+          </div>
+          <div class="columns medium-12 large-4">
+            <div class="dc-button-wrapper flex-center">
+              <button id="dc-dialog-accept" class="button">
+                Accept all
+              </button>
+              <button id="dc-dialog-reject" class="button hollow">
+                Accept only essential
+              </button>
+              <button id="dc-dialog-settings" class="button clear" data-open="dc-modal" aria-controls="dc-modal" aria-haspopup="dialog" tabindex="0">
+                Settings
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+  const modalContent = `
+    <div class="reveal dc-modal" id="dc-modal" role="dialog" data-close-on-click="false" data-close-on-esc="false" aria-modal="true" aria-hidden="true">
+      <div class="reveal__header">
+        <h3 class="reveal__title">Cookie settings</h3>
+        <p>
+          We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want.
+        </p>
+      </div>
+
+      <div class="dc-categories">
+        <div class="category-wrapper margin-vertical-1" data-id="essential">
+          <div class="category-row flex-center">
+            <button class="dc-title padding-left-3">
+              <span class="h5 dc-category-title">
+                <strong>Essential</strong>
+              </span>
+            </button>
+            <div class="dc-switch">
+              <input class="switch-input" checked="checked" id="dc-essential" type="checkbox" name="essential" disabled="">
+              <label class="switch-paddle" for="dc-essential">
+                <span class="show-for-sr">Toggle Essential</span>
+              </label>
+            </div>
+          </div>
+          <div class="dc-description hide">
+            <div class="description-text">
+              <p>These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly.</p>
+            </div>
+            <div class="dataconsent-details-wrapper">
+              <div class="row detail-titles">
+                <div class="columns small-2">Type</div>
+                <div class="columns small-2">Name</div>
+                <div class="columns small-2">Service</div>
+                <div class="columns small-6">Description</div>
+              </div>
+              <div class="row dataconsent-detail-row">
+                <div class="columns small-2">Cookie</div>
+                <div class="columns small-2">_session_id</div>
+                <div class="columns small-2">This website</div>
+                <div class="columns small-6">
+                  Allows websites to remember user within a website when they move between web pages.
+                </div>
+              </div>
+              <div class="row dataconsent-detail-row">
+                <div class="columns small-2">Cookie</div>
+                <div class="columns small-2">decidim-consent</div>
+                <div class="columns small-2">This website</div>
+                <div class="columns small-6">
+                  Stores information about the cookies allowed by the user on this website.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="category-wrapper margin-vertical-1" data-id="preferences">
+          <div class="category-row flex-center">
+            <button class="dc-title padding-left-3">
+              <span class="h5 dc-category-title">
+                <strong>Preferences</strong>
+              </span>
+            </button>
+            <div class="dc-switch">
+              <input class="switch-input" id="dc-preferences" type="checkbox" name="preferences">
+              <label class="switch-paddle" for="dc-preferences">
+                <span class="show-for-sr">Toggle Preferences</span>
+              </label>
+            </div>
+          </div>
+          <div class="dc-description hide">
+            <div class="description-text">
+              <p>These cookies allow the website to remember the choices you have made in the past</p>
+            </div>
+          </div>
+        </div>
+        <div class="category-wrapper margin-vertical-1" data-id="analytics">
+          <div class="category-row flex-center">
+            <button class="dc-title padding-left-3">
+              <span class="h5 dc-category-title">
+                <strong>Analytics and statistics</strong>
+              </span>
+            </button>
+            <div class="dc-switch">
+              <input class="switch-input" id="dc-analytics" type="checkbox" name="analytics">
+              <label class="switch-paddle" for="dc-analytics">
+                <span class="show-for-sr">Toggle Analytics and statistics</span>
+              </label>
+            </div>
+          </div>
+          <div class="dc-description hide">
+            <div class="description-text">
+              <p>Analytics cookies are cookies that track how users navigate and interact with a website. The information collected is used to help the website owner improve the website.</p>
+            </div>
+          </div>
+        </div>
+        <div class="category-wrapper margin-vertical-1" data-id="marketing">
+          <div class="category-row flex-center">
+            <button class="dc-title padding-left-3">
+              <span class="h5 dc-category-title">
+                <strong>Marketing</strong>
+              </span>
+            </button>
+            <div class="dc-switch">
+              <input class="switch-input" id="dc-marketing" type="checkbox" name="marketing">
+              <label class="switch-paddle" for="dc-marketing">
+                <span class="show-for-sr">Toggle Marketing</span>
+              </label>
+            </div>
+          </div>
+          <div class="dc-description hide">
+            <div class="description-text">
+              <p>These cookies collect information about how you use the website, which pages you visited and which links you clicked on.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dc-buttons-wrapper flex-center">
+        <div class="dc-buttons-left">
+          <button id="dc-modal-accept" class="button" data-close="">Accept all</button>
+          <button id="dc-modal-reject" class="button hollow" data-close="">Accept only essential</button>
+        </div>
+        <div class="dc-buttons-right">
+          <button id="dc-modal-save" class="button clear" data-close="">Save settings</button>
+        </div>
+      </div>
+    </div>
+  `;
+  const cookieWarningContent = `
+    <div class="dataconsent-warning flex-center padding-1 hide">
+      <p>You need to enable all cookies in order to see this content.</p>
+      <a href="#" class="button margin-vertical-2" data-open="dc-modal">
+        Change cookie settings
+      </a>
+    </div>
+  `;
+
+  const getCookie = (name) => {
+    for (const [key, value] of Object.entries(Cookies.cookieStorage)) {
+      if (key === name) {
+        const cookie = {};
+        value.split(";").forEach((cookieString) => {
+          const kv = cookieString.trim().split("=");
+          const val = kv[1] || true;
+
+          if (kv[0] === key) {
+            cookie.value = val;
+          } else {
+            cookie[kv[0]] = val;
+          }
+        });
+
+        return cookie;
+      }
+    }
+
+    return null;
+  };
+
+  let manager = null;
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    Cookies.cookieStorage = {};
+
+    document.body.innerHTML = dialogContent + modalContent + cookieWarningContent;
+
+    const modal = document.querySelector("#dc-modal");
+    const categories = [...modal.querySelectorAll(".category-wrapper")].map((el) => el.dataset.id);
+    manager = new ConsentManager({
+      modal: modal,
+      categories: categories,
+      cookieName: "decidim-consent",
+      warningElement: document.querySelector(".dataconsent-warning")
+    });
+  });
+
+  afterEach(() => {
+    window.location = originalLocation;
+  });
+
+  describe("updateState", () => {
+    let cookie = null;
+
+    describe("when the current URL is secure", () => {
+      beforeEach(() => {
+        manager.updateState({ foo: "bar" });
+        cookie = getCookie("decidim-consent");
+      });
+
+      it("sets the cookie with the correct value", () => {
+        expect(cookie.value).toEqual("{%22foo%22:%22bar%22}");
+      });
+
+      it("sets the cookie with the correct expiry", () => {
+        const expiry = Date.parse(cookie.expires);
+        const oneYearFromNow = Date.now() + 3600 * 24 * 1000 * 365;
+
+        // Expect it to be within a second of the expected expiry time because
+        // it would be pretty hard to try to guess the exact same millisecond.
+        expect(oneYearFromNow - 1000).toBeLessThan(expiry);
+        expect(oneYearFromNow + 1000).toBeGreaterThan(expiry);
+      });
+
+      it("sets the cookie with the correct flags", () => {
+        expect(cookie.domain).toEqual("decidim.dev");
+        expect(cookie.sameSite).toEqual("Lax");
+        expect(cookie.secure).toBe(true);
+      });
+    });
+
+    describe("when the current URL is insecure", () => {
+      beforeEach(() => {
+        Reflect.defineProperty(window.location, "protocol", { value: "http:" })
+
+        manager.updateState({ foo: "bar" });
+        cookie = getCookie("decidim-consent");
+      });
+
+      it("does not set the secure flag", () => {
+        expect(cookie.secure).toBeUndefined();
+      });
+    });
+  });
+});

data/app/packs/src/decidim/{cookie_consent/cookie_consent.js → data_consent/index.js}

@@ -1,15 +1,15 @@
-import ConsentManager from "src/decidim/cookie_consent/consent_manager";
+import ConsentManager from "src/decidim/data_consent/consent_manager";
 
 const initDialog = (manager) => {
   if (Object.keys(manager.state).length > 0) {
     return;
   }
-  const dialogWrapper = document.querySelector("#cc-dialog-wrapper");
+  const dialogWrapper = document.querySelector("#dc-dialog-wrapper");
   dialogWrapper.classList.remove("hide");
 
-  const acceptAllButton = dialogWrapper.querySelector("#cc-dialog-accept");
-  const rejectAllButton = dialogWrapper.querySelector("#cc-dialog-reject");
-  const settingsButton = dialogWrapper.querySelector("#cc-dialog-settings");
+  const acceptAllButton = dialogWrapper.querySelector("#dc-dialog-accept");
+  const rejectAllButton = dialogWrapper.querySelector("#dc-dialog-reject");
+  const settingsButton = dialogWrapper.querySelector("#dc-dialog-settings");
 
   acceptAllButton.addEventListener("click", () => {
     manager.acceptAll();
@@ -30,8 +30,8 @@ const initModal = (manager) => {
   const categoryElements = manager.modal.querySelectorAll(".category-wrapper");
 
   categoryElements.forEach((categoryEl) => {
-    const categoryButton = categoryEl.querySelector(".cc-title");
-    const categoryDescription = categoryEl.querySelector(".cc-description");
+    const categoryButton = categoryEl.querySelector(".dc-title");
+    const categoryDescription = categoryEl.querySelector(".dc-description");
     categoryButton.addEventListener("click", () => {
       const hidden = categoryDescription.classList.contains("hide");
       if (hidden) {
@@ -44,9 +44,9 @@ const initModal = (manager) => {
     })
   })
 
-  const acceptAllButton = manager.modal.querySelector("#cc-modal-accept");
-  const rejectAllButton = manager.modal.querySelector("#cc-modal-reject");
-  const saveSettingsButton = manager.modal.querySelector("#cc-modal-save");
+  const acceptAllButton = manager.modal.querySelector("#dc-modal-accept");
+  const rejectAllButton = manager.modal.querySelector("#dc-modal-reject");
+  const saveSettingsButton = manager.modal.querySelector("#dc-modal-save");
 
   acceptAllButton.addEventListener("click", () => {
     manager.acceptAll();
@@ -84,7 +84,7 @@ const initDisabledIframes = (manager) => {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-  const modal = document.querySelector("#cc-modal");
+  const modal = document.querySelector("#dc-modal");
   if (!modal) {
     return;
   }
@@ -94,7 +94,7 @@ document.addEventListener("DOMContentLoaded", () => {
     modal: modal,
     categories: categories,
     cookieName: window.Decidim.config.get("consent_cookie_name"),
-    warningElement: document.querySelector(".cookie-warning")
+    warningElement: document.querySelector(".dataconsent-warning")
   });
 
   initDisabledIframes(manager);

data/app/packs/src/decidim/input_character_counter.js

@@ -1,3 +1,5 @@
+/* eslint max-lines: ["error", {"max": 350, "skipBlankLines": true}] */
+
 const COUNT_KEY = "%count%";
 // How often SR announces the message in relation to maximum characters. E.g.
 // if max characters is 1000, screen reader announces the remaining characters
@@ -36,7 +38,7 @@ export default class InputCharacterCounter {
     // Define the closest length for the input "gaps" defined by the threshold.
     if (this.maxCharacters > 10) {
       if (this.maxCharacters > 100) {
-        this.announceThreshold = Math.floor(this.maxCharacters * SR_ANNOUNCE_THRESHOLD_RATIO / 100) * 100;
+        this.announceThreshold = Math.floor(this.maxCharacters * SR_ANNOUNCE_THRESHOLD_RATIO);
       } else {
         this.announceThreshold = 10;
       }
@@ -78,9 +80,6 @@ export default class InputCharacterCounter {
       }
     }
 
-    this.updateInputLength();
-    this.previousInputLength = this.inputLength;
-
     if (this.$target.length > 0 && (this.maxCharacters > 0 || this.minCharacters > 0)) {
       // Create the screen reader target element. We don't want to constantly
       // announce every change to screen reader, only occasionally.
@@ -89,58 +88,68 @@ export default class InputCharacterCounter {
       );
       this.$target.before(this.$srTarget);
       this.$target.attr("aria-hidden", "true");
-      this.setDescribedBy(true);
 
-      this.bindEvents();
+      this.$userInput = this.$input;
+
+      // In WYSIWYG editors (Quill) we need to find the active editor from the
+      // DOM node. Quill has the experimental "find" method that should work
+      // fine in this case
+      if (Quill && this.$input.parent().is(".editor")) {
+        // Wait until the next javascript loop so Quill editors are created
+        setTimeout(() => {
+          this.editor = Quill.find(this.$input.siblings(".editor-container")[0]);
+          this.$userInput = $(this.editor.root);
+          this.initialize();
+        });
+      } else {
+        this.initialize();
+      }
     }
   }
 
+  initialize() {
+    this.updateInputLength();
+    this.previousInputLength = this.inputLength;
+
+    this.bindEvents();
+    this.setDescribedBy(true);
+  }
+
   setDescribedBy(active) {
     if (!this.describeByCounter) {
       return;
     }
 
     if (active) {
-      this.$input.attr("aria-describedby", this.$srTarget.attr("id"));
+      this.$userInput.attr("aria-describedby", this.$srTarget.attr("id"));
     } else {
-      this.$input.removeAttr("aria-describedby");
+      this.$userInput.removeAttr("aria-describedby");
     }
   }
 
   bindEvents() {
-    // In WYSIWYG editors (Quill) we need to find the active editor from the
-    // DOM node. Quill has the experimental "find" method that should work
-    // fine in this case
-    if (Quill && this.$input.parent().is(".editor")) {
-      // Wait until the next javascript loop so Quill editors are created
-      setTimeout(() => {
-        const editor = Quill.find(this.$input.siblings(".editor-container")[0]);
-        editor.on("text-change", () => {
-          this.updateStatus();
-        });
-      })
+    if (this.editor) {
+      this.editor.on("text-change", () => {
+        this.handleInput();
+      });
+    } else {
+      this.$userInput.on("input", () => {
+        this.handleInput();
+      });
     }
-    this.$input.on("keyup", () => {
+
+    this.$userInput.on("keyup", () => {
       this.updateStatus();
     });
-    this.$input.on("input", () => {
-      this.updateInputLength();
-      this.checkScreenReaderUpdate();
-      // If the input is "described by" the character counter, some screen
-      // readers (NVDA) announce the status twice when it is updated. By
-      // removing the aria-describedby attribute while the user is typing makes
-      // the screen reader announce the status only once.
-      this.setDescribedBy(false);
-    });
-    this.$input.on("focus", () => {
+    this.$userInput.on("focus", () => {
       this.updateScreenReaderStatus();
     });
-    this.$input.on("blur", () => {
+    this.$userInput.on("blur", () => {
       this.updateScreenReaderStatus();
       this.setDescribedBy(true);
     });
-    if (this.$input.get(0) !== null) {
-      this.$input.get(0).addEventListener("emoji.added", () => {
+    if (this.$userInput.get(0) !== null) {
+      this.$userInput.get(0).addEventListener("emoji.added", () => {
         this.updateStatus();
       });
     }
@@ -154,7 +163,21 @@ export default class InputCharacterCounter {
 
   updateInputLength() {
     this.previousInputLength = this.inputLength;
-    this.inputLength = this.$input.val().length;
+    if (this.editor) {
+      this.inputLength = this.editor.getLength();
+    } else {
+      this.inputLength = this.$input.val().length;
+    }
+  }
+
+  handleInput() {
+    this.updateInputLength();
+    this.checkScreenReaderUpdate();
+    // If the input is "described by" the character counter, some screen
+    // readers (NVDA) announce the status twice when it is updated. By
+    // removing the aria-describedby attribute while the user is typing makes
+    // the screen reader announce the status only once.
+    this.setDescribedBy(false);
   }
 
   /**

data/app/packs/src/decidim/sw/a2hs.js

@@ -3,9 +3,17 @@ const DELAYED_VISITS = 2
 let deferredPrompt = null
 
 const shouldCountVisitedPages = () => sessionStorage.getItem("userChoice") !== "dismissed" && visitedPages.length < DELAYED_VISITS && !visitedPages.includes(location.pathname)
-const shouldPrompt = () => deferredPrompt && sessionStorage.getItem("userChoice") !== "dismissed" && visitedPages.length >= DELAYED_VISITS
+const shouldPrompt = () => {
+  // Disable the application install prompt showing constantly.
+  if (localStorage.getItem("pwaInstallPromptSeen")) {
+    return false
+  }
+
+  return deferredPrompt && sessionStorage.getItem("userChoice") !== "dismissed" && visitedPages.length >= DELAYED_VISITS
+}
 
 window.addEventListener("beforeinstallprompt", (event) => {
+  event.preventDefault()
   deferredPrompt = event
 
   // allow the user browse through different locations before prompt them anything
@@ -24,5 +32,6 @@ window.addEventListener("click", async (event) => {
     // store the user choice to avoid asking again in the current session
     sessionStorage.setItem("userChoice", outcome)
     sessionStorage.removeItem("visitedPages")
+    localStorage.setItem("pwaInstallPromptSeen", true)
   }
 });

data/app/packs/stylesheets/decidim/modules/_cards.scss

@@ -30,6 +30,8 @@ $datetime-bg: var(--primary);
   border-radius: $card-border-radius;
   // Keep visible for accessibility (active/focused card as a link)
   overflow: visible;
+  overflow-wrap: break-word;
+  hyphens: auto;
 
   @include modifiers(
     border-top-color,

data/app/packs/stylesheets/decidim/modules/_comments.scss

@@ -80,6 +80,8 @@ $comment-form-bg: $light-gray;
 
 .comment__content{
   padding: 0 $comment-padding;
+  overflow-wrap: break-word;
+  hyphens: auto;
 
   > :last-child{
     margin-bottom: 0;