0351d front end linting (#377)

* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
2024-04-15 18:39:03 +01:00
parent 8d35fc8b1a
commit bcd45ce8a6
228 changed files with 17036 additions and 8744 deletions
--- a/client/components/pages/auth/components/LoginForm.vue
+++ b/client/components/pages/auth/components/LoginForm.vue
@@ -1,39 +1,77 @@
 <template>
  <div>
-    <forgot-password-modal :show="showForgotModal" @close="showForgotModal=false"/>
+    <forgot-password-modal
+      :show="showForgotModal"
+      @close="showForgotModal = false"
+    />

-    <form class="mt-4" @submit.prevent="login" @keydown="form.onKeydown($event)">
+    <form
+      class="mt-4"
+      @submit.prevent="login"
+      @keydown="form.onKeydown($event)"
+    >
      <!-- Email -->
-      <text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address"/>
+      <text-input
+        name="email"
+        :form="form"
+        label="Email"
+        :required="true"
+        placeholder="Your email address"
+      />

      <!-- Password -->
-      <text-input native-type="password" placeholder="Your password"
-                  name="password" :form="form" label="Password" :required="true"
+      <text-input
+        native-type="password"
+        placeholder="Your password"
+        name="password"
+        :form="form"
+        label="Password"
+        :required="true"
      />

      <!-- Remember Me -->
      <div class="relative flex items-center my-5">
-        <v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember" size="small">
+        <v-checkbox
+          v-model="remember"
+          class="w-full md:w-1/2"
+          name="remember"
+          size="small"
+        >
          Remember me
        </v-checkbox>

        <div class="w-full md:w-1/2 text-right">
-          <a href="#" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
-             @click.prevent="showForgotModal=true">
+          <a
+            href="#"
+            class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
+            @click.prevent="showForgotModal = true"
+          >
            Forgot your password?
          </a>
        </div>
      </div>

      <!-- Submit Button -->
-      <v-button dusk="btn_login" :loading="form.busy || loading">
+      <v-button
+        dusk="btn_login"
+        :loading="form.busy || loading"
+      >
        Log in to continue
      </v-button>

      <p class="text-gray-500 mt-4">
        Don't have an account?
-        <a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openRegister')">Sign Up</a>
-        <NuxtLink v-else :to="{name:'register'}" class="font-semibold ml-1">
+        <a
+          v-if="isQuick"
+          href="#"
+          class="font-semibold ml-1"
+          @click.prevent="$emit('openRegister')"
+        >Sign Up</a>
+        <NuxtLink
+          v-else
+          :to="{ name: 'register' }"
+          class="font-semibold ml-1"
+        >
          Sign Up
        </NuxtLink>
      </p>
@@ -42,81 +80,89 @@
 </template>

 <script>
-import ForgotPasswordModal from '../ForgotPasswordModal.vue'
-import {opnFetch} from "~/composables/useOpnApi.js"
-import {fetchAllWorkspaces} from "~/stores/workspaces.js"
+import ForgotPasswordModal from "../ForgotPasswordModal.vue"
+import { opnFetch } from "~/composables/useOpnApi.js"
+import { fetchAllWorkspaces } from "~/stores/workspaces.js"

 export default {
-  name: 'LoginForm',
+  name: "LoginForm",
  components: {
-    ForgotPasswordModal
+    ForgotPasswordModal,
  },
  props: {
    isQuick: {
      type: Boolean,
      required: false,
-      default: false
-    }
+      default: false,
+    },
  },

+  emits: ['afterQuickLogin', 'openRegister'],
  setup() {
    return {
      authStore: useAuthStore(),
      formsStore: useFormsStore(),
-      workspaceStore: useWorkspacesStore()
+      workspaceStore: useWorkspacesStore(),
    }
  },

  data: () => ({
    form: useForm({
-      email: '',
-      password: ''
+      email: "",
+      password: "",
    }),
    loading: false,
    remember: false,
-    showForgotModal: false
+    showForgotModal: false,
  }),

  methods: {
    login() {
      // Submit the form.
      this.loading = true
-      this.form.post('login').then(async (data) => {
-        // Save the token.
-        this.authStore.setToken(data.token)
+      this.form
+        .post("login")
+        .then(async (data) => {
+          // Save the token.
+          this.authStore.setToken(data.token)

-        const [userDataResponse, workspacesResponse] = await Promise.all([opnFetch('user'), fetchAllWorkspaces()]);
-        this.authStore.setUser(userDataResponse)
-        this.workspaceStore.set(workspacesResponse.data.value)
+          const [userDataResponse, workspacesResponse] = await Promise.all([
+            opnFetch("user"),
+            fetchAllWorkspaces(),
+          ])
+          this.authStore.setUser(userDataResponse)
+          this.workspaceStore.set(workspacesResponse.data.value)

-        // Load forms
-        this.formsStore.loadAll(this.workspaceStore.currentId)
+          // Load forms
+          this.formsStore.loadAll(this.workspaceStore.currentId)

-        // Redirect home.
-        this.redirect()
-      }).catch((error) => {
-        console.error(error)
-      }).finally(() => {
-        this.loading = false
-      })
+          // Redirect home.
+          this.redirect()
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+        .finally(() => {
+          this.loading = false
+        })
    },

    redirect() {
      if (this.isQuick) {
-        this.$emit('afterQuickLogin')
+        this.$emit("afterQuickLogin")
        return
      }

-      const intendedUrlCookie = useCookie('intended_url')
+      const intendedUrlCookie = useCookie("intended_url")
      const router = useRouter()

      if (intendedUrlCookie.value) {
-        router.push({path: intendedUrlCookie.value})
-        useCookie('intended_url').value = null
+        router.push({ path: intendedUrlCookie.value })
+        useCookie("intended_url").value = null
      } else {
-        router.push({name: 'home'})
+        router.push({ name: "home" })
      }
-    }
-  }
+    },
+  },
 }
 </script>
