feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436 Fixes https://github.com/chatwoot/chatwoot/issues/9767 Fixes https://github.com/chatwoot/chatwoot/issues/10156 Fixes https://github.com/chatwoot/chatwoot/issues/6031 Fixes https://github.com/chatwoot/chatwoot/issues/5696 Fixes https://github.com/chatwoot/chatwoot/issues/9250 Fixes https://github.com/chatwoot/chatwoot/issues/9762 --------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-10-02 13:06:30 +05:30
parent e0bf2bd9d4
commit 42f6621afb
661 changed files with 15939 additions and 31194 deletions
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -87,7 +87,7 @@ export default {

 <template>
  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
  >
    <form
      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
@@ -101,7 +101,7 @@ export default {

      <div class="space-y-5">
        <FormInput
-          v-model.trim="credentials.password"
+          v-model="credentials.password"
          class="mt-3"
          name="password"
          type="password"
@@ -111,7 +111,7 @@ export default {
          @blur="v$.credentials.password.$touch"
        />
        <FormInput
-          v-model.trim="credentials.confirmPassword"
+          v-model="credentials.confirmPassword"
          class="mt-3"
          name="confirm_password"
          type="password"
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -27,14 +27,16 @@ export default {
  computed: {
    ...mapGetters({ globalConfig: 'globalConfig/get' }),
  },
-  validations: {
-    credentials: {
-      email: {
-        required,
-        email,
-        minLength: minLength(4),
+  validations() {
+    return {
+      credentials: {
+        email: {
+          required,
+          email,
+          minLength: minLength(4),
+        },
      },
-    },
+    };
  },
  methods: {
    showAlertMessage(message) {
@@ -66,7 +68,7 @@ export default {

 <template>
  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
  >
    <form
      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
@@ -89,7 +91,7 @@ export default {
      </p>
      <div class="space-y-5">
        <FormInput
-          v-model.trim="credentials.email"
+          v-model="credentials.email"
          name="email_address"
          :has-error="v$.credentials.email.$error"
          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -34,7 +34,7 @@ export default {

 <template>
  <div class="w-full h-full dark:bg-slate-900">
-    <div v-show="!isLoading" class="flex h-full">
+    <div v-show="!isLoading" class="flex h-full min-h-screen items-center">
      <div
        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
      >
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -5,13 +5,13 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
-import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import FormInput from '../../../../../components/Form/Input.vue';
 import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
 import { isValidPassword } from 'shared/helpers/Validators';
 import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
 import { register } from '../../../../../api/auth';
-var CompanyEmailValidator = require('company-email-validator');
+import * as CompanyEmailValidator from 'company-email-validator';

 export default {
  components: {
@@ -38,29 +38,31 @@ export default {
      error: '',
    };
  },
-  validations: {
-    credentials: {
-      accountName: {
-        required,
-        minLength: minLength(2),
-      },
-      fullName: {
-        required,
-        minLength: minLength(2),
-      },
-      email: {
-        required,
-        email,
-        businessEmailValidator(value) {
-          return CompanyEmailValidator.isCompanyEmail(value);
+  validations() {
+    return {
+      credentials: {
+        accountName: {
+          required,
+          minLength: minLength(2),
+        },
+        fullName: {
+          required,
+          minLength: minLength(2),
+        },
+        email: {
+          required,
+          email,
+          businessEmailValidator(value) {
+            return CompanyEmailValidator.isCompanyEmail(value);
+          },
+        },
+        password: {
+          required,
+          isValidPassword,
+          minLength: minLength(6),
        },
      },
-      password: {
-        required,
-        isValidPassword,
-        minLength: minLength(6),
-      },
-    },
+    };
  },
  computed: {
    ...mapGetters({ globalConfig: 'globalConfig/get' }),
@@ -134,9 +136,9 @@ export default {
 <template>
  <div class="flex-1 px-1 overflow-auto">
    <form class="space-y-3" @submit.prevent="submit">
-      <div class="flex">
+      <div class="grid grid-cols-2 gap-2">
        <FormInput
-          v-model.trim="credentials.fullName"
+          v-model="credentials.fullName"
          name="full_name"
          class="flex-1"
          :class="{ error: v$.credentials.fullName.$error }"
@@ -147,9 +149,9 @@ export default {
          @blur="v$.credentials.fullName.$touch"
        />
        <FormInput
-          v-model.trim="credentials.accountName"
+          v-model="credentials.accountName"
          name="account_name"
-          class="flex-1 ml-2"
+          class="flex-1"
          :class="{ error: v$.credentials.accountName.$error }"
          :label="$t('REGISTER.COMPANY_NAME.LABEL')"
          :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
@@ -159,7 +161,7 @@ export default {
        />
      </div>
      <FormInput
-        v-model.trim="credentials.email"
+        v-model="credentials.email"
        type="email"
        name="email_address"
        :class="{ error: v$.credentials.email.$error }"
@@ -170,7 +172,7 @@ export default {
        @blur="v$.credentials.email.$touch"
      />
      <FormInput
-        v-model.trim="credentials.password"
+        v-model="credentials.password"
        type="password"
        name="password"
        :class="{ error: v$.credentials.password.$error }"
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -26,22 +26,24 @@ export default {

 <template>
  <div
-    v-if="testimonials.length"
-    class="relative flex-1 hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
+    v-show="testimonials.length"
+    class="relative flex-1 min-h-screen hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
  >
    <img
-      src="/assets/images/auth/top-left.svg"
+      src="assets/images/auth/top-left.svg"
      class="absolute top-0 left-0 w-40 h-40"
    />
    <img
-      src="/assets/images/auth/bottom-right.svg"
+      src="assets/images/auth/bottom-right.svg"
      class="absolute bottom-0 right-0 w-40 h-40"
    />
    <img
-      src="/assets/images/auth/auth--bg.svg"
+      src="assets/images/auth/auth--bg.svg"
      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
    />
-    <div class="z-50 flex flex-col items-center justify-center w-full h-full">
+    <div
+      class="z-50 flex flex-col items-center justify-center w-full h-full min-h-screen"
+    >
      <div class="flex items-start justify-center p-6">
        <TestimonialCard
          v-for="(testimonial, index) in testimonials"
--- a/app/javascript/v3/views/index.js
+++ b/app/javascript/v3/views/index.js
@@ -1,10 +1,10 @@
-import VueRouter from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';

 import routes from './routes';
 import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
 import { validateRouteAccess } from '../helpers/RouteHelper';

-export const router = new VueRouter({ mode: 'history', routes });
+export const router = createRouter({ history: createWebHistory(), routes });

 const sensitiveRouteNames = ['auth_password_edit'];

--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -1,15 +1,21 @@
 <script>
-import { useVuelidate } from '@vuelidate/core';
-import { required, email } from '@vuelidate/validators';
-import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SubmitButton from '../../components/Button/SubmitButton.vue';
+// utils and composables
+import { login } from '../../api/auth';
 import { mapGetters } from 'vuex';
 import { parseBoolean } from '@chatwoot/utils';
-import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
+import { useAlert } from 'dashboard/composables';
+import { required, email } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+// mixins
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+// components
 import FormInput from '../../components/Form/Input.vue';
-import { login } from '../../api/auth';
+import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import SubmitButton from '../../components/Button/SubmitButton.vue';
+
 const ERROR_MESSAGES = {
  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
@@ -49,16 +55,18 @@ export default {
      error: '',
    };
  },
-  validations: {
-    credentials: {
-      password: {
-        required,
+  validations() {
+    return {
+      credentials: {
+        password: {
+          required,
+        },
+        email: {
+          required,
+          email,
+        },
      },
-      email: {
-        required,
-        email,
-      },
-    },
+    };
  },
  computed: {
    ...mapGetters({ globalConfig: 'globalConfig/get' }),
@@ -189,7 +197,7 @@ export default {
        <GoogleOAuthButton v-if="showGoogleOAuth" />
        <form class="space-y-5" @submit.prevent="submitFormLogin">
          <FormInput
-            v-model.trim="credentials.email"
+            v-model="credentials.email"
            name="email_address"
            type="text"
            data-testid="email_input"
@@ -201,7 +209,7 @@ export default {
            @input="v$.credentials.email.$touch"
          />
          <FormInput
-            v-model.trim="credentials.password"
+            v-model="credentials.password"
            type="password"
            name="password"
            data-testid="password_input"