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.

.github/workflows/laravel.yml

@@ -50,6 +50,35 @@ jobs:
         working-directory: ./api
         run: ./vendor/bin/pint --test
 
+  client_lint:
+    runs-on: ubuntu-latest
+    name: Run client linters
+    defaults:
+      run:
+        working-directory: ./client
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: "20"
+
+      - uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install npm dependencies
+        run: npm ci --no-audit --no-progress --silent
+
+      - name: Run ESLint
+        run: npm run lint
+
   tests:
     runs-on: ubuntu-latest
 
@@ -199,7 +228,7 @@ jobs:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
   production-deploy:
-    needs: [code_lint, tests, build-nuxt-app]
+    needs: [code_lint, client_lint, tests, build-nuxt-app]
     if: success() && github.ref == 'refs/heads/main' && github.event_name == 'push'
     runs-on: ubuntu-latest
     name: Triggers Deployment (Vapor & Amplify)

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

@@ -2,7 +2,7 @@
   <div
     v-html="processedContent"
   />
-  </template>
+</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

@@ -65,7 +65,7 @@
       </div>
     </template>
   </UPopover>
-  </template>
+</template>
       
   <script setup>
   import { ref, toRefs } from 'vue'

client/components/forms/components/QuillyEditor.vue

@@ -3,7 +3,7 @@
     ref="container"
     class="quilly-editor"
   />
-  </template>
+</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

@@ -6,7 +6,7 @@
     :error="error"
     :clear-error="clearError"
   />
-  </template>
+</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,20 +33,18 @@
   </ErrorBoundary>
 </template>
   
-  <script setup>
+<script setup>
-  import { computed } from 'vue'
+const crisp = useCrisp()
-  const crisp = useCrisp()
+const workingFormStore = useWorkingFormStore()
-  const workingFormStore = useWorkingFormStore()
+const form = storeToRefs(workingFormStore).content
-  const authStore = useAuthStore()
+
-  const form = storeToRefs(workingFormStore).content
+// Clear error and go back 1 step in history
-  const user = computed(() => authStore.user)
+const clearEditorError = (error, clearError) => {
-  // Clear error and go back 1 step in history
-  const clearEditorError = (error, clearError) => {
   crisp.enableChatbot()
   workingFormStore.undo()
   clearError()
-  }
+}
-  const onFormEditorError = (error) => {
+const onFormEditorError = (error) => {
   console.error('Form Editor Error Handled', error)
   crisp.pauseChatBot()
   const eventData = {
@@ -59,8 +57,8 @@
   } catch (e) {
     console.error('Failed to send event to crisp', e, eventData)
   }
-  }
+}
-  const onErrorContact = (error) => {
+const onErrorContact = (error) => {
   crisp.pauseChatBot()
   let errorReport = 'Hi there, I have a technical issue with the form editor.'
   if (form.value.slug) {
@@ -74,6 +72,6 @@
   } catch (e) {
     console.error('Crisp error', e)
   }
-  }
+}
-  </script>
+</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

@@ -24,7 +24,7 @@
       />
     </div>
   </div>
-  </template>
+</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,13 +1,15 @@
 <template>
