Apply bug fixes from Noteforms (#341)

* rename const emits to emit

* auth bug fixes

* refactor page meta

* fix file input empty ref

* setProperties working_form store

* add form creator to form list

---------

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

client/components/forms/FileInput.vue

@@ -175,7 +175,7 @@ export default {
       }
     },
     openFileUpload () {
-      if (this.disabled) return
+      if (this.disabled || !this.$refs['actual-input']) return
       this.$refs['actual-input'].click()
     },
     manualFileUpload (e) {

client/components/forms/components/VSwitch.vue

@@ -13,10 +13,10 @@ const props = defineProps({
   modelValue: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false }
 })
-const emits = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 
 const onClick = () => {
   if (props.disabled) return
-  emits('update:modelValue', !props.modelValue)
+  emit('update:modelValue', !props.modelValue)
 }
 </script>

client/components/global/Modal.vue

@@ -71,7 +71,7 @@ const props = defineProps({
   }
 })
 
-const emits = defineEmits(['close'])
+const emit = defineEmits(['close'])
 
 useHead({
   bodyAttrs: {
@@ -152,7 +152,7 @@ const onLeave = (el, done) => {
 
 const close = () => {
   if (props.closeable) {
-    emits('close')
+    emit('close')
   }
 }
 

client/components/global/transitions/Collapsible.vue

@@ -17,7 +17,7 @@ const props = defineProps({
   modelValue: {type: Boolean},
   maxHeight: {type: Number, default: 200},
 })
-const emits = defineEmits(['click-away'])
+const emit = defineEmits(['click-away'])
 
 const motion = ref(null)
 const collapsible = ref(null)
@@ -47,6 +47,6 @@ const onLeave = (el, done) => {
 }
 
 const onClickAway = (event) => {
-  emits('click-away', event)
+  emit('click-away', event)
 }
 </script>

client/pages/forms/[slug]/edit.vue

@@ -33,9 +33,11 @@ const error = ref(null)
 const formInitialHash = ref(null)
 
 function isDirty() {
-  return formInitialHash.value &&
+  try {
-    updatedForm.value &&
+    return formInitialHash.value && updatedForm.value && formInitialHash.value !== hash(JSON.stringify(updatedForm?.value?.data() ?? null))
-    formInitialHash.value !== hash(JSON.stringify(updatedForm?.value?.data() ?? null))
+  } catch (e) {
+    return false
+  }
 }
 
 function initUpdatedForm() {

client/pages/forms/[slug]/index.vue

@@ -123,7 +123,11 @@ onMounted(() => {
     if (process.client) {
       if (form.value.custom_code) {
         const scriptEl = document.createRange().createContextualFragment(form.value.custom_code)
+        try {
           document.head.append(scriptEl)
+        } catch (e) {
+          console.error('Error appending custom code', e)
+        }
       }
       if (!isIframe) focusOnFirstFormElement()
     }
@@ -135,22 +139,28 @@ onBeforeRouteLeave((to, from) => {
   disableDarkMode()
 })
 
+const pageMeta = computed(() => {
+  if (form.value && form.value.is_pro && form.value.seo_meta) {
+    return form.value.seo_meta
+  }
+  return {}
+})
 useOpnSeoMeta({
   title: () => {
-    if (form && form.value?.is_pro && form.value.seo_meta.page_title) {
+    if (pageMeta.value.page_title) {
-      return form.value.seo_meta.page_title
+      return pageMeta.value.page_title
     }
     return form.value ? form.value.title : 'Create beautiful forms'
   },
   description: () => {
-    if (form && form.value?.is_pro && form.value.seo_meta.page_description) {
+    if (pageMeta.value.description) {
-      return form.value.seo_meta.page_description
+      return pageMeta.value.description
     }
     return (form && form.value?.description) ? form.value?.description.substring(0, 160) : null
   },
   ogImage: () => {
-    if (form && form.value?.is_pro && form.value.seo_meta.page_thumbnail) {
+    if (pageMeta.value.page_thumbnail) {
-      return form.value.seo_meta.page_thumbnail
+      return pageMeta.value.page_thumbnail
     }
     return (form && form.value?.cover_picture) ? form.value?.cover_picture : null
   },
@@ -160,7 +170,7 @@ useOpnSeoMeta({
 })
 useHead({
   titleTemplate: (titleChunk) => {
-    if (form && form.value?.is_pro && form.value?.seo_meta.page_title) {
+    if (pageMeta.value.page_title) {
       // Disable template if custom SEO title
       return titleChunk
     }

client/pages/home.vue

@@ -69,17 +69,21 @@
                   <NuxtLink :to="{name:'forms-slug-show-submissions', params: {slug:form.slug}}"
                             class="absolute inset-0"/>
                   <span class="font-semibold text-gray-900 dark:text-white">{{ form.title }}</span>
-                  <ul class="flex text-gray-500">
+                  <ul class="flex text-gray-500 text-sm gap-4">
-                    <li class="pr-1">
+                    <li class="pr-1 mr-3">
                       {{ form.views_count }} view{{ form.views_count > 0 ? 's' : '' }}
                     </li>
-                    <li class="list-disc ml-6 pr-1">
+                    <li class="list-disc mr-3">
                       {{ form.submissions_count }}
                       submission{{ form.submissions_count > 0 ? 's' : '' }}
                     </li>
-                    <li class="list-disc ml-6">
+                    <li class="list-disc mr-3">
                       Edited {{ form.last_edited_human }}
                     </li>
+                    <li class='list-disc hidden lg:list-item'>
+                      By
+                      {{ form.creator.name }}
+                    </li>
                   </ul>
                   <div v-if="['draft','closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)"
                        class="mt-1 flex items-center flex-wrap gap-3">

client/pages/settings/password.vue

@@ -41,6 +41,8 @@ const update = () => {
   form.patch('/settings/password').then((response) => {
     form.reset()
     useAlert().success('Password updated.')
+  }).catch((error) => {
+    console.error(error)
   })
 }
 </script>

client/plugins/sentry.js

@@ -46,7 +46,7 @@ export default defineNuxtPlugin({
         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')
+            (event.exception.values[0].value.includes('422') || event.exception.values[0].value.includes('401'))
           ) {
             return null
           }

client/stores/working_form.js

@@ -14,7 +14,7 @@ export const useWorkingFormStore = defineStore('working_form', {
       this.content = form
     },
     setProperties (properties) {
-      this.content.properties = properties
+      this.content.properties = [...properties]
     },
     openSettingsForField (index) {
       // If field is passed, compute index