From c97be832d733e1c1bfb71a644938f3167d560cce Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 18 Jan 2024 11:37:04 +0100
Subject: [PATCH] Fix sentry tracked issues

---
 client/components/forms/PhoneInput.vue        |   2 +-
 .../form-components/FormCustomSeo.vue         |  33 ++--
 .../open/tables/components/OpenFile.vue       |   4 +-
 .../pages/auth/components/LoginForm.vue       |  41 ++---
 .../pages/forms/show/RegenerateFormLink.vue   |   2 +-
 client/error.vue                              |  28 ++--
 client/pages/forms/[slug]/edit.vue            | 145 ++++++++----------
 client/pages/forms/[slug]/show.vue            |   2 +-
 client/pages/settings/workspace.vue           |   2 +-
 client/plugins/sentry.js                      |   8 +
 10 files changed, 136 insertions(+), 131 deletions(-)

diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index ae530da..2dea39c 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -130,7 +130,7 @@ export default {
       }) ?? null
     },
     onInput (event) {
-      this.inputVal = event.target.value.replace(/[^0-9]/g, '')
+      this.inputVal = event?.target?.value.replace(/[^0-9]/g, '')
     },
     onChangeCountryCode () {
       if (!this.selectedCountryCode && this.countries.length > 0) {
diff --git a/client/components/open/forms/components/form-components/FormCustomSeo.vue b/client/components/open/forms/components/form-components/FormCustomSeo.vue
index b6ed129..12a460b 100644
--- a/client/components/open/forms/components/form-components/FormCustomSeo.vue
+++ b/client/components/open/forms/components/form-components/FormCustomSeo.vue
@@ -1,7 +1,8 @@
 <template>
   <editor-options-panel name="Link Settings - SEO" :already-opened="false" :has-pro-tag="true">
     <template #icon>
-      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+           stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round"
               d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
         />
@@ -10,7 +11,8 @@
     <p class="mt-4 text-gray-500 text-sm">
       Customize the link, images and text that appear when you share your form on other sites (Open Graph).
     </p>
-    <select-input v-if="customDomainAllowed" v-model="form.custom_domain" :disabled="customDomainOptions.length <= 0" :options="customDomainOptions" name="type"
+    <select-input v-if="customDomainAllowed" v-model="form.custom_domain" :disabled="customDomainOptions.length <= 0"
+                  :options="customDomainOptions" name="type"
                   class="mt-4" label="Form Domain" placeholder="yourdomain.com"
     />
     <text-input v-model="form.seo_meta.page_title" name="page_title" class="mt-4"
@@ -26,50 +28,49 @@
 </template>
 
 <script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
+import {useWorkingFormStore} from '../../../../../stores/working_form'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 
 export default {
-  components: { EditorOptionsPanel },
+  components: {EditorOptionsPanel},
   props: {},
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
     return {
       workspacesStore: useWorkspacesStore(),
       workingFormStore
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
   computed: {
     form: {
-      get () {
+      get() {
         return this.workingFormStore.content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.workingFormStore.set(value)
       }
     },
-    workspace () {
+    workspace() {
       return this.workspacesStore.getCurrent
     },
-    customDomainOptions () {
-      return this.workspace.custom_domains.map((domain) => {
+    customDomainOptions() {
+      return this.workspace.custom_domains ? this.workspace.custom_domains.map((domain) => {
         return {
           name: domain,
           value: domain
         }
-      })
+      }) : []
     },
-    customDomainAllowed () {
+    customDomainAllowed() {
       return useRuntimeConfig().public.customDomainsEnabled
     }
   },
   watch: {},
-  mounted () {
+  mounted() {
     ['page_title', 'page_description', 'page_thumbnail'].forEach((keyname) => {
       if (this.form.seo_meta[keyname] === undefined) {
         this.form.seo_meta[keyname] = null
diff --git a/client/components/open/tables/components/OpenFile.vue b/client/components/open/tables/components/OpenFile.vue
index 3291715..d22daf5 100644
--- a/client/components/open/tables/components/OpenFile.vue
+++ b/client/components/open/tables/components/OpenFile.vue
@@ -38,14 +38,14 @@ export default {
 
   computed: {
     parsedFiles() {
-      return this.value.map((file) => {
+      return this.value ? this.value.map((file) => {
         return {
           file_name: file.file_name,
           file_url: file.file_url,
           displayed_file_name: this.displayedFileName(file.file_name),
           is_image: !this.failedImages.includes(file.file_url) && this.isImage(file.file_name)
         }
-      })
+      }): []
     }
   },
 
diff --git a/client/components/pages/auth/components/LoginForm.vue b/client/components/pages/auth/components/LoginForm.vue
index 0002564..eb20a13 100644
--- a/client/components/pages/auth/components/LoginForm.vue
+++ b/client/components/pages/auth/components/LoginForm.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <forgot-password-modal :show="showForgotModal" @close="showForgotModal=false" />
+    <forgot-password-modal :show="showForgotModal" @close="showForgotModal=false"/>
 
     <form class="mt-4" @submit.prevent="login" @keydown="form.onKeydown($event)">
       <!-- Email -->
-      <text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address" />
+      <text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address"/>
 
       <!-- Password -->
       <text-input native-type="password" placeholder="Your password"
@@ -18,7 +18,8 @@
         </v-checkbox>
 
         <div class="w-full md:w-1/2 text-right">
-          <a href="#" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700" @click.prevent="showForgotModal=true">
+          <a href="#" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
+             @click.prevent="showForgotModal=true">
             Forgot your password?
           </a>
         </div>
@@ -58,7 +59,7 @@ export default {
     }
   },
 
-  setup () {
+  setup() {
     return {
       authStore: useAuthStore(),
       formsStore: useFormsStore(),
@@ -76,27 +77,29 @@ export default {
   }),
 
   methods: {
-    async login () {
+    login() {
       // Submit the form.
-      const data = await this.form.post('login')
+      this.form.post('login').then(async (data) => {
+        // Save the token.
+        this.authStore.setToken(data.token)
 
-      // Save the token.
-      this.authStore.setToken(data.token)
+        const userData = await opnFetch('user')
+        this.authStore.setUser(userData)
 
-      const userData = await opnFetch('user')
-      this.authStore.setUser(userData)
+        const workspaces = await fetchAllWorkspaces()
+        this.workspaceStore.set(workspaces.data.value)
 
-      const workspaces = await fetchAllWorkspaces()
-      this.workspaceStore.set(workspaces.data.value)
+        // Load forms
+        this.formsStore.loadAll(this.workspaceStore.currentId)
 
-      // Load forms
-      this.formsStore.loadAll(this.workspaceStore.currentId)
+        // Redirect home.
+        this.redirect()
+      }).catch(() => {
 
-      // Redirect home.
-      this.redirect()
+      })
     },
 
-    redirect () {
+    redirect() {
       if (this.isQuick) {
         this.$emit('afterQuickLogin')
         return
@@ -106,10 +109,10 @@ export default {
       const router = useRouter()
 
       if (intendedUrlCookie.value) {
-        router.push({ path: intendedUrlCookie.value })
+        router.push({path: intendedUrlCookie.value})
         useCookie('intended_url').value = null
       } else {
-        router.push({ name: 'home' })
+        router.push({name: 'home'})
       }
     }
   }
diff --git a/client/components/pages/forms/show/RegenerateFormLink.vue b/client/components/pages/forms/show/RegenerateFormLink.vue
index 40e3aa7..2c0c78f 100644
--- a/client/components/pages/forms/show/RegenerateFormLink.vue
+++ b/client/components/pages/forms/show/RegenerateFormLink.vue
@@ -103,7 +103,7 @@ export default {
       if (this.loadingNewLink) return
       this.loadingNewLink = true
       opnFetch(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option, {method:'PUT'}).then((data) => {
-        this.formsStore.addOrUpdate(data.form)
+        this.formsStore.save(data.form)
         this.$router.push({name: 'forms-slug-show-share', params: {slug: data.form.slug}})
         useAlert().success(data.message)
         this.loadingNewLink = false
diff --git a/client/error.vue b/client/error.vue
index 510bbc0..e77a954 100644
--- a/client/error.vue
+++ b/client/error.vue
@@ -1,21 +1,23 @@
 <template>
-  <NuxtLayout>
-    <div class="flex mt-6">
-      <div class="w-full md:w-2/3 md:mx-auto md:max-w-md">
-        <NuxtImg alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5"/>
+  <div>
+    <NuxtLayout>
+      <div class="flex mt-6">
+        <div class="w-full md:w-2/3 md:mx-auto md:max-w-md">
+          <NuxtImg alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5"/>
 
-        <h1 class="mb-4 font-semibold text-3xl text-gray-900">
-          Page Not Found
-        </h1>
+          <h1 class="mb-4 font-semibold text-3xl text-gray-900">
+            Page Not Found
+          </h1>
 
-        <div class="links">
-          <NuxtLink :to="{ name: 'index' }" class="hover:underline text-gray-700">
-            Go Home
-          </NuxtLink>
+          <div class="links">
+            <NuxtLink :to="{ name: 'index' }" class="hover:underline text-gray-700">
+              Go Home
+            </NuxtLink>
+          </div>
         </div>
       </div>
-    </div>
-  </NuxtLayout>
+    </NuxtLayout>
+  </div>
 </template>
 
 <script setup>
diff --git a/client/pages/forms/[slug]/edit.vue b/client/pages/forms/[slug]/edit.vue
index d32d215..1f69865 100644
--- a/client/pages/forms/[slug]/edit.vue
+++ b/client/pages/forms/[slug]/edit.vue
@@ -8,99 +8,90 @@
       {{ error }}
     </div>
     <div v-else class="text-center mt-4 py-6">
-      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
+      <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
     </div>
   </div>
 </template>
 
-<script>
-import { computed } from 'vue'
-import Breadcrumb from '~/components/global/Breadcrumb.vue'
+<script setup>
+import {computed} from 'vue'
 import FormEditor from "~/components/open/forms/components/FormEditor.vue";
 import {hash} from "~/lib/utils.js";
 
-export default {
-  name: 'EditForm',
-  components: { Breadcrumb, FormEditor },
+const formsStore = useFormsStore()
+const workingFormStore = useWorkingFormStore()
+const workspacesStore = useWorkspacesStore()
 
-  beforeRouteLeave (to, from, next) {
-    if (this.isDirty()) {
-      return useAlert().confirm('Changes you made may not be saved. Are you sure want to leave?', () => {
-        window.onbeforeunload = null
-        next()
-      }, () => {})
-    }
-    next()
-  },
+if (!formsStore.allLoaded) {
+  formsStore.startLoading()
+}
+const updatedForm = storeToRefs(workingFormStore).content
+const form = computed(() => formsStore.getByKey(useRoute().params.slug))
+const formsLoading = computed(() => formsStore.loading)
 
-  setup () {
-    const formsStore = useFormsStore()
-    const workingFormStore = useWorkingFormStore()
-    const workspacesStore = useWorkspacesStore()
+const error = ref(null)
+const formInitialHash = ref(null)
 
-    if (!formsStore.allLoaded) {
-      formsStore.startLoading()
-    }
-    const updatedForm = storeToRefs(workingFormStore).content
-    const form = computed(() => formsStore.getByKey(useRoute().params.slug))
+function isDirty() {
+  return formInitialHash.value && updatedForm.value && formInitialHash.value !== hash(JSON.stringify(updatedForm.value.data() ?? null))
+}
 
-    // Create a form.id watcher that updates working form
-    watch(form, (form) => {
-      if (form) {
-        updatedForm.value = useForm(form)
-      }
+function initUpdatedForm() {
+  if (!form || !form.value) {
+    return
+  }
+
+  updatedForm.value = useForm(form.value)
+  if (!updatedForm.value) {
+    return
+  }
+  formInitialHash.value = hash(JSON.stringify(updatedForm.value.data()))
+
+  if (updatedForm.value && (!updatedForm.value.notification_settings || Array.isArray(updatedForm.value.notification_settings))) {
+    updatedForm.value.notification_settings = {}
+  }
+}
+
+// Create a form.id watcher that updates working form
+watch(form, (form) => {
+  if (form.value) {
+    initUpdatedForm()
+  }
+})
+
+onBeforeRouteLeave((to, from, next) => {
+  if (isDirty()) {
+    return useAlert().confirm('Changes you made may not be saved. Are you sure want to leave?', () => {
+      window.onbeforeunload = null
+      next()
+    }, () => {
     })
+  }
+  next()
+})
 
-    useOpnSeoMeta({
-      title: 'Edit ' + ((form && form.value) ? form.value.title : 'Your Form')
-    })
-    definePageMeta({
-      middleware: "auth"
-    })
-
-    return {
-      formsStore,
-      workingFormStore,
-      workspacesStore,
-      updatedForm,
-      form,
-      formsLoading: computed(() => formsStore.loading),
-    }
-  },
-
-  data () {
-    return {
-      error: null,
-      formInitialHash: null
-    }
-  },
-
-  computed: {
-  },
-
-  async beforeMount() {
+onBeforeMount(() => {
+  if (process.client) {
     window.onbeforeunload = () => {
-      if (this.isDirty()) {
+      if (isDirty()) {
         return false
       }
     }
-
-    if (!this.form && !this.formsStore.allLoaded) {
-      await this.formsStore.loadAll(this.workspacesStore.currentId)
-    }
-
-    this.updatedForm = useForm(this.form)
-    this.formInitialHash = hash(JSON.stringify(this.updatedForm.data()))
-
-    if (this.updatedForm && (!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings))) {
-      this.updatedForm.notification_settings = {}
-    }
-  },
-
-  methods: {
-    isDirty () {
-      return this.formInitialHash && this.formInitialHash !== hash(JSON.stringify(this.updatedForm.data()))
-    }
   }
-}
+
+  if (!form.value && !formsStore.allLoaded) {
+    formsStore.loadAll(workspacesStore.currentId).then(()=>{
+      initUpdatedForm()
+    })
+  } else {
+    initUpdatedForm()
+  }
+})
+
+useOpnSeoMeta({
+  title: 'Edit ' + ((form && form.value) ? form.value.title : 'Your Form')
+})
+definePageMeta({
+  middleware: "auth"
+})
 </script>
diff --git a/client/pages/forms/[slug]/show.vue b/client/pages/forms/[slug]/show.vue
index c8933d8..1ba1340 100644
--- a/client/pages/forms/[slug]/show.vue
+++ b/client/pages/forms/[slug]/show.vue
@@ -189,7 +189,7 @@ onMounted(() => {
 
 watch(() => form?.value?.id, (id) => {
   if (id) {
-    workingFormStore.set(form)
+    workingFormStore.set(form.value)
   }
 })
 
diff --git a/client/pages/settings/workspace.vue b/client/pages/settings/workspace.vue
index fc19c06..6d1a5f9 100644
--- a/client/pages/settings/workspace.vue
+++ b/client/pages/settings/workspace.vue
@@ -160,7 +160,7 @@ const saveChanges = () => {
       .map(domain => domain ? domain.trim() : null)
       .filter(domain => domain && domain.length > 0)
   }).then((data) => {
-    workspacesStore.addOrUpdate(data)
+    workspacesStore.save(data)
     useAlert().success('Custom domains saved.')
   }).catch((error) => {
     useAlert().error('Failed to update custom domains: ' + error.response.data.message)
diff --git a/client/plugins/sentry.js b/client/plugins/sentry.js
index 221d452..1542c5c 100644
--- a/client/plugins/sentry.js
+++ b/client/plugins/sentry.js
@@ -54,6 +54,14 @@ export default defineNuxtPlugin({
       replaysOnErrorSampleRate: config.public.SENTRY_ERROR_REPLAY_SAMPLE_RATE,
 
       beforeSend(event) {
+        if (event.exception.values.length) {
+          // Don't send validation exceptions to Sentry
+          if (event.exception.values[0].type === 'FetchError' &&
+            event.exception.values[0].value.includes('422')
+          ) {
+            return null
+          }
+        }
         return event;
       },
     })