From ad26c5cf9f1b505a24962c0280fa073ad04c0099 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 27 Jun 2023 14:53:58 +0200
Subject: [PATCH] Fix background images with special characters

Just like we did for budgets, we're doing the same thing in all the
places where we render background images attached by either regular
users or administrators.

This way we correctly render background images with characters like
brackets or quotes.
---
 app/components/budgets/budget_component.html.erb |  2 +-
 app/components/budgets/budget_component.rb       |  1 +
 app/helpers/images_helper.rb                     |  4 ++++
 app/views/dashboard/poster/index.html.erb        |  2 +-
 app/views/dashboard/poster/index.pdf.erb         |  2 +-
 app/views/layouts/devise.html.erb                |  2 +-
 spec/helpers/images_helper_spec.rb               | 13 +++++++++++++
 7 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 spec/helpers/images_helper_spec.rb

diff --git a/app/components/budgets/budget_component.html.erb b/app/components/budgets/budget_component.html.erb
index 2563ee70d..332920b2e 100644
--- a/app/components/budgets/budget_component.html.erb
+++ b/app/components/budgets/budget_component.html.erb
@@ -1,6 +1,6 @@
 <% if budget.image.present? %>
   <div class="budget-header with-background-image"
-       style="background-image: url('<%= j polymorphic_path(budget.image.variant(:large)) %>');">
+       style="<%= attached_background_css polymorphic_path(budget.image.variant(:large)) %>">
 <% else %>
   <div class="budget-header">
 <% end %>
diff --git a/app/components/budgets/budget_component.rb b/app/components/budgets/budget_component.rb
index b11ebce85..4b842a3fd 100644
--- a/app/components/budgets/budget_component.rb
+++ b/app/components/budgets/budget_component.rb
@@ -1,5 +1,6 @@
 class Budgets::BudgetComponent < ApplicationComponent
   attr_reader :budget
+  delegate :attached_background_css, to: :helpers
 
   def initialize(budget)
     @budget = budget
diff --git a/app/helpers/images_helper.rb b/app/helpers/images_helper.rb
index 06d63e9f8..787f8cf25 100644
--- a/app/helpers/images_helper.rb
+++ b/app/helpers/images_helper.rb
@@ -14,4 +14,8 @@ module ImagesHelper
                            version: (version if image.persisted?),
                            show_caption: show_caption
   end
+
+  def attached_background_css(path)
+    "background-image: url('#{j path}');"
+  end
 end
diff --git a/app/views/dashboard/poster/index.html.erb b/app/views/dashboard/poster/index.html.erb
index e1cddb5d4..bbd988356 100644
--- a/app/views/dashboard/poster/index.html.erb
+++ b/app/views/dashboard/poster/index.html.erb
@@ -18,7 +18,7 @@
         </p>
         <div class="proposal-image">
           <% if proposal.image.present? %>
-            <div class="overflow-image" style="background-image: url(<%= polymorphic_path(proposal.image.variant(:large)) %>);"></div>
+            <div class="overflow-image" style="<%= attached_background_css polymorphic_path(proposal.image.variant(:large)) %>"></div>
           <% else %>
             <div class="overflow-image" style="background-image: url(<%= asset_url "default_mailing.jpg" %>);"></div>
           <% end %>
diff --git a/app/views/dashboard/poster/index.pdf.erb b/app/views/dashboard/poster/index.pdf.erb
index c762156d2..7c4eaebe1 100644
--- a/app/views/dashboard/poster/index.pdf.erb
+++ b/app/views/dashboard/poster/index.pdf.erb
@@ -23,7 +23,7 @@
     </p>
     <div class="proposal-image">
       <% if proposal.image.present? %>
-        <div class="overflow-image" style="background-image: url(<%= polymorphic_url(proposal.image.variant(:large)) %>);"></div>
+        <div class="overflow-image" style="<%= attached_background_css polymorphic_url(proposal.image.variant(:large)) %>"></div>
       <% else %>
         <div class="overflow-image" style="background-image:url('<%= "file://#{Rails.root.join("app","assets","images","default_mailing.jpg")}" %>');"></div>
       <% end %>
diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb
index 7ed3b55b1..26943bf56 100644
--- a/app/views/layouts/devise.html.erb
+++ b/app/views/layouts/devise.html.erb
@@ -10,7 +10,7 @@
     <%= raw setting["html.per_page_code_body"] %>
     <div class="wrapper">
       <div class="auth-image small-12 medium-3 column"
-           style="background-image: url(<%= asset_url(image_path_for("auth_bg.jpg")) %>)">
+           style="<%= attached_background_css asset_url(image_path_for("auth_bg.jpg")) %>">
         <h1 class="logo margin">
           <%= link_to root_path do %>
             <%= image_tag(image_path_for("logo_header.png"), class: "float-left", alt: setting["org_name"]) %>
diff --git a/spec/helpers/images_helper_spec.rb b/spec/helpers/images_helper_spec.rb
new file mode 100644
index 000000000..f115a84f3
--- /dev/null
+++ b/spec/helpers/images_helper_spec.rb
@@ -0,0 +1,13 @@
+require "rails_helper"
+
+describe ImagesHelper do
+  describe "#attached_background_css" do
+    it "adds quotes around the path" do
+      expect(attached_background_css("myurl")).to eq "background-image: url('myurl');"
+    end
+
+    it "escapes quotes inside the path" do
+      expect(attached_background_css("url_'quotes'")).to eq "background-image: url('url_\\'quotes\\'');"
+    end
+  end
+end