--- a/client/components/pages/auth/components/QuickRegister.vue
+++ b/client/components/pages/auth/components/QuickRegister.vue
@@ -1,76 +1,112 @@
 <template>
  <div>
    <!--  Login modal  -->
-    <modal :show="showLoginModal" @close="showLoginModal=false" max-width="lg">
+    <modal
+      :show="showLoginModal"
+      max-width="lg"
+      @close="showLoginModal = false"
+    >
      <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-8 h-8"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+          />
        </svg>
      </template>
      <template #title>
        Login to OpnForm
      </template>
      <div class="px-4">
-        <login-form :isQuick="true" @openRegister="openRegister" @afterQuickLogin="afterQuickLogin" />
+        <login-form
+          :is-quick="true"
+          @open-register="openRegister"
+          @after-quick-login="afterQuickLogin"
+        />
      </div>
    </modal>

-
    <!--  Register modal  -->
-    <modal :show="showRegisterModal" @close="$emit('close')" max-width="lg">
+    <modal
+      :show="showRegisterModal"
+      max-width="lg"
+      @close="$emit('close')"
+    >
      <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-8 h-8"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+          />
        </svg>
      </template>
      <template #title>
        Create an account
      </template>
      <div class="px-4">
-        <register-form :isQuick="true" @openLogin="openLogin" @afterQuickLogin="afterQuickLogin" />
+        <register-form
+          :is-quick="true"
+          @open-login="openLogin"
+          @after-quick-login="afterQuickLogin"
+        />
      </div>
    </modal>
-
  </div>
 </template>

 <script>
-import LoginForm from './LoginForm.vue'
-import RegisterForm from './RegisterForm.vue'
+import LoginForm from "./LoginForm.vue"
+import RegisterForm from "./RegisterForm.vue"

 export default {
-  name: 'QuickRegister',
+  name: "QuickRegister",
  components: {
    LoginForm,
-    RegisterForm
+    RegisterForm,
  },
  props: {
    showRegisterModal: {
      type: Boolean,
-      required: true
-    }
+      required: true,
+    },
  },
+  emits: ['afterLogin', 'close', 'reopen'],

  data: () => ({
    showLoginModal: false,
  }),

