add csp

app/controllers/application_controller.rb

@@ -13,6 +13,8 @@ class ApplicationController < ActionController::Base
   before_action :maybe_redirect_to_setup, unless: :signed_in?
   before_action :authenticate_user!, unless: :devise_controller?
 
+  before_action :set_csp, if: -> { request.get? && !turbo_frame_request? && !request.headers['HTTP_VND.PREFETCH'] }
+
   helper_method :button_title,
                 :current_account,
                 :form_link_host,
@@ -123,4 +125,24 @@ class ApplicationController < ActionController::Base
 
     redirect_to request.url.gsub('.co/', '.com/'), allow_other_host: true, status: :moved_permanently
   end
+
+  def set_csp
+    request.content_security_policy_report_only = Rails.env.production?
+
+    request.content_security_policy = current_content_security_policy.tap do |policy|
+      policy.default_src :self
+      policy.script_src :self
+      policy.style_src :self, :unsafe_inline
+      policy.img_src :self, :https, :http, :blob, :data
+      policy.font_src :self, :https, :http, :blob, :data
+      policy.manifest_src :self
+      policy.media_src :self
+      policy.frame_src :self
+      policy.worker_src :self, :blob
+      policy.connect_src :self
+      policy.report_uri '/csp'
+
+      policy.directives['connect-src'] << 'ws:' if Rails.env.development?
+    end
+  end
 end

app/controllers/csp_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class CspController < ActionController::API
+  FILTER_REPORT_REGEXP = /extension|sandbox/i
+
+  SANITIZE_REGEXP = %r{(/[sdep]/)(\w{5})[^/"]+}
+
+  def create
+    data = request.raw_post.gsub(SANITIZE_REGEXP, '\1\2')
+
+    Rails.logger.warn(data) if Rails.env.development?
+
+    Rollbar.warning('CSP', data:) if defined?(Rollbar) && !data.match?(FILTER_REPORT_REGEXP)
+  end
+end

app/javascript/application.js

@@ -34,11 +34,19 @@ import MaskedInput from './elements/masked_input'
 import SetDateButton from './elements/set_date_button'
 import IndeterminateCheckbox from './elements/indeterminate_checkbox'
 import AppTour from './elements/app_tour'
+import AppTourStart from './elements/app_tour_start'
 import DashboardDropzone from './elements/dashboard_dropzone'
 import RequiredCheckboxGroup from './elements/required_checkbox_group'
 import PageContainer from './elements/page_container'
 import EmailEditor from './elements/email_editor'
 import MountOnClick from './elements/mount_on_click'
+import RemoveOnEvent from './elements/remove_on_event'
+import ScrollTo from './elements/scroll_to'
+import SetValue from './elements/set_value'
+import ReviewForm from './elements/review_form'
+import ShowOnValue from './elements/show_on_value'
+import CustomValidation from './elements/custom_validation'
+import ToggleClasses from './elements/toggle_classes'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -107,12 +115,20 @@ safeRegisterElement('masked-input', MaskedInput)
 safeRegisterElement('set-date-button', SetDateButton)
 safeRegisterElement('indeterminate-checkbox', IndeterminateCheckbox)
 safeRegisterElement('app-tour', AppTour)
+safeRegisterElement('app-tour-start', AppTourStart)
 safeRegisterElement('dashboard-dropzone', DashboardDropzone)
 safeRegisterElement('check-on-click', CheckOnClick)
 safeRegisterElement('required-checkbox-group', RequiredCheckboxGroup)
 safeRegisterElement('page-container', PageContainer)
 safeRegisterElement('email-editor', EmailEditor)
 safeRegisterElement('mount-on-click', MountOnClick)
+safeRegisterElement('remove-on-event', RemoveOnEvent)
+safeRegisterElement('scroll-to', ScrollTo)
+safeRegisterElement('set-value', SetValue)
+safeRegisterElement('review-form', ReviewForm)
+safeRegisterElement('show-on-value', ShowOnValue)
+safeRegisterElement('custom-validation', CustomValidation)
+safeRegisterElement('toggle-classes', ToggleClasses)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/application.scss

@@ -19,7 +19,7 @@ button .disabled {
   display: none;
 }
 
-button[disabled] .disabled {
+button[disabled] .disabled, button.btn-disabled .disabled {
   display: initial;
 }
 
@@ -27,7 +27,7 @@ button .enabled {
   display: initial;
 }
 
-button[disabled] .enabled {
+button[disabled] .enabled, button.btn-disabled .enabled {
   display: none;
 }
 

app/javascript/elements/app_tour_start.js

@@ -0,0 +1,7 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.querySelector('form').addEventListener('submit', () => {
+      window.app_tour.start()
+    })
+  }
+}

app/javascript/elements/custom_validation.js

@@ -0,0 +1,14 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.querySelector('input')
+    const invalidMessage = this.dataset.invalidMessage || ''
+
+    input.addEventListener('invalid', () => {
+      input.setCustomValidity(input.value ? invalidMessage : '')
+    })
+
+    input.addEventListener('input', () => {
+      input.setCustomValidity('')
+    })
+  }
+}

app/javascript/elements/remove_on_event.js

@@ -0,0 +1,15 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const eventType = this.dataset.on || 'click'
+    const selector = document.getElementById(this.dataset.selectorId) || this
+    const eventElement = eventType === 'submit' ? this.querySelector('form') : this
+
+    eventElement.addEventListener(eventType, (event) => {
+      if (eventType === 'click') {
+        event.preventDefault()
+      }
+
+      selector.remove()
+    })
+  }
+}

app/javascript/elements/review_form.js

