add complete button to signing form header

app/javascript/form.js

@@ -52,7 +52,11 @@ safeRegisterElement('submission-form', class extends HTMLElement {
       completedMessage: JSON.parse(this.dataset.completedMessage || '{}'),
       completedRedirectUrl: this.dataset.completedRedirectUrl,
       attachments: reactive(JSON.parse(this.dataset.attachments)),
-      fields: JSON.parse(this.dataset.fields)
+      fields: JSON.parse(this.dataset.fields),
+      completeButtonRef: document.getElementById('complete_button_container'),
+      completeButtonMobileRef: document.getElementById('complete_button_container_mobile'),
+      declineButtonRef: document.getElementById('decline_button')?.closest('modal-button'),
+      declineButtonMobileRef: document.getElementById('decline_button_mobile')?.closest('modal-button')
     })
 
     this.app.mount(this.appElem)

app/javascript/submission_form/form.vue

@@ -113,6 +113,31 @@
       </span>
     </button>
   </Teleport>
+  <Teleport
+    v-for="ref in (canShowCompleteButton ? [completeButtonRef, completeButtonMobileRef].filter(Boolean) : [])"
+    :key="ref"
+    :to="ref"
+  >
+    <button
+      class="btn btn-sm btn-neutral text-white px-4"
+      form="steps_form"
+      type="submit"
+      name="completed"
+      value="true"
+      :disabled="isSubmittingComplete"
+    >
+      <span class="flex items-center">
+        <IconInnerShadowTop
+          v-if="isSubmittingComplete"
+          class="mr-1 animate-spin w-5 h-5"
+          aria-hidden="true"
+        />
+        <span>
+          {{ t('complete') }}
+        </span>
+      </span>
+    </button>
+  </Teleport>
   <button
     v-if="!isFormVisible"
     id="expand_form_button"
@@ -791,6 +816,26 @@ export default {
       required: false,
       default: null
     },
+    completeButtonRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    completeButtonMobileRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    declineButtonRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    declineButtonMobileRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
     schema: {
       type: Array,
       required: false,
@@ -1056,6 +1101,10 @@ export default {
         })
       })
     },
+    canShowCompleteButton () {
+      return this.completeButtonRef && !this.emptyValueRequiredStep && !this.isCompleted && !this.isInvite &&
+        this.stepFields.some((fields) => fields.some((f) => !isEmpty(this.values[f.uuid])))
+    },
     submitButtonText () {
       if (this.alwaysMinimize) {
         return this.t('submit')
@@ -1238,6 +1287,15 @@ export default {
         this.currentStep -= 1
       }
     },
+    canShowCompleteButton: {
+      immediate: true,
+      handler (show) {
+        this.$nextTick(() => {
+          if (this.declineButtonRef) this.declineButtonRef.classList.toggle('hidden', show)
+          if (this.declineButtonMobileRef) this.declineButtonMobileRef.classList.toggle('hidden', show)
+        })
+      }
+    },
     attachmentConditionsIndex: {
       deep: true,
       immediate: true,

app/views/submit_form/show.html.erb

@@ -22,6 +22,7 @@
             <%= @submitter.submission.name || @submitter.submission.template.name %>
           </h1>
           <div class="flex items-center space-x-2" style="margin-left: 20px; flex-shrink: 0">
+            <span id="complete_button_container"></span>
             <% if @form_configs[:with_delegate] %>
               <modal-button data-target="<%= delegate_modal_id = SecureRandom.uuid %>">
                 <button id="delegate_button" type="button" class="btn btn-sm !px-5"><%= t(:delegate) %></button>
@@ -65,6 +66,7 @@
           </div>
         </header>
         <scroll-buttons inert class="fixed right-5 top-2 hidden md:flex gap-1 z-50 ease-in-out opacity-0 -translate-y-10">
+          <span id="complete_button_container_mobile"></span>
           <% if @form_configs[:with_delegate] %>
             <modal-button data-target="<%= delegate_modal_id %>">
               <button id="delegate_button_mobile" type="button" class="btn btn-sm px-0" aria-label="<%= t(:delegate) %>">