Merge branch 'main' into c0656-moved-form-to-another-workpace

Author: JhumanJ

.github/workflows/laravel.yml

@@ -87,9 +87,6 @@ jobs:
           # Maps tcp port 3306 on service container to the host
           - 3306:3306
 
-    concurrency:
-      group: 'run-tests'
-
     strategy:
       fail-fast: true
       matrix:

README.md

@@ -15,7 +15,7 @@
 <a href="https://github.com/JhumanJ/OpnForm/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License">
 <a href="https://github.com/JhumanJ/OpnForm/issues/new"><img src="https://img.shields.io/badge/Report a bug-Github-%231F80C0" alt="Report a bug"></a>
 <a href="https://github.com/JhumanJ/OpnForm/discussions/new?category=q-a"><img src="https://img.shields.io/badge/Ask a question-Github-%231F80C0" alt="Ask a question"></a>
-<a href="https://opnform.featurebase.app/"><img src="https://img.shields.io/badge/Feature request-Featurebase-%231F80C0" alt="Ask a question"></a>
+<a href="https://feedback.opnform.com"><img src="https://img.shields.io/badge/Feature request-Featurebase-%231F80C0" alt="Ask a question"></a>
 <a href="https://discord.gg/YTSjU2a9TS"><img src="https://dcbadge.vercel.app/api/server/YTSjU2a9TS?style=flat" alt="Ask a question"></a>
 <a href="https://console.algora.io/org/OpnForm/bounties?status=open"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2FOpnForm%2Fbounties%3Fstatus%3Dopen" alt="Open Bounties"></a>
 <a href="https://console.algora.io/org/OpnForm/bounties?status=completed"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2FOpnForm%2Fbounties%3Fstatus%3Dcompleted" alt="Rewarded Bounties"></a>

client/app.vue

@@ -29,19 +29,21 @@
     <ToolsStopImpersonation/>
 
     <Notifications />
+    <feature-base/>
   </div>
 </template>
 
 <script>
 import {computed} from 'vue'
 import {useAppStore} from '~/stores/app'
