From 170cb1ecea98b7e8bf3a59531852825168d1f3b9 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Thu, 25 May 2023 22:47:52 +0300
Subject: [PATCH] use vue for form submission

---
 .../send_submission_email_controller.rb       |  17 +-
 app/controllers/submit_flow_controller.rb     |   8 +-
 app/javascript/application.js                 |  12 +-
 app/javascript/elements/file_dropzone.js      |  76 -----
 app/javascript/elements/files_list.js         |  16 --
 app/javascript/elements/flow_area.js          |  18 --
 app/javascript/elements/flow_view.js          | 110 -------
 app/javascript/elements/signature_pad.js      |  68 -----
 app/javascript/flow.js                        |  39 ++-
 .../{components => flow_builder}/area.vue     |   0
 .../{components => flow_builder}/builder.vue  |  16 +-
 .../{components => flow_builder}/document.vue |   0
 .../{components => flow_builder}/field.vue    |   0
 .../{components => flow_builder}/fields.vue   |   0
 .../{components => flow_builder}/page.vue     |   0
 .../{components => flow_builder}/upload.vue   |   0
 app/javascript/flow_form/area.vue             |  86 ++++++
 app/javascript/flow_form/areas.vue            |  77 +++++
 app/javascript/flow_form/attachment_step.vue  |  86 ++++++
 app/javascript/flow_form/checkbox_step.vue    |  54 ++++
 app/javascript/flow_form/completed.vue        |  70 +++++
 app/javascript/flow_form/dropzone.vue         | 112 ++++++++
 app/javascript/flow_form/form.vue             | 269 ++++++++++++++++++
 app/javascript/flow_form/image_step.vue       |  67 +++++
 app/javascript/flow_form/signature_step.vue   | 101 +++++++
 app/views/submit_flow/_area.html.erb          |   8 -
 app/views/submit_flow/show.html.erb           | 115 +-------
 tailwind.flow.config.js                       |   1 +
 28 files changed, 977 insertions(+), 449 deletions(-)
 delete mode 100644 app/javascript/elements/file_dropzone.js
 delete mode 100644 app/javascript/elements/files_list.js
 delete mode 100644 app/javascript/elements/flow_area.js
 delete mode 100644 app/javascript/elements/flow_view.js
 delete mode 100644 app/javascript/elements/signature_pad.js
 rename app/javascript/{components => flow_builder}/area.vue (100%)
 rename app/javascript/{components => flow_builder}/builder.vue (93%)
 rename app/javascript/{components => flow_builder}/document.vue (100%)
 rename app/javascript/{components => flow_builder}/field.vue (100%)
 rename app/javascript/{components => flow_builder}/fields.vue (100%)
 rename app/javascript/{components => flow_builder}/page.vue (100%)
 rename app/javascript/{components => flow_builder}/upload.vue (100%)
 create mode 100644 app/javascript/flow_form/area.vue
 create mode 100644 app/javascript/flow_form/areas.vue
 create mode 100644 app/javascript/flow_form/attachment_step.vue
 create mode 100644 app/javascript/flow_form/checkbox_step.vue
 create mode 100644 app/javascript/flow_form/completed.vue
 create mode 100644 app/javascript/flow_form/dropzone.vue
 create mode 100644 app/javascript/flow_form/form.vue
 create mode 100644 app/javascript/flow_form/image_step.vue
 create mode 100644 app/javascript/flow_form/signature_step.vue
 delete mode 100644 app/views/submit_flow/_area.html.erb

diff --git a/app/controllers/send_submission_email_controller.rb b/app/controllers/send_submission_email_controller.rb
index 4f14125e..0a88bf62 100644
--- a/app/controllers/send_submission_email_controller.rb
+++ b/app/controllers/send_submission_email_controller.rb
@@ -4,18 +4,23 @@ class SendSubmissionEmailController < ApplicationController
   layout 'flow'
 
   skip_before_action :authenticate_user!
+  skip_before_action :verify_authenticity_token
 
   def success; end
 
   def create
-    @submission = if params[:flow_slug]
-                    Submission.joins(:flow).find_by!(email: params[:email], flow: { slug: params[:flow_slug] })
-                  else
-                    Submission.find_by!(slug: params[:submission_slug])
-                  end
+    @submission =
+      if params[:flow_slug]
+        Submission.joins(:flow).find_by!(email: params[:email], flow: { slug: params[:flow_slug] })
+      else
+        Submission.find_by!(slug: params[:submission_slug])
+      end
 
     SubmissionMailer.copy_to_submitter(@submission).deliver_later!
 
-    redirect_to success_send_submission_email_index_path
+    respond_to do |f|
+      f.html { redirect_to success_send_submission_email_index_path }
+      f.json { head :ok }
+    end
   end
 end
diff --git a/app/controllers/submit_flow_controller.rb b/app/controllers/submit_flow_controller.rb
index 90e862a9..66445b68 100644
--- a/app/controllers/submit_flow_controller.rb
+++ b/app/controllers/submit_flow_controller.rb
@@ -14,7 +14,7 @@ class SubmitFlowController < ApplicationController
 
   def update
     submission = Submission.find_by!(slug: params[:slug])
-    submission.values.merge!(params[:values].to_unsafe_h)
+    submission.values.merge!(normalized_values)
     submission.completed_at = Time.current if params[:completed] == 'true'
 
     submission.save
@@ -25,4 +25,10 @@ class SubmitFlowController < ApplicationController
   def completed
     @submission = Submission.find_by!(slug: params[:submit_flow_slug])
   end
+
+  private
+
+  def normalized_values
+    params[:values].to_unsafe_h.transform_values { |v| v.is_a?(Array) ? v.compact_blank : v }
+  end
 end
diff --git a/app/javascript/application.js b/app/javascript/application.js
index a2087482..d4748616 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,27 +1,23 @@
 import '@hotwired/turbo-rails'
 
-import { createApp } from 'vue'
+import { createApp, reactive } from 'vue'
 
 import ToggleVisible from './elements/toggle_visible'
 import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
-import FlowArea from './elements/flow_area'
-import FlowView from './elements/flow_view'
 