-  mounted() {
-  },
+  mounted() {},

  methods: {
-    openLogin(){
+    openLogin() {
      this.showLoginModal = true
-      this.$emit('close')
+      this.$emit("close")
    },
-    openRegister(){
+    openRegister() {
      this.showLoginModal = false
-      this.$emit('reopen')
+      this.$emit("reopen")
    },
-    afterQuickLogin(){
+    afterQuickLogin() {
      this.showLoginModal = false
-      this.$emit('afterLogin')
-    }
-  }
+      this.$emit("afterLogin")
+    },
+  },
 }
 </script>
--- a/client/components/pages/auth/components/RegisterForm.vue
+++ b/client/components/pages/auth/components/RegisterForm.vue
@@ -1,34 +1,75 @@
 <template>
  <div>
-    <form class="mt-4" @submit.prevent="register" @keydown="form.onKeydown($event)">
+    <form
+      class="mt-4"
+      @submit.prevent="register"
+      @keydown="form.onKeydown($event)"
+    >
      <!-- Name -->
-      <text-input name="name" :form="form" label="Name" placeholder="Your name" :required="true"/>
+      <text-input
+        name="name"
+        :form="form"
+        label="Name"
+        placeholder="Your name"
+        :required="true"
+      />

      <!-- Email -->
-      <text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address"/>
+      <text-input
+        name="email"
+        :form="form"
+        label="Email"
+        :required="true"
+        placeholder="Your email address"
+      />

-      <select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" placeholder="Select option"
-                    label="How did you hear about us?" :required="true"
+      <select-input
+        name="hear_about_us"
+        :options="hearAboutUsOptions"
+        :form="form"
+        placeholder="Select option"
+        label="How did you hear about us?"
+        :required="true"
      />

      <!-- Password -->
-      <text-input native-type="password" placeholder="Enter password"
-                  name="password" :form="form" label="Password" :required="true"
+      <text-input
+        native-type="password"
+        placeholder="Enter password"
+        name="password"
+        :form="form"
+        label="Password"
+        :required="true"
      />

      <!-- Password Confirmation-->
-      <text-input native-type="password" :form="form" :required="true" placeholder="Enter confirm password"
-                  name="password_confirmation" label="Confirm Password"
+      <text-input
+        native-type="password"
+        :form="form"
+        :required="true"
+        placeholder="Enter confirm password"
+        name="password_confirmation"
+        label="Confirm Password"
      />

-      <checkbox-input :form="form" name="agree_terms" :required="true">
+      <checkbox-input
+        :form="form"
+        name="agree_terms"
+        :required="true"
+      >
        <template #label>
          I agree with the
-          <NuxtLink :to="{name:'terms-conditions'}" target="_blank">
+          <NuxtLink
+            :to="{ name: 'terms-conditions' }"
+            target="_blank"
+          >
            Terms and conditions
          </NuxtLink>
          and
-          <NuxtLink :to="{name:'privacy-policy'}" target="_blank">
+          <NuxtLink
+            :to="{ name: 'privacy-policy' }"
+            target="_blank"
+          >
            Privacy policy
          </NuxtLink>
          of the website and I accept them.
@@ -42,8 +83,17 @@

      <p class="text-gray-500 mt-4">
        Already have an account?
-        <a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openLogin')">Log In</a>
-        <NuxtLink v-else :to="{name:'login'}" class="font-semibold ml-1">
+        <a
+          v-if="isQuick"
+          href="#"
+          class="font-semibold ml-1"
+          @click.prevent="$emit('openLogin')"
+        >Log In</a>
+        <NuxtLink
+          v-else
+          :to="{ name: 'login' }"
+          class="font-semibold ml-1"
+        >
          Log In
        </NuxtLink>
      </p>
@@ -52,61 +102,69 @@
 </template>

 <script>
-import {opnFetch} from "~/composables/useOpnApi.js";
-import {fetchAllWorkspaces} from "~/stores/workspaces.js";
+import { opnFetch } from "~/composables/useOpnApi.js"
+import { fetchAllWorkspaces } from "~/stores/workspaces.js"

 export default {
-  name: 'RegisterForm',
+  name: "RegisterForm",
  components: {},
  props: {
    isQuick: {
      type: Boolean,
      required: false,
-      default: false
-    }
+      default: false,
+    },
  },
