Add client linting to GitHub Actions workflow

Enhance CI/CD pipeline by introducing a new job to run ESLint on the client application. This ensures code quality and consistency for the frontend codebase.

client/components/open/forms/OpenCompleteForm.vue

@@ -117,14 +117,14 @@
           :admin-preview="adminPreview"
           @submit="submitForm"
         >
-          <template #submit-btn="{submitForm}">
+          <template #submit-btn="{rootSubmitForm}">
             <open-form-button
               :loading="loading"
               :theme="theme"
               :color="form.color"
               class="mt-2 px-8 mx-1"
               :class="submitButtonClass"
-              @click.prevent="submitForm"
+              @click.prevent="rootSubmitForm"
             >
               {{ form.submit_button_text }}
             </open-form-button>
@@ -223,6 +223,8 @@ export default {
     }
   },
 
+  emits: ['submitted', 'password-entered', 'restarted'],
+
   setup(props) {
     const { setLocale } = useI18n()
     const authStore = useAuthStore()

client/components/open/forms/OpenFormField.vue

@@ -174,7 +174,7 @@ export default {
     adminPreview: {type: Boolean, default: false} // If used in FormEditorPreview
   },
 
-  setup(props) {
+  setup() {
     const workingFormStore = useWorkingFormStore()
     return {
       workingFormStore,

client/components/open/forms/components/FirstSubmissionModal.vue

@@ -74,7 +74,7 @@ const props = defineProps({
   show: { type: Boolean, required: true },
   form: { type: Object, required: true }
 })
-const emit = defineEmits(['close'])
+defineEmits(['close'])
 const confetti = useConfetti()
 const crisp = useCrisp()
 const amplitude = useAmplitude()

client/components/open/forms/components/FormEditorErrorHandler.vue

@@ -33,47 +33,45 @@
   </ErrorBoundary>
 </template>
   
-  <script setup>
-  import { computed } from 'vue'
-  const crisp = useCrisp()
-  const workingFormStore = useWorkingFormStore()
-  const authStore = useAuthStore()
-  const form = storeToRefs(workingFormStore).content
-  const user = computed(() => authStore.user)
-  // Clear error and go back 1 step in history
-  const clearEditorError = (error, clearError) => {
-    crisp.enableChatbot()
-    workingFormStore.undo()
-    clearError()
+<script setup>
+const crisp = useCrisp()
+const workingFormStore = useWorkingFormStore()
+const form = storeToRefs(workingFormStore).content
+
+// Clear error and go back 1 step in history
+const clearEditorError = (error, clearError) => {
+  crisp.enableChatbot()
+  workingFormStore.undo()
+  clearError()
+}
+const onFormEditorError = (error) => {
+  console.error('Form Editor Error Handled', error)
+  crisp.pauseChatBot()
+  const eventData = {
+    message: error.message,
+    // take first 200 characters
+    stack: error.stack.substring(0, 100)
   }
-  const onFormEditorError = (error) => {
-    console.error('Form Editor Error Handled', error)
-    crisp.pauseChatBot()
-    const eventData = {
-      message: error.message,
-      // take first 200 characters
-      stack: error.stack.substring(0, 100)
-    }
-    try {
-      crisp.pushEvent('form-editor-error', eventData)
-    } catch (e) {
-      console.error('Failed to send event to crisp', e, eventData)
-    }
+  try {
+    crisp.pushEvent('form-editor-error', eventData)
+  } catch (e) {
+    console.error('Failed to send event to crisp', e, eventData)
   }
-  const onErrorContact = (error) => {
-    crisp.pauseChatBot()
-    let errorReport = 'Hi there, I have a technical issue with the form editor.'
-    if (form.value.slug) {
-      errorReport += ` The form I am editing is: \`${form.value.slug}\`.`
-    }
-    errorReport += ` And here are technical details about the error: \`\`\`${error.stack}\`\`\``
-    try {
-      crisp.openAndShowChat(errorReport)
-      crisp.showMessage(`Hi there, we're very sorry to hear you experienced an issue with OpnForm.
-          We'll be in touch about it very soon! In the meantime, I recommend that you try going back one step, and save your changes.`, 2000)
-    } catch (e) {
-      console.error('Crisp error', e)
-    }
+}
+const onErrorContact = (error) => {
+  crisp.pauseChatBot()
+  let errorReport = 'Hi there, I have a technical issue with the form editor.'
+  if (form.value.slug) {
+    errorReport += ` The form I am editing is: \`${form.value.slug}\`.`
   }
-  </script>
+  errorReport += ` And here are technical details about the error: \`\`\`${error.stack}\`\`\``
+  try {
+    crisp.openAndShowChat(errorReport)
+    crisp.showMessage(`Hi there, we're very sorry to hear you experienced an issue with OpnForm.
+        We'll be in touch about it very soon! In the meantime, I recommend that you try going back one step, and save your changes.`, 2000)
+  } catch (e) {
+    console.error('Crisp error', e)
+  }
+}
+</script>
   

client/components/open/forms/components/FormWorkspaceModal.vue

@@ -118,13 +118,4 @@ const onSubmit = () => {
       loading.value = false
     })
 }
-
-const isUrl = (str) => {
-  try {
-    new URL(str)
-  } catch (_) {
-    return false
-  }
-  return true
-}
 </script>

client/components/open/forms/components/ShareFormUrl.vue

@@ -1,30 +1,30 @@
 <template>
-    <div
-      class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-2 overflow-hidden"
-    >
-      <div class="flex items-center w-full gap-2">
-        <p class="select-all text-nt-blue flex-grow truncate overflow-hidden">
-          <a
-            v-if="link"
-            :href="share_url"
-            target="_blank"
-          >
-            {{ share_url }}
-          </a>
-          <span v-else>
-            {{ share_url }}
-          </span>
-        </p>
-        <UButton
-          class="shrink-0"
-          size="sm" 
-          icon="i-heroicons-clipboard-document"
-          label="Copy"
-          @click="copyToClipboard"
-        />
-      </div>
+  <div
+    class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-2 overflow-hidden"
+  >
+    <div class="flex items-center w-full gap-2">
+      <p class="select-all text-nt-blue flex-grow truncate overflow-hidden">
+        <a
+          v-if="link"
+          :href="share_url"
+          target="_blank"
+        >
+          {{ share_url }}
+        </a>
+        <span v-else>
+          {{ share_url }}
+        </span>
+      </p>
+      <UButton
+        class="shrink-0"
+        size="sm" 
+        icon="i-heroicons-clipboard-document"
+        label="Copy"
+        @click="copyToClipboard"
+      />
     </div>
-  </template>
+  </div>
+</template>
   
   <script setup>
   import { computed, defineProps } from 'vue'

client/components/open/forms/fields/components/HiddenRequiredDisabled.vue

@@ -56,7 +56,7 @@ const props = defineProps({
     }
 })
 
-const emit = defineEmits(['update:field'])
+defineEmits(['update:field'])
 
 const options = ref([
   { 

client/components/open/forms/fields/components/MatrixPrefilledValues.vue

@@ -1,15 +1,17 @@
 <template>
-    <p class="font-semibold">Prefilled values</p>
-    <select-input
-        v-for="row in matrixData"
-        :key="row.label"
-        name="prefill"
-        class="mt-3"
-        :options="row.options"
-        :label="row.label"
-        v-model="selection[row.label]"
-        @update:model-value="onSelection"
-      />
+  <p class="font-semibold">
+    Prefilled values
+  </p>
+  <select-input
+    v-for="row in matrixData"
+    :key="row.label"
+    v-model="selection[row.label]"
+    name="prefill"
+    class="mt-3"
+    :options="row.options"
+    :label="row.label"
+    @update:model-value="onSelection"
+  />
 </template>
 <script>
 export default {