@@ -0,0 +1,19 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.querySelectorAll('input[type="radio"]').forEach(radio => {
+      radio.addEventListener('change', (event) => {
+        const rating = parseInt(event.target.value)
+
+        if (rating === 10) {
+          window.review_comment.value = ''
+          window.review_comment.classList.add('hidden')
+          window.review_submit.classList.add('hidden')
+          event.target.form.submit()
+        } else {
+          window.review_comment.classList.remove('hidden')
+          window.review_submit.classList.remove('hidden')
+        }
+      })
+    })
+  }
+}

app/javascript/elements/scroll_to.js

@@ -0,0 +1,10 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.selector = document.getElementById(this.dataset.selectorId)
+
+    this.addEventListener('click', () => {
+      this.selector.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      history.replaceState(null, null, `#${this.dataset.selectorId}`)
+    })
+  }
+}

app/javascript/elements/search_input.js

@@ -13,6 +13,16 @@ export default class extends HTMLElement {
         this.input.classList.remove('w-60')
       }
     })
+
+    this.button.addEventListener('click', (event) => {
+      event.preventDefault()
+
+      if (this.input.value || document.activeElement === this.input) {
+        return
+      }
+
+      this.input.focus()
+    })
   }
 
   get input () {
@@ -22,4 +32,8 @@ export default class extends HTMLElement {
   get title () {
     return document.querySelector(this.dataset.title)
   }
+
+  get button () {
+    return this.querySelector('button')
+  }
 }

app/javascript/elements/set_value.js

@@ -0,0 +1,11 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const input = this.dataset.inputId ? document.getElementById(this.dataset.inputId) : this.querySelector('input')
+
+    this.firstElementChild.addEventListener(this.dataset.on || 'click', () => {
+      if (this.dataset.emptyOnly !== 'true' || !input.value) {
+        input.value = this.dataset.value
+      }
+    })
+  }
+}

app/javascript/elements/show_on_value.js

@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('change', (event) => {
+      const targetValue = this.dataset.value
+      const selectorId = this.dataset.selectorId
+      const targetElement = document.getElementById(selectorId)
+
+      if (event.target.value === targetValue) {
+        targetElement.classList.remove('hidden')
+      } else {
+        targetElement.classList.add('hidden')
+        targetElement.value = ''
+        event.target.form.requestSubmit()
+      }
+    })
+  }
+}

app/javascript/elements/submit_form.js

@@ -1,15 +1,27 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    const form = this.querySelector('form') || (this.querySelector('input, button, select') || this.lastElementChild).form
+
     if (this.dataset.interval) {
       this.interval = setInterval(() => {
-        this.querySelector('form').requestSubmit()
+        form.requestSubmit()
       }, parseInt(this.dataset.interval))
     } else if (this.dataset.on) {
-      this.lastElementChild.addEventListener(this.dataset.on, () => {
-        this.lastElementChild.form.requestSubmit()
+      this.lastElementChild.addEventListener(this.dataset.on, (event) => {
+        if (this.dataset.disable === 'true') {
+          form.querySelector('[type="submit"]')?.setAttribute('disabled', true)
+        }
+
+        if (this.dataset.submitIfValue === 'true') {
+          if (event.target.value) {
+            form.requestSubmit()
+          }
+        } else {
+          form.requestSubmit()
+        }
       })
     } else {
-      this.querySelector('form').requestSubmit()
+      form.requestSubmit()
     }
   }
 

app/javascript/elements/toggle_classes.js

@@ -0,0 +1,11 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    const button = this.querySelector('a, button')
+
+    button.addEventListener('click', () => {
+      this.dataset.classes.split(' ').forEach((cls) => {
+        button.classList.toggle(cls)
+      })
+    })
+  }
+}

app/javascript/elements/toggle_visible.js