-import Builder from './components/builder'
+import FlowBuilder from './flow_builder/builder'
 
 window.customElements.define('toggle-visible', ToggleVisible)
 window.customElements.define('disable-hidden', DisableHidden)
 window.customElements.define('turbo-modal', TurboModal)
-window.customElements.define('flow-view', FlowView)
-window.customElements.define('flow-area', FlowArea)
 
 window.customElements.define('flow-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
 
-    this.app = createApp(Builder, {
-      dataFlow: this.dataset.flow
+    this.app = createApp(FlowBuilder, {
+      flow: reactive(JSON.parse(this.dataset.flow))
     })
 
     this.app.mount(this.appElem)
diff --git a/app/javascript/elements/file_dropzone.js b/app/javascript/elements/file_dropzone.js
deleted file mode 100644
index f855e84d..00000000
--- a/app/javascript/elements/file_dropzone.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { DirectUpload } from '@rails/activestorage'
-
-import { actionable } from '@github/catalyst/lib/actionable'
-import { target, targetable } from '@github/catalyst/lib/targetable'
-
-export default actionable(targetable(class extends HTMLElement {
-  static [target.static] = [
-    'loading',
-    'input'
-  ]
-
-  connectedCallback () {
-    this.addEventListener('drop', this.onDrop)
-
-    this.addEventListener('dragover', (e) => e.preventDefault())
-  }
-
-  onDrop (e) {
-    e.preventDefault()
-
-    this.uploadFiles(e.dataTransfer.files)
-  }
-
-  onSelectFiles (e) {
-    e.preventDefault()
-
-    this.uploadFiles(this.input.files).then(() => {
-      this.input.value = ''
-    })
-  }
-
-  async uploadFiles (files) {
-    const blobs = await Promise.all(
-      Array.from(files).map(async (file) => {
-        const upload = new DirectUpload(
-          file,
-          '/direct_uploads',
-          this.input
-        )
-
-        return new Promise((resolve, reject) => {
-          upload.create((error, blob) => {
-            if (error) {
-              console.error(error)
-
-              return reject(error)
-            } else {
-              return resolve(blob)
-            }
-          })
-        }).catch((error) => {
-          console.error(error)
-        })
-      })
-    )
-
-    await Promise.all(
-      blobs.map((blob) => {
-        return fetch('/api/attachments', {
-          method: 'POST',
-          body: JSON.stringify({
-            name: 'attachments',
-            blob_signed_id: blob.signed_id,
-            submission_slug: this.dataset.submissionSlug
-          }),
-          headers: { 'Content-Type': 'application/json' }
-        }).then(resp => resp.json()).then((data) => {
-          return data
-        })
-      })).then((result) => {
-      result.forEach((attachment) => {
-        this.dispatchEvent(new CustomEvent('upload', { detail: attachment }))
-      })
-    })
-  }
-}))
diff --git a/app/javascript/elements/files_list.js b/app/javascript/elements/files_list.js
deleted file mode 100644
index b3623fd1..00000000
--- a/app/javascript/elements/files_list.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { actionable } from '@github/catalyst/lib/actionable'
-import { targets, targetable } from '@github/catalyst/lib/targetable'
-
-export default actionable(targetable(class extends HTMLElement {
-  static [targets.static] = [
-    'items'
-  ]
-
-  add (e) {
-    const elem = document.createElement('input')
-    elem.value = e.detail.uuid
-    elem.name = `values[${this.dataset.fieldUuid}][]`
-
-    this.prepend(elem)
-  }
-}))
diff --git a/app/javascript/elements/flow_area.js b/app/javascript/elements/flow_area.js
deleted file mode 100644
index 811d2672..00000000
--- a/app/javascript/elements/flow_area.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default class extends HTMLElement {
-  setValue (value) {
-    const { fieldType } = this.dataset
-
-    if (fieldType === 'signature') {
-      [...this.children].forEach(e => e.remove())
-
-      const img = document.createElement('img')
-
-      img.classList.add('w-full', 'h-full', 'object-contain')
-      img.src = value.url
-
-      this.append(img)
-    } else {
-      this.innerHTML = value
-    }
-  }
-}
diff --git a/app/javascript/elements/flow_view.js b/app/javascript/elements/flow_view.js
deleted file mode 100644
index c935ffff..00000000
--- a/app/javascript/elements/flow_view.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { targets, target, targetable } from '@github/catalyst/lib/targetable'
-import { actionable } from '@github/catalyst/lib/actionable'
-
-export default actionable(targetable(class extends HTMLElement {
-  static [target.static] = [
-    'form',
-    'completed'
-  ]
-
-  static [targets.static] = [
-    'areas',
-    'fields',
-    'steps'
-  ]
-
-  passValueToArea (e) {
-    this.areasSetValue(e.target.id, e.target.value)
-  }
-
-  areasSetValue (fieldUuid, value) {
-    return (this.areas || []).forEach((area) => {
-      if (area.dataset.fieldUuid === fieldUuid) {
-        area.setValue(value)
-      }
-    })
-  }
-
-  setVisibleStep (uuid) {
-    this.steps.forEach((step) => {
-      step.classList.toggle('hidden', step.dataset.fieldUuid !== uuid)
-    })
-
-    this.fields.find(f => f.id === uuid)?.focus()
-  }
-
-  submitSignature (e) {
-    e.target.okButton.disabled = true
-
-    fetch(this.form.action, {
-      method: this.form.method,
-      body: new FormData(this.form)
-    }).then(response => {
-      console.log('Form submitted successfully!', response)
-      this.moveNextStep()
-    }).catch(error => {
-      console.error('Error submitting form:', error)
-    }).finally(() => {
-      e.target.okButton.disabled = false
-
-      this.areasSetValue(e.target.closest('disable-hidden').dataset.fieldUuid, e.detail)
-    })
-  }
-
-  submitForm (e) {
-    e.preventDefault()
-
-    e.submitter.setAttribute('disabled', true)
-
-    fetch(this.form.action, {
-      method: this.form.method,
-      body: new FormData(this.form)
-    }).then(response => {
-      console.log('Form submitted successfully!', response)
-      this.moveNextStep()
-    }).catch(error => {
-      console.error('Error submitting form:', error)
-    }).finally(() => {
-      e.submitter.removeAttribute('disabled')
-    })
-  }
-
-  moveStepBack (e) {
-    e?.preventDefault()
-
-    const currentStepIndex = this.steps.findIndex((el) => !el.classList.contains('hidden'))
-
-    const previousStep = this.steps[currentStepIndex - 1]
-
-    if (previousStep) {
-      this.setVisibleStep(previousStep.dataset.fieldUuid)
-    }
-  }
-
-  moveNextStep (e) {
-    e?.preventDefault()
-
-    const currentStepIndex = this.steps.findIndex((el) => !el.classList.contains('hidden'))
-
-    const nextStep = this.steps[currentStepIndex + 1]
-
-    if (nextStep) {
-      this.setVisibleStep(nextStep.dataset.fieldUuid)
-    } else {
-      this.form.classList.add('hidden')
-      this.completed.classList.remove('hidden')
-    }
-  }
-
-  focusField ({ target }) {
-    this.setVisibleStep(target.closest('flow-area').dataset.fieldUuid)
-  }
-
-  focusArea ({ target }) {
-    const area = this.areas.find(a => target.id === a.dataset.fieldUuid)
-
-    if (area) {
-      area.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    }
-  }
-}))
diff --git a/app/javascript/elements/signature_pad.js b/app/javascript/elements/signature_pad.js
deleted file mode 100644
index 03a4dc4f..00000000
--- a/app/javascript/elements/signature_pad.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import SignaturePad from 'signature_pad'
-import { target, targetable } from '@github/catalyst/lib/targetable'
-import { actionable } from '@github/catalyst/lib/actionable'
-
-import { DirectUpload } from '@rails/activestorage'
-
-export default actionable(targetable(class extends HTMLElement {
-  static [target.static] = [
-    'canvas',
-    'input',
-    'okButton',
-    'image',
-    'clearButton',
-    'redrawButton',
-    'nextButton'
-  ]
-
-  connectedCallback () {
-    this.pad = new SignaturePad(this.canvas)
-  }
-
-  submit (e) {
-    e?.preventDefault()
-
-    this.okButton.disabled = true
-
-    this.canvas.toBlob((blob) => {
-      const file = new File([blob], 'signature.png', { type: 'image/png' })
-
-      new DirectUpload(
-        file,
-        '/direct_uploads'
-      ).create((_error, data) => {
-        fetch('/api/attachments', {
-          method: 'POST',
-          body: JSON.stringify({
-            submission_slug: this.dataset.submissionSlug,
-            blob_signed_id: data.signed_id,
-            name: 'signatures'
-          }),
-          headers: { 'Content-Type': 'application/json' }
-        }).then((resp) => resp.json()).then((attachment) => {
-          this.input.value = attachment.uuid
-          this.dispatchEvent(new CustomEvent('upload', { detail: attachment }))
-        })
-      })
-    }, 'image/png')
-  }
-
-  redraw (e) {
-    e?.preventDefault()
-
-    this.input.value = ''
-
-    this.canvas.classList.remove('hidden')
-    this.clearButton.classList.remove('hidden')
-    this.okButton.classList.remove('hidden')
-    this.image.remove()
-    this.redrawButton.remove()
-    this.nextButton.remove()
-  }
-
-  clear (e) {
-    e?.preventDefault()
-
-    this.pad.clear()
-  }
-}))
diff --git a/app/javascript/flow.js b/app/javascript/flow.js
index a685cfd7..28ec9e0c 100644
--- a/app/javascript/flow.js
+++ b/app/javascript/flow.js
@@ -1,13 +1,26 @@
-import FlowArea from './elements/flow_area'
-import FlowView from './elements/flow_view'
-import DisableHidden from './elements/disable_hidden'
-import FileDropzone from './elements/file_dropzone'
-import SignaturePad from './elements/signature_pad'
-import FilesList from './elements/files_list'
-
-window.customElements.define('flow-view', FlowView)
-window.customElements.define('flow-area', FlowArea)
-window.customElements.define('disable-hidden', DisableHidden)
-window.customElements.define('file-dropzone', FileDropzone)
-window.customElements.define('signature-pad', SignaturePad)
-window.customElements.define('files-list', FilesList)
+import { createApp, reactive } from 'vue'
+
+import Flow from './flow_form/form'
+
+window.customElements.define('flow-form', class extends HTMLElement {
+  connectedCallback () {
+    this.appElem = document.createElement('div')
+
+    this.app = createApp(Flow, {
+      submissionSlug: this.dataset.submissionSlug,
+      authenticityToken: this.dataset.authenticityToken,
+      values: reactive(JSON.parse(this.dataset.values)),
+      attachments: reactive(JSON.parse(this.dataset.attachments)),
+      fields: JSON.parse(this.dataset.fields)
+    })
+
+    this.app.mount(this.appElem)
+
+    this.appendChild(this.appElem)
+  }
+
+  disconnectedCallback () {
+    this.app?.unmount()
+    this.appElem?.remove()
+  }
+})
diff --git a/app/javascript/components/area.vue b/app/javascript/flow_builder/area.vue
similarity index 100%
rename from app/javascript/components/area.vue
rename to app/javascript/flow_builder/area.vue
diff --git a/app/javascript/components/builder.vue b/app/javascript/flow_builder/builder.vue
similarity index 93%
rename from app/javascript/components/builder.vue
rename to app/javascript/flow_builder/builder.vue
index 3f293838..9b8f63c5 100644
--- a/app/javascript/components/builder.vue
+++ b/app/javascript/flow_builder/builder.vue
@@ -81,21 +81,15 @@ export default {
     Fields
   },
   props: {
-    dataFlow: {
-      type: String,
-      default: '{}'
+    flow: {
+      type: Object,
+      required: true
     }
   },
   data () {
     return {
       drawField: null,
-      dragFieldType: null,
-      flow: {
-        name: '',
-        schema: [],
-        documents: [],
-        fields: []
-      }
+      dragFieldType: null
     }
   },
   computed: {
@@ -121,8 +115,6 @@ export default {
     }
   },
   mounted () {
-    this.flow = JSON.parse(this.dataFlow)
-
     document.addEventListener('keyup', this.disableDrawOnEsc)
   },
   unmounted () {
diff --git a/app/javascript/components/document.vue b/app/javascript/flow_builder/document.vue
similarity index 100%
rename from app/javascript/components/document.vue
rename to app/javascript/flow_builder/document.vue
diff --git a/app/javascript/components/field.vue b/app/javascript/flow_builder/field.vue
similarity index 100%
rename from app/javascript/components/field.vue
rename to app/javascript/flow_builder/field.vue
diff --git a/app/javascript/components/fields.vue b/app/javascript/flow_builder/fields.vue
similarity index 100%
rename from app/javascript/components/fields.vue
rename to app/javascript/flow_builder/fields.vue
diff --git a/app/javascript/components/page.vue b/app/javascript/flow_builder/page.vue
similarity index 100%
rename from app/javascript/components/page.vue
rename to app/javascript/flow_builder/page.vue
diff --git a/app/javascript/components/upload.vue b/app/javascript/flow_builder/upload.vue
similarity index 100%
rename from app/javascript/components/upload.vue
rename to app/javascript/flow_builder/upload.vue
diff --git a/app/javascript/flow_form/area.vue b/app/javascript/flow_form/area.vue
new file mode 100644
index 00000000..3b298de2
--- /dev/null
+++ b/app/javascript/flow_form/area.vue
@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="flex cursor-pointer bg-red-100 absolute"
+    :style="computedStyle"
+  >
+    <img
+      v-if="field.type === 'image' && image"
+      :src="image.url"
+    >
+    <img
+      v-else-if="field.type === 'signature' && signature"
+      :src="signature.url"
+    >
+    <div v-else-if="field.type === 'attachment'">
+      <a
+        v-for="(attachment, index) in attachments"
+        :key="index"
+        :href="attachment.url"
+      >
+        {{ attachment.filename }}
+      </a>
+    </div>
+    <span v-else>
+      {{ value }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FieldArea',
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: [Array, String, Number, Object],
+      required: false,
+      default: ''
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    area: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    image () {
+      if (this.field.type === 'image') {
+        return this.attachmentsIndex[this.value]
+      } else {
+        return null
+      }
+    },
+    signature () {
+      if (this.field.type === 'signature') {
+        return this.attachmentsIndex[this.value]
+      } else {
+        return null
+      }
+    },
+    attachments () {
+      if (this.field.type === 'attachment') {
+        return (this.value || []).map((uuid) => this.attachmentsIndex[uuid])
+      } else {
+        return []
+      }
+    },
+    computedStyle () {
+      const { x, y, w, h } = this.area
+
+      return {
+        top: y * 100 + '%',
+        left: x * 100 + '%',
+        width: w * 100 + '%',
+        height: h * 100 + '%'
+      }
+    }
+  }
+}
+</script>
diff --git a/app/javascript/flow_form/areas.vue b/app/javascript/flow_form/areas.vue
new file mode 100644
index 00000000..73564d5b
--- /dev/null
+++ b/app/javascript/flow_form/areas.vue
@@ -0,0 +1,77 @@
+<template>
+  <template
+    v-for="field in fields"
+    :key="field.uuid"
+  >
+    <template
+      v-for="(area, index) in field.areas"
+      :key="index"
+    >
+      <Teleport :to="`#page-${area.attachment_uuid}-${area.page}`">
+        <FieldArea
+          :ref="setAreaRef"
+          :field="field"
+          :area="area"
+          :attachments-index="attachmentsIndex"
+          :value="values[field.uuid]"
+          @click="$emit('focus-field', field)"
+        />
+      </Teleport>
+    </template>
+  </template>
+</template>
+
+<script>
+import FieldArea from './area'
+
+export default {
+  name: 'FieldAreas',
+  components: {
+    FieldArea
+  },
+  props: {
+    fields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    values: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  emits: ['focus-field'],
+  data () {
+    return {
+      areaRefs: []
+    }
+  },
+  beforeUpdate () {
+    this.areaRefs = []
+  },
+  methods: {
+    scrollIntoField (field) {
+      this.areaRefs.find((area) => {
+        if (area.field === field) {
+          area.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+          return true
+        } else {
+          return null
+        }
+      })
+    },
+    setAreaRef (el) {
+      if (el) {
+        this.areaRefs.push(el)
+      }
+    }
+  }
+}
+</script>
diff --git a/app/javascript/flow_form/attachment_step.vue b/app/javascript/flow_form/attachment_step.vue
new file mode 100644
index 00000000..c66aafa9
--- /dev/null
+++ b/app/javascript/flow_form/attachment_step.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <template v-if="modelValue.length">
+      <div
+        v-for="(val, index) in modelValue"
+        :key="index"
+      >
+        <a
+          v-if="val"
+          :href="attachmentsIndex[val].url"
+        >
+          {{ attachmentsIndex[val].filename }}
+        </a>
+        <input
+          :value="val"
+          type="hidden"
+          :name="`values[${field.uuid}][]`"
+        >
+        <button
+          v-if="modelValue"
+          @click.prevent="removeAttachment(val)"
+        >
+          Remove
+        </button>
+      </div>
+    </template>
+    <template v-else>
+      <input
+        value=""
+        type="hidden"
+        :name="`values[${field.uuid}][]`"
+      >
+    </template>
+    <FileDropzone
+      :message="'Attachments'"
+      :submission-slug="submissionSlug"
+      @upload="onUpload"
+    />
+  </div>
+</template>
+
+<script>
+import FileDropzone from './dropzone'
+
+export default {
+  name: 'AttachmentStep',
+  components: {
+    FileDropzone
+  },
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    submissionSlug: {
+      type: String,
+      required: true
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    modelValue: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: ['attached', 'update:model-value'],
+  methods: {
+    removeAttachment (uuid) {
+      this.modelValue.splice(this.modelValue.indexOf(uuid), 1)
+
+      this.$emit('update:model-value', this.modelValue)
+    },
+    onUpload (attachments) {
+      attachments.forEach((attachment) => {
+        this.$emit('attached', attachment)
+      })
+
+      this.$emit('update:model-value', [...this.modelValue, ...attachments.map(a => a.uuid)])
+    }
+  }
+}
+</script>
diff --git a/app/javascript/flow_form/checkbox_step.vue b/app/javascript/flow_form/checkbox_step.vue
new file mode 100644
index 00000000..f06cff95
--- /dev/null
+++ b/app/javascript/flow_form/checkbox_step.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    v-for="(option, index) in field.options"
+    :key="index"
+  >
+    <label :for="field.uuid + option">
+      <input
+        :id="field.uuid + option"
+        :ref="setInputRef"
+        type="checkbox"
+        :name="`values[${field.uuid}][]`"
+        :value="option"
+        :checked="modelValue.includes(option)"
+        @change="onChange"
+      >
+      {{ option }}
+    </label>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SheckboxStep',
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: ['update:model-value'],
+  data () {
+    return {
+      inputRefs: []
+    }
+  },
+  beforeUpdate () {
+    this.inputRefs = []
+  },
+  methods: {
+    setInputRef (el) {
+      if (el) {
+        this.inputRefs.push(el)
+      }
+    },
+    onChange () {
+      this.$emit('update:model-value', this.inputRefs.filter(e => e.checked).map(e => e.value))
+    }
+  }
+}
+</script>
diff --git a/app/javascript/flow_form/completed.vue b/app/javascript/flow_form/completed.vue
new file mode 100644
index 00000000..ce5f007d
--- /dev/null
+++ b/app/javascript/flow_form/completed.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <p>
+      Form completed - thanks!
+    </p>
+    <button @click.prevent="sendCopyToEmail">
+      <span v-if="isSendingCopy">
+        Sending
+      </span>
+      <span>
+        Send copy to email
+      </span>
+    </button>
+    <button @click.prevent="download">
+      <span v-if="isDownloading">
+        Downloading
+      </span>
+      <span>
+        Download copy
+      </span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FormCompleted',
+  props: {
+    submissionSlug: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      isSendingCopy: false,
+      isDownloading: false
+    }
+  },
+  methods: {
+    sendCopyToEmail () {
+      this.isSendingCopy = true
+
+      fetch(`/send_submission_email.json?submission_slug=${this.submissionSlug}`, {
+        method: 'POST'
+      }).finally(() => {
+        this.isSendingCopy = false
+      })
+    },
+    download () {
+      this.isDownloading = true
+
+      fetch(`/submissions/${this.submissionSlug}/download`).then(async (response) => {
+        const blob = new Blob([await response.text()], { type: `${response.headers.get('content-type')};charset=utf-8;` })
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+
+        link.href = url
+        link.setAttribute('download', response.headers.get('content-disposition').split('"')[1])
+
+        link.click()
+
+        URL.revokeObjectURL(url)
+      }).finally(() => {
+        this.isDownloading = false
+      })
+    }
+  }
+}
+</script>
diff --git a/app/javascript/flow_form/dropzone.vue b/app/javascript/flow_form/dropzone.vue
new file mode 100644
index 00000000..eaab2aff
--- /dev/null
+++ b/app/javascript/flow_form/dropzone.vue
@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="flex h-20 w-full"
+    @dragover.prevent
+    @drop.prevent="onDropFiles"
+  >
+    <label
+      :for="inputId"
+      class="w-full"
+    >
+      Upload
+      {{ message }}
+    </label>
+    <input
+      :id="inputId"
+      ref="input"
+      :multiple="multiple"
+      :accept="accept"
+      type="file"
+      class="hidden"
+      @change="onSelectFiles"
+    >
+  </div>
+</template>
+
+<script>
+import { DirectUpload } from '@rails/activestorage'
+
+export default {
+  name: 'FileDropzone',
+  props: {
+    message: {
+      type: String,
+      required: true
+    },
+    submissionSlug: {
+      type: String,
+      required: true
+    },
+    accept: {
+      type: String,
+      required: false,
+      default: '*/*'
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['upload'],
+  computed: {
+    inputId () {
+      return 'el' + Math.random().toString(32).split('.')[1]
+    }
+  },
+  methods: {
+    onDropFiles (e) {
+      this.uploadFiles(e.dataTransfer.files)
+    },
+    onSelectFiles (e) {
+      e.preventDefault()
+
+      this.uploadFiles(this.$refs.input.files).then(() => {
+        this.$refs.input.value = ''
+      })
+    },
+    async uploadFiles (files) {
+      const blobs = await Promise.all(
+        Array.from(files).map(async (file) => {
+          const upload = new DirectUpload(
+            file,
+            '/direct_uploads',
+            this.$refs.input
+          )
+
+          return new Promise((resolve, reject) => {
+            upload.create((error, blob) => {
+              if (error) {
+                console.error(error)
+
+                return reject(error)
+              } else {
+                return resolve(blob)
+              }
+            })
+          }).catch((error) => {
+            console.error(error)
+          })
+        })
+      )
+
+      return await Promise.all(
+        blobs.map((blob) => {
+          return fetch('/api/attachments', {
+            method: 'POST',
+            body: JSON.stringify({
+              name: 'attachments',
+              blob_signed_id: blob.signed_id,
+              submission_slug: this.submissionSlug
+            }),
+            headers: { 'Content-Type': 'application/json' }
+          }).then(resp => resp.json()).then((data) => {
+            return data
+          })
+        })).then((result) => {
+        this.$emit('upload', result)
+      })
+    }
+  }
+}
+</script>
diff --git a/app/javascript/flow_form/form.vue b/app/javascript/flow_form/form.vue
new file mode 100644
index 00000000..094dbca3
--- /dev/null
+++ b/app/javascript/flow_form/form.vue
@@ -0,0 +1,269 @@
+<template>
+  <FieldAreas
+    ref="areas"
+    :fields="fields"
+    :values="values"
+    :attachments-index="attachmentsIndex"
+    @focus-field="goToField"
+  />
+  <button
+    v-if="currentStep !== 0"
+    @click="goToField(fields[currentStep - 1], true)"
+  >
+    Back
+  </button>
+  {{ currentField.type }}
+  <form
+    v-if="!isCompleted"
+    ref="form"
+    :action="submitPath"
+    method="post"
+    @submit.prevent="submitStep"
+  >
+    <input
+      type="hidden"
+      name="authenticity_token"
+      :value="authenticityToken"
+    >
+    <input
+      v-if="currentStep === fields.length - 1"
+      type="hidden"
+      name="completed"
+      value="true"
+    >
+    <input
+      value="put"
+      name="_method"
+      type="hidden"
+    >
+    <div>
+      <template v-if="currentField.type === 'text'">
+        <label :for="currentField.uuid">{{ currentField.name || 'Text' }}</label>
+        <div>
+          <input
+            :id="currentField.uuid"
+            v-model="values[currentField.uuid]"
+            autofocus
+            class="text-xl"
+            :required="currentField.required"
+            type="text"
+            :name="`values[${currentField.uuid}]`"
+          >
+        </div>
+      </template>
+      <template v-else-if="currentField.type === 'date'">
+        <label :for="currentField.uuid">{{ currentField.name || 'Date' }}</label>
+        <div>
+          <input
+            :id="currentField.uuid"
+            v-model="values[currentField.uuid]"
+            class="text-xl"
+            autofocus
+            :required="currentField.required"
+            type="date"
+            :name="`values[${currentField.uuid}]`"
+          >
+        </div>
+      </template>
+      <template v-else-if="currentField.type === 'select'">
+        <label :for="currentField.uuid">{{ currentField.name || 'Date' }}</label>
+        <select
+          :id="currentField.uuid"
+          v-model="values[currentField.uuid]"
+          :required="currentField.required"
+          :name="`values[${currentField.uuid}]`"
+        >
+          <option
+            value=""
+            disabled
+            :selected="!values[currentField.uuid]"
+          >
+            Select your option
+          </option>
+          <option
+            v-for="(option, index) in currentField.options"
+            :key="index"
+            :select="values[currentField.uuid] == option"
+            :value="option"
+          >
+            {{ option }}
+          </option>
+        </select>
+      </template>
+      <template v-else-if="currentField.type === 'radio'">
+        <div
+          v-for="(option, index) in currentField.options"
+          :key="index"
+        >
+          <label :for="currentField.uuid + option">
+            <input
+              :id="currentField.uuid + option"
+              v-model="values[currentField.uuid]"
+              type="radio"
+              :name="`values[${currentField.uuid}]`"
+              :value="option"
+            >
+            {{ option }}
+          </label>
+        </div>
+      </template>
+      <CheckboxStep
+        v-else-if="currentField.type === 'checkbox'"
+        v-model="values[currentField.uuid]"
+        :field="currentField"
+      />
+      <ImageStep
+        v-else-if="currentField.type === 'image'"
+        v-model="values[currentField.uuid]"
+        :field="currentField"
+        :attachments-index="attachmentsIndex"
+        :submission-slug="submissionSlug"
+        @attached="attachments.push($event)"
+      />
+      <SignatureStep
+        v-else-if="currentField.type === 'signature'"
+        ref="currentStep"
+        v-model="values[currentField.uuid]"
+        :field="currentField"
+        :attachments-index="attachmentsIndex"
+        :submission-slug="submissionSlug"
+        @attached="attachments.push($event)"
+      />
+      <AttachmentStep
+        v-else-if="currentField.type === 'attachment'"
+        v-model="values[currentField.uuid]"
+        :field="currentField"
+        :attachments-index="attachmentsIndex"
+        :submission-slug="submissionSlug"
+        @attached="attachments.push($event)"
+      />
+    </div>
+    <div>
+      <button type="submit">
+        <span v-if="isSubmitting">
+          Submitting...
+        </span>
+        <span v-else>
+          Submit
+        </span>
+      </button>
+    </div>
+  </form>
+  <FormCompleted
+    v-else
+    :submission-slug="submissionSlug"
+  />
+</template>
+
+<script>
+import FieldAreas from './areas'
+import ImageStep from './image_step'
+import SignatureStep from './signature_step'
+import AttachmentStep from './attachment_step'
+import CheckboxStep from './checkbox_step'
+import FormCompleted from './completed'
+
+export default {
+  name: 'FlowForm',
+  components: {
+    FieldAreas,
+    ImageStep,
+    SignatureStep,
+    AttachmentStep,
+    CheckboxStep,
+    FormCompleted
+  },
+  props: {
+    submissionSlug: {
+      type: String,
+      required: true
+    },
+    attachments: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    fields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    authenticityToken: {
+      type: String,
+      required: true
+    },
+    values: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      isCompleted: false,
+      currentStep: 0,
+      isSubmitting: false
+    }
+  },
+  computed: {
+    currentField () {
+      return this.fields[this.currentStep]
+    },
+    attachmentsIndex () {
+      return this.attachments.reduce((acc, a) => {
+        acc[a.uuid] = a
+
+        return acc
+      }, {})
+    },
+    submitPath () {
+      return `/l/${this.submissionSlug}`
+    }
+  },
+  mounted () {
+    this.currentStep = Math.min(
+      this.fields.indexOf([...this.fields].reverse().find((field) => !!this.values[field.uuid])) + 1,
+      this.fields.length - 1
+    )
+  },
+  methods: {
+    goToField (field, scrollToArea = false) {
+      this.currentStep = this.fields.indexOf(field)
+
+      this.$nextTick(() => {
+        if (scrollToArea) {
+          this.$refs.areas.scrollIntoField(field)
+        }
+
+        this.$refs.form.querySelector('input[type="date"], input[type="text"], select')?.focus()
+      })
+    },
+    async submitStep () {
+      this.isSubmitting = true
+
+      const stepPromise = this.currentField.type === 'signature'
+        ? this.$refs.currentStep.submit
+        : () => Promise.resolve({})
+
+      await stepPromise()
+
+      return fetch(this.submitPath, {
+        method: 'POST',
+        body: new FormData(this.$refs.form)
+      }).then(response => {
+        const nextField = this.fields[this.currentStep + 1]
+
+        if (nextField) {
+          this.goToField(this.fields[this.currentStep + 1], true)
+        } else {
+          this.isCompleted = true
+        }
+      }).catch(error => {
+        console.error('Error submitting form:', error)
+      }).finally(() => {
+        this.isSubmitting = false
+      })
+    }
+  }
+}
+</script>
diff --git a/app/javascript/flow_form/image_step.vue b/app/javascript/flow_form/image_step.vue
new file mode 100644
index 00000000..003be1da
--- /dev/null
+++ b/app/javascript/flow_form/image_step.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <img
+      v-if="modelValue"
+      class="w-80"
+      :src="attachmentsIndex[modelValue].url"
+    >
+    <button
+      v-if="modelValue"
+      @click.prevent="remove"
+    >
+      Remove
+    </button>
+    <input
+      :value="modelValue"
+      type="hidden"
+      :name="`values[${field.uuid}]`"
+    >
+    <FileDropzone
+      :message="'Image'"
+      :submission-slug="submissionSlug"
+      :accept="'image/*'"
+      @upload="onImageUpload"
+    />
+  </div>
+</template>
+
+<script>
+import FileDropzone from './dropzone'
+export default {
+  name: 'ImageStep',
+  components: {
+    FileDropzone
+  },
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    submissionSlug: {
+      type: String,
+      required: true
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['attached', 'update:model-value'],
+  methods: {
+    remove () {
+      this.$emit('update:model-value', '')
+    },
+    onImageUpload (attachments) {
+      this.$emit('attached', attachments[0])
+
+      this.$emit('update:model-value', attachments[0].uuid)
+    }
+  }
+}
+</script>
diff --git a/app/javascript/flow_form/signature_step.vue b/app/javascript/flow_form/signature_step.vue
new file mode 100644
index 00000000..03283c25
--- /dev/null
+++ b/app/javascript/flow_form/signature_step.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <input
+      :value="modelValue"
+      type="hidden"
+      :name="`values[${field.uuid}]`"
+    >
+    <img
+      v-if="modelValue"
+      :src="attachmentsIndex[modelValue].url"
+    >
+    <canvas
+      v-show="!modelValue"
+      ref="canvas"
+    />
+    <button
+      v-if="modelValue"
+      @click.prevent="remove"
+    >
+      Redraw
+    </button>
+    <button
+      v-else
+      @click.prevent="clear"
+    >
+      Clear
+    </button>
+  </div>
+</template>
+
+<script>
+import SignaturePad from 'signature_pad'
+import { DirectUpload } from '@rails/activestorage'
+
+export default {
+  name: 'SignatureStep',
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    submissionSlug: {
+      type: String,
+      required: true
+    },
+    attachmentsIndex: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['attached', 'update:model-value'],
+  mounted () {
+    this.pad = new SignaturePad(this.$refs.canvas)
+  },
+  methods: {
+    remove () {
+      this.$emit('update:model-value', '')
+    },
+    clear () {
+      this.pad.clear()
+    },
+    submit () {
+      if (this.modelValue) {
+        return Promise.resolve({})
+      }
+
+      return new Promise((resolve) => {
+        this.$refs.canvas.toBlob((blob) => {
+          const file = new File([blob], 'signature.png', { type: 'image/png' })
+
+          new DirectUpload(
+            file,
+            '/direct_uploads'
+          ).create((_error, data) => {
+            fetch('/api/attachments', {
+              method: 'POST',
+              body: JSON.stringify({
+                submission_slug: this.submissionSlug,
+                blob_signed_id: data.signed_id,
+                name: 'signatures'
+              }),
+              headers: { 'Content-Type': 'application/json' }
+            }).then((resp) => resp.json()).then((attachment) => {
+              this.$emit('update:model-value', attachment.uuid)
+              this.$emit('attached', attachment)
+
+              return resolve(attachment)
+            })
+          })
+        }, 'image/png')
+      })
+    }
+  }
+}
+</script>
diff --git a/app/views/submit_flow/_area.html.erb b/app/views/submit_flow/_area.html.erb
deleted file mode 100644
index 3f7a7f2b..00000000
--- a/app/views/submit_flow/_area.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<% value = submission.values[field['uuid']] %>
-<flow-area data-field-type="<%= field['type'] %>" data-field-uuid="<%= field['uuid'] %>" data-action="click:flow-view#focusField" data-targets="flow-view.areas" class="flex cursor-pointer bg-red-100 absolute" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
-  <% if field['type'] == 'signature' && attachment = attachments.find { |a| a.uuid == value } %>
-    <img class="w-full h-full object-contain" src="<%= attachment.url %>" width="<%= attachment.metadata['width'] %>px" height="<%= attachment.metadata['height'] %>px">
-  <% else %>
-    <%= value %>
-  <% end %>
-</flow-area>
diff --git a/app/views/submit_flow/show.html.erb b/app/views/submit_flow/show.html.erb
index 973905b9..e5f7c1cc 100644
--- a/app/views/submit_flow/show.html.erb
+++ b/app/views/submit_flow/show.html.erb
@@ -1,4 +1,3 @@
-<% fields_index = Flows.build_field_areas_index(@submission.flow) %>
 <% attachment_field_uuids = @submission.flow.fields.select { |f| f['type'].in?(%w[image signature attachment]) }.pluck('uuid') %>
 <% attachments = ActiveStorage::Attachment.where(uuid: @submission.values.values_at(*attachment_field_uuids).flatten).preload(:blob) %>
 <flow-view class="mx-auto block" style="max-width: 1000px">
@@ -7,123 +6,13 @@
     <% document.preview_images.sort_by { |a| a.filename.base.to_i }.each_with_index do |page, index| %>
       <div class="relative">
         <img src="<%= page.url %>" width="<%= page.metadata['width'] %>" height="<%= page.metadata['height'] %>" loading="lazy">
-        <div class="top-0 bottom-0 left-0 right-0 absolute">
-          <% fields_index.dig(document.uuid, index)&.each do |values| %>
-            <%= render 'area', submission: @submission, attachments:, page:, **values %>
-          <% end %>
-        </div>
+        <div id="page-<%= [document.uuid, index].join('-') %>" class="top-0 bottom-0 left-0 right-0 absolute"></div>
       </div>
     <% end %>
   <% end %>
   <div class="sticky bottom-8 w-full">
     <div class="bg-white mx-8 md:mx-32 border p-4 rounded">
-      <form data-target="flow-view.form" data-action="submit:flow-view#submitForm" action="<%= submit_flow_path(slug: @submission.slug) %>" method="post">
-        <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
-        <input value="put" name="_method" type="hidden">
-        <% visible_step_index = nil %>
-        <% @submission.flow.fields.each_with_index do |field, index| %>
-          <% visible_step_index ||= index if @submission.values[field['uuid']].blank? %>
-          <disable-hidden data-field-type="<%= field['type'] %>" data-field-uuid="<%= field['uuid'] %>" data-targets="flow-view.steps" class="block <%= 'hidden' if index != visible_step_index %>">
-            <% if index != 0 %>
-              <button data-action="click:flow-view#moveStepBack">
-                Back
-              </button>
-            <% end %>
-            <label for="<%= field['uuid'] %>"><%= field['name'].presence || 'FIeld' %></label>
-            <br>
-            <% if index == @submission.flow.fields.size - 1 %>
-              <input type="hidden" name="completed" value="true">
-              <div>
-                <button type="submit"><%= button_title %></button>
-              </div>
-            <% end %>
-            <% if field['type'].in?(['text', 'date']) %>
-              <input class="text-xl" <%= html_attributes(required: 'true') if field['required'] %> id="<%= field['uuid'] %>" data-targets="flow-view.fields" data-action="input:flow-view#passValueToArea focus:flow-view#focusArea" value="<%= @submission.values[field['uuid']] %>" type="<%= field['type'] %>" name="values[<%= field['uuid'] %>]">
-              <div>
-                <button type="submit"><%= button_title %></button>
-              </div>
-            <% elsif field['type'] == 'select' %>
-              <select <%= html_attributes(required: 'true') if field['required'] %> id="<%= field['uuid'] %>" data-targets="flow-view.fields" data-action="input:flow-view#passValueToArea focus:flow-view#focusArea" name="values[<%= field['uuid'] %>]">
-                <option value="" disabled selected>Select your option</option>
-                <% field['options'].each do |option| %>
-                  <option <%= html_attributes(selected: 'true') if @submission.values[field['uuid']] == option %> value="<%= option %>"><%= option %></option>
-                <% end %>
-              </select>
-              <div>
-                <button type="submit"><%= button_title %></button>
-              </div>
-            <% elsif field['type'] == 'image' || field['type'] == 'attachment' %>
-              <br>
-              <files-list data-field-uuid="<%= field['uuid'] %>">
-                <file-dropzone data-action="upload:files-list#add" data-submission-slug="<%= @submission.slug %>">
-                  <% uuid = SecureRandom.uuid %>
-                  <label for="<%= uuid %>">
-                    Upload
-                    <%= field['name'] || 'Attach' %>
-                  </label>
-                  <input multiple data-target="file-dropzone.input" data-action="change:file-dropzone#onSelectFiles" id="<%= uuid %>" type="file" class="hidden">
-                </file-dropzone>
-              </files-list>
-              <div>
-                <button type="submit"><%= button_title %></button>
-              </div>
-            <% elsif field['type'] == 'signature' %>
-              <% attachment = attachments.find { |a| a.uuid == @submission.values[field['uuid']] } %>
-              <signature-pad data-submission-slug="<%= @submission.slug %>" data-action="upload:flow-view#submitSignature">
-                <input data-target="signature-pad.input" type="hidden" name="values[<%= field['uuid'] %>]" value="<%= @submission.values[field['uuid']] %>">
-                <canvas class="<%= 'hidden' if attachment %>" data-target="signature-pad.canvas"></canvas>
-                <% if  attachment %>
-                  <img data-target="signature-pad.image" src="<%= attachment.url %>">
-                  <button data-target="signature-pad.redrawButton" data-action="click:signature-pad#redraw">
-                    Redraw
-                  </button>
-                  <button data-target="signature-pad.nextButton" data-action="click:flow-view#moveNextStep">
-                    Submit
-                  </button>
-                <% end %>
-                <button class="<%= 'hidden' if attachment %>" data-target="signature-pad.clearButton" data-action="click:signature-pad#clear">
-                  Clear
-                </button>
-                <br>
-                <button class="<%= 'hidden' if attachment %>" data-target="signature-pad.okButton" data-action="click:signature-pad#submit">
-                  <%= button_title %>
-                </button>
-              </signature-pad>
-            <% elsif field['type'] == 'radio' %>
-              <% field['options'].each do |option| %>
-                <div>
-                  <input <%= html_attributes(checked: true) if @submission.values[field['uuid']] == option %> id="<%= field['uuid'] + option %>" type="radio" name="values[<%= field['uuid'] %>]" value="<%= option %>">
-                  <label for="<%= field['uuid'] + option %>">
-                    <%= option %>
-                  </label>
-                </div>
-              <% end %>
-              <div>
-                <button type="submit"><%= button_title %></button>
-              </div>
-            <% elsif field['type'] == 'checkbox' %>
-              <% field['options'].each do |option| %>
-                <div>
-                  <input <%= html_attributes(checked: true) if @submission.values[field['uuid']]&.include?(option) %> id="<%= field['uuid'] + option %>" type="checkbox" name="values[<%= field['uuid'] %>]" value="<%= option %>">
-                  <label for="<%= field['uuid'] + option %>">
-                    <%= option %>
-                  </label>
-                </div>
-              <% end %>
-              <div>
-                <button type="submit"><%= button_title %></button>
-              </div>
-            <% end %>
-          </disable-hidden>
-        <% end %>
-      </form>
-      <div data-target="flow-view.completed" class="hidden">
-        <p>
-          Form completed - thanks!
-        </p>
-        <%= button_to 'Send copy to Email', send_submission_email_index_path, params: { submission_slug: @submission.slug }, form: { onsubmit: 'event.submitter.disabled = true' } %>
-        <%= button_to button_title('Download documents'), submission_download_index_path(@submission.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' } %>
-      </div>
+      <flow-form data-submission-slug="<%= @submission.slug %>" data-attachments="<%= attachments.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>" data-fields="<%= @submission.flow.fields.to_json %>" data-values="<%= @submission.values.to_json %>" data-authenticity-token="<%= form_authenticity_token %>"></flow-form>
     </div>
   </div>
 </flow-view>
diff --git a/tailwind.flow.config.js b/tailwind.flow.config.js
index 1658c0d0..b3c9cf09 100644
--- a/tailwind.flow.config.js
+++ b/tailwind.flow.config.js
@@ -3,6 +3,7 @@ const baseConfigs = require('./tailwind.config.js')
 module.exports = {
   ...baseConfigs,
   content: [
+    './app/javascript/flow_form/**/*.vue',
     './app/views/submit_flow/**/*.erb',
     './app/views/start_flow/**/*.erb',
     './app/views/send_submission_copy/**/*.erb'