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/forms/FileInput.vue

@@ -76,7 +76,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
 import UploadedFile from './components/UploadedFile.vue'
@@ -193,13 +192,14 @@ export default {
           }
           if (this.moveToFormAssets) {
             // Move file to permanent storage for form assets
-            axios.post('/api/open/forms/assets/upload', {
+            opnFetch('/open/forms/assets/upload', {
+              method: 'POST',
               type: 'files',
               url: file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
-            }).then(moveFileResponse => {
+            }).then(moveFileResponseData => {
               this.files.push({
                 file: file,
-                url: moveFileResponse.data.url,
+                url: moveFileResponseData.url,
                 src: this.getFileSrc(file)
               })
               this.loading = false

client/components/forms/ImageInput.vue

@@ -107,7 +107,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
 import Modal from '../global/Modal.vue'
@@ -190,13 +189,14 @@ export default {
       // Store file in s3
       this.storeFile(this.file).then(response => {
         // Move file to permanent storage for form assets
-        axios.post('/api/open/forms/assets/upload', {
+        opnFetch('/open/forms/assets/upload', {
+          method: 'POST',
           url: this.file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
-        }).then(moveFileResponse => {
+        }).then(moveFileResponseData => {
           if (!this.multiple) {
             this.files = []
           }
-          this.compVal = moveFileResponse.data.url
+          this.compVal = moveFileResponseData.url
           this.showUploadModal = false
           this.loading = false
         }).catch((error) => {

client/components/open/components/RecordOperations.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 
 export default {
   components: { },
@@ -52,10 +51,10 @@ export default {
       this.useAlert.confirm('Do you really want to delete this record?', this.deleteRecord)
     },
     async deleteRecord () {
-      axios.delete('/api/open/forms/' + this.form.id + '/records/' + this.rowid + '/delete').then(async (response) => {
+      opnFetch('/open/forms/' + this.form.id + '/records/' + this.rowid + '/delete', {method:'DELETE'}).then(async (data) => {
-        if (response.data.type === 'success') {
+        if (data.type === 'success') {
           this.$emit('deleted')
-          this.useAlert.success(response.data.message)
+          this.useAlert.success(data.message)
         } else {
           this.useAlert.error('Something went wrong!')
         }

client/components/open/forms/OpenForm.vue

@@ -60,7 +60,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import clonedeep from 'clone-deep'
 import draggable from 'vuedraggable'
 import OpenFormButton from './OpenFormButton.vue'
@@ -293,8 +292,8 @@ export default {
         return null
       }
       await this.recordsStore.loadRecord(
-        axios.get('/api/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((response) => {
+        opnFetch('/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((data) => {
-          return { submission_id: this.form.submission_id, ...response.data.data }
+          return { submission_id: this.form.submission_id, ...data.data }
         })
       )
       return this.recordsStore.getById(this.form.submission_id)

client/components/open/forms/components/FormStats.vue

@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import { Line as LineChart } from 'vue-chartjs'
 import {
   Chart as ChartJS,

client/components/open/forms/components/templates/FormTemplateModal.vue

@@ -72,7 +72,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import { computed } from 'vue'
 import QuestionsEditor from './QuestionsEditor.vue'
 
@@ -175,9 +174,9 @@ export default {
     },
     async deleteFormTemplate () {
       if (!this.template) return
-      axios.delete('/api/templates/' + this.template.id).then((response) => {
+      opnFetch('/templates/' + this.template.id, {method:'DELETE'}).then((data) => {
-        if (response.data.message) {
+        if (data.message) {
-          this.useAlert.success(response.data.message)
+          this.useAlert.success(data.message)
         }
         this.$router.push({ name: 'templates' })
         this.templatesStore.remove(this.template)

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 => {
+      opnFetch('/content/changelog/entries').then(data => {
-        this.changelogEntries = response.data.splice(0, 3)
+        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 => {
+        opnFetch('/forms/ai/' + generationId).then(data => {
-          if (response.data.ai_form_completion.status === 'completed') {
+          if (data.ai_form_completion.status === 'completed') {
-            this.useAlert.success(response.data.message)
+            this.useAlert.success(data.message)
-            this.$emit('form-generated', JSON.parse(response.data.ai_form_completion.result))
+            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) => {
+      opnFetch(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option, {method:'PUT'}).then((data) => {
-        this.formsStore.addOrUpdate(response.data.form)
+        this.formsStore.addOrUpdate(data.form)
-        this.$router.push({name: 'forms-slug-show-share', params: {slug: response.data.form.slug}})
+        this.$router.push({name: 'forms-slug-show-share', params: {slug: data.form.slug}})
-        useAlert().success(response.data.message)
+        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) => {
+        opnFetch('/subscription/new/' + this.plan + '/' + (!this.yearly ? 'monthly' : 'yearly') + '/checkout/with-trial').then((data) => {
-          window.location = response.data.checkout_url
+          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
       })
     }

client/composables/lib/vForm/Form.js

@@ -77,7 +77,7 @@ class Form {
     Object.keys(this)
       .filter(key => !Form.ignore.includes(key))
       .forEach((key) => {
-        this[key] = deepCopy(this.originalData[key]);
+        this[key] = JSON.parse(JSON.stringify(this.originalData[key]));
       });
   }
 
@@ -128,7 +128,7 @@ class Form {
           resolve(data);
         }).catch((error) => {
           this.handleErrors(error);
-          resolve(error)
+          reject(error)
         })
     });
   }

client/composables/useForm.js

@@ -1,5 +1,5 @@
 import Form from "~/composables/lib/vForm/Form.js"
 
 export const useForm = (formData = {}) => {
-  return new Form(formData)
+  return reactive(new Form(formData))
 }

client/package.json

@@ -27,7 +27,6 @@
     "@vueuse/motion": "^2.0.0",
     "@vueuse/nuxt": "^10.7.0",
     "amplitude-js": "^8.21.9",
-    "axios": "^0.21.1",
     "chart.js": "^4.4.0",
     "clone-deep": "^4.0.1",
     "crisp-sdk-web": "^1.0.21",

client/pages/auth/verification/resend.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-lg-8 m-auto px-4">
-      <h1 class="my-6">
-        Verify Email
-      </h1>
-      <form @submit.prevent="send" @keydown="form.onKeydown($event)">
-        <alert-success :form="form" :message="status" />
-
-        <!-- Email -->
-        <text-input name="email" :form="form" label="Email" :required="true" />
-
-        <!-- Submit Button -->
-        <div class="form-group row">
-          <div class="col-md-9 ml-md-auto">
-            <v-button :loading="form.busy">
-              Send Verification Link
-            </v-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  middleware: 'guest',
-
-  data: () => ({
-    metaTitle: 'Verify Email',
-    status: '',
-    form: useForm({
-      email: ''
-    })
-  }),
-
-  created () {
-    if (this.$route.query.email) {
-      this.form.email = this.$route.query.email
-    }
-  },
-
-  methods: {
-    async send () {
-      const { data } = await this.form.post('/api/email/resend')
-
-      this.status = data.status
-
-      this.form.reset()
-    }
-  }
-}
-</script>

client/pages/auth/verification/verify.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-lg-8 m-auto  px-4">
-      <h1 class="my-6">
-        Verify Email
-      </h1>
-      <template v-if="success">
-        <div class="alert alert-success" role="alert">
-          {{ success }}
-        </div>
-
-        <NuxtLink :to="{ name: 'login' }" class="btn btn-primary">
-          Login
-        </NuxtLink>
-      </template>
-      <template v-else>
-        <div class="alert alert-danger" role="alert">
-          {{ error || 'Failed to verify email.' }}
-        </div>
-
-        <NuxtLink :to="{ name: 'auth-verification-resend' }" class="small float-right">
-          Resend Verification Link?
-        </NuxtLink>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import SeoMeta from '../../../mixins/seo-meta.js'
-
-const qs = (params) => Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
-
-export default {
-  mixins: [SeoMeta],
-  async beforeRouteEnter (to, from, next) {
-    try {
-      const { data } = await axios.post(`/api/email/verify/${to.params.id}?${qs(to.query)}`)
-
-      next(vm => {
-        vm.success = data.status
-      })
-    } catch (e) {
-      next(vm => {
-        vm.error = e.response.data.status
-      })
-    }
-  },
-
-  middleware: 'guest',
-
-  data: () => ({
-    metaTitle: 'Verify Email',
-    error: '',
-    success: ''
-  })
-}
-</script>

client/pages/settings.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="bg-white">
+      <div class="flex bg-gray-50">
+        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+          <div class="pt-4 pb-0">
+            <div class="flex">
+              <h2 class="flex-grow text-gray-900">
+                My Account
+              </h2>
+            </div>
+            <ul class="flex text-gray-500">
+              <li>{{ user.email }}</li>
+            </ul>
+  
+            <div class="mt-4 border-b border-gray-200 dark:border-gray-700">
+              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
+                <li v-for="(tab, i) in tabsList" :key="i+1" class="mr-6">
+                  <nuxt-link :to="{ name: tab.route }"
+                               class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
+                               active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                  >
+                    {{ tab.name }}
+                  </nuxt-link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex bg-white">
+        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+          <div class="mt-8 pb-0">
+            <NuxtPage />
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { computed } from 'vue'
+  import { useAuthStore } from '../stores/auth'
+  
+  definePageMeta({
+    middleware: "auth"
+  })
+  
+  const authStore = useAuthStore()
+  const user = computed(() => authStore.user)
+  const tabsList = computed(() => {
+    const tabs = [
+      {
+        name: 'Profile',
+        route: 'settings-profile'
+      },
+      {
+        name: 'Workspace Settings',
+        route: 'settings-workspace'
+      },
+      {
+        name: 'Password',
+        route: 'settings-password'
+      },
+      {
+        name: 'Delete Account',
+        route: 'settings-account'
+      }
+    ]
+  
+    if (user.value.is_subscribed) {
+      tabs.splice(1, 0, {
+        name: 'Billing',
+        route: 'settings-billing'
+      })
+    }
+  
+    if (user.value.admin) {
+      tabs.push({
+        name: 'Admin',
+        route: 'settings-admin'
+      })
+    }
+  
+    return tabs
+  })
+  </script>
+  

client/pages/settings/account.vue

@@ -9,49 +9,34 @@
     </p>
 
     <!-- Submit Button -->
-    <v-button :loading="loading" class="mt-4" color="red" @click="alertConfirm('Do you really want to delete your account?',deleteAccount)">
+    <v-button :loading="loading" class="mt-4" color="red" @click="useAlert().confirm('Do you really want to delete your account?',deleteAccount)">
       Delete account
     </v-button>
   </div>
 </template>
 
-<script>
+<script setup>
-import axios from 'axios'
+import { useRouter } from 'vue-router';
 
-export default {
+const router = useRouter()
-  scrollToTop: false,
+const authStore = useAuthStore()
+const metaTitle = 'Account'
+let loading = false
 
-  setup () {
+const deleteAccount = () => {
-    const authStore = useAuthStore()
+  loading = true
-    return {
+  opnFetch('/user', {method:'DELETE'}).then(async (data) => {
-      authStore
+    loading = false
-    }
+    useAlert().success(data.message)
-  },
     
-  data: () => ({
-    metaTitle: 'Account',
-    form: useForm({
-      identifier: ''
-    }),
-    loading: false
-  }),
-
-  methods: {
-    async deleteAccount () {
-      this.loading = true
-      axios.delete('/api/user').then(async (response) => {
-        this.loading = false
-        useAlert().success(response.data.message)
     // Log out the user.
-        await this.authStore.logout()
+    await authStore.logout()
 
     // Redirect to login.
-        this.$router.push({ name: 'login' })
+    router.push({ name: 'login' })
   }).catch((error) => {
     useAlert().error(error.response.data.message)
-        this.loading = false
+    loading = false
   })
-    }
-  }
 }
 </script>

client/pages/settings/admin.vue

@@ -34,54 +34,40 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import axios from 'axios'
+import { useRouter } from 'vue-router';
 
-export default {
+definePageMeta({
-  components: { },
+  middleware: "admin"
-  middleware: 'admin',
+})
-  scrollToTop: false,
 
-  setup () {
+const  metaTitle = 'Admin'
-    const authStore = useAuthStore()
+const authStore = useAuthStore()
-    const workspacesStore = useWorkspacesStore()
+const workspacesStore = useWorkspacesStore()
-    return {
+const router = useRouter()
-      authStore,
+let form = useForm({
-      workspacesStore
-    }
-  },
-
-  data: () => ({
-    metaTitle: 'Admin',
-    form: useForm({
   identifier: ''
-    }),
+})
-    loading: false
+let loading = false
-  }),
 
-  methods: {
+const impersonate = () => {
-    async impersonate () {
+  loading = true
-      this.loading = true
+  authStore.startImpersonating()
-      this.authStore.startImpersonating()
+  opnFetch('/admin/impersonate/' + encodeURI(form.identifier)).then(async (data) => {
-      axios.get('/api/admin/impersonate/' + encodeURI(this.form.identifier)).then(async (response) => {
+    loading = false
-        this.loading = false
 
     // Save the token.
-        this.authStore.saveToken(response.data.token, false)
+    authStore.saveToken(data.token, false)
 
     // Fetch the user.
-        await this.authStore.fetchUser()
+    await authStore.fetchUser()
 
     // Redirect to the dashboard.
-        this.workspacesStore.set([])
+    workspacesStore.set([])
-        this.$router.push({ name: 'home' })
+    router.push({ name: 'home' })
   }).catch((error) => {
     useAlert().error(error.response.data.message)
-        this.loading = false
+    loading = false
   })
-
-      // this.form.reset()
-    }
-  }
 }
 </script>

client/pages/settings/billing.vue

@@ -19,45 +19,25 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import axios from 'axios'
 import { computed } from 'vue'
 import { useAuthStore } from '../../stores/auth'
-import VButton from '~/components/global/VButton.vue'
-import SeoMeta from '../../mixins/seo-meta.js'
 import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'
 
-export default {
+const metaTitle = 'Billing'
-  components: { AppSumoBilling, VButton },
+const authStore = useAuthStore()
-  mixins: [SeoMeta],
+let user = computed(() => authStore.user)
-  scrollToTop: false,
+let billingLoading = false
 
-  setup () {
+const openBillingDashboard = () => {
-    const authStore = useAuthStore()
+  billingLoading = true
-    return {
+  opnFetch('/subscription/billing-portal').then((data) => {
-      user : computed(() => authStore.user)
+    const url = data.portal_url
-    }
-  },
-
-  data: () => ({
-    metaTitle: 'Billing',
-    billingLoading: false
-  }),
-
-  methods: {
-    openBillingDashboard () {
-      this.billingLoading = true
-      axios.get('/api/subscription/billing-portal').then((response) => {
-        const url = response.data.portal_url
     window.location = url
   }).catch((error) => {
     useAlert().error(error.response.data.message)
   }).finally(() => {
-        this.billingLoading = false
+    billingLoading = false
   })
-    }
-  },
-
-  computed: {}
 }
 </script>

client/pages/settings/index.vue

@@ -1,105 +1,5 @@
-<template>
+<script setup>
-  <div class="bg-white">
+useRouter().push({
-    <div class="flex bg-gray-50">
+  name: 'settings-profile'
-      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+})
-        <div class="pt-4 pb-0">
-          <div class="flex">
-            <h2 class="flex-grow text-gray-900">
-              My Account
-            </h2>
-          </div>
-          <ul class="flex text-gray-500">
-            <li>{{ user.email }}</li>
-          </ul>
-
-          <div class="mt-4 border-b border-gray-200 dark:border-gray-700">
-            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
-              <li v-for="(tab, i) in tabsList" :key="i+1" class="mr-6">
-                <NuxtLink :to="{ name: tab.route }"
-                             class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
-                             active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
-                >
-                  {{ tab.name }}
-                </NuxtLink>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="flex bg-white">
-      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
-        <div class="mt-8 pb-0">
-          <router-view v-slot="{ Component }">
-            <transition name="page" mode="out-in">
-              <component :is="Component" />
-            </transition>
-          </router-view>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../stores/auth'
-
-export default {
-  middleware: 'auth',
-
-  setup () {
-    const authStore = useAuthStore()
-    return {
-      user: computed(() => authStore.user)
-    }
-  },
-
-  data () {
-    return {
-    }
-  },
-
-  computed: {
-    tabsList () {
-      const tabs = [
-        {
-          name: 'Profile',
-          route: 'settings-profile'
-        },
-        {
-          name: 'Workspace Settings',
-          route: 'settings-workspace'
-        },
-        {
-          name: 'Password',
-          route: 'settings-password'
-        },
-        {
-          name: 'Delete Account',
-          route: 'settings-account'
-        }
-      ]
-
-      if (this.user.is_subscribed) {
-        tabs.splice(1, 0, {
-          name: 'Billing',
-          route: 'settings-billing'
-        })
-      }
-
-      if (this.user.admin) {
-        tabs.push({
-          name: 'Admin',
-          route: 'settings-admin'
-        })
-      }
-
-      return tabs
-    }
-  },
-
-  methods: {
-  }
-}
 </script>

client/pages/settings/password.vue

@@ -6,8 +6,6 @@
     <small class="text-gray-600">Manage your password.</small>
 
     <form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
-      <alert-success class="mb-5" :form="form" message="Password updated." />
-
       <!-- Password -->
       <text-input native-type="password"
                   name="password" :form="form" label="Password" :required="true"
@@ -26,27 +24,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import SeoMeta from '../../mixins/seo-meta.js'
+const metaTitle = 'Password'
-
+let form = useForm({
-export default {
-  mixins: [SeoMeta],
-  scrollToTop: false,
-
-  data: () => ({
-    metaTitle: 'Password',
-    form: useForm({
   password: '',
   password_confirmation: ''
+})
+
+const update = () => {
+  form.patch('/settings/password').then((response) => {
+    form.reset()
+    useAlert().success('Password updated.')
   })
-  }),
-
-  methods: {
-    async update () {
-      await this.form.patch('/api/settings/password')
-
-      this.form.reset()
-    }
-  }
 }
 </script>

client/pages/settings/profile.vue

@@ -6,8 +6,6 @@
     <small class="text-gray-600">Update your username and manage your account details.</small>
 
     <form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
-      <alert-success class="mb-5" :form="form" message="Your info has been updated!" />
-
       <!-- Name -->
       <text-input name="name" :form="form" label="Name" :required="true" />
 
@@ -22,39 +20,26 @@
   </div>
 </template>
 
-<script>
+<script setup>
-export default {
+const authStore = useAuthStore()
-  scrollToTop: false,
+const user = computed(() => authStore.user)
-
+const metaTitle = 'Profile'
-  setup () {
+let form = useForm({
-    const authStore = useAuthStore()
-    return {
-      authStore,
-      user : computed(() => authStore.user)
-    }
-  },
-
-  data: () => ({
-    metaTitle: 'Profile',
-    form: useForm({
   name: '',
   email: ''
+})
+
+const update = () => {
+  form.patch('/settings/profile').then((response) => {
+    authStore.updateUser(response)
+    useAlert().success('Your info has been updated!')
   })
-  }),
-
-  created () {
-    // Fill the form with user data.
-    this.form.keys().forEach(key => {
-      this.form[key] = this.user[key]
-    })
-  },
-
-  methods: {
-    async update () {
-      const { data } = await this.form.patch('/api/settings/profile')
-
-      this.authStore.updateUser(data)
-    }
-  }
 }
+
+onBeforeMount(() => {
+  // Fill the form with user data.
+  form.keys().forEach(key => {
+    form[key] = user.value[key]
+  })
+})
 </script>

client/pages/settings/workspace.vue

@@ -46,7 +46,7 @@
         />
         <p class="text-gray-500 text-sm">
           Read our <a href="#"
-                      @click.prevent="$crisp.push(['do', 'helpdesk:article:open', ['en', 'how-to-use-my-own-domain-9m77g7']])"
+                      @click.prevent="crisp.openHelpdeskArticle('how-to-use-my-own-domain-9m77g7')"
           >custom
             domain instructions</a> to learn how to use your own domain.
         </p>
@@ -65,7 +65,7 @@
           Save Domains
         </v-button>
         <v-button v-if="workspaces.length > 1" color="white" class="group w-full sm:w-auto" :loading="loading"
-                  @click="deleteWorkspace(workspace)"
+                  @click="deleteWorkspace(workspace.id)"
         >
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 -mt-1 inline group-hover:text-red-700" fill="none"
                viewBox="0 0 24 24" stroke="currentColor"
@@ -114,84 +114,74 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import TextAreaInput from '../../components/forms/TextAreaInput.vue'
+import {watch} from "vue";
-import axios from 'axios'
+import opnformConfig from "~/opnform.config.js";
+import {fetchAllWorkspaces} from "~/stores/workspaces.js";
 
-export default {
+const crisp = useCrisp()
-  components: { TextAreaInput },
+const workspacesStore = useWorkspacesStore()
-  scrollToTop: false,
+const workspaces = computed(() => workspacesStore.getAll)
-
+let loading = computed(() => workspacesStore.loading)
-  setup () {
+const metaTitle = 'Workspaces'
-    const formsStore = useFormsStore()
+let form = useForm({
-    const workspacesStore = useWorkspacesStore()
-    return {
-      formsStore,
-      workspacesStore,
-      workspaces: computed(() => workspacesStore.content),
-      loading: computed(() => workspacesStore.loading)
-    }
-  },
-
-  data: () => ({
-    metaTitle: 'Workspaces',
-    form: useForm({
   name: '',
   emoji: ''
-    }),
+})
-    workspaceModal: false,
+let workspaceModal = ref(false)
-    customDomains: '',
+let customDomains = ''
-    customDomainsLoading: false
+let customDomainsLoading = ref(false)
-  }),
 
-  mounted () {
+let workspace = computed(() => workspacesStore.getCurrent)
-    this.workspacesStore.loadIfEmpty()
+let customDomainsEnabled = computed(() => opnformConfig.custom_domains_enabled)
-    this.initCustomDomains()
-  },
 
-  computed: {
+watch(() => workspace, () => {
-    workspace () {
+  initCustomDomains()
-      return this.workspacesStore.getCurrent()
+})
-    },
-    customDomainsEnabled () {
-      return this.$config.custom_domains_enabled
-    }
-  },
 
-  methods: {
+onMounted(() => {
-    saveChanges () {
+  fetchAllWorkspaces()
-      if (this.customDomainsLoading) return
+  initCustomDomains()
-      this.customDomainsLoading = true
+})
+
+const saveChanges = () => {
+  if (customDomainsLoading.value) return
+  customDomainsLoading.value = true
   // Update the workspace custom domain
-      axios.put('/api/open/workspaces/' + this.workspace.id + '/custom-domains', {
+  opnFetch('/open/workspaces/' + workspace.value.id + '/custom-domains', {
-        custom_domains: this.customDomains.split('\n')
+    method:'PUT',
+    custom_domains: customDomains.split('\n')
       .map(domain => domain.trim())
       .filter(domain => domain && domain.length > 0)
-      }).then((response) => {
+  }).then((data) => {
-        this.workspacesStore.addOrUpdate(response.data)
+    workspacesStore.addOrUpdate(data)
     useAlert().success('Custom domains saved.')
   }).catch((error) => {
     useAlert().error('Failed to update custom domains: ' + error.response.data.message)
   }).finally(() => {
-        this.customDomainsLoading = false
+    customDomainsLoading.value = false
   })
-    },
+}
-    initCustomDomains () {
+
-      if (!this.workspace) return
+const initCustomDomains = () => {
-      this.customDomains = this.workspace.custom_domains.join('\n')
+  if (!workspace || !workspace.value.custom_domains) return
-    },
+  customDomains = workspace.value.custom_domains.join('\n')
-    deleteWorkspace (workspace) {
+}
-      if (this.workspaces.length <= 1) {
+
+const deleteWorkspace = (workspaceId) => {
+  if (workspaces.length <= 1) {
     useAlert().error('You cannot delete your only workspace.')
     return
   }
   useAlert().confirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => {
-        this.workspacesStore.delete(workspace.id).then(() => {
+    opnFetch('/open/workspaces/' + workspaceId, {method:'DELETE'}).then((data) => {
       useAlert().success('Workspace successfully removed.')
+      workspacesStore.remove(workspaceId)
     })
   })
-    },
+}
-    isUrl (str) {
+
+const isUrl = (str) => {
   const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
     '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
     '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
@@ -199,18 +189,13 @@ export default {
     '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
     '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
   return !!pattern.test(str)
-    },
-    async createWorkspace() {
-      const {data} = await this.form.post('/api/open/workspaces/create')
-      this.workspacesStore.load()
-      this.workspaceModal = false
-    }
-  },
-
-  watch: {
-    workspace () {
-      this.initCustomDomains()
-    }
-  }
 }
+const createWorkspace = () => {
+  form.post('/open/workspaces/create').then((response) => {
+    fetchAllWorkspaces()
+    workspaceModal.value = false
+    useAlert().success('Workspace successfully created.')
+  })
+}
+
 </script>

client/stores/workspaces.js

@@ -35,7 +35,7 @@ export const useWorkspacesStore = defineStore('workspaces', () => {
   const remove = (itemId) => {
     contentStore.remove(itemId)
     if (currentId.value === itemId) {
-      setCurrentId(contentStore.length.value > 0 ? contentStore.getAll[0].id : null)
+      setCurrentId(contentStore.length.value > 0 ? contentStore.getAll.value[0].id : null)
     }
   }