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

@@ -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 %>

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

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

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 %>

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 %>

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"]) %>

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