decidim-core 0.26.9 → 0.27.0.rc1

data/app/packs/src/decidim/map/svg-icon.js

@@ -0,0 +1,248 @@
+/* eslint prefer-reflect: 0 */
+
+// Leaflet-SVGIcon
+// SVG icon for any marker class
+//
+// Copyright (c) 2016 University of New Hampshire - The MIT License
+// Author: Ilya Atkin <ilya.atkin@unh.edu>
+// Originally copied from https://github.com/iatkin/leaflet-svgicon
+//
+
+let SVGIcon = L.DivIcon.extend({
+  options: {
+    "circleText": "",
+    "className": "svg-icon",
+    // defaults to [iconSize.x/2, iconSize.x/2]
+    "circleAnchor": null,
+    // defaults to color
+    "circleColor": null,
+    // defaults to opacity
+    "circleOpacity": null,
+    "circleFillColor": "rgb(255,255,255)",
+    // default to opacity
+    "circleFillOpacity": null,
+    "circleRatio": 0.5,
+    // defaults to weight
+    "circleWeight": null,
+    "color": "rgb(0,102,255)",
+    // defaults to color
+    "fillColor": null,
+    "fillOpacity": 0.4,
+    "fontColor": "rgb(0, 0, 0)",
+    "fontOpacity": "1",
+    // defaults to iconSize.x/4
+    "fontSize": null,
+    "fontWeight": "normal",
+    // defaults to [iconSize.x/2, iconSize.y] (point tip)
+    "iconAnchor": null,
+    "iconSize": L.point(32, 48),
+    "opacity": 1,
+    "popupAnchor": null,
+    "shadowAngle": 45,
+    "shadowBlur": 1,
+    "shadowColor": "rgb(0,0,10)",
+    "shadowEnable": false,
+    "shadowLength": 0.75,
+    "shadowOpacity": 0.5,
+    "shadowTranslate": L.point(0, 0),
+    "weight": 2
+  },
+  initialize: function(_options) {
+    let options = L.Util.setOptions(this, _options)
+
+    // iconSize needs to be converted to a Point object if it is not passed as one
+    options.iconSize = L.point(options.iconSize)
+
+    // in addition to setting option dependant defaults, Point-based options are converted to Point objects
+    if (options.circleAnchor) {
+      options.circleAnchor = L.point(options.circleAnchor)
+    } else {
+      options.circleAnchor = L.point(Number(options.iconSize.x) / 2, Number(options.iconSize.x) / 2)
+    }
+    if (!options.circleColor) {
+      options.circleColor = options.color
+    }
+    if (!options.circleFillOpacity) {
+      options.circleFillOpacity = options.opacity
+    }
+    if (!options.circleOpacity) {
+      options.circleOpacity = options.opacity
+    }
+    if (!options.circleWeight) {
+      options.circleWeight = options.weight
+    }
+    if (!options.fillColor) {
+      options.fillColor = options.color
+    }
+    if (!options.fontSize) {
+      options.fontSize = Number(options.iconSize.x / 4)
+    }
+    if (options.iconAnchor) {
+      options.iconAnchor = L.point(options.iconAnchor)
+    }
+    else {
+      options.iconAnchor = L.point(Number(options.iconSize.x) / 2, Number(options.iconSize.y))
+    }
+    if (options.popupAnchor) {
+      options.popupAnchor = L.point(options.popupAnchor)
+    }
+    else {
+      options.popupAnchor = L.point(0, (-0.75) * (options.iconSize.y))
+    }
+
+    options.html = this._createSVG()
+  },
+  _createCircle: function() {
+    let cx = Number(this.options.circleAnchor.x)
+    let cy = Number(this.options.circleAnchor.y)
+    let radius = this.options.iconSize.x / 2 * Number(this.options.circleRatio)
+    let fill = this.options.circleFillColor
+    let fillOpacity = this.options.circleFillOpacity
+    let stroke = this.options.circleColor
+    let strokeOpacity = this.options.circleOpacity
+    let strokeWidth = this.options.circleWeight
+    let className = `${this.options.className}-circle`
+
+    let circle = `<circle class="${className}" cx="${cx}" cy="${cy}" r="${radius
+    }" fill="${fill}" fill-opacity="${fillOpacity
+    }" stroke="${stroke}" stroke-opacity=${strokeOpacity}" stroke-width="${strokeWidth}"/>`
+
+    return circle
+  },
+  _createPathDescription: function() {
+    let height = Number(this.options.iconSize.y)
+    let width = Number(this.options.iconSize.x)
+    let weight = Number(this.options.weight)
+    let margin = weight / 2
+
+    let startPoint = `M ${margin} ${width / 2} `
+    let leftLine = `L ${width / 2} ${height - weight} `
+    let rightLine = `L ${width - margin} ${width / 2} `
+    let arc = `A ${width / 4} ${width / 4} 0 0 0 ${margin} ${width / 2} Z`
+
+    let description = startPoint + leftLine + rightLine + arc
+
+    return description
+  },
+  _createPath: function() {
+    let pathDescription = this._createPathDescription()
+    let strokeWidth = this.options.weight
+    let stroke = this.options.color
+    let strokeOpacity = this.options.opacity
+    let fill = this.options.fillColor
+    let fillOpacity = this.options.fillOpacity
+    let className = `${this.options.className}-path`
+
+    let path = `<path class="${className}" d="${pathDescription
+    }" stroke-width="${strokeWidth}" stroke="${stroke}" stroke-opacity="${strokeOpacity
+    }" fill="${fill}" fill-opacity="${fillOpacity}"/>`
+
+    return path
+  },
+  _createShadow: function() {
+    let pathDescription = this._createPathDescription()
+    let strokeWidth = this.options.weight
+    let stroke = this.options.shadowColor
+    let fill = this.options.shadowColor
+    let className = `${this.options.className}-shadow`
+
+    let origin = `${this.options.iconSize.x / 2}px ${this.options.iconSize.y}px`
+    let rotation = this.options.shadowAngle
+    let height = this.options.shadowLength
+    let opacity = this.options.shadowOpacity
+    let blur = this.options.shadowBlur
+    let translate = `${this.options.shadowTranslate.x}px, ${this.options.shadowTranslate.y}px`
+
+    let blurFilter = `<filter id='iconShadowBlur'><feGaussianBlur in='SourceGraphic' stdDeviation='${blur}'/></filter>`
+
+    let shadow = `<path filter="url(#iconShadowBlur") class="${className}" d="${pathDescription}" fill="${fill}" stroke-width="${strokeWidth}" stroke="${stroke}" style="opacity: ${opacity}; transform-origin: ${origin}; transform: rotate(${rotation}deg) translate(${translate}) scale(1, ${height})" />`
+
+    return blurFilter + shadow
+  },
+  _createSVG: function() {
+    let path = this._createPath()
+    let circle = this._createCircle()
+    let text = this._createText()
+    let shadow = ""
+    if (this.options.shadowEnable) {
+      shadow = this._createShadow()
+    }
+
+    let className = `${this.options.className}-svg`
+    let width = this.options.iconSize.x
+    let height = this.options.iconSize.y
+
+    if (this.options.shadowEnable) {
+      width += this.options.iconSize.y * this.options.shadowLength - (this.options.iconSize.x / 2)
+      width = Math.max(width, 32)
+      height += this.options.iconSize.y * this.options.shadowLength
+    }
+
+    let style = `width:${width}px; height:${height}`
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="${className}" style="${style}">${shadow}${path}${circle}${text}</svg>`
+
+    return svg
+  },
+  _createText: function() {
+    let fontSize = `${this.options.fontSize}px`
+    let fontWeight = this.options.fontWeight
+    let lineHeight = Number(this.options.fontSize)
+
+    let coordX = this.options.circleAnchor.x
+    // 35% was found experimentally
+    let coordY = this.options.circleAnchor.y + (lineHeight * 0.35)
+    let circleText = this.options.circleText
+    let textColor = this.options.fontColor.replace("rgb(", "rgba(").replace(")", `,${this.options.fontOpacity})`)
+
+    let text = `<text text-anchor="middle" x="${coordX}" y="${coordY}" style="font-size: ${fontSize}; font-weight: ${fontWeight}" fill="${textColor}">${circleText}</text>`
+
+    return text
+  }
+})
+
+let SVGMarker = L.Marker.extend({
+  options: {
+    "iconFactory": L.divIcon.svgIcon,
+    "iconOptions": {}
+  },
+  initialize: function(latlng, _options) {
+    let options = L.Util.setOptions(this, _options)
+    options.icon = options.iconFactory(options.iconOptions)
+    this._latlng = latlng
+  },
+  onAdd: function(map) {
+    L.Marker.prototype.onAdd.call(this, map)
+  },
+  setStyle: function(style) {
+    if (this._icon) {
+      //      let svg = this._icon.children[0]
+      let iconBody = this._icon.children[0].children[0]
+      let iconCircle = this._icon.children[0].children[1]
+
+      if (style.color && !style.iconOptions) {
+        let stroke = style.color.replace("rgb", "rgba").replace(")", `,${this.options.icon.options.opacity})`)
+        let fill = style.color.replace("rgb", "rgba").replace(")", `,${this.options.icon.options.fillOpacity})`)
+        iconBody.setAttribute("stroke", stroke)
+        iconBody.setAttribute("fill", fill)
+        iconCircle.setAttribute("stroke", stroke)
+
+        this.options.icon.fillColor = fill
+        this.options.icon.color = stroke
+        this.options.icon.circleColor = stroke
+      }
+      if (style.opacity) {
+        this.setOpacity(style.opacity)
+      }
+      if (style.iconOptions) {
+        if (style.color) {
+          style.iconOptions.color = style.color
+        }
+        let iconOptions = L.Util.setOptions(this.options.icon, style.iconOptions)
+        this.setIcon(L.divIcon.svgIcon(iconOptions))
+      }
+    }
+  }
+});
+
+export { SVGMarker, SVGIcon }
+

data/app/packs/src/decidim/security/selfxss_warning.js

@@ -1,10 +1,14 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console, no-process-env, no-undef */
 
 $(() => {
   if (!console) {
     return;
   }
 
+  if (process.env.NODE_ENV === "development") {
+    return;
+  }
+
   const allMessages = window.Decidim.config.get("messages");
   if (!allMessages) {
     return;

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

@@ -1,4 +1,4 @@
-import moment from "moment"
+import dayjs from "dayjs"
 
 $(() => {
   let sessionTimeOutEnabled = true;
@@ -8,20 +8,20 @@ $(() => {
   const heartbeatPath = $timeoutModal.data("heartbeat-path");
   const interval = parseInt($timeoutModal.data("session-timeout-interval"), 10);
   const preventTimeOutSeconds = $timeoutModal.data("prevent-timeout-seconds");
-  let endsAt = moment().add(timeoutInSeconds, "seconds");
-  let lastAction = moment();
+  let endsAt = dayjs().add(timeoutInSeconds, "seconds");
+  let lastAction = dayjs();
   const $continueSessionButton = $("#continueSession");
-  let lastActivityCheck = moment();
+  let lastActivityCheck = dayjs();
   // 5 * 60 seconds = 5 Minutes
   const activityCheckInterval = 5 * 60;
-  const preventTimeOutUntil = moment().add(preventTimeOutSeconds, "seconds");
+  const preventTimeOutUntil = dayjs().add(preventTimeOutSeconds, "seconds");
 
   // Ajax request is made at timeout_modal.html.erb
   $continueSessionButton.on("click", () => {
     $timeoutModal.foundation("close");
     // In admin panel we have to hide all overlays
     $(".reveal-overlay").css("display", "none");
-    lastActivityCheck = moment();
+    lastActivityCheck = dayjs();
   })
 
   if (isNaN(interval)) {
@@ -43,7 +43,7 @@ $(() => {
     if (!secondsUntilExpiration) {
       return;
     }
-    endsAt = moment().add(secondsUntilExpiration, "seconds");
+    endsAt = dayjs().add(secondsUntilExpiration, "seconds");
   }
 
   const sessionTimeLeft = () => {
@@ -66,27 +66,27 @@ $(() => {
   }
 
   const userBeenActiveSince = (seconds) => {
-    return (moment() - lastAction) / 1000 < seconds;
+    return (dayjs() - lastAction) / 1000 < seconds;
   }
 
   const exitInterval = setInterval(() => {
-    const timeSinceLastActivityCheckInSeconds = Math.round((moment() - lastActivityCheck) / 1000);
+    const timeSinceLastActivityCheckInSeconds = Math.round((dayjs() - lastActivityCheck) / 1000);
 
     const popupOpen = $("#timeoutModal").parent().css("display") === "block";
     if (!popupOpen && timeSinceLastActivityCheckInSeconds >= activityCheckInterval) {
-      lastActivityCheck = moment();
+      lastActivityCheck = dayjs();
       if (userBeenActiveSince(activityCheckInterval)) {
         heartbeat();
         return;
       }
     }
 
-    const timeRemaining = Math.round((endsAt - moment()) / 1000);
+    const timeRemaining = Math.round((endsAt - dayjs()) / 1000);
     if (timeRemaining > 170) {
       return;
     }
 
-    if (moment() < preventTimeOutUntil) {
+    if (dayjs() < preventTimeOutUntil) {
       heartbeat();
       return;
     }
@@ -106,13 +106,13 @@ $(() => {
   }, interval);
 
   $(document).mousemove(() => {
-    lastAction = moment();
+    lastAction = dayjs();
   })
   $(document).scroll(() => {
-    lastAction = moment();
+    lastAction = dayjs();
   })
   $(document).keypress(() => {
-    lastAction = moment();
+    lastAction = dayjs();
   })
 
   // Devise restarts its own timer on ajax requests,

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

@@ -0,0 +1,28 @@
+const visitedPages = JSON.parse(sessionStorage.getItem("visitedPages")) || []
+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
+
+window.addEventListener("beforeinstallprompt", (event) => {
+  deferredPrompt = event
+
+  // allow the user browse through different locations before prompt them anything
+  if (shouldCountVisitedPages()) {
+    sessionStorage.setItem("visitedPages", JSON.stringify([...visitedPages, location.pathname]))
+  }
+});
+
+// to trigger the prompt, it must be a "user gesture"
+window.addEventListener("click", async (event) => {
+  if (shouldPrompt()) {
+    event.preventDefault()
+    deferredPrompt.prompt()
+
+    const { outcome } = await deferredPrompt.userChoice;
+    // store the user choice to avoid asking again in the current session
+    sessionStorage.setItem("userChoice", outcome)
+    sessionStorage.removeItem("visitedPages")
+  }
+});

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

@@ -0,0 +1,3 @@
+import "./loader"
+import "./a2hs"
+import "./push-permissions"

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

@@ -0,0 +1,18 @@
+// check if the browser supports serviceWorker at all
+window.addEventListener("load", async () => {
+  if ("serviceWorker" in navigator) {
+    await navigator.serviceWorker.register("/sw.js", { scope: "/" });
+
+    const mandatoryElements = document.querySelector(".js-sw-mandatory");
+    // Opera uses Opera for versions <= 12 and OPR for versions > 12
+    const isOperaMini =
+      ((navigator.userAgent.indexOf("OPR") > -1) || (navigator.userAgent.indexOf("Opera") > -1)) &&
+      (navigator.userAgent.indexOf("Mini") > -1);
+
+    if (mandatoryElements && isOperaMini) {
+      mandatoryElements.classList.add("hide")
+    }
+  } else {
+    console.log("Your browser doesn't support service workers 🤷‍♀️");
+  }
+});

data/app/packs/src/decidim/sw/push-permissions.js

@@ -0,0 +1,87 @@
+window.addEventListener("DOMContentLoaded", async () => {
+  const GRANTED_PERMISSION = "granted"
+
+  const hideReminder = function() {
+    const reminder = document.querySelector("#push-notifications-reminder")
+    reminder.classList.add("hide")
+  }
+
+  const subscribeToNotifications = async (registration) => {
+    const permission = await window.Notification.requestPermission();
+
+    if (registration && permission === GRANTED_PERMISSION) {
+      const vapidElement = document.querySelector("#vapidPublicKey")
+      // element could not exist in DOM
+      if (vapidElement) {
+        const vapidPublicKeyElement = JSON.parse(vapidElement.value)
+        const subscription = await registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: new Uint8Array(vapidPublicKeyElement)
+        });
+
+        if (subscription) {
+          await fetch("/notifications_subscriptions", {
+            headers: {
+              "Content-Type": "application/json",
+              "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")?.content
+            },
+            method: "POST",
+            body: JSON.stringify(subscription)
+          });
+        }
+      }
+      hideReminder()
+    } else {
+      throw new Error("Permission not granted for Notification");
+    }
+  }
+
+  const unsubscribeFromNotifications = async (registration) => {
+    /* eslint-disable no-shadow */
+    const currentSubscription = await registration.pushManager.getSubscription()
+    const auth = currentSubscription.toJSON().keys.auth
+    await fetch(`/notifications_subscriptions/${auth}`, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")?.content
+      },
+      method: "DELETE"
+    });
+  }
+
+  const setToggleState = async (registration, toggle) => {
+    const currentSubscription = await registration.pushManager.getSubscription()
+    let toggleChecked = false
+
+    if (window.Notification.permission === GRANTED_PERMISSION) {
+      hideReminder()
+      if (currentSubscription) {
+        const auth = currentSubscription.toJSON().keys.auth
+        const subKeys = JSON.parse(document.querySelector("#subKeys").value)
+        // Subscribed && browser notifications enabled
+        if (subKeys.includes(auth)) {
+          toggleChecked = true
+        }
+      }
+    }
+    toggle.checked = toggleChecked
+  }
+
+  if ("serviceWorker" in navigator) {
+    const toggle = document.getElementById("allow_push_notifications")
+
+    if (toggle) {
+      const registration = await navigator.serviceWorker.ready
+
+      setToggleState(registration, toggle)
+
+      toggle.addEventListener("change", async ({ target }) => {
+        if (target.checked) {
+          await subscribeToNotifications(registration);
+        } else {
+          await unsubscribeFromNotifications(registration)
+        }
+      })
+    }
+  }
+});

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

@@ -0,0 +1,80 @@
+import {
+  imageCache,
+  staticResourceCache,
+  offlineFallback
+} from "workbox-recipes";
+import { registerRoute } from "workbox-routing";
+import { NetworkFirst, NetworkOnly } from "workbox-strategies";
+import { CacheableResponsePlugin } from "workbox-cacheable-response";
+import { ExpirationPlugin } from "workbox-expiration";
+
+
+// https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug#debugging_workbox
+self.__WB_DISABLE_DEV_LOGS = true
+
+/**
+ * This is a workaround to bypass a webpack compilation error
+ *
+ * The InjectManifest function requires the __WB_MANIFEST somewhere in this file,
+ * however, we cannot add precacheAndRoute as the issue suggests,
+ * as the other workbox-recipes won't work properly
+ *
+ * See more: https://github.com/GoogleChrome/workbox/issues/2519#issuecomment-634164566
+ */
+// eslint-disable-next-line no-unused-vars
+const dummy = self.__WB_MANIFEST;
+
+self.addEventListener("push", (event) => {
+  const { title, ...opts } = event.data.json();
+  event.waitUntil(self.registration.showNotification(title, { ...opts }));
+});
+
+// Event handler for click on the notification event
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  // Get all the Window clients
+  event.waitUntil(
+    self.clients.matchAll({ type: "window" }).then((clientsArr) => {
+      const windowToFocus = clientsArr.find((windowClient) => windowClient.url === event.notification.data.url);
+      if (windowToFocus) {
+        // If a Window tab matching the targeted URL already exists, focus that
+        windowToFocus.focus()
+      } else {
+        // Otherwise, open a new tab to the applicable URL and focus it
+        self.clients.
+          openWindow(event.notification.data.url).
+          then((windowClient) => windowClient && windowClient.focus());
+      }
+    })
+  );
+});
+
+// avoid caching admin or users paths
+registerRoute(
+  ({ url }) => ["/admin/", "/users/"].some((path) => url.pathname.startsWith(path)),
+  new NetworkOnly()
+);
+
+// https://developers.google.com/web/tools/workbox/modules/workbox-recipes#pattern_3
+registerRoute(
+  ({ request }) => request.mode === "navigate",
+  new NetworkFirst({
+    networkTimeoutSeconds: 3,
+    cacheName: "pages",
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200]
+      }),
+      new ExpirationPlugin({
+        maxAgeSeconds: 60 * 60
+      })
+    ]
+  }),
+);
+
+// common recipes
+staticResourceCache();
+
+imageCache();
+
+offlineFallback({ pageFallback: "/offline" });