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

@@ -285,7 +285,7 @@ export default {
                 src: this.getFileSrc(file)
               })
               this.loading = false
-            }).catch((error) => {
+            }).catch(() => {
               this.loading = false
             })
           } else {
@@ -297,7 +297,7 @@ export default {
             this.loading = false
           }
         })
-        .catch((error) => {
+        .catch(() => {
           this.clearAll()
           this.loading = false
         })

client/components/forms/MentionInput.vue

@@ -56,7 +56,7 @@
 </template>
   
   <script setup>
-  import { ref, onMounted, watch, computed } from 'vue'
+  import { ref, onMounted, watch } from 'vue'
   import { inputProps, useFormInput } from './useFormInput.js'
   import InputWrapper from './components/InputWrapper.vue'
   import MentionDropdown from './components/MentionDropdown.vue'
@@ -66,7 +66,7 @@
     disableMention: { type: Boolean, default: false },
   })
   const emit = defineEmits(['update:modelValue'])
-  const { compVal, inputStyle, hasValidation, hasError, inputWrapperProps } = useFormInput(props, { emit })
+  const { compVal, inputStyle, hasError, inputWrapperProps } = useFormInput(props, { emit })
   const editableDiv = ref(null)
   const savedRange = ref(null)
   const subscriptionModalStore = useSubscriptionModalStore()

client/components/forms/SignatureInput.vue

@@ -169,7 +169,7 @@ export default {
           }
           this.loading = false
         })