@@ -4,9 +4,15 @@ export default actionable(class extends HTMLElement {
   trigger (event) {
     const elementIds = JSON.parse(this.dataset.elementIds)
 
-    elementIds.forEach((elementId) => {
-      document.getElementById(elementId).classList.toggle('hidden', (event.target.dataset.toggleId || event.target.value) !== elementId)
-    })
+    if (event.target.type === 'checkbox') {
+      elementIds.forEach((elementId) => {
+        document.getElementById(elementId)?.classList.toggle('hidden')
+      })
+    } else {
+      elementIds.forEach((elementId) => {
+        document.getElementById(elementId).classList.toggle('hidden', (event.target.dataset.toggleId || event.target.value) !== elementId)
+      })
+    }
 
     if (this.dataset.focusId) {
       document.getElementById(this.dataset.focusId)?.focus()

app/javascript/form.js

@@ -6,6 +6,7 @@ import ToggleSubmit from './elements/toggle_submit'
 import FetchForm from './elements/fetch_form'
 import ScrollButtons from './elements/scroll_buttons'
 import PageContainer from './elements/page_container'
+import SubmitForm from './elements/submit_form'
 
 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
 
@@ -14,6 +15,7 @@ safeRegisterElement('toggle-submit', ToggleSubmit)
 safeRegisterElement('fetch-form', FetchForm)
 safeRegisterElement('scroll-buttons', ScrollButtons)
 safeRegisterElement('page-container', PageContainer)
+safeRegisterElement('submit-form', SubmitForm)
 safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')

app/javascript/form.scss

@@ -19,7 +19,7 @@ button .disabled {
   display: none;
 }
 
-button[disabled] .disabled {
+button[disabled] .disabled, button.btn-disabled .disabled {
   display: initial;
 }
 
@@ -27,7 +27,7 @@ button .enabled {
   display: initial;
 }
 
-button[disabled] .enabled {
+button[disabled] .enabled, button.btn-disabled .enabled {
   display: none;
 }
 

app/javascript/submission_form/form.vue

@@ -349,10 +349,10 @@
                         :id="field.uuid"
                         type="checkbox"
                         class="base-checkbox !h-7 !w-7"
-                        :oninvalid="`this.setCustomValidity('${t('please_check_the_box_to_continue')}')`"
-                        :onchange="`this.setCustomValidity(validity.valueMissing ? '${t('please_check_the_box_to_continue')}' : '');`"
                         :required="field.required"
                         :checked="!!values[field.uuid]"
+                        @invalid="$event.target.setCustomValidity(t('please_check_the_box_to_continue'))"
+                        @change="$event.target.setCustomValidity($event.target.validity.valueMissing ? t('please_check_the_box_to_continue') : '')"
                         @click="[scrollIntoField(field), values[field.uuid] = !values[field.uuid]]"
                       >
                       <span

app/views/devise/shared/_links.html.erb

@@ -14,6 +14,8 @@
     <% if params[:redir].present? %>
       <%= hidden_field_tag :redir, params[:redir] %>
     <% end %>
-    <%= select_tag :lang, options_for_select((I18n.available_locales - %i[en pt-PT de-DE fr-FR it-IT es-ES]).map { |code| [t("language_#{code}"), code] }, I18n.locale), onchange: 'this.form.requestSubmit();', class: 'select select-sm border-base-content/30 text-base' %>
+    <submit-form data-on="change">
+      <%= select_tag :lang, options_for_select((I18n.available_locales - %i[en pt-PT de-DE fr-FR it-IT es-ES]).map { |code| [t("language_#{code}"), code] }, I18n.locale), class: 'select select-sm border-base-content/30 text-base' %>
+    </submit-form>
   <% end %>
 </div>

app/views/esign_settings/show.html.erb

@@ -148,7 +148,9 @@
               <span>
                 <%= t('apply_multiple_pdf_digital_signatures_in_the_document_per_each_signer') %>
               </span>
-              <%= f.check_box :value, { class: 'toggle', checked: account_config.value == 'multiple', onchange: 'this.form.requestSubmit()' }, 'multiple', 'single' %>
+              <submit-form data-on="change" class="flex">
+                <%= f.check_box :value, { class: 'toggle', checked: account_config.value == 'multiple' }, 'multiple', 'single' %>
+              </submit-form>
             </div>
           <% end %>
         <% end %>
@@ -160,7 +162,9 @@
               <span>
                 <%= t('remove_pdf_form_fillable_fields_from_the_signed_pdf_flatten_form') %>
               </span>
-              <%= f.check_box :value, { class: 'toggle', checked: account_config.value != false, onchange: 'this.form.requestSubmit()' } %>
+              <submit-form data-on="change" class="flex">
+                <%= f.check_box :value, { class: 'toggle', checked: account_config.value != false } %>
+              </submit-form>
             </div>
           <% end %>
         <% end %>
@@ -172,9 +176,9 @@
               <span>
                 <%= t('document_download_filename_format') %>
               </span>
-              <div class="mt-3">
-                <%= f.select :value, [["#{I18n.t('document_name')}.pdf", '{document.name}'], ["#{I18n.t('document_name')} - #{I18n.t(:signed)}.pdf", '{document.name} - {submission.status}'], ["#{I18n.t('document_name')} - name@domain.com.pdf", '{document.name} - {submission.submitters}'], ["#{I18n.t('document_name')} - name@domain.com - #{I18n.l(Time.current.beginning_of_year.in_time_zone(current_account.timezone), format: :short)}.pdf", '{document.name} - {submission.submitters} - {submission.completed_at}']], {}, class: 'base-select', onchange: 'this.form.requestSubmit()' %>
-              </div>
+              <submit-form data-on="change" class="block mt-3">
+                <%= f.select :value, [["#{I18n.t('document_name')}.pdf", '{document.name}'], ["#{I18n.t('document_name')} - #{I18n.t(:signed)}.pdf", '{document.name} - {submission.status}'], ["#{I18n.t('document_name')} - name@domain.com.pdf", '{document.name} - {submission.submitters}'], ["#{I18n.t('document_name')} - name@domain.com - #{I18n.l(Time.current.beginning_of_year.in_time_zone(current_account.timezone), format: :short)}.pdf", '{document.name} - {submission.submitters} - {submission.completed_at}']], {}, class: 'base-select' %>
+              </submit-form>
             </div>
           <% end %>
         <% end %>

app/views/notifications_settings/index.html.erb

@@ -13,7 +13,9 @@
             <span>
               <%= t('receive_notification_emails_on_completed_submission') %>
             </span>
-            <%= f.check_box :value, class: 'toggle', checked: user_config.value != false, onchange: 'this.form.requestSubmit()' %>
+            <submit-form data-on="change" class="flex">
+              <%= f.check_box :value, class: 'toggle', checked: user_config.value != false %>
+            </submit-form>
           </div>
         <% end %>
       <% end %>

app/views/personalization_settings/_form_toggle_options.html.erb

@@ -7,7 +7,9 @@
         <span>
           <%= t('show_confetti_on_successful_completion') %>
         </span>
-        <%= f.check_box :value, { class: 'toggle', checked: account_config.value != false, onchange: 'this.form.requestSubmit()' }, '1', '0' %>
+        <submit-form data-on="change" class="flex">
+          <%= f.check_box :value, { class: 'toggle', checked: account_config.value != false }, '1', '0' %>
+        </submit-form>
       </div>
     <% end %>
   </div>

app/views/scripts/_autosize_field.html.erb

@@ -1,4 +1,4 @@
-<script>
+<script nonce="<%= content_security_policy_nonce %>">
   if (!window.customElements.get('autosize-field')) {
     window.customElements.define('autosize-field', class extends HTMLElement {
       connectedCallback() {

app/views/scripts/_server_selector.html.erb

@@ -1,4 +1,4 @@
-<script>
+<script nonce="<%= content_security_policy_nonce %>">
   if (!window.customElements.get('server-selector')) {
     customElements.define('server-selector', class extends HTMLElement {
       connectedCallback() {

app/views/shared/_flash.html.erb

@@ -11,7 +11,7 @@
           <span><%= flash[:notice] || flash[:alert] %></span>
         </div>
       </div>
-      <a href="#" onclick="[event.preventDefault(), window.flash.remove()]" class="mr-1">&times;</a>
+      <remove-on-event data-event-type="click" data-selector-id="flash" class="mr-1 cursor-pointer">&times;</remove-on-event>
     </div>
   </div>
 </div>

app/views/shared/_navbar.html.erb

@@ -61,7 +61,9 @@
           <% if (can?(:manage, EncryptedConfig) && current_user == true_user) || (current_user != true_user && current_account.testing?) %>
             <%= form_for '', url: testing_account_path, method: current_account.testing? ? :delete : :get, html: { class: 'w-full py-1' } do |f| %>
               <label class="flex items-center pl-6 pr-4 py-2 border-y border-base-300 -ml-2 -mr-2" for="testing_toggle">
-                <%= f.check_box :testing_toggle, class: 'toggle', checked: current_account.testing?, onchange: 'this.form.requestSubmit()', style: 'height: 0.885rem; width: 1.35rem; --handleoffset: 0.395rem; margin-left: -2px; margin-right: 8px' %>
+                <submit-form data-on="change" class="flex">
+                  <%= f.check_box :testing_toggle, class: 'toggle', checked: current_account.testing?, style: 'height: 0.885rem; width: 1.35rem; --handleoffset: 0.395rem; margin-left: -2px; margin-right: 8px' %>
+                </submit-form>
                 <span class="whitespace-nowrap">
                   <%= t('test_mode') %>
                 </span>

app/views/shared/_search_input.html.erb

@@ -14,15 +14,15 @@
       </a>
     </div>
   <% end %>
-  <search-input data-title="<%= local_assigns[:title_selector] || 'h1' %>">
+  <search-input data-title="<%= local_assigns[:title_selector] || 'h1' %>" class="flex items-center">
     <input id="search" name="q" value="<%= params[:q] %>" class="input text-lg pr-10 -mr-12 w-0 md:w-60 <%= 'pl-8 input-outlined w-60' if params[:q].present? %>" placeholder="<%= local_assigns[:placeholder] %>">
+    <button type="submit" title="<%= t('search') %>" class="btn btn-ghost btn-circle">
+      <span class="enabled">
+        <%= svg_icon('search', class: 'w-6 h-6 stroke-2') %>
+      </span>
+      <span class="disabled">
+        <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
+      </span>
+    </button>
   </search-input>
-  <button type="submit" title="<%= t('search') %>" class="btn btn-ghost btn-circle" onclick="window.search.value || document.activeElement === window.search ? null : [event.preventDefault(), window.search.focus()]">
-    <span class="enabled">
-      <%= svg_icon('search', class: 'w-6 h-6 stroke-2') %>
-    </span>
-    <span class="disabled">
-      <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-    </span>
-  </button>
 </form>

app/views/shared/_settings_nav.html.erb

@@ -98,7 +98,9 @@
                 <span class="mr-2 w-full">
                   <%= t('test_mode') %>
                 </span>
-                <%= f.check_box :testing_toggle, class: 'toggle toggle-sm', checked: current_account.testing?, onchange: 'this.form.requestSubmit()' %>
+                <submit-form data-on="change" class="flex">
+                  <%= f.check_box :testing_toggle, class: 'toggle toggle-sm', checked: current_account.testing? %>
+                </submit-form>
               </label>
             </li>
           <% end %>

app/views/shared/_test_mode_toggle.html.erb

@@ -4,7 +4,9 @@
       <span class="mr-2 text-lg">
         <%= t('test_mode') %>
       </span>
-      <%= f.check_box :testing_toggle, class: 'toggle', checked: current_account.testing?, onchange: 'this.form.requestSubmit()' %>
+      <submit-form data-on="change" class="flex">
+        <%= f.check_box :testing_toggle, class: 'toggle', checked: current_account.testing? %>
+      </submit-form>
     </label>
   <% end %>
 <% end %>

app/views/start_form/show.html.erb

@@ -52,7 +52,9 @@
         <% if link_form_fields.include?('phone') %>
           <div dir="auto" class="form-control !mt-0">
             <%= f.label :phone, t('phone'), class: 'label' %>
-            <%= f.telephone_field :phone, value: params[:phone] || @submitter.phone, pattern: '^\+[0-9\s\-]+$', oninvalid: "this.value ? this.setCustomValidity('#{t('use_international_format_1xxx_')}') : ''", oninput: "this.setCustomValidity('')", required: true, class: 'base-input', placeholder: t(multiple_fields ? 'provide_your_phone_in_international_format' : 'provide_your_phone_in_international_format_to_start') %>
+            <custom-validation data-invalid-message="<%= t('use_international_format_1xxx_') %>">
+              <%= f.telephone_field :phone, value: params[:phone] || @submitter.phone, pattern: '^\+[0-9\s\-]+$', required: true, class: 'base-input w-full', placeholder: t(multiple_fields ? 'provide_your_phone_in_international_format' : 'provide_your_phone_in_international_format_to_start') %>
+            </custom-validation>
           </div>
         <% end %>
         <toggle-submit dir="auto" class="form-control">

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

app/views/submitters/edit.html.erb

@@ -10,9 +10,11 @@
             <submitters-autocomplete data-field="email">
               <%= email_field_tag 'submitter[email]', @submitter.email, autocomplete: 'off', class: 'base-input !h-10 mt-1.5 w-full', placeholder: "#{t('email')} (#{t('optional')})" %>
             </submitters-autocomplete>
-            <submitters-autocomplete data-field="phone">
-              <%= telephone_field_tag 'submitter[phone]', @submitter.phone, autocomplete: 'off', pattern: '^\+[0-9\s\-]+$', class: 'base-input !h-10 mt-1.5 w-full', placeholder: "#{t('phone')} (#{t('optional')})", oninvalid: "this.value ? this.setCustomValidity('#{t('use_international_format_1xxx_')}') : ''", oninput: "this.setCustomValidity('')" %>
-            </submitters-autocomplete>
+            <custom-validation data-invalid-message="<%= t('use_international_format_1xxx_') %>">
+              <submitters-autocomplete data-field="phone">
+                <%= telephone_field_tag 'submitter[phone]', @submitter.phone, autocomplete: 'off', pattern: '^\+[0-9\s\-]+$', class: 'base-input !h-10 mt-1.5 w-full', placeholder: "#{t('phone')} (#{t('optional')})" %>
+              </submitters-autocomplete>
+            </custom-validation>
           </div>
         </submitter-item>
       </div>

app/views/templates/_upload_button.html.erb

@@ -1,19 +1,22 @@
 <%= form_for '', url: templates_upload_path, id: form_id = SecureRandom.uuid, method: :post, class: 'inline', html: { enctype: 'multipart/form-data' } do %>
-  <button id="templates_upload_button" type="submit" class="btn btn-ghost text-base" onclick="[event.preventDefault(), window.upload_template.click()]">
-    <span class="enabled">
+  <label for="upload_template" id="templates_upload_button" class="btn btn-ghost text-base">
+    <button type="submit" class="hidden peer"></button>
+    <span class="peer-disabled:hidden">
       <span class="flex items-center justify-center space-x-2">
         <%= svg_icon('upload', class: 'w-6 h-6 stroke-2') %>
         <span class="hidden md:block"><%= t('upload') %></span>
       </span>
     </span>
-    <span class="disabled">
+    <span class="peer-enabled:hidden">
       <span class="flex items-center justify-center space-x-2">
         <%= local_assigns[:icon_disabled] || svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-        <span class="hidden md:block"><%= t('uploading') %>...</span>
+        <span class="hidden md:block"><%= t('upload') %>...</span>
       </span>
     </span>
-  </button>
+  </label>
   <input type="hidden" name="form_id" value="<%= form_id %>">
-  <input id="upload_template" name="files[]" class="hidden" onchange="this.form.requestSubmit()" type="file" accept="image/*, application/pdf, application/zip<%= ", #{Templates::CreateAttachments::DOCUMENT_EXTENSIONS.join(', ')}" if Docuseal.advanced_formats? %>" multiple>
+  <submit-form data-on="change" data-disable="true">
+    <input id="upload_template" name="files[]" class="hidden" type="file" accept="image/*, application/pdf, application/zip<%= ", #{Templates::CreateAttachments::DOCUMENT_EXTENSIONS.join(', ')}" if Docuseal.advanced_formats? %>" multiple>
+  </submit-form>
   <input hidden name="folder_name" value="<%= local_assigns[:folder_name] %>">
 <% end %>

app/views/templates/new.html.erb

@@ -12,14 +12,18 @@
       <%= f.text_field :name, required: true, placeholder: t('document_name'), class: 'base-input', dir: 'auto' %>
     </div>
     <div class="mt-3 mb-4 flex items-center justify-between">
-      <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">
+      <label for="folder_name" class="cursor-pointer">
         <%= svg_icon('folder', class: 'w-6 h-6') %>
-      </a>
+      </label>
       <folder-autocomplete class="flex justify-between w-full">
-        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.full_name || TemplateFolder::DEFAULT_NAME %>" onblur="window.folder_name.value = window.folder_name.value || 'Default'" autocomplete="off">
-        <a href="#" onclick="[event.preventDefault(), window.folder_name.value = '', window.folder_name.focus()]" class="shrink-0 link peer-focus:hidden mr-1.5">
-          <%= t('change_folder') %>
-        </a>
+        <set-value data-on="blur" data-value="<%= TemplateFolder::DEFAULT_NAME %>" data-empty-only="true" class="peer w-full whitespace-nowrap">
+          <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.full_name || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
+        </set-value>
+        <set-value data-on="click" data-value="" data-input-id="folder_name" class="peer-focus-within:hidden whitespace-nowrap">
+          <label for="folder_name" data-clear-on-focus="true" class="shrink-0 link mr-1.5 cursor-pointer">
+            <%= t('change_folder') %>
+          </label>
+        </set-value>
       </folder-autocomplete>
     </div>
     <div class="form-control">

app/views/templates_code_modal/show.html.erb

@@ -25,7 +25,9 @@
         <span>
           <%= t('share_template_with_test_mode') %>
         </span>
-        <%= f.check_box :value, class: 'toggle', checked: @template.template_sharings.exists?(account_id: current_account.testing_accounts), onchange: 'this.form.requestSubmit()' %>
+        <submit-form data-on="change">
+          <%= f.check_box :value, class: 'toggle', checked: @template.template_sharings.exists?(account_id: current_account.testing_accounts) %>
+        </submit-form>
       </div>
     <% end %>
     <div class="mb-4">

app/views/templates_dashboard/index.html.erb

@@ -63,7 +63,7 @@
           <div class="hidden md:block">
             <app-tour id="app_tour" data-show-tour="<%= params[:tour] == 'true' || user_config.value %>" data-type="dashboard" data-next-page-path="<%= @templates.first && can?(:edit, @templates.first) ? edit_template_path(@templates.first, params.permit(:tour)) : settings_account_path %>" data-i18n="<%= t('app_tour').to_json %>"></app-tour>
             <% if user_config.new_record? && !params.key?(:tour) %>
-              <div class="h-36 rounded-2xl pt-3 px-7 w-full border border-dashed border-base-300">
+              <div id="app_tour_manager" class="h-36 rounded-2xl pt-3 px-7 w-full border border-dashed border-base-300">
                 <div class="text-xl text-center font-semibold text-base-content">
                   <%= t('welcome_to_docuseal') %>
                 </div>
@@ -71,8 +71,12 @@
                   <%= t('start_a_quick_tour_to_learn_how_to_create_an_send_your_first_document') %>
                 </div>
                 <div class="flex gap-2 mt-3 w-full">
-                  <%= button_to button_title(title: t('skip'), icon_disabled: svg_icon('loader', class: 'w-4 h-4 animate-spin')), user_configs_path, params: { user_config: { key: UserConfig::SHOW_APP_TOUR, value: false } }, class: 'btn btn-sm btn-outline w-full', form_class: 'flex-1', method: :post, form: { onsubmit: 'window.app_tour.parentNode.remove()' } %>
-                  <%= button_to t('start_tour'), user_configs_path, params: { user_config: { key: UserConfig::SHOW_APP_TOUR, value: true } }, class: 'btn btn-sm btn-warning  w-full', form_class: 'flex-1', method: :post, form: { onsubmit: 'window.app_tour.start()' } %>
+                  <remove-on-event data-on="submit" data-selector-id="app_tour_manager" class="block w-full">
+                    <%= button_to button_title(title: t('skip'), icon_disabled: svg_icon('loader', class: 'w-4 h-4 animate-spin')), user_configs_path, params: { user_config: { key: UserConfig::SHOW_APP_TOUR, value: false } }, class: 'btn btn-sm btn-outline w-full', form_class: 'flex-1', method: :post %>
+                  </remove-on-event>
+                  <app-tour-start class="block w-full">
+                    <%= button_to t('start_tour'), user_configs_path, params: { user_config: { key: UserConfig::SHOW_APP_TOUR, value: true } }, class: 'btn btn-sm btn-warning w-full', form_class: 'flex-1', method: :post %>
+                  </app-tour-start>
                 </div>
               </div>
             <% end %>

app/views/templates_form_preview/show.html.erb

@@ -6,13 +6,15 @@
     <div class="flex items-center" style="margin-left: 20px; flex-shrink: 0">
       <% if @template.submitters.size > 1 %>
         <form action="<%= template_form_path(@template) %>" method="get" class="mr-3">
-          <select onchange="this.form.submit()" name="uuid" class="select base-input text-center font-normal" style="width: 180px; flex-shrink: 0;">
-            <% @template.submitters.each do |submitter| %>
-              <%= tag.option(value: submitter['uuid'], selected: submitter['uuid'] == @submitter.uuid) do %>
-                <%= submitter['name'] %>
+          <submit-form data-on="change">
+            <select name="uuid" class="select base-input text-center font-normal" style="width: 180px; flex-shrink: 0;">
+              <% @template.submitters.each do |submitter| %>
+                <%= tag.option(value: submitter['uuid'], selected: submitter['uuid'] == @submitter.uuid) do %>
+                  <%= submitter['name'] %>
+                <% end %>
               <% end %>
-            <% end %>
-          </select>
+            </select>
+          </submit-form>
         </form>
       <% end %>
       <a href="<%= edit_template_path(@template) %>" class="base-button" data-turbo="false" style="flex-shrink: 0; padding: 0px 24px;">

app/views/templates_preferences/_recipients.html.erb

@@ -73,7 +73,9 @@
           <%= t('enforce_recipients_order') %>
         </span>
         <%= f.fields_for :preferences, Struct.new(:submitters_order).new(template.preferences['submitters_order']) do |ff| %>
-          <%= ff.check_box :submitters_order, { class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'preserved', '' %>
+          <submit-form data-on="change" class="flex">
+            <%= ff.check_box :submitters_order, { class: 'toggle' }, 'preserved', '' %>
+          </submit-form>
         <% end %>
       </div>
     <% end %>
@@ -85,7 +87,9 @@
           <%= t('ensure_unique_recipients') %>
         </span>
         <%= f.fields_for :preferences, Struct.new(:validate_unique_submitters).new(template.preferences['validate_unique_submitters']) do |ff| %>
-          <%= ff.check_box :validate_unique_submitters, { class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'true', '' %>
+          <submit-form data-on="change" class="flex">
+            <%= ff.check_box :validate_unique_submitters, { class: 'toggle' }, 'true', '' %>
+          </submit-form>
         <% end %>
       </div>
     <% end %>

app/views/templates_preferences/show.html.erb

@@ -46,9 +46,13 @@
         <div class="form-control">
           <% duration_options = Templates::EXPIRATION_DURATIONS.keys.map { |duration| [t(duration), duration] } + [[t('specified_date'), 'specified_date']] %>
           <%= ff.label :default_expire_at_duration, t('default_expiration'), class: 'label pt-0' %>
-          <div class="flex items-center gap-2">
-            <%= ff.select :default_expire_at_duration, duration_options, { include_blank: t('none') }, required: false, class: 'base-select flex-1', dir: 'auto', autocomplete: 'off', onchange: "this.value == 'specified_date' ? window.template_preferences_default_expire_at.classList.remove('hidden') : [window.template_preferences_default_expire_at.classList.add('hidden'), window.template_preferences_default_expire_at.value = '', this.form.requestSubmit()]" %>
-            <%= ff.datetime_field :default_expire_at, required: false, class: ['base-input flex-1', ff.object.default_expire_at.blank? && 'hidden'].compact_blank.join(' '), dir: 'auto', autocomplete: 'off', onchange: 'this.value && this.form.requestSubmit()' %>
+          <div class="flex flex-col md:flex-row md:items-center gap-2">
+            <show-on-value data-value="specified_date" data-selector-id="template_preferences_default_expire_at" class="flex w-full">
+              <%= ff.select :default_expire_at_duration, duration_options, { include_blank: t('none') }, required: false, class: 'base-select flex-1', dir: 'auto', autocomplete: 'off' %>
+            </show-on-value>
+            <submit-form data-on="change" data-submit-if-value="true" class="flex">
+              <%= ff.datetime_field :default_expire_at, required: false, class: ['base-input flex-1', ff.object.default_expire_at.blank? && 'hidden'].compact_blank.join(' '), dir: 'auto', autocomplete: 'off' %>
+            </submit-form>
           </div>
         </div>
       <% end %>
@@ -168,7 +172,9 @@
                 <span>
                   <%= 'Send signature request email' %>
                 </span>
-                <%= ff.check_box :request_email_enabled, { checked: ff.object.request_email_enabled != false, class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'true', 'false' %>
+                <submit-form data-on="change" class="flex">
+                  <%= ff.check_box :request_email_enabled, { checked: ff.object.request_email_enabled != false, class: 'toggle' }, 'true', 'false' %>
+                </submit-form>
               </div>
             <% end %>
             <div class="form-control pt-2">
@@ -215,19 +221,25 @@
                 <span>
                   <%= t('attach_documents_to_the_email') %>
                 </span>
-                <%= ff.check_box :documents_copy_email_attach_documents, { checked: ff.object.documents_copy_email_attach_documents != false, class: 'toggle', onchange: 'this.form.requestSubmit()', disabled: configs['attach_documents'] == false }, 'true', 'false' %>
+                <submit-form data-on="change" class="flex">
+                  <%= ff.check_box :documents_copy_email_attach_documents, { checked: ff.object.documents_copy_email_attach_documents != false, class: 'toggle', disabled: configs['attach_documents'] == false }, 'true', 'false' %>
+                </submit-form>
               </div>
               <div class="flex items-center justify-between pt-2.5 px-1 mb-2">
                 <span>
                   <%= t('attach_audit_log_pdf_to_the_email') %>
                 </span>
-                <%= ff.check_box :documents_copy_email_attach_audit, { checked: ff.object.documents_copy_email_attach_audit != false, class: 'toggle', onchange: 'this.form.requestSubmit()', disabled: configs['attach_audit_log'] == false }, 'true', 'false' %>
+                <submit-form data-on="change" class="flex">
+                  <%= ff.check_box :documents_copy_email_attach_audit, { checked: ff.object.documents_copy_email_attach_audit != false, class: 'toggle', disabled: configs['attach_audit_log'] == false }, 'true', 'false' %>
+                </submit-form>
               </div>
               <div class="flex items-center justify-between py-2.5 px-1 mb-2">
                 <span>
                   <%= t('send_emails_automatically_on_completion') %>
                 </span>
-                <%= ff.check_box :documents_copy_email_enabled, { checked: ff.object.documents_copy_email_enabled != false && configs['enabled'] != false, class: 'toggle', onchange: 'this.form.requestSubmit()', disabled: configs['enabled'] == false }, 'true', 'false' %>
+                <submit-form data-on="change" class="flex">
+                  <%= ff.check_box :documents_copy_email_enabled, { checked: ff.object.documents_copy_email_enabled != false && configs['enabled'] != false, class: 'toggle', disabled: configs['enabled'] == false }, 'true', 'false' %>
+                </submit-form>
               </div>
             <% end %>
             <div class="form-control pt-2">
@@ -268,19 +280,25 @@
                 <span>
                   <%= t('attach_documents_to_the_email') %>
                 </span>
-                <%= ff.check_box :completed_notification_email_attach_documents, { checked: ff.object.completed_notification_email_attach_documents != false, class: 'toggle', onchange: 'this.form.requestSubmit()', disabled: configs['attach_documents'] == false }, 'true', 'false' %>
+                <submit-form data-on="change" class="flex">
+                  <%= ff.check_box :completed_notification_email_attach_documents, { checked: ff.object.completed_notification_email_attach_documents != false, class: 'toggle', disabled: configs['attach_documents'] == false }, 'true', 'false' %>
+                </submit-form>
               </div>
               <div class="flex items-center justify-between pt-2.5 px-1 mb-2">
                 <span>
                   <%= t('attach_audit_log_pdf_to_the_email') %>
                 </span>
-                <%= ff.check_box :completed_notification_email_attach_audit, { checked: ff.object.completed_notification_email_attach_audit != false, class: 'toggle', onchange: 'this.form.requestSubmit()', disabled: configs['attach_audit_log'] == false }, 'true', 'false' %>
+                <submit-form data-on="change" class="flex">
+                  <%= ff.check_box :completed_notification_email_attach_audit, { checked: ff.object.completed_notification_email_attach_audit != false, class: 'toggle', disabled: configs['attach_audit_log'] == false }, 'true', 'false' %>
+                </submit-form>
               </div>
               <div class="flex items-center justify-between py-2.5 px-1 mb-2">
                 <span>
                   <%= t('send_emails_automatically_on_completion') %>
                 </span>
-                <%= ff.check_box :completed_notification_email_enabled, { checked: ff.object.completed_notification_email_enabled != false, class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'true', 'false' %>
+                <submit-form data-on="change" class="flex">
+                  <%= ff.check_box :completed_notification_email_enabled, { checked: ff.object.completed_notification_email_enabled != false, class: 'toggle', disabled: configs['enabled'] == false }, 'true', 'false' %>
+                </submit-form>
               </div>
             <% end %>
             <div class="form-control pt-2">
@@ -325,7 +343,9 @@
             </div>
             <div class="flex items-center justify-between gap-1 pt-3">
               <span><%= t('enable_shared_link') %></span>
-              <%= f.check_box :shared_link, { class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'true', 'false' %>
+              <submit-form data-on="change" class="flex">
+                <%= f.check_box :shared_link, { class: 'toggle' }, 'true', 'false' %>
+              </submit-form>
             </div>
           <% end %>
         </div>
@@ -339,7 +359,9 @@
             <span>
               <%= t('share_template_with_test_mode') %>
             </span>
-            <%= f.check_box :value, class: 'toggle', checked: @template.template_sharings.exists?(account_id: current_account.testing_accounts), onchange: 'this.form.requestSubmit()' %>
+             <submit-form data-on="change" class="flex">
+               <%= f.check_box :value, class: 'toggle', checked: @template.template_sharings.exists?(account_id: current_account.testing_accounts) %>
+             </submit-form>
           </div>
         <% end %>
         <div class="mb-4">

app/views/templates_share_link/show.html.erb

@@ -5,7 +5,9 @@
     <%= form_for @template, url: template_share_link_path(@template), method: :post, html: { id: 'shared_link_form', autocomplete: 'off', class: 'mt-3' }, data: { close_on_submit: false } do |f| %>
       <label for="template_shared_link" class="flex items-center my-4 justify-between gap-1 alert bg-base-100 border-base-300">
         <span><%= t('enable_shared_link') %></span>
-        <%= f.check_box :shared_link, { disabled: !can?(:update, @template), class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'true', 'false' %>
+        <submit-form data-on="change" class="flex">
+          <%= f.check_box :shared_link, { disabled: !can?(:update, @template), class: 'toggle' }, 'true', 'false' %>
+        </submit-form>
       </label>
       <div class="flex gap-2 mt-3">
         <input id="embedding_url" type="text" value="<%= start_form_url(slug: @template.slug) %>" class="base-input w-full" autocomplete="off" readonly>
@@ -63,7 +65,9 @@
             <%= f.fields_for :preferences, Struct.new(:shared_link_2fa).new(@template.preferences['shared_link_2fa'] == true) do |ff| %>
               <label for="template_preferences_shared_link_2fa" class="flex items-center mt-4 h-14 justify-between gap-1 alert bg-base-100 border-base-300">
                 <span><%= t('request_email_otp_verification_with_shared_link') %></span>
-                <%= ff.check_box :shared_link_2fa, { checked: ff.object.shared_link_2fa == true, disabled: !can?(:update, @template), class: 'toggle', onchange: 'this.form.requestSubmit()' }, 'true', 'false' %>
+                <submit-form data-on="change" class="flex">
+                  <%= ff.check_box :shared_link_2fa, { checked: ff.object.shared_link_2fa == true, disabled: !can?(:update, @template), class: 'toggle' }, 'true', 'false' %>
+                </submit-form>
               </label>
             <% end %>
           <% end %>

app/views/webhook_events/_drawer_events.html.erb

@@ -51,7 +51,9 @@
   </ol>
   <% unless webhook_event.status == 'pending' %>
     <div class="absolute right-4 top-3">
-      <%= button_to button_title(title: t('resend'), disabled_with: t('awaiting'), icon: svg_icon('rotate', class: 'w-4 h-4'), icon_disabled: svg_icon('loader', class: 'w-4 h-4 animate-spin')), resend_settings_webhook_event_path(webhook_url.id, webhook_event.uuid), form: { id: button_uuid = SecureRandom.uuid }, params: { button_id: button_uuid }, class: 'btn btn-neutral btn-sm text-white', method: :post, onclick: '[this.form.requestSubmit(), this.disabled = true]' %>
+      <toggle-classes data-classes="btn-disabled">
+        <%= button_to button_title(title: t('resend'), disabled_with: t('awaiting'), icon: svg_icon('rotate', class: 'w-4 h-4'), icon_disabled: svg_icon('loader', class: 'w-4 h-4 animate-spin')), resend_settings_webhook_event_path(webhook_url.id, webhook_event.uuid), form: { id: button_uuid = SecureRandom.uuid }, params: { button_id: button_uuid }, class: 'btn btn-neutral btn-sm text-white', method: :post %>
+      </toggle-classes>
     </div>
   <% end %>
 </div>

app/views/webhook_events/_event_row.html.erb

@@ -21,7 +21,9 @@
       <div><%= webhook_event.event_type %></div>
     </div>
     <div class="flex items-center gap-3">
-      <%= button_to button_title(title: t('resend'), disabled_with: t('awaiting'), icon: svg_icon('rotate', class: 'w-4 h-4'), icon_disabled: svg_icon('loader', class: 'w-4 h-4 animate-spin')), resend_settings_webhook_event_path(webhook_url.id, webhook_event.uuid), form: { id: button_uuid = SecureRandom.uuid }, params: { button_id: button_uuid }, class: 'btn btn-neutral btn-xs h-2 text-white relative z-[1] hidden md:group-hover:inline-block', data: { turbo_frame: :drawer }, method: :post, onclick: "[this.form.requestSubmit(), this.disabled = true, this.classList.remove('hidden')]" %>
+      <toggle-classes data-classes="btn-disabled hidden">
+        <%= button_to button_title(title: t('resend'), disabled_with: t('awaiting'), icon: svg_icon('rotate', class: 'w-4 h-4'), icon_disabled: svg_icon('loader', class: 'w-4 h-4 animate-spin')), resend_settings_webhook_event_path(webhook_url.id, webhook_event.uuid), form: { id: button_uuid = SecureRandom.uuid }, params: { button_id: button_uuid }, class: 'btn btn-neutral btn-xs h-2 text-white relative z-[1] hidden md:group-hover:inline-block', data: { turbo_frame: :drawer }, method: :post %>
+      </toggle-classes>
       <span><%= l(webhook_event.created_at, locale: current_account.locale, format: :short) %></span>
     </div>
   </div>

app/views/webhook_settings/show.html.erb

@@ -66,7 +66,9 @@
                     <%= f.fields_for :events do |ff| %>
                       <div class="flex">
                         <label class="flex items-center cursor-pointer">
-                          <%= ff.check_box event, class: 'base-checkbox', checked: @webhook_url.events.include?(event), onchange: 'this.form.requestSubmit()' %>
+                          <submit-form data-on="change" class="flex">
+                            <%= ff.check_box event, class: 'base-checkbox', checked: @webhook_url.events.include?(event) %>
+                          </submit-form>
                           <span class="ml-2"><%= event %></span>
                         </label>
                       </div>