diff --git a/app/javascript/elements/toggle_submit.js b/app/javascript/elements/toggle_submit.js new file mode 100644 index 00000000..6635a564 --- /dev/null +++ b/app/javascript/elements/toggle_submit.js @@ -0,0 +1,21 @@ +export default class extends HTMLElement { + connectedCallback () { + this.button.disabled = false + + this.form.addEventListener('submit', () => { + this.button.disabled = true + }) + } + + disconnectedCallback () { + this.button.disabled = false + } + + get button () { + return this.querySelector('[type="submit"]') + } + + get form () { + return this.querySelector('form') || this.closest('form') + } +} diff --git a/app/javascript/form.js b/app/javascript/form.js index 82fb453c..a818def5 100644 --- a/app/javascript/form.js +++ b/app/javascript/form.js @@ -2,10 +2,12 @@ import { createApp, reactive } from 'vue' import Form from './submission_form/form' import DownloadButton from './elements/download_button' +import ToggleSubmit from './elements/toggle_submit' const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options) safeRegisterElement('download-button', DownloadButton) +safeRegisterElement('toggle-submit', ToggleSubmit) safeRegisterElement('submission-form', class extends HTMLElement { connectedCallback () { this.appElem = document.createElement('div') diff --git a/app/views/start_form/completed.html.erb b/app/views/start_form/completed.html.erb index 18eafec5..36110eb2 100644 --- a/app/views/start_form/completed.html.erb +++ b/app/views/start_form/completed.html.erb @@ -20,14 +20,14 @@ <%= t('form_has_been_submitted_already') %> <% if Docuseal.multitenant? || Accounts.can_send_emails?(@submitter.account) %> -
- <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %> -
+ + <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, class: 'base-button w-full' %> + <% end %> <% if @template.submitters.to_a.size == 1 && %w[api embed].exclude?(@submitter.submission.source) && @submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false %> -
- <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: @submitter.slug }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %> -
+ + <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@template.slug), params: { submitter: { email: params[:email] }, resubmit: @submitter.slug }, method: :put, class: 'white-button w-full' %> + <% end %> diff --git a/app/views/start_form/show.html.erb b/app/views/start_form/show.html.erb index 6b3a3a87..a2443048 100644 --- a/app/views/start_form/show.html.erb +++ b/app/views/start_form/show.html.erb @@ -24,15 +24,15 @@ <% unless @template.archived_at? %> - <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4', onsubmit: 'event.submitter.disabled = true' } do |f| %> + <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4' } do |f| %>
<%= f.label :email, t('email'), class: 'label' %> <%= f.email_field :email, value: current_user&.email || params[:email] || @submitter.email, required: true, class: 'base-input', placeholder: t('provide_your_email_to_start') %> <%= @error_message %>
-
+ <%= f.button button_title(title: t('start'), disabled_with: t('starting')), class: 'base-button' %> -
+ <% end %> <% end %> diff --git a/app/views/submissions_preview/completed.html.erb b/app/views/submissions_preview/completed.html.erb index 997356a5..68e61863 100644 --- a/app/views/submissions_preview/completed.html.erb +++ b/app/views/submissions_preview/completed.html.erb @@ -21,15 +21,15 @@ <% if Docuseal.multitenant? || Accounts.can_send_emails?(@submission.account) %> - <%= form_for '', url: send_submission_email_index_path, method: :post, html: { class: 'space-y-4', onsubmit: 'event.submitter.disabled = true' } do |f| %> + <%= form_for '', url: send_submission_email_index_path, method: :post, html: { class: 'space-y-4' } do |f| %>
<%= f.hidden_field :submission_slug, value: @submission.slug %> <%= f.label :email, t('email'), class: 'label' %> <%= f.email_field :email, value: current_user&.email || params[:email], required: true, class: 'base-input', placeholder: t('send_copy_to_email') %>
-
+ <%= f.button button_title(title: t('send_copy_to_email'), disabled_with: t('starting')), class: 'base-button' %> -
+ <% end %> <% if Docuseal.multitenant? %>
<%= t('or') %>
diff --git a/app/views/submit_form/completed.html.erb b/app/views/submit_form/completed.html.erb index 5cc780a4..1b6c7ed1 100644 --- a/app/views/submit_form/completed.html.erb +++ b/app/views/submit_form/completed.html.erb @@ -18,7 +18,9 @@
<% if (Docuseal.multitenant? || Accounts.can_send_emails?(@submitter.account)) && @submitter.email.present? %> - <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %> + + <%= button_to button_title(title: t('send_copy_to_email'), disabled_with: t('sending'), icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, class: 'white-button w-full' %> + <% if @submitter.submission.template.submitters.size != 1 %>
<%= t('or') %>
<% else %> @@ -40,9 +42,9 @@
<% if @submitter.submission.template.submitters.size == 1 && %w[api embed].exclude?(@submitter.submission.source) && @submitter.account.account_configs.find_or_initialize_by(key: AccountConfig::ALLOW_TO_RESUBMIT).value != false && !@submitter.template.archived_at? %>
<%= t('or') %>
-
- <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone, name: @submitter.name }, resubmit: @submitter.slug }, method: :put, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'white-button w-full' %> -
+ + <%= button_to button_title(title: t('resubmit'), disabled_with: t('resubmit'), icon: svg_icon('reload', class: 'w-6 h-6')), start_form_path(@submitter.submission.template.slug), params: { submitter: { email: @submitter.email, phone: @submitter.phone, name: @submitter.name }, resubmit: @submitter.slug }, method: :put, class: 'white-button w-full' %> + <% end %>