-        .catch((error) => {
+        .catch(() => {
           this.loading = false
           this.file = null
         })

client/components/forms/TextBlock.vue

@@ -1,8 +1,8 @@
 <template>
-    <div
-      v-html="processedContent"
-    />
-  </template>
+  <div
+    v-html="processedContent"
+  />
+</template>
   
   <script setup>
   const props = defineProps({

client/components/forms/components/CheckboxIcon.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
   isChecked: {
     type: Boolean,
     required: true

client/components/forms/components/MentionDropdown.vue

@@ -1,71 +1,71 @@
 <template>
-    <UPopover
-      ref="popover"
-      v-model:open="open"
-      class="h-0"
-      @close="cancel"
-    >
-      <span class="hidden" />
-      <template #panel>
-        <div class="p-2 max-h-[300px] flex flex-col">
-          <div class="flex items-center border-b -mx-2 px-2">
-            <div class="font-semibold w-1/2 mb-2 flex-grow">
-              Insert Mention
-            </div>
-            <input
-              v-model="fallbackValue"
-              class="p-1 mb-2 text-sm w-1/2 border rounded-md hover:bg-gray-50"
-              placeholder="Fallback value"
-            >
+  <UPopover
+    ref="popover"
+    v-model:open="open"
+    class="h-0"
+    @close="cancel"
+  >
+    <span class="hidden" />
+    <template #panel>
+      <div class="p-2 max-h-[300px] flex flex-col">
+        <div class="flex items-center border-b -mx-2 px-2">
+          <div class="font-semibold w-1/2 mb-2 flex-grow">
+            Insert Mention
           </div>
-          <div class="overflow-scroll pt-2">
-            <div class="w-full max-w-xs mb-2">
-              <div class="text-sm text-gray-500 mb-1">
-                Select a field
-              </div>
-              <div class="space-y-1">
-                <div
-                  v-for="field in filteredMentions"
-                  :key="field.id"
-                  class="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100"
-                  :class="{ 'bg-blue-50 border border-blue-100 inset-0': selectedField?.id === field.id, 'border border-transparent': selectedField?.id !== field.id }"
-                  @click="selectField(field)"
-                  @dblclick="selectField(field, true)"
-                >
-                  <BlockTypeIcon
-                    :type="field.type"
-                    class="mr-2"
-                  />
-                  <p class="text-sm text-gray-700 truncate">
-                    {{ field.name }}
-                  </p>
-                </div>
+          <input
+            v-model="fallbackValue"
+            class="p-1 mb-2 text-sm w-1/2 border rounded-md hover:bg-gray-50"
+            placeholder="Fallback value"
+          >
+        </div>
+        <div class="overflow-scroll pt-2">
+          <div class="w-full max-w-xs mb-2">
+            <div class="text-sm text-gray-500 mb-1">
+              Select a field
+            </div>
+            <div class="space-y-1">
+              <div
+                v-for="field in filteredMentions"
+                :key="field.id"
+                class="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100"
+                :class="{ 'bg-blue-50 border border-blue-100 inset-0': selectedField?.id === field.id, 'border border-transparent': selectedField?.id !== field.id }"
+                @click="selectField(field)"
+                @dblclick="selectField(field, true)"
+              >
+                <BlockTypeIcon
+                  :type="field.type"
+                  class="mr-2"
+                />
+                <p class="text-sm text-gray-700 truncate">
+                  {{ field.name }}
+                </p>
               </div>
             </div>
           </div>
-            
-          <div class="flex border-t pt-2 -mx-2 px-2 justify-end space-x-2">
-            <UButton
-              size="sm"
-              color="primary"
-              class="px-6"
-              :disabled="!selectedField"
-              @click="insertMention" 
-            >
-              Insert
-            </UButton>
-            <UButton
-              size="sm"
-              color="gray"
-              @click="cancel"
-            >
-              Cancel
-            </UButton>
-          </div>
         </div>
-      </template>
-    </UPopover>
-  </template>
+            
+        <div class="flex border-t pt-2 -mx-2 px-2 justify-end space-x-2">
+          <UButton
+            size="sm"
+            color="primary"
+            class="px-6"
+            :disabled="!selectedField"
+            @click="insertMention" 
+          >
+            Insert
+          </UButton>
+          <UButton
+            size="sm"
+            color="gray"
+            @click="cancel"
+          >
+            Cancel
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
       
   <script setup>
   import { ref, toRefs } from 'vue'

client/components/forms/components/QuillyEditor.vue

@@ -1,9 +1,9 @@
 <template>
-    <div
-      ref="container"
-      class="quilly-editor"
-    />
-  </template>
+  <div
+    ref="container"
+    class="quilly-editor"
+  />
+</template>
   
   <script setup>
   import Quill from 'quill'

client/components/forms/components/RadioButtonIcon.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
   isChecked: {
     type: Boolean,
     required: true

client/components/global/ErrorBoundary.vue

@@ -1,12 +1,12 @@
 <template>
-    <slot v-if="!error" />
-    <slot
-      v-else
-      name="error"
-      :error="error"
-      :clear-error="clearError"
-    />
-  </template>
+  <slot v-if="!error" />
+  <slot
+    v-else
+    name="error"
+    :error="error"
+    :clear-error="clearError"
+  />
+</template>
   
 <script setup>
     const error = ref()

client/components/global/transitions/VTransition.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
   name: {
     type: String,
     default: "slideInUp"

client/components/open/editors/FontCard.vue

@@ -59,7 +59,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['select-font'])
+defineEmits(['select-font'])
 
 const getFontUrl = computed(() => {
   const family = props.fontName.replace(/ /g, '+')

client/components/open/editors/GoogleFontPicker.vue

@@ -80,7 +80,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['close','apply'])
+defineEmits(['close','apply'])
 const loading = ref(false)
 const fonts = ref([])
 const selectedFont = ref(props.font || null)

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 {

client/components/open/tables/components/OpenDate.vue

@@ -15,9 +15,11 @@ import { default as _has } from 'lodash/has'
 export default {
   components: {},
   props: {
+    // eslint-disable-next-line vue/require-prop-types
     property: {
       required: true
     },
+    // eslint-disable-next-line vue/require-prop-types
     value: {
       required: true
     }

client/components/pages/admin/AddUserToWorkspace.vue

@@ -35,8 +35,8 @@
 </template>
 
 <script setup>
-const props = defineProps({
-  isWorkspaceAdmin: {},
+defineProps({
+  isWorkspaceAdmin: { type: Boolean, default: false },
   disabled: {
     type: Boolean,
     default: false,

client/components/pages/admin/BillingEmail.vue

@@ -63,7 +63,7 @@ onMounted(() => {
         loadingBillingEmail.value = false
         userCreated.value = true
         form.billing_email = data.billing_email
-    }).catch(error => {
+    }).catch(() => {
         loadingBillingEmail.value = false
         userCreated.value = false
     })

client/components/pages/admin/DeletedForms.vue

@@ -26,7 +26,8 @@
     </UTable>
     <div 
       v-if="forms?.length > pageCount"
-      class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
+      class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700"
+    >
       <UPagination
         v-model="page"
         :page-count="pageCount"

client/components/pages/admin/EditWorkSpaceUser.vue

@@ -42,6 +42,7 @@
 <script setup>
 import {watch, ref} from "vue"
 
+// eslint-disable-next-line vue/require-prop-types
 const props = defineProps(['user', 'showEditUserModal'])
 const emit = defineEmits(['close', 'fetchUsers'])
 
@@ -73,7 +74,7 @@ const updateUserRole = () => {
     useAlert().success("User role updated.")
     emit('fetchUsers')
     emit('close')
-  }).catch((error) => {
+  }).catch(() => {
     useAlert().error("There was an error updating user role")
   }).finally(() => {
     updatingUserRoleState.value = false

client/components/pages/admin/ImpersonateUser.vue

@@ -3,6 +3,7 @@
     size="sm"
     color="white"
     icon="i-heroicons-eye-16-solid"
+    :loading="loading"
     @click="impersonate"
   >
     Impersonate User
@@ -18,13 +19,13 @@ const authStore = useAuthStore()
 const formsStore = useFormsStore()
 const workspacesStore = useWorkspacesStore()
 
-let loading = ref(false)
+const loading = ref(false)
 
 const impersonate = () => {
-  loading = true
+  loading.value = true
   authStore.startImpersonating()
   opnFetch(`/moderator/impersonate/${props.user.id}`).then(async (data) => {
-    loading = false
+    loading.value = false
 
     // Save the token.
     authStore.setToken(data.token, false)
@@ -47,7 +48,7 @@ const impersonate = () => {
   })
     .catch((error) => {
       useAlert().error(error.data.message)
-      loading = false
+      loading.value = false
     })
 }
 </script>

client/components/pages/admin/UserWorkspaces.vue

@@ -1,16 +1,16 @@
 <template>
-    <AdminCard
-      title="Workspaces"
-      icon="heroicons:globe-alt"
+  <AdminCard
+    title="Workspaces"
+    icon="heroicons:globe-alt"
+  >
+    <UTable
+      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
+      :progress="{ color: 'primary', animation: 'carousel' }"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }"
+      :columns="columns"
+      :rows="rows"
+      class="-mx-6"
     >
-      <UTable
-        :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
-        :progress="{ color: 'primary', animation: 'carousel' }"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }"
-        :columns="columns"
-        :rows="rows"
-        class="-mx-6"
-      >
       <template #plan-data="{ row }">
         <span
           class="text-xs select-all rounded-md px-2 py-1 border"
@@ -19,18 +19,19 @@
           {{ row.plan }}
         </span>
       </template>
-      </UTable>
-      <div 
-        v-if="workspaces?.length > pageCount"
-        class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
-        <UPagination
-          v-model="page"
-          :page-count="pageCount"
-          :total="workspaces?.length"
-        />
-      </div>
-    </AdminCard>
-  </template>
+    </UTable>
+    <div 
+      v-if="workspaces?.length > pageCount"
+      class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700"
+    >
+      <UPagination
+        v-model="page"
+        :page-count="pageCount"
+        :total="workspaces?.length"
+      />
+    </div>
+  </AdminCard>
+</template>
   
 <script setup>
 

client/components/pages/forms/show/ExtraMenu.vue

@@ -84,7 +84,6 @@
 
 <script setup>
 import { ref, defineProps, computed } from "vue"
-import Dropdown from "~/components/global/Dropdown.vue"
 import FormTemplateModal from "../../../open/forms/components/templates/FormTemplateModal.vue"
 import FormWorkspaceModal from "../../../open/forms/components/FormWorkspaceModal.vue"
 

client/components/pages/settings/WorkSpaceCustomDomains.vue

@@ -74,7 +74,6 @@ import {watch} from "vue"
 const crisp = useCrisp()
 const workspacesStore = useWorkspacesStore()
 const workspace = computed(() => workspacesStore.getCurrent)
-const loading = computed(() => workspacesStore.loading)
 
 const customDomainsForm = useForm({
   custom_domain: "",

client/components/pages/settings/WorkSpaceUser.vue

@@ -281,7 +281,7 @@ const removeUser = (index) => {
       ).then(() => {
         useAlert().success("User successfully removed.")
         getWorkspaceUsers()
-      }).catch((error) => {
+      }).catch(() => {
         useAlert().error("There was an error removing user")
       }).finally(() => {
         loadingUsers.value = false
@@ -319,7 +319,7 @@ const leaveWorkSpace = (workspaceId) => {
         useAlert().success("You have left the workspace.")
         workspacesStore.remove(workspaceId)
         getWorkspaceUsers()
-      }).catch((error) => {
+      }).catch(() => {
         useAlert().error("There was an error leaving the workspace.")
       }).finally(() => {
         leaveWorkspaceLoadingState.value = false