decidim-core 0.26.2 → 0.27.0.rc2

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/data_consent/index.js

@@ -0,0 +1,103 @@
+import ConsentManager from "src/decidim/data_consent/consent_manager";
+
+const initDialog = (manager) => {
+  if (Object.keys(manager.state).length > 0) {
+    return;
+  }
+  const dialogWrapper = document.querySelector("#dc-dialog-wrapper");
+  dialogWrapper.classList.remove("hide");
+
+  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();
+    dialogWrapper.style.display = "none";
+  });
+
+  rejectAllButton.addEventListener("click", () => {
+    manager.rejectAll();
+    dialogWrapper.style.display = "none";
+  });
+
+  settingsButton.addEventListener("click", () => {
+    dialogWrapper.style.display = "none";
+  });
+}
+
+const initModal = (manager) => {
+  const categoryElements = manager.modal.querySelectorAll(".category-wrapper");
+
+  categoryElements.forEach((categoryEl) => {
+    const categoryButton = categoryEl.querySelector(".dc-title");
+    const categoryDescription = categoryEl.querySelector(".dc-description");
+    categoryButton.addEventListener("click", () => {
+      const hidden = categoryDescription.classList.contains("hide");
+      if (hidden) {
+        categoryButton.classList.add("open");
+        categoryDescription.classList.remove("hide");
+      } else {
+        categoryButton.classList.remove("open");
+        categoryDescription.classList.add("hide");
+      }
+    })
+  })
+
+  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();
+  })
+
+  rejectAllButton.addEventListener("click", () => {
+    manager.rejectAll();
+  })
+
+  saveSettingsButton.addEventListener("click", () => {
+    let newState = {};
+    manager.categories.forEach((category) => {
+      const accepted = manager.modal.querySelector(`input[name='${category}']`).checked;
+      if (accepted) {
+        newState[category] = true;
+      }
+    })
+    manager.saveSettings(newState);
+  })
+}
+
+const initDisabledIframes = (manager) => {
+  const disabledIframes = document.querySelectorAll(".disabled-iframe")
+  if (manager.allAccepted()) {
+    disabledIframes.forEach((elem) => {
+      const iframe = document.createElement("iframe")
+      iframe.setAttribute("src", elem.getAttribute("src"));
+      iframe.className = elem.classList.toString();
+      iframe.setAttribute("allowfullscreen", elem.getAttribute("allowfullscreen"));
+      iframe.setAttribute("frameborder", elem.getAttribute("frameborder"));
+      elem.parentElement.appendChild(iframe);
+      elem.remove();
+    })
+  }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const modal = document.querySelector("#dc-modal");
+  if (!modal) {
+    return;
+  }
+
+  const categories = [...modal.querySelectorAll(".category-wrapper")].map((el) => el.dataset.id)
+  const manager = new ConsentManager({
+    modal: modal,
+    categories: categories,
+    cookieName: window.Decidim.config.get("consent_cookie_name"),
+    warningElement: document.querySelector(".dataconsent-warning")
+  });
+
+  initDisabledIframes(manager);
+  initModal(manager, categories);
+  initDialog(manager);
+});

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

@@ -0,0 +1,36 @@
+/**
+// Function adds feature to datalist that you can have different id and label.
+// Used with datalist_select_helper.rb#datalist_select
+ * @param {HTMLElement} target - dataselect wrapper
+ * @param {Function} callback - the function to be executed after a successful selection.
+ * @returns {Void} - Returns nothing.
+ */
+
+export const datalistSelect = (target, callback) => {
+  if (!target) {
+    return;
+  }
+
+  const input = target.querySelector("input[type='hidden'");
+  const textInput = target.querySelector("input[type='text']");
+  const items = target.querySelector("datalist").children;
+
+  const selectValue = (selected) => {
+    for (let idx = 0; idx < items.length; idx += 1) {
+      if (items[idx].innerHTML === selected) {
+        const id = items[idx].dataset.value;
+        input.value = id;
+        if (callback) {
+          return callback(id);
+        }
+        return true;
+      }
+    }
+    return false;
+  }
+
+  textInput.addEventListener("input", () => {
+    const selected = textInput.value;
+    selectValue(selected);
+  })
+}

data/app/packs/src/decidim/direct_uploads/upload_field.js