-    <p class="font-semibold">Prefilled values</p>
+  <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"
-        v-model="selection[row.label]"
     @update:model-value="onSelection"
   />
 </template>

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({
+defineProps({
-  isWorkspaceAdmin: {},
+  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

@@ -22,7 +22,8 @@
     </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">
+      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"
@@ -30,7 +31,7 @@
       />
     </div>
   </AdminCard>
-  </template>
+</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

client/middleware/custom-domain.global.js

@@ -32,8 +32,6 @@ function redirectToMainDomain(details = {}) {
 export default defineNuxtRouteMiddleware((to) => {
   if (!customDomainUsed()) return
 
-  const config = useRuntimeConfig()
-
   const customDomainHeaderValue = useRequestHeaders()[customDomainHeaderName]
   if (
     import.meta.server &&

client/middleware/self-hosted-credentials.js

@@ -1,6 +1,5 @@
 export default defineNuxtRouteMiddleware(() => {
   const authStore = useAuthStore()
-  const runtimeConfig = useRuntimeConfig()
 
   if (useFeatureFlag('self_hosted')) {
     if (authStore.check && authStore.user?.email === 'admin@opnform.com') {

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

@@ -179,7 +179,6 @@
 
 <script setup>
 import { computed } from "vue"
-import VButton from "~/components/global/VButton.vue"
 import ExtraMenu from "../../../components/pages/forms/show/ExtraMenu.vue"
 import FormCleanings from "../../../components/pages/forms/show/FormCleanings.vue"
 

client/pages/oauth/callback.vue

@@ -1,5 +1,4 @@
 <template>
-  <template>
   <div class="flex flex-grow mt-6 mb-10">
     <div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
       <div
@@ -26,13 +25,12 @@
       </div>
     </div>
   </div>
-  </template>
 </template>
 
 <script setup>
-import { useNuxtApp } from "nuxt/app";
+import { useNuxtApp } from "nuxt/app"
 
-const { $utm } = useNuxtApp();
+const { $utm } = useNuxtApp()
 
 const router = useRouter()
 const route = useRoute()

client/pages/update-credentials.vue

@@ -1,7 +1,13 @@
 <template>
-  <modal :show="showModal" @close="logout" max-width="lg">
+  <modal
+    :show="showModal"
+    max-width="lg"
+    @close="logout"
+  >
     <div class="">
-      <h2 class="font-medium text-3xl mb-3">Welcome to OpnForm!</h2>
+      <h2 class="font-medium text-3xl mb-3">
+        Welcome to OpnForm!
+      </h2>
       <p class="text-sm text-gray-600">
         You're using the self-hosted version of OpnForm and need to set up your account.
         Please enter your email and create a password to continue.
@@ -43,7 +49,10 @@
       />
 
       <!-- Submit Button -->
-      <v-button class="mx-auto" :loading="form.busy || loading">
+      <v-button
+        class="mx-auto"
+        :loading="form.busy || loading"
+      >
         Update Credentials
       </v-button>
     </form>
@@ -51,14 +60,14 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue";
+import { onMounted } from "vue"
 
-const authStore = useAuthStore();
+const authStore = useAuthStore()
-const workspacesStore = useWorkspacesStore();
+const workspacesStore = useWorkspacesStore()
-const formsStore = useFormsStore();
+const formsStore = useFormsStore()
-const user = computed(() => authStore.user);
+const user = computed(() => authStore.user)
-const router = useRouter();
+const router = useRouter()
-const showModal = ref(true);
+const showModal = ref(true)
 const form = useForm({
   name: "",
   email: "",
@@ -66,31 +75,31 @@ const form = useForm({
   password_confirmation: "",
   agree_terms: false,
   appsumo_license: null,
-});
+})
 
 onMounted(() => {
-  form.email = user?.value?.email;
+  form.email = user?.value?.email
-});
+})
 
 const updateCredentials = () => {
   form
     .post("update-credentials")
     .then(async (data) => {
-      authStore.setUser(data.user);
+      authStore.setUser(data.user)
-      const workspaces = await fetchAllWorkspaces();
+      const workspaces = await fetchAllWorkspaces()
-      workspacesStore.set(workspaces.data.value);
+      workspacesStore.set(workspaces.data.value)
-      formsStore.loadAll(workspacesStore.currentId);
+      formsStore.loadAll(workspacesStore.currentId)
-      router.push({ name: "home" });
+      router.push({ name: "home" })
     })
     .catch((error) => {
-      console.error(error);
+      console.error(error)
-      useAlert().error(error.response._data.message);
+      useAlert().error(error.response._data.message)
-    });
+    })
-};
+}
 
 const logout = () => {
-  authStore.logout();
+  authStore.logout()
-  showModal.value = false;
+  showModal.value = false
-  router.push({ name: "login" });
+  router.push({ name: "login" })
-};
+}
 </script>

client/runtimeConfig.js

@@ -1,11 +1,3 @@
-function parseBoolean(value, defaultValue = false) {
-  if (typeof value === 'string') {
-    value = value.toLowerCase().trim()
-    if (value === 'true' || value === '1') return true
-    if (value === 'false' || value === '0') return false
-  }
-  return defaultValue
-}
 
 function parseNumber(value, defaultValue = 0) {
   const parsedValue = parseFloat(value)

client/stores/working_form.js

@@ -160,27 +160,6 @@ export const useWorkingFormStore = defineStore("working_form", {
         this.content.properties.splice(index, 1)
       }
     },
-    removeField(field) {
-      this.internalRemoveField(field)
-    },
-    internalRemoveField(field) {
-      const index = this.objectToIndex(field)
-
-      if (index !== -1) {
-        useAlert().success('Ctrl + Z to undo',10000,{
-          title: 'Field removed',
-          actions: [{
-            label: 'Undo',
-            icon:"i-material-symbols-undo",
-            click: () => {
-              this.undo()
-            }
-          }]
-        })
-        this.content.properties.splice(index, 1)
-      }
-    },
-
     moveField(oldIndex, newIndex) {
       const newFields = clonedeep(this.content.properties)
       const field = newFields.splice(oldIndex, 1)[0]