refactor templates controller

app/javascript/application.js

@@ -91,6 +91,7 @@ window.customElements.define('template-builder', class extends HTMLElement {
       withPhone: this.dataset.withPhone === 'true',
       withLogo: this.dataset.withLogo !== 'false',
       editable: this.dataset.editable !== 'false',
+      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       withPayment: this.dataset.withPayment === 'true',
       withFormula: this.dataset.withFormula === 'true',
       withConditions: this.dataset.withConditions === 'true',

app/javascript/form.js

@@ -17,6 +17,7 @@ window.customElements.define('submission-form', class extends HTMLElement {
       attribution: this.dataset.attribution !== 'false',
       withConfetti: this.dataset.withConfetti !== 'false',
       withTypedSignature: this.dataset.withTypedSignature !== 'false',
+      authenticityToken: document.querySelector('meta[name="csrf-token"]')?.content,
       values: reactive(JSON.parse(this.dataset.values)),
       completedButton: JSON.parse(this.dataset.completedButton),
       completedRedirectUrl: this.dataset.completedRedirectUrl,

app/javascript/submission_form/form.vue

@@ -611,6 +611,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     i18n: {
       type: Object,
       required: false,
@@ -658,9 +663,6 @@ export default {
     queryParams () {
       return new URLSearchParams(window.location.search)
     },
-    authenticityToken () {
-      return document.querySelector('meta[name="csrf-token"]')?.content
-    },
     submitterSlug () {
       return this.submitter.slug
     },

app/javascript/template_builder/builder.vue

@@ -444,6 +444,11 @@ export default {
       required: false,
       default: true
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     withDocumentsList: {
       type: Boolean,
       required: false,
@@ -1023,7 +1028,11 @@ export default {
     baseFetch (path, options = {}) {
       return fetch(this.baseUrl + path, {
         ...options,
-        headers: { ...this.fetchOptions.headers, ...options.headers }
+        headers: {
+          'X-CSRF-Token': this.authenticityToken,
+          ...this.fetchOptions.headers,
+          ...options.headers
+        }
       })
     },
     save ({ force } = { force: false }) {
@@ -1039,7 +1048,7 @@ export default {
 
       this.pushUndo()
 
-      return this.baseFetch(`/api/templates/${this.template.id}`, {
+      return this.baseFetch(`/templates/${this.template.id}`, {
         method: 'PUT',
         body: JSON.stringify({
           template: {

app/javascript/template_builder/upload.vue

@@ -119,7 +119,7 @@ export default {
 
         this.isProcessing = true
 
-        this.baseFetch(`/api/templates/${this.templateId}/documents`, {
+        this.baseFetch(`/templates/${this.templateId}/documents`, {
           method: 'POST',
           body: JSON.stringify({ blobs }),
           headers: { 'Content-Type': 'application/json' }
@@ -132,7 +132,7 @@ export default {
           } else if (resp.status === 422) {
             resp.json().then((data) => {
               if (data.error === 'PDF encrypted') {
-                this.baseFetch(`/api/templates/${this.templateId}/documents`, {
+                this.baseFetch(`/templates/${this.templateId}/documents`, {
                   method: 'POST',
                   body: JSON.stringify({ blobs, password: prompt('Enter PDF password') }),
                   headers: { 'Content-Type': 'application/json' }
@@ -151,7 +151,7 @@ export default {
           this.isProcessing = false
         })
       } else {
-        this.baseFetch(`/api/templates/${this.templateId}/documents`, {
+        this.baseFetch(`/templates/${this.templateId}/documents`, {
           method: 'POST',
           body: new FormData(this.$refs.form)
         }).then((resp) => {
@@ -167,7 +167,7 @@ export default {
 
                 formData.append('password', prompt('Enter PDF password'))
 
-                this.baseFetch(`/api/templates/${this.templateId}/documents`, {
+                this.baseFetch(`/templates/${this.templateId}/documents`, {
                   method: 'POST',
                   body: formData
                 }).then(async (resp) => {