From 804431c44abe0bce70103cb236456ac51ef533df Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Thu, 18 Sep 2025 10:05:04 +0300
Subject: [PATCH] adjust account preferences

---
 app/javascript/elements/submit_form.js |   4 +
 app/views/accounts/show.html.erb       | 132 ++++++++++++++-----------
 2 files changed, 81 insertions(+), 55 deletions(-)

diff --git a/app/javascript/elements/submit_form.js b/app/javascript/elements/submit_form.js
index 7a27ed5f..164a069e 100644
--- a/app/javascript/elements/submit_form.js
+++ b/app/javascript/elements/submit_form.js
@@ -4,6 +4,10 @@ export default class extends HTMLElement {
       this.interval = setInterval(() => {
         this.querySelector('form').requestSubmit()
       }, parseInt(this.dataset.interval))
+    } else if (this.dataset.on) {
+      this.lastElementChild.addEventListener(this.dataset.on, () => {
+        this.lastElementChild.form.requestSubmit()
+      })
     } else {
       this.querySelector('form').requestSubmit()
     }
diff --git a/app/views/accounts/show.html.erb b/app/views/accounts/show.html.erb
index aae5a3eb..4152d1d0 100644
--- a/app/views/accounts/show.html.erb
+++ b/app/views/accounts/show.html.erb
@@ -51,13 +51,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('require_two_factor_authentication_2fa_with_an_authenticator_app_e_g_google_authenticator_authy_all_users_signing_documents_must_pass_the_second_factor_verification_using_a_secure_code_in_addition_to_their_password') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('force_2fa_with_authenticator_app') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('force_2fa_with_authenticator_app') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('require_two_factor_authentication_2fa_with_an_authenticator_app_e_g_google_authenticator_authy_all_users_signing_documents_must_pass_the_second_factor_verification_using_a_secure_code_in_addition_to_their_password') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+              <submit-form data-on="change" class="flex">
+                <%= f.check_box :value, class: 'toggle', checked: account_config.value %>
+              </submit-form>
             </div>
           <% end %>
         <% end %>
@@ -66,13 +68,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('add_a_unique_signature_id_and_timestamp_to_each_signature_for_audit_and_traceability_purposes_along_with_the_timestamp_part_of_docuseals_21_cfr_part_11_compliance_settings') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('add_signature_id_to_the_documents') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('add_signature_id_to_the_documents') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('add_a_unique_signature_id_and_timestamp_to_each_signature_for_audit_and_traceability_purposes_along_with_the_timestamp_part_of_docuseals_21_cfr_part_11_compliance_settings') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()', disabled: can?(:manage, :cfr) %>
+              <submit-form data-on="change" class="flex">
+                <%= f.check_box :value, class: 'toggle', checked: account_config.value, disabled: can?(:manage, :cfr) %>
+              </submit-form>
             </div>
           <% end %>
         <% end %>
@@ -81,13 +85,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('require_signer_to_provide_a_reason_for_signing_before_completing_their_signature_e_g_approvals_certifications_part_of_docuseals_21_cfr_part_11_compliance_settings') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('require_signing_reason') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('require_signing_reason') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('require_signer_to_provide_a_reason_for_signing_before_completing_their_signature_e_g_approvals_certifications_part_of_docuseals_21_cfr_part_11_compliance_settings') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()', disabled: can?(:manage, :cfr) %>
+              <submit-form data-on="change" class="flex">
+                <%= f.check_box :value, class: 'toggle', checked: account_config.value, disabled: can?(:manage, :cfr) %>
+              </submit-form>
             </div>
           <% end %>
         <% end %>