+import FeatureBase from "~/components/vendor/FeatureBase.vue";
 
 export default {
   el: '#app',
 
   name: 'OpnForm',
 
-  components: {},
+  components: {FeatureBase},
 
   setup() {
     const config = useRuntimeConfig()

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/InputHelp.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex mb-1 input-help">
     <small :class="theme.default.help" class="grow flex">
-      <slot name="help"><span class="field-help" v-html="help" /></slot>
+      <slot name="help"><span v-if="help" class="field-help" v-html="help" /></slot>
     </small>
     <slot name="after-help">
       <small class="flex-grow"  />

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/Navbar.vue

@@ -16,7 +16,19 @@
           >
             Templates
           </NuxtLink>
-          <NuxtLink v-if="$route.name !== 'ai-form-builder'" :to="{name:'ai-form-builder'}"
+          <template v-if="featureBaseEnabled">
+            <button v-if="user" @click.prevent="openChangelog"
+                    class="text-sm text-gray-600 dark:text-white hidden sm:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
+            >
+              What's new? <span id="fb-update-badge"></span>
+            </button>
+            <a :href="opnformConfig.links.changelog_url" target="_blank" v-else
+               class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
+            >
+              What's new?
+            </a>
+          </template>
+          <NuxtLink v-if="$route.name !== 'ai-form-builder' && user === null" :to="{name:'ai-form-builder'}"
                     class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
           >
             AI Form Builder
@@ -103,8 +115,10 @@
                   <NuxtLink :to="{ name: 'settings-admin' }" v-if="user.moderator"
                             class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-2">
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                         stroke="currentColor" class="w-4 h-4 mr-2">
+                      <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
                     </svg>
                     Admin
                   </NuxtLink>
@@ -190,6 +204,9 @@ export default {
     paidPlansEnabled() {
       return this.config.public.paidPlansEnabled
     },
+    featureBaseEnabled() {
+      return this.config.public.featureBaseOrganization !== null
+    },
     showAuth() {
       return this.$route.name && this.$route.name !== 'forms-slug'
     },
@@ -217,6 +234,10 @@ export default {
   },
 
   methods: {
+    openChangelog() {
+      if (process.server) return
+      window.Featurebase('manually_open_changelog_popup')
+    },
     async logout() {
       // Log out the user.
       this.authStore.logout()

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/components/open/forms/components/form-components/FormNotifications.vue

@@ -54,7 +54,7 @@ export default {
 
   computed: {
     zapierUrl () {
-      opnformConfig.links.zapier_integration
+      return opnformConfig.links.zapier_integration
     }
   },
 }

client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -36,7 +36,7 @@
     </h5>
     <select-input :key="resetKey" v-model="logic.actions" name="actions"
                   :multiple="true" class="mt-1" placeholder="Actions..."
-                  help="Action(s) triggerred when above conditions are true"
+                  help="Action(s) triggered when above conditions are true"
                   :options="actionOptions"
                   @update:model-value="onActionInput"
     />

client/components/vendor/FeatureBase.vue

@@ -0,0 +1,71 @@
+<script setup>
+import {onMounted} from "vue";
+
+const scriptLoaded = ref(false);
+const user = computed(() => useAuthStore().user);
+const featureBaseOrganization = useRuntimeConfig().public.featureBaseOrganization;
+
+const loadScript = () => {
+  if (scriptLoaded.value || !user.value || !featureBaseOrganization) return;
+  const script = document.createElement("script");
+  script.src = "https://do.featurebase.app/js/sdk.js";
+  script.id = "featurebase-sdk";
+  document.head.appendChild(script);
+  scriptLoaded.value = true;
+};
+
+const setupForUser = () => {
+  if (process.server || !user.value || !featureBaseOrganization) return
+  window.Featurebase(
+    "identify",
+    {
+      organization: featureBaseOrganization,
+      email: user.value.email,
+      name: user.value.name,
+      id: user.value.id.toString(),
+      profilePicture: user.value.photo_url
+    }
+  );
+
+  window.Featurebase("initialize_changelog_widget", {
+    organization: featureBaseOrganization,
+    placement: "right",
+    theme: "light",
+    alwaysShow: true,
+    fullscreenPopup: true,
+    usersName: user.value?.name
+  })
+
+  window.Featurebase("initialize_feedback_widget", {
+    organization: featureBaseOrganization,
+    theme: "light",
+    placement: "right",
+    email: user.value?.email,
+    usersName: user.value?.name
+  });
+}
+
+onMounted(() => {
+  if (process.server) return
+
+  // Setup base
+  if (!window.hasOwnProperty('Featurebase') || typeof window.Featurebase !== "function") {
+    window.Featurebase = function () {
+      (window.Featurebase.q = window.Featurebase.q || []).push(arguments);
+    };
+  }
+
+  if (!user.value) return
+  loadScript()
+  setupForUser()
+})
+
+watch(user, (val) => {
+  if (process.server || !val) return
+
+  loadScript()
+  setupForUser()
+});
+
+</script>
+<template></template>

client/opnform.config.js

@@ -8,14 +8,14 @@ export default {
   "links": {
     "help_url": "https://github.com/JhumanJ/OpnForm/discussions",
     "helpdesk_sitemap_url": "https://notionforms.crisp.help/sitemap.xml",
-    "changelog_url": "https://opnform.canny.io/changelog",
     "github_url": "https://github.com/JhumanJ/OpnForm",
     "github_forum_url": "https://github.com/JhumanJ/OpnForm/discussions",
     'discord': 'https://discord.gg/YTSjU2a9TS',
     "twitter": "https://twitter.com/OpnForm",
     "zapier_integration": "https://zapier.com/developer/public-invite/146950/58db583730cc46b821614468d94c35de/",
     "book_onboarding": "https://zcal.co/i/YQVGEULQ",
-    "feature_requests": "https://opnform.featurebase.app/",
-    "roadmap": "https://opnform.featurebase.app/roadmap",
+    "feature_requests": "https://feedback.opnform.com/",
+    "changelog_url": "https://feedback.opnform.com/changelog",
+    "roadmap": "https://feedback.opnform.com/roadmap",
   }
 }

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

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

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

@@ -116,41 +116,53 @@ await loadForm(true)
 
 onMounted(() => {
   crisp.hideChat()
+  document.body.classList.add('public-page')
   if (form.value) {
     handleDarkMode(form.value?.dark_mode)
     handleTransparentMode(form.value?.transparent_background)
 
     if (process.client) {
       if (form.value.custom_code) {
         const scriptEl = document.createRange().createContextualFragment(form.value.custom_code)
-        document.head.append(scriptEl)
+        try {
+          document.head.append(scriptEl)
+        } catch (e) {
+          console.error('Error appending custom code', e)
+        }
       }
       if (!isIframe) focusOnFirstFormElement()
     }
   }
 })
 
 onBeforeRouteLeave((to, from) => {
+  document.body.classList.remove('public-page')
   crisp.showChat()
   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) {
-      return form.value.seo_meta.page_title
+    if (pageMeta.value.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) {
-      return form.value.seo_meta.page_description
+    if (pageMeta.value.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) {
-      return form.value.seo_meta.page_thumbnail
+    if (pageMeta.value.page_thumbnail) {
+      return pageMeta.value.page_thumbnail
     }
     return (form && form.value?.cover_picture) ? form.value?.cover_picture : null
   },
@@ -160,7 +172,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">
-                    <li class="pr-1">
+                  <ul class="flex text-gray-500 text-sm gap-4">
+                    <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' v-if="form.creator">
+                      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
           }