add csp

app/views/submissions/_detailed_form.html.erb

@@ -33,11 +33,13 @@
                       </linked-input>
                     </submitters-autocomplete>
                     <% has_phone_field = true %>
-                    <submitters-autocomplete data-field="phone">
-                      <linked-input data-target-id="<%= "detailed_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                        <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', oninvalid: "this.value ? this.setCustomValidity('#{t('use_international_format_1xxx_')}') : ''", oninput: "this.setCustomValidity('')", name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: local_assigns[:require_phone_2fa] == true ? t(:phone) : "#{t('phone')} (#{t('optional')})", id: "detailed_phone_#{item['uuid']}", required: local_assigns[:require_phone_2fa] == true %>
-                      </linked-input>
-                    </submitters-autocomplete>
+                    <custom-validation data-invalid-message="<%= t('use_international_format_1xxx_') %>">
+                      <submitters-autocomplete data-field="phone">
+                        <linked-input data-target-id="<%= "detailed_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
+                          <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: local_assigns[:require_phone_2fa] == true ? t(:phone) : "#{t('phone')} (#{t('optional')})", id: "detailed_phone_#{item['uuid']}", required: local_assigns[:require_phone_2fa] == true %>
+                        </linked-input>
+                      </submitters-autocomplete>
+                    </custom-validation>
                   </div>
                 <% end %>
                 <% if prefillable_fields.present? %>
@@ -48,11 +50,13 @@
                   </submitters-autocomplete>
                   <% if local_assigns[:require_phone_2fa] == true || prefillable_fields.any? { |f| f['type'] == 'phone' } %>
                     <% has_phone_field = true %>
-                    <submitters-autocomplete data-field="phone">
-                      <linked-input data-target-id="<%= "detailed_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                        <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', oninvalid: "this.value ? this.setCustomValidity('#{t('use_international_format_1xxx_')}') : ''", oninput: "this.setCustomValidity('')", name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: t(:phone), id: "detailed_phone_#{item['uuid']}", required: true %>
-                      </linked-input>
-                    </submitters-autocomplete>
+                    <custom-validation data-invalid-message="<%= t('use_international_format_1xxx_') %>">
+                      <submitters-autocomplete data-field="phone">
+                        <linked-input data-target-id="<%= "detailed_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
+                          <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: t(:phone), id: "detailed_phone_#{item['uuid']}", required: true %>
+                        </linked-input>
+                      </submitters-autocomplete>
+                    </custom-validation>
                   <% end %>
                   <% prefillable_fields.each do |field| %>
                     <% if field['type'] == 'checkbox' %>

app/views/submissions/_phone_form.html.erb

@@ -19,11 +19,13 @@
                     </label>
                   <% end %>
                   <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
-                  <submitters-autocomplete data-field="phone">
-                    <linked-input data-target-id="<%= "phone_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                      <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', oninvalid: "this.value ? this.setCustomValidity('#{t('use_international_format_1xxx_')}') : ''", oninput: "this.setCustomValidity('')", name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'base-input !h-10 w-full', placeholder: t('phone'), required: index.zero? || template.preferences['require_all_submitters'], id: "phone_phone_#{item['uuid']}" %>
-                    </linked-input>
-                  </submitters-autocomplete>
+                  <custom-validation data-invalid-message="<%= t('use_international_format_1xxx_') %>">
+                    <submitters-autocomplete data-field="phone">
+                      <linked-input data-target-id="<%= "phone_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
+                        <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'base-input !h-10 w-full', placeholder: t('phone'), required: index.zero? || template.preferences['require_all_submitters'], id: "phone_phone_#{item['uuid']}" %>
+                      </linked-input>
+                    </submitters-autocomplete>
+                  </custom-validation>
                   <% if submitters.size > 1 %>
                     <submitters-autocomplete data-field="name">
                       <linked-input data-target-id="<%= "phone_name_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">

app/views/submissions/_send_email.html.erb

@@ -11,10 +11,12 @@
       <% if can_send_emails %>
         <%= render 'submissions/email_stats' %>
         <%= content_for(:edit_button) || capture do %>
-          <label>
-            <%= f.check_box :is_custom_message, onchange: "[this.form.querySelector('#message_field').classList.toggle('hidden', !event.currentTarget.checked)]", checked: false, class: 'hidden peer' %>
-            <span class="link peer-checked:hidden"><%= t('edit_message') %></span>
-          </label>
+          <toggle-visible data-element-ids="<%= %w[message_field].to_json %>" class="flex">
+            <label>
+              <%= f.check_box :is_custom_message, checked: false, class: 'hidden peer', data: { action: 'change:toggle-visible#trigger', type: 'checkbox' } %>
+              <span class="link peer-checked:hidden"><%= t('edit_message') %></span>
+            </label>
+          </toggle-visible>
         <% end %>
       <% end %>
     </div>

app/views/submissions/show.html.erb

@@ -80,12 +80,12 @@
       <% schema.each do |item| %>
         <% document = @submission.schema_documents.find { |a| item['attachment_uuid'] == a.uuid } %>
         <% if document.preview_images.first %>
-          <a href="#<%= "page-#{document.uuid}-0" %>" onclick="[event.preventDefault(), window[event.target.closest('a').href.split('#')[1]].scrollIntoView({ behavior: 'smooth', block: 'start' })]" class="block cursor-pointer">
+          <scroll-to data-selector-id="page-<%= document.uuid %>-0" class="block cursor-pointer">
             <img src="<%= Docuseal::URL_CACHE.fetch([document.id, document.uuid, 0].join(':'), expires_in: 10.minutes) { document.preview_images.first.url } %>" width="<%= document.preview_images.first.metadata['width'] %>" height="<%= document.preview_images.first.metadata['height'] %>" class="rounded border" loading="lazy">
             <div class="pb-2 pt-1.5 text-center" dir="auto">
               <%= item['name'].presence || document.filename.base %>
             </div>
-          </a>
+          </scroll-to>
         <% end %>
       <% end %>
     </div>
@@ -288,16 +288,18 @@
       <% end %>
     </div>
   </div>
-  <label class="md:hidden btn btn-sm btn-neutral text-white text-base z-10 fixed bottom-2 right-2 h-16 shadow-lg">
-    <input type="checkbox" class="peer hidden" onclick="[document_view.classList.toggle('hidden'), parties_view.classList.toggle('hidden')]">
-    <span class="peer-checked:hidden flex items-center space-x-2">
-      <%= svg_icon('users', class: 'w-8 h-8') %>
-      <span><%= t('signers') %></span>
-    </span>
-    <span class="hidden peer-checked:flex items-center">
-      <%= svg_icon('chevron_left', class: 'w-8 h-8') %>
-      <span><%= t('back') %></span>
-    </span>
-  </label>
+  <toggle-visible data-element-ids="<%= %w[document_view parties_view].to_json %>">
+    <label class="md:hidden btn btn-sm btn-neutral text-white text-base z-10 fixed bottom-2 right-2 h-16 shadow-lg">
+      <input type="checkbox" class="peer hidden" data-action="click:toggle-visible#trigger">
+      <span class="peer-checked:hidden flex items-center space-x-2">
+        <%= svg_icon('users', class: 'w-8 h-8') %>
+        <span><%= t('signers') %></span>
+      </span>
+      <span class="hidden peer-checked:flex items-center">
+        <%= svg_icon('chevron_left', class: 'w-8 h-8') %>
+        <span><%= t('back') %></span>
+      </span>
+    </label>
+  </toggle-visible>
 </div>
 <%= render 'scripts/autosize_field' %>