+  emits: ['afterQuickLogin', 'openLogin'],

  setup() {
    return {
      authStore: useAuthStore(),
      formsStore: useFormsStore(),
      workspaceStore: useWorkspacesStore(),
-      logEvent: useAmplitude().logEvent
+      logEvent: useAmplitude().logEvent,
    }
  },

  data: () => ({
    form: useForm({
-      name: '',
-      email: '',
-      password: '',
-      password_confirmation: '',
+      name: "",
+      email: "",
+      password: "",
+      password_confirmation: "",
      agree_terms: false,
-      appsumo_license: null
+      appsumo_license: null,
    }),
  }),

  computed: {
    hearAboutUsOptions() {
      const options = [
-        {name: 'Facebook', value: 'facebook'},
-        {name: 'Twitter', value: 'twitter'},
-        {name: 'Reddit', value: 'reddit'},
-        {name: 'Github', value: 'github'},
-        {name: 'Search Engine (Google, DuckDuckGo...)', value: 'search_engine'},
-        {name: 'Friend or Colleague', value: 'friend_colleague'},
-        {name: 'Blog/Article', value: 'blog_article'}
-      ].map((value) => ({value, sort: Math.random()}))
+        { name: "Facebook", value: "facebook" },
+        { name: "Twitter", value: "twitter" },
+        { name: "Reddit", value: "reddit" },
+        { name: "Github", value: "github" },
+        {
+          name: "Search Engine (Google, DuckDuckGo...)",
+          value: "search_engine",
+        },
+        { name: "Friend or Colleague", value: "friend_colleague" },
+        { name: "Blog/Article", value: "blog_article" },
+      ]
+        .map((value) => ({ value, sort: Math.random() }))
        .sort((a, b) => a.sort - b.sort)
-        .map(({value}) => value)
-      options.push({name: 'Other', value: 'other'})
+        .map(({ value }) => value)
+      options.push({ name: "Other", value: "other" })
      return options
-    }
+    },
  },

  mounted() {
    // Set appsumo license
-    if (this.$route.query.appsumo_license !== undefined && this.$route.query.appsumo_license) {
+    if (
+      this.$route.query.appsumo_license !== undefined &&
+      this.$route.query.appsumo_license
+    ) {
      this.form.appsumo_license = this.$route.query.appsumo_license
    }
  },
@@ -114,15 +172,15 @@ export default {
  methods: {
    async register() {
      // Register the user.
-      const data = await this.form.post('/register')
+      const data = await this.form.post("/register")

      // Log in the user.
-      const tokenData = await this.form.post('/login')
+      const tokenData = await this.form.post("/login")

      // Save the token.
      this.authStore.setToken(tokenData.token)

-      const userData = await opnFetch('user')
+      const userData = await opnFetch("user")
      this.authStore.setUser(userData)

      const workspaces = await fetchAllWorkspaces()
@@ -131,24 +189,28 @@ export default {
      // Load forms
      this.formsStore.loadAll(this.workspaceStore.currentId)

-      this.logEvent('register', {source: this.form.hear_about_us})
+      this.logEvent("register", { source: this.form.hear_about_us })

      // AppSumo License
      if (data.appsumo_license === false) {
-        useAlert().error('Invalid AppSumo license. This probably happened because this license was already' +
-          ' attached to another OpnForm account. Please contact support.')
+        useAlert().error(
+          "Invalid AppSumo license. This probably happened because this license was already" +
+            " attached to another OpnForm account. Please contact support.",
+        )
      } else if (data.appsumo_license === true) {
-        useAlert().success('Your AppSumo license was successfully activated! You now have access to all the' +
-          ' features of the AppSumo deal.')
+        useAlert().success(
+          "Your AppSumo license was successfully activated! You now have access to all the" +
+            " features of the AppSumo deal.",
+        )
      }

      // Redirect
      if (this.isQuick) {
-        this.$emit('afterQuickLogin')
+        this.$emit("afterQuickLogin")
      } else {
-        this.$router.push({name: 'forms-create'})
+        this.$router.push({ name: "forms-create" })
      }
-    }
-  }
+    },
+  },
 }
 </script>