require 2fa placeholder

app/javascript/elements/fetch_form.js

@@ -0,0 +1,36 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.form.addEventListener('submit', (e) => {
+      e.preventDefault()
+
+      this.submit()
+    })
+
+    if (this.dataset.onload === 'true') {
+      this.form.querySelector('button').click()
+    }
+  }
+
+  submit () {
+    fetch(this.form.action, {
+      method: this.form.method,
+      body: new FormData(this.form)
+    }).then(async (resp) => {
+      if (!resp.ok) {
+        try {
+          const data = JSON.parse(await resp.text())
+
+          if (data.error) {
+            alert(data.error)
+          }
+        } catch (err) {
+          console.error(err)
+        }
+      }
+    })
+  }
+
+  get form () {
+    return this.querySelector('form')
+  }
+}

app/javascript/form.js

@@ -3,11 +3,13 @@ import { createApp, reactive } from 'vue'
 import Form from './submission_form/form'
 import DownloadButton from './elements/download_button'
 import ToggleSubmit from './elements/toggle_submit'
+import FetchForm from './elements/fetch_form'
 
 const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
 
 safeRegisterElement('download-button', DownloadButton)
 safeRegisterElement('toggle-submit', ToggleSubmit)
+safeRegisterElement('fetch-form', FetchForm)
 safeRegisterElement('submission-form', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')