@@ -96,13 +102,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('allow_signers_to_create_signatures_by_typing_their_name_instead_of_drawing_or_uploading_one') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('allow_typed_text_signatures') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('allow_typed_text_signatures') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('allow_signers_to_create_signatures_by_typing_their_name_instead_of_drawing_or_uploading_one') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= 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 %>
@@ -111,13 +119,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('allow_signers_to_resubmit_forms_after_completion_useful_when_corrections_or_multiple_submissions_are_needed') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('allow_to_resubmit_completed_forms') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('allow_to_resubmit_completed_forms') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('allow_signers_to_resubmit_forms_after_completion_useful_when_corrections_or_multiple_submissions_are_needed') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= 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 %>
@@ -126,13 +136,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('allow_recipients_to_decline_signing_a_document_the_decline_reason_notification_will_be_sent_to_the_signature_requester') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('allow_to_decline_documents') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('allow_to_decline_documents') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('allow_recipients_to_decline_signing_a_document_the_decline_reason_notification_will_be_sent_to_the_signature_requester') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= 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 %>
@@ -141,13 +153,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('save_a_users_signature_and_automatically_pre_fill_it_in_future_signing_sessions') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('remember_and_pre_fill_signatures') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('remember_and_pre_fill_signatures') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('save_a_users_signature_and_automatically_pre_fill_it_in_future_signing_sessions') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= 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 %>
@@ -156,13 +170,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('make_document_download_links_expire_after_40_minutes_to_prevent_long_term_access_and_enhance_security') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('expirable_file_download_links') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('expirable_file_download_links') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('make_document_download_links_expire_after_40_minutes_to_prevent_long_term_access_and_enhance_security') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= 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 %>
@@ -171,13 +187,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('require_authentication_with_user_login_or_api_key_to_access_the_document_download_links') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('require_authentication_for_file_download_links') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('require_authentication_for_file_download_links') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('require_authentication_with_user_login_or_api_key_to_access_the_document_download_links') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+              <submit-form data-on="change" class="flex">
+                <%= f.check_box :value, class: 'toggle', checked: account_config.value %>
+              </submit-form>
             </div>
           <% end %>
         <% end %>
@@ -186,13 +204,15 @@
           <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
             <%= f.hidden_field :key %>
             <div class="flex items-center justify-between gap-4 py-2.5">
-              <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('combine_signed_documents_and_the_audit_log_into_a_single_pdf_file_for_easier_recordkeeping_and_compliance') %>">
-                <div class="flex items-center space-x-1">
-                  <span class="text-left"><%= t('combine_completed_documents_and_audit_log') %></span>
+              <div class="flex items-center space-x-1">
+                <span class="text-left"><%= t('combine_completed_documents_and_audit_log') %></span>
+                <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('combine_signed_documents_and_the_audit_log_into_a_single_pdf_file_for_easier_recordkeeping_and_compliance') %>">
                   <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                </div>
+                </span>
               </div>
-              <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+              <submit-form data-on="change" class="flex">
+                <%= f.check_box :value, class: 'toggle', checked: account_config.value %>
+              </submit-form>
             </div>
           <% end %>
         <% end %>
@@ -202,13 +222,15 @@
             <%= form_for account_config, url: account_configs_path, method: :post do |f| %>
               <%= f.hidden_field :key %>
               <div class="flex items-center justify-between gap-4 py-2.5">
-                <div class="md:tooltip md:tooltip-bottom cursor-pointer" data-tip="<%= t('make_the_recipients_signing_order_always_enforced_so_that_the_second_signer_can_start_signing_their_part_only_after_the_first_signer_has_completed_signing') %>">
-                  <div class="flex items-center space-x-1">
-                    <span class="text-left"><%= t('always_enforce_signing_order') %></span>
+                <div class="flex items-center space-x-1">
+                  <span class="text-left"><%= t('always_enforce_signing_order') %></span>
+                  <span class="tooltip tooltip-top flex cursor-pointer" data-tip="<%= t('make_the_recipients_signing_order_always_enforced_so_that_the_second_signer_can_start_signing_their_part_only_after_the_first_signer_has_completed_signing') %>">
                     <%= svg_icon('info_circle', class: 'hidden md:inline-block w-4 h-4 shrink-0') %>
-                  </div>
+                  </span>
                 </div>
-                <%= f.check_box :value, class: 'toggle', checked: account_config.value, onchange: 'this.form.requestSubmit()' %>
+                <submit-form data-on="change" class="flex">
+                  <%= f.check_box :value, class: 'toggle', checked: account_config.value %>
+                </submit-form>
               </div>
             <% end %>
           <% end %>