Migrate to nuxt settings page AND remove axios (#266)

* Settings pages migration

* remove axios and use opnFetch

* Make created form reactive (#267)

* Remove verify pages and axios lib

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/pages/forms/NewFeatures.vue

@@ -63,7 +63,6 @@
 
 <script>
 import { computed } from 'vue'
-import axios from 'axios'
 import { useAuthStore } from '../../../stores/auth';
 import VTransition from '~/components/global/transitions/VTransition.vue'
 
@@ -98,8 +97,8 @@ export default {
 
   methods: {
     loadChangelogEntries () {
-      axios.get('/api/content/changelog/entries').then(response => {
-        this.changelogEntries = response.data.splice(0, 3)
+      opnFetch('/content/changelog/entries').then(data => {
+        this.changelogEntries = data.splice(0, 3)
       })
     }
   }

client/components/pages/forms/create/CreateFormBaseModal.vue

@@ -91,7 +91,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 
 export default {
   props: {
@@ -133,12 +132,12 @@ export default {
     fetchGeneratedForm (generationId) {
       // check every 4 seconds if form is generated
       setTimeout(() => {
-        axios.get('/api/forms/ai/' + generationId).then(response => {
-          if (response.data.ai_form_completion.status === 'completed') {
-            this.useAlert.success(response.data.message)
-            this.$emit('form-generated', JSON.parse(response.data.ai_form_completion.result))
+        opnFetch('/forms/ai/' + generationId).then(data => {
+          if (data.ai_form_completion.status === 'completed') {
+            this.useAlert.success(data.message)
+            this.$emit('form-generated', JSON.parse(data.ai_form_completion.result))
             this.$emit('close')
-          } else if (response.data.ai_form_completion.status === 'failed') {
+          } else if (data.ai_form_completion.status === 'failed') {
             this.useAlert.error('Something went wrong, please try again.')
             this.state = 'default'
             this.loading = false

client/components/pages/forms/show/ExtraMenu.vue

@@ -140,7 +140,6 @@
 
 <script>
 import { computed } from 'vue'
-import axios from 'axios'
 import Dropdown from '~/components/global/Dropdown.vue'
 import FormTemplateModal from '../../../open/forms/components/templates/FormTemplateModal.vue'
 

client/components/pages/forms/show/RegenerateFormLink.vue

@@ -73,7 +73,6 @@
 
 <script>
 import { computed } from 'vue'
-import axios from 'axios'
 import { useFormsStore } from '../../../../stores/forms'
 
 export default {
@@ -103,10 +102,10 @@ export default {
     regenerateLink(option) {
       if (this.loadingNewLink) return
       this.loadingNewLink = true
-      axios.put(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option).then((response) => {
-        this.formsStore.addOrUpdate(response.data.form)
-        this.$router.push({name: 'forms-slug-show-share', params: {slug: response.data.form.slug}})
-        useAlert().success(response.data.message)
+      opnFetch(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option, {method:'PUT'}).then((data) => {
+        this.formsStore.addOrUpdate(data.form)
+        this.$router.push({name: 'forms-slug-show-share', params: {slug: data.form.slug}})
+        useAlert().success(data.message)
         this.loadingNewLink = false
       }).finally(() => {
         this.showGenerateFormLinkModal = false

client/components/pages/pricing/CheckoutDetailsModal.vue

@@ -12,7 +12,6 @@
 
 <script>
 import { computed } from 'vue'
-import axios from 'axios'
 import TextInput from '../../forms/TextInput.vue'
 import VButton from '~/components/global/VButton.vue'
 
@@ -81,8 +80,8 @@ export default {
       if (this.form.busy) return
       this.form.put('api/subscription/update-customer-details').then(() => {
         this.loading = true
-        axios.get('/api/subscription/new/' + this.plan + '/' + (!this.yearly ? 'monthly' : 'yearly') + '/checkout/with-trial').then((response) => {
-          window.location = response.data.checkout_url
+        opnFetch('/subscription/new/' + this.plan + '/' + (!this.yearly ? 'monthly' : 'yearly') + '/checkout/with-trial').then((data) => {
+          window.location = data.checkout_url
         }).catch((error) => {
           useAlert().error(error.response.data.message)
         }).finally(() => {

client/components/pages/pricing/PricingTable.vue

@@ -109,7 +109,6 @@
 <script>
 import { computed } from 'vue'
 import { useAuthStore } from '../../../stores/auth'
-import axios from 'axios'
 import MonthlyYearlySelector from './MonthlyYearlySelector.vue'
 import CheckoutDetailsModal from './CheckoutDetailsModal.vue'
 import CustomPlan from './CustomPlan.vue'
@@ -160,9 +159,9 @@ export default {
     },
     openBilling () {
       this.billingLoading = true
-      axios.get('/api/subscription/billing-portal').then((response) => {
+      opnFetch('/subscription/billing-portal').then((data) => {
         this.billingLoading = false
-        const url = response.data.portal_url
+        const url = data.portal_url
         window.location = url
       })
     }