@@ -0,0 +1,117 @@
+import UploadModal from "src/decidim/direct_uploads/upload_modal";
+import { truncateFilename, createHiddenInput } from "src/decidim/direct_uploads/upload_utility";
+
+const loadAttachments = (modal) => {
+  Array.from(modal.activeAttachments.children).forEach((child) => {
+    modal.createUploadItem(child.dataset.filename, child.dataset.title, "validated");
+  })
+}
+
+const addInputEventListener = (modal) => {
+  modal.input.addEventListener("change", (event) => {
+    event.preventDefault();
+    const files = event.target.files;
+    Array.from(files).forEach((file) => modal.uploadFile(file));
+  })
+}
+
+const addButtonEventListener = (modal) => {
+  modal.button.addEventListener("click", (event) => {
+    event.preventDefault();
+    Array.from(modal.trashCan.children).forEach((item) => {
+      modal.uploadItems.append(item);
+    })
+    if (modal.uploadItems.children.length === 0) {
+      modal.modalTitle.innerHTML = modal.modalTitle.dataset.addlabel;
+    } else {
+      modal.modalTitle.innerHTML = modal.modalTitle.dataset.editlabel;
+    }
+    modal.updateDropZone();
+  })
+}
+
+const addDropZoneEventListeners = (modal) => {
+  modal.dropZone.addEventListener("dragenter", (event) => {
+    event.preventDefault();
+  })
+
+  modal.dropZone.addEventListener("dragover", (event) => {
+    event.preventDefault();
+    modal.dropZone.classList.add("is-dragover");
+  })
+
+  modal.dropZone.addEventListener("dragleave", () => {
+    modal.dropZone.classList.remove("is-dragover");
+  })
+
+  modal.dropZone.addEventListener("drop", (event) => {
+    event.preventDefault();
+    const files = event.dataTransfer.files;
+    Array.from(files).forEach((file) => modal.uploadFile(file));
+  })
+}
+
+const addSaveButtonEventListener = (modal) => {
+  modal.saveButton.addEventListener("click", (event) => {
+    event.preventDefault();
+    const validatedItems = modal.uploadItems.querySelectorAll(".upload-item[data-state='validated']")
+    const validatedItemsCount = validatedItems.length;
+    validatedItems.forEach((item) => {
+      let details = item.querySelector(".attachment-details");
+      if (details) {
+        modal.activeAttachments.appendChild(details);
+      } else {
+        details = modal.activeAttachments.querySelector(`.attachment-details[data-filename='${item.dataset.filename}'`);
+      }
+      const span = details.querySelector("span");
+      span.classList.add("filename");
+      if (modal.options.titled) {
+        const title = item.querySelector("input[type='text']").value;
+        details.dataset.title = title;
+        let hiddenTitle = details.querySelector(".hidden-title")
+        if (hiddenTitle) {
+          hiddenTitle.value = title;
+        } else {
+          const attachmentId = details.querySelector(`[name='${modal.options.resourceName}[${modal.name}][]'`).value
+          const ordinalNumber = modal.getOrdinalNumber()
+          const hiddenTitleField = createHiddenInput("hidden-title", `${modal.options.resourceName}[${modal.options.addAttribute}][${ordinalNumber}][title]`, title)
+          const hiddenIdField = createHiddenInput("hidden-id", `${modal.options.resourceName}[${modal.options.addAttribute}][${ordinalNumber}][id]`, attachmentId)
+          details.appendChild(hiddenTitleField);
+          details.appendChild(hiddenIdField);
+        }
+        span.innerHTML = `${title} (${truncateFilename(item.dataset.filename)})`;
+      } else {
+        span.innerHTML = truncateFilename(item.dataset.filename, 19);
+      }
+      span.style.display = "block";
+    });
+
+    if (!modal.options.titled && modal.trashCan.children.length > 0) {
+      modal.activeAttachments.innerHTML = `<input name='${modal.options.resourceName}[remove_${modal.name}]' type="hidden" value="true">`;
+    }
+
+    if (validatedItemsCount > 0) {
+      // Foundation helper does some magic with error fields, so these must be triggered using jQuery.
+      const $el = $(modal.uploadContainer.querySelector("input[type='checkbox']"));
+      if ($el) {
+        $el.prop("checked", true);
+        $el.trigger("change");
+      }
+    }
+    modal.cleanTrashCan();
+    modal.updateAddAttachmentsButton();
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const attachmentButtons = document.querySelectorAll("button.add-file");
+
+  attachmentButtons.forEach((attachmentButton) => {
+    const modal = new UploadModal(attachmentButton);
+    loadAttachments(modal);
+    addInputEventListener(modal);
+    addButtonEventListener(modal);
+    addDropZoneEventListeners(modal);
+    addSaveButtonEventListener(modal);
+  })
+})