From 79d9cb3ceaefbbd93543c1f3ac728dcabd314d7c Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 7 Nov 2025 21:56:59 +0530
Subject: [PATCH] chore: Move auth components to Composition API

---
 app/javascript/v3/App.vue                     |  79 ++--
 .../v3/views/auth/confirmation/Index.vue      |  44 +--
 .../v3/views/auth/password/Edit.vue           | 140 +++----
 .../v3/views/auth/reset/password/Index.vue    | 102 +++--
 app/javascript/v3/views/auth/signup/Index.vue |  50 +--
 .../auth/signup/components/Signup/Form.vue    |   2 +-
 .../signup/components/Testimonials/Index.vue  |  42 +-
 .../Testimonials/TestimonialCard.vue          |  38 +-
 app/javascript/v3/views/login/Index.vue       | 365 +++++++++---------
 app/javascript/v3/views/login/Saml.vue        |   4 +-
 10 files changed, 403 insertions(+), 463 deletions(-)

diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
index ae244aa37..e0a142be6 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -1,46 +1,47 @@
-<script>
+<script setup>
+import { ref, onMounted, getCurrentInstance } from 'vue';
 import SnackbarContainer from './components/SnackBar/Container.vue';
 
-export default {
-  components: { SnackbarContainer },
-  data() {
-    return { theme: 'light' };
-  },
-  mounted() {
-    // Add background color class once - it automatically handles light/dark modes
-    document.documentElement.classList.add('bg-n-background');
-    this.setColorTheme();
-    this.listenToThemeChanges();
-    this.setLocale(window.chatwootConfig.selectedLocale);
-  },
-  methods: {
-    setColorTheme() {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        this.theme = 'dark';
-        document.documentElement.classList.add('dark');
-      } else {
-        this.theme = 'light';
-        document.documentElement.classList.remove('dark');
-      }
-    },
-    listenToThemeChanges() {
-      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+const theme = ref('light');
 
-      mql.onchange = e => {
-        if (e.matches) {
-          this.theme = 'dark';
-          document.documentElement.classList.add('dark');
-        } else {
-          this.theme = 'light';
-          document.documentElement.classList.remove('dark');
-        }
-      };
-    },
-    setLocale(locale) {
-      this.$root.$i18n.locale = locale;
-    },
-  },
+const setColorTheme = () => {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    theme.value = 'dark';
+    document.documentElement.classList.add('dark');
+  } else {
+    theme.value = 'light';
+    document.documentElement.classList.remove('dark');
+  }
 };
+
+const listenToThemeChanges = () => {
+  const mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+  mql.onchange = e => {
+    if (e.matches) {
+      theme.value = 'dark';
+      document.documentElement.classList.add('dark');
+    } else {
+      theme.value = 'light';
+      document.documentElement.classList.remove('dark');
+    }
+  };
+};
+
+const setLocale = locale => {
+  const instance = getCurrentInstance();
+  if (instance) {
+    instance.appContext.config.globalProperties.$i18n.locale = locale;
+  }
+};
+
+onMounted(() => {
+  // Add background color class once - it automatically handles light/dark modes
+  document.documentElement.classList.add('bg-n-background');
+  setColorTheme();
+  listenToThemeChanges();
+  setLocale(window.chatwootConfig.selectedLocale);
+});
 </script>
 
 <template>
diff --git a/app/javascript/v3/views/auth/confirmation/Index.vue b/app/javascript/v3/views/auth/confirmation/Index.vue
index 1c617e79e..e62d8d471 100644
--- a/app/javascript/v3/views/auth/confirmation/Index.vue
+++ b/app/javascript/v3/views/auth/confirmation/Index.vue
@@ -1,32 +1,30 @@
-<script>
+<script setup>
+import { onMounted } from 'vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { verifyPasswordToken } from '../../../api/auth';
 import Spinner from 'shared/components/Spinner.vue';
 
-export default {
-  components: { Spinner },
-  props: {
-    confirmationToken: {
-      type: String,
-      default: '',
-    },
-  },
-  mounted() {
-    this.confirmToken();
-  },
-  methods: {
-    async confirmToken() {
-      try {
-        await verifyPasswordToken({
-          confirmationToken: this.confirmationToken,
-        });
-        window.location = DEFAULT_REDIRECT_URL;
-      } catch (error) {
-        window.location = DEFAULT_REDIRECT_URL;
-      }
-    },
+const props = defineProps({
+  confirmationToken: {
+    type: String,
+    default: '',
   },
+});
+
+const confirmToken = async () => {
+  try {
+    await verifyPasswordToken({
+      confirmationToken: props.confirmationToken,
+    });
+    window.location = DEFAULT_REDIRECT_URL;
+  } catch (error) {
+    window.location = DEFAULT_REDIRECT_URL;
+  }
 };
+
+onMounted(() => {
+  confirmToken();
+});
 </script>
 
 <template>
diff --git a/app/javascript/v3/views/auth/password/Edit.vue b/app/javascript/v3/views/auth/password/Edit.vue
index af40f8c2f..b789e65b8 100644
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -1,88 +1,72 @@
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
-import FormInput from 'dashboard/components-next/input/Input.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { setNewPassword } from '../../../api/auth';
 
-export default {
-  components: {
-    FormInput,
-    NextButton,
-  },
-  props: {
-    resetPasswordToken: { type: String, default: '' },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      // We need to initialize the component with any
-      // properties that will be used in it
-      credentials: {
-        confirmPassword: '',
-        password: '',
-      },
-      newPasswordAPI: {
-        message: '',
-        showLoading: false,
-      },
-      error: '',
-    };
-  },
-  mounted() {
-    // If url opened without token
-    // redirect to login
-    if (!this.resetPasswordToken) {
-      window.location = DEFAULT_REDIRECT_URL;
-    }
-  },
-  validations: {
-    credentials: {
-      password: {
-        required,
-        minLength: minLength(6),
-      },
-      confirmPassword: {
-        required,
-        minLength: minLength(6),
-        isEqPassword(value) {
-          if (value !== this.credentials.password) {
-            return false;
-          }
-          return true;
-        },
+const props = defineProps({
+  resetPasswordToken: { type: String, default: '' },
+});
+
+const { t } = useI18n();
+
+const credentials = reactive({
+  confirmPassword: '',
+  password: '',
+});
+
+const showLoading = ref(false);
+
+const rules = computed(() => ({
+  credentials: {
+    password: {
+      required,
+      minLength: minLength(6),
+    },
+    confirmPassword: {
+      required,
+      minLength: minLength(6),
+      isEqPassword(value) {
+        return value === credentials.password;
       },
     },
   },
-  methods: {
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.newPasswordAPI.showLoading = false;
-      useAlert(message);
-    },
-    submitForm() {
-      this.newPasswordAPI.showLoading = true;
-      const credentials = {
-        confirmPassword: this.credentials.confirmPassword,
-        password: this.credentials.password,
-        resetPasswordToken: this.resetPasswordToken,
-      };
-      setNewPassword(credentials)
-        .then(() => {
-          window.location = DEFAULT_REDIRECT_URL;
-        })
-        .catch(error => {
-          this.showAlertMessage(
-            error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
-          );
-        });
-    },
-  },
+}));
+
+const v$ = useVuelidate(rules, { credentials });
+
+const showAlertMessage = message => {
+  showLoading.value = false;
+  useAlert(message);
 };
+
+const submitForm = async () => {
+  showLoading.value = true;
+  const credentialsData = {
+    confirmPassword: credentials.confirmPassword,
+    password: credentials.password,
+    resetPasswordToken: props.resetPasswordToken,
+  };
+
+  try {
+    await setNewPassword(credentialsData);
+    window.location = DEFAULT_REDIRECT_URL;
+  } catch (error) {
+    showAlertMessage(error?.message || t('SET_NEW_PASSWORD.API.ERROR_MESSAGE'));
+  }
+};
+
+onMounted(() => {
+  // If url opened without token, redirect to login
+  if (!props.resetPasswordToken) {
+    window.location = DEFAULT_REDIRECT_URL;
+  }
+});
 </script>
 
 <template>
@@ -100,7 +84,7 @@ export default {
       </h1>
 
       <div class="space-y-6 mt-5">
-        <FormInput
+        <Input
           v-model="credentials.password"
           name="password"
           type="password"
@@ -114,7 +98,7 @@ export default {
           :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.password.$touch"
         />
-        <FormInput
+        <Input
           v-model="credentials.confirmPassword"
           name="confirm_password"
           type="password"
@@ -137,9 +121,9 @@ export default {
           :disabled="
             v$.credentials.password.$invalid ||
             v$.credentials.confirmPassword.$invalid ||
-            newPasswordAPI.showLoading
+            showLoading
           "
-          :is-loading="newPasswordAPI.showLoading"
+          :is-loading="showLoading"
         />
       </div>
     </form>
diff --git a/app/javascript/v3/views/auth/reset/password/Index.vue b/app/javascript/v3/views/auth/reset/password/Index.vue
index e8c4c76bc..03288f406 100644
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -1,64 +1,54 @@
-<script>
+<script setup>
+import { ref, reactive, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
 import { required, minLength, email } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
 import { useBranding } from 'shared/composables/useBranding';
 import { resetPassword } from '../../../../api/auth';
-import FormInput from 'dashboard/components-next/input/Input.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  components: { FormInput, NextButton },
-  setup() {
-    const { replaceInstallationName } = useBranding();
-    return { v$: useVuelidate(), replaceInstallationName };
-  },
-  data() {
-    return {
-      credentials: { email: '' },
-      resetPassword: {
-        message: '',
-        showLoading: false,
-      },
-      error: '',
-    };
-  },
-  validations() {
-    return {
-      credentials: {
-        email: {
-          required,
-          email,
-          minLength: minLength(4),
-        },
-      },
-    };
-  },
-  methods: {
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.resetPassword.showLoading = false;
-      useAlert(message);
-    },
-    submit() {
-      this.resetPassword.showLoading = true;
-      resetPassword(this.credentials)
-        .then(res => {
-          let successMessage = this.$t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
-          if (res.data && res.data.message) {
-            successMessage = res.data.message;
-          }
-          this.showAlertMessage(successMessage);
-        })
-        .catch(error => {
-          let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
-          if (error?.response?.data?.message) {
-            errorMessage = error.response.data.message;
-          }
-          this.showAlertMessage(errorMessage);
-        });
+const { t } = useI18n();
+const { replaceInstallationName } = useBranding();
+
+const credentials = reactive({ email: '' });
+const showLoading = ref(false);
+
+const rules = computed(() => ({
+  credentials: {
+    email: {
+      required,
+      email,
+      minLength: minLength(4),
     },
   },
+}));
+
+const v$ = useVuelidate(rules, { credentials });
+
+const showAlertMessage = message => {
+  showLoading.value = false;
+  useAlert(message);
+};
+
+const submit = async () => {
+  showLoading.value = true;
+
+  try {
+    const res = await resetPassword(credentials);
+    let successMessage = t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
+    if (res.data && res.data.message) {
+      successMessage = res.data.message;
+    }
+    showAlertMessage(successMessage);
+  } catch (error) {
+    let errorMessage = t('RESET_PASSWORD.API.ERROR_MESSAGE');
+    if (error?.response?.data?.message) {
+      errorMessage = error.response.data.message;
+    }
+    showAlertMessage(errorMessage);
+  }
 };
 </script>
 
@@ -81,7 +71,7 @@ export default {
         {{ replaceInstallationName($t('RESET_PASSWORD.DESCRIPTION')) }}
       </p>
       <div class="space-y-5">
-        <FormInput
+        <Input
           v-model="credentials.email"
           name="email_address"
           autocomplete="email"
@@ -99,8 +89,8 @@ export default {
           data-testid="submit_button"
           class="w-full"
           :label="$t('RESET_PASSWORD.SUBMIT')"
-          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
-          :is-loading="resetPassword.showLoading"
+          :disabled="v$.credentials.email.$invalid || showLoading"
+          :is-loading="showLoading"
         />
       </div>
       <p class="mt-4 -mb-1 text-sm text-n-slate-11">
diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index f4678525e..68bd5f7b8 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -1,38 +1,28 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useBranding } from 'shared/composables/useBranding';
 import SignupForm from './components/Signup/Form.vue';
 import Testimonials from './components/Testimonials/Index.vue';
 import Spinner from 'shared/components/Spinner.vue';
 
-export default {
-  components: {
-    SignupForm,
-    Spinner,
-    Testimonials,
-  },
-  setup() {
-    const { replaceInstallationName } = useBranding();
-    return { replaceInstallationName };
-  },
-  data() {
-    return { isLoading: false };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    isAChatwootInstance() {
-      return this.globalConfig.installationName === 'Chatwoot';
-    },
-  },
-  beforeMount() {
-    this.isLoading = this.isAChatwootInstance;
-  },
-  methods: {
-    resizeContainers() {
-      this.isLoading = false;
-    },
-  },
+const { replaceInstallationName } = useBranding();
+
+const globalConfig = useMapGetter('globalConfig/get');
+
+const isLoading = ref(false);
+
+const isAChatwootInstance = computed(() => {
+  return globalConfig.value.installationName === 'Chatwoot';
+});
+
+const resizeContainers = () => {
+  isLoading.value = false;
 };
+
+onBeforeMount(() => {
+  isLoading.value = isAChatwootInstance.value;
+});
 </script>
 
 <template>
@@ -62,7 +52,7 @@ export default {
           </div>
           <SignupForm />
           <div class="px-1 text-sm text-n-slate-12">
-            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }} </span>
+            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
             <router-link class="text-link text-n-brand mx-1" to="/app/login">
               {{ replaceInstallationName($t('LOGIN.TITLE')) }}
             </router-link>
diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index b7ceb1bb8..58648d074 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -197,7 +197,7 @@ const handlePasswordBlur = () => {
 <template>
   <div class="flex-1 px-1 overflow-auto">
     <form class="space-y-3" @submit.prevent="submit">
-      <div class="flex items-start gap-2">
+      <div class="grid grid-cols-2 gap-2">
         <Input
           v-model="credentials.fullName"
           name="full_name"
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
index 514aa6036..c36f08f11 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -1,28 +1,26 @@
-<script>
+<script setup>
+import { ref, onBeforeMount } from 'vue';
 import TestimonialCard from './TestimonialCard.vue';
 import { getTestimonialContent } from '../../../../../api/testimonials';
-export default {
-  components: { TestimonialCard },
-  emits: ['resizeContainers'],
-  data() {
-    return { testimonials: [] };
-  },
-  beforeMount() {
-    this.fetchTestimonials();
-  },
-  methods: {
-    async fetchTestimonials() {
-      try {
-        const { data } = await getTestimonialContent();
-        this.testimonials = data;
-      } catch (error) {
-        // Ignoring the error as the UI wouldn't break
-      } finally {
-        this.$emit('resizeContainers', !!this.testimonials.length);
-      }
-    },
-  },
+
+const emit = defineEmits(['resizeContainers']);
+
+const testimonials = ref([]);
+
+const fetchTestimonials = async () => {
+  try {
+    const { data } = await getTestimonialContent();
+    testimonials.value = data;
+  } catch (error) {
+    // Ignoring the error as the UI wouldn't break
+  } finally {
+    emit('resizeContainers', !!testimonials.value.length);
+  }
 };
+
+onBeforeMount(() => {
+  fetchTestimonials();
+});
 </script>
 
 <template>
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
index 6ebd8e92c..43c7ee785 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
@@ -1,24 +1,22 @@
-<script>
-export default {
-  props: {
-    reviewContent: {
-      type: String,
-      default: '',
-    },
-    authorImage: {
-      type: String,
-      default: '',
-    },
-    authorName: {
-      type: String,
-      default: '',
-    },
-    authorDesignation: {
-      type: String,
-      default: '',
-    },
+<script setup>
+defineProps({
+  reviewContent: {
+    type: String,
+    default: '',
   },
-};
+  authorImage: {
+    type: String,
+    default: '',
+  },
+  authorName: {
+    type: String,
+    default: '',
+  },
+  authorDesignation: {
+    type: String,
+    default: '',
+  },
+});
 </script>
 
 <template>
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index 9ad63686d..e7b62119c 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -1,24 +1,32 @@
-<script>
-// utils and composables
-import { login } from '../../api/auth';
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email as emailValidator } from '@vuelidate/validators';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { parseBoolean } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
-import { required, email } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useBranding } from 'shared/composables/useBranding';
 import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
 import SessionStorage from 'shared/helpers/sessionStorage';
-import { useBranding } from 'shared/composables/useBranding';
-
-// components
+import { login } from '../../api/auth';
 import SimpleDivider from '../../components/Divider/SimpleDivider.vue';
-import FormInput from 'dashboard/components-next/input/Input.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import MfaVerification from 'dashboard/components/auth/MfaVerification.vue';
 
+const props = defineProps({
+  ssoAuthToken: { type: String, default: '' },
+  ssoAccountId: { type: String, default: '' },
+  ssoConversationId: { type: String, default: '' },
+  email: { type: String, default: '' },
+  authError: { type: String, default: '' },
+});
+
 const ERROR_MESSAGES = {
   'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
   'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
@@ -28,189 +36,162 @@ const ERROR_MESSAGES = {
 
 const IMPERSONATION_URL_SEARCH_KEY = 'impersonation';
 
-export default {
-  components: {
-    FormInput,
-    GoogleOAuthButton,
-    Spinner,
-    NextButton,
-    SimpleDivider,
-    MfaVerification,
-    Icon,
-  },
-  props: {
-    ssoAuthToken: { type: String, default: '' },
-    ssoAccountId: { type: String, default: '' },
-    ssoConversationId: { type: String, default: '' },
-    email: { type: String, default: '' },
-    authError: { type: String, default: '' },
-  },
-  setup() {
-    const { replaceInstallationName } = useBranding();
-    return {
-      replaceInstallationName,
-      v$: useVuelidate(),
-    };
-  },
-  data() {
-    return {
-      // We need to initialize the component with any
-      // properties that will be used in it
-      credentials: {
-        email: '',
-        password: '',
-      },
-      loginApi: {
-        message: '',
-        showLoading: false,
-        hasErrored: false,
-      },
-      error: '',
-      mfaRequired: false,
-      mfaToken: null,
-    };
-  },
-  validations() {
-    return {
-      credentials: {
-        password: {
-          required,
-        },
-        email: {
-          required,
-          email,
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    showGoogleOAuth() {
-      return Boolean(window.chatwootConfig.googleOAuthClientId);
-    },
-    showSignupLink() {
-      return parseBoolean(window.chatwootConfig.signupEnabled);
-    },
-    showSamlLogin() {
-      return this.globalConfig.isEnterprise;
-    },
-  },
-  created() {
-    if (this.ssoAuthToken) {
-      this.submitLogin();
-    }
-    if (this.authError) {
-      const messageKey = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
-      // Use a method to get the translated text to avoid dynamic key warning
-      const translatedMessage = this.getTranslatedMessage(messageKey);
-      useAlert(translatedMessage);
-      // wait for idle state
-      this.requestIdleCallbackPolyfill(() => {
-        // Remove the error query param from the url
-        const { query } = this.$route;
-        this.$router.replace({ query: { ...query, error: undefined } });
-      });
-    }
-  },
-  methods: {
-    getTranslatedMessage(key) {
-      // Avoid dynamic key warning by handling each case explicitly
-      switch (key) {
-        case 'LOGIN.OAUTH.NO_ACCOUNT_FOUND':
-          return this.$t('LOGIN.OAUTH.NO_ACCOUNT_FOUND');
-        case 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY':
-          return this.$t('LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY');
-        case 'LOGIN.API.UNAUTH':
-        default:
-          return this.$t('LOGIN.API.UNAUTH');
-      }
-    },
-    // TODO: Remove this when Safari gets wider support
-    // Ref: https://caniuse.com/requestidlecallback
-    //
-    requestIdleCallbackPolyfill(callback) {
-      if (window.requestIdleCallback) {
-        window.requestIdleCallback(callback);
-      } else {
-        // Fallback for safari
-        // Using a delay of 0 allows the callback to be executed asynchronously
-        // in the next available event loop iteration, similar to requestIdleCallback
-        setTimeout(callback, 0);
-      }
-    },
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.loginApi.showLoading = false;
-      this.loginApi.message = message;
-      useAlert(this.loginApi.message);
-    },
-    handleImpersonation() {
-      // Detects impersonation mode via URL and sets a session flag to prevent user settings changes during impersonation.
-      const urlParams = new URLSearchParams(window.location.search);
-      const impersonation = urlParams.get(IMPERSONATION_URL_SEARCH_KEY);
-      if (impersonation) {
-        SessionStorage.set(SESSION_STORAGE_KEYS.IMPERSONATION_USER, true);
-      }
-    },
-    submitLogin() {
-      this.loginApi.hasErrored = false;
-      this.loginApi.showLoading = true;
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { replaceInstallationName } = useBranding();
 
-      const credentials = {
-        email: this.email
-          ? decodeURIComponent(this.email)
-          : this.credentials.email,
-        password: this.credentials.password,
-        sso_auth_token: this.ssoAuthToken,
-        ssoAccountId: this.ssoAccountId,
-        ssoConversationId: this.ssoConversationId,
-      };
+const globalConfig = useMapGetter('globalConfig/get');
 
-      login(credentials)
-        .then(result => {
-          // Check if MFA is required
-          if (result?.mfaRequired) {
-            this.loginApi.showLoading = false;
-            this.mfaRequired = true;
-            this.mfaToken = result.mfaToken;
-            return;
-          }
+const credentials = reactive({
+  email: '',
+  password: '',
+});
 
-          this.handleImpersonation();
-          this.showAlertMessage(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
-        })
-        .catch(response => {
-          // Reset URL Params if the authentication is invalid
-          if (this.email) {
-            window.location = '/app/login';
-          }
-          this.loginApi.hasErrored = true;
-          this.showAlertMessage(
-            response?.message || this.$t('LOGIN.API.UNAUTH')
-          );
-        });
-    },
-    submitFormLogin() {
-      if (this.v$.credentials.email.$invalid && !this.email) {
-        this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
-        return;
-      }
+const showLoading = ref(false);
+const hasErrored = ref(false);
+const mfaRequired = ref(false);
+const mfaToken = ref(null);
 
-      this.submitLogin();
+const rules = computed(() => ({
+  credentials: {
+    password: {
+      required,
     },
-    handleMfaVerified() {
-      // MFA verification successful, continue with login
-      this.handleImpersonation();
-      window.location = '/app';
-    },
-    handleMfaCancel() {
-      // User cancelled MFA, reset state
-      this.mfaRequired = false;
-      this.mfaToken = null;
-      this.credentials.password = '';
+    email: {
+      required,
+      email: emailValidator,
     },
   },
+}));
+
+const v$ = useVuelidate(rules, { credentials });
+
+const showGoogleOAuth = computed(() => {
+  return Boolean(window.chatwootConfig.googleOAuthClientId);
+});
+
+const showSignupLink = computed(() => {
+  return parseBoolean(window.chatwootConfig.signupEnabled);
+});
+
+const showSamlLogin = computed(() => {
+  return Boolean(globalConfig.value.isEnterprise);
+});
+
+const getTranslatedMessage = key => {
+  // Avoid dynamic key warning by handling each case explicitly
+  switch (key) {
+    case 'LOGIN.OAUTH.NO_ACCOUNT_FOUND':
+      return t('LOGIN.OAUTH.NO_ACCOUNT_FOUND');
+    case 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY':
+      return t('LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY');
+    case 'LOGIN.API.UNAUTH':
+    default:
+      return t('LOGIN.API.UNAUTH');
+  }
 };
+
+// TODO: Remove this when Safari gets wider support
+// Ref: https://caniuse.com/requestidlecallback
+const requestIdleCallbackPolyfill = callback => {
+  if (window.requestIdleCallback) {
+    window.requestIdleCallback(callback);
+  } else {
+    // Fallback for safari
+    // Using a delay of 0 allows the callback to be executed asynchronously
+    // in the next available event loop iteration, similar to requestIdleCallback
+    setTimeout(callback, 0);
+  }
+};
+
+const showAlertMessage = message => {
+  showLoading.value = false;
+  useAlert(message);
+};
+
+const handleImpersonation = () => {
+  // Detects impersonation mode via URL and sets a session flag to prevent user settings changes during impersonation.
+  const urlParams = new URLSearchParams(window.location.search);
+  const impersonation = urlParams.get(IMPERSONATION_URL_SEARCH_KEY);
+  if (impersonation) {
+    SessionStorage.set(SESSION_STORAGE_KEYS.IMPERSONATION_USER, true);
+  }
+};
+
+const submitLogin = async () => {
+  hasErrored.value = false;
+  showLoading.value = true;
+
+  const loginCredentials = {
+    email: props.email ? decodeURIComponent(props.email) : credentials.email,
+    password: credentials.password,
+    sso_auth_token: props.ssoAuthToken,
+    ssoAccountId: props.ssoAccountId,
+    ssoConversationId: props.ssoConversationId,
+  };
+
+  try {
+    const result = await login(loginCredentials);
+
+    // Check if MFA is required
+    if (result?.mfaRequired) {
+      showLoading.value = false;
+      mfaRequired.value = true;
+      mfaToken.value = result.mfaToken;
+      return;
+    }
+
+    handleImpersonation();
+    showAlertMessage(t('LOGIN.API.SUCCESS_MESSAGE'));
+  } catch (response) {
+    // Reset URL Params if the authentication is invalid
+    if (props.email) {
+      window.location = '/app/login';
+    }
+    hasErrored.value = true;
+    showAlertMessage(response?.message || t('LOGIN.API.UNAUTH'));
+  }
+};
+
+const submitFormLogin = () => {
+  if (v$.value.credentials.email.$invalid && !props.email) {
+    showAlertMessage(t('LOGIN.EMAIL.ERROR'));
+    return;
+  }
+
+  submitLogin();
+};
+
+const handleMfaVerified = () => {
+  // MFA verification successful, continue with login
+  handleImpersonation();
+  window.location = '/app';
+};
+
+const handleMfaCancel = () => {
+  // User cancelled MFA, reset state
+  mfaRequired.value = false;
+  mfaToken.value = null;
+  credentials.password = '';
+};
+
+onMounted(() => {
+  if (props.ssoAuthToken) {
+    submitLogin();
+  }
+  if (props.authError) {
+    const messageKey = ERROR_MESSAGES[props.authError] ?? 'LOGIN.API.UNAUTH';
+    const translatedMessage = getTranslatedMessage(messageKey);
+    useAlert(translatedMessage);
+    // wait for idle state
+    requestIdleCallbackPolyfill(() => {
+      // Remove the error query param from the url
+      const { query } = route;
+      router.replace({ query: { ...query, error: undefined } });
+    });
+  }
+});
 </script>
 
 <template>
@@ -255,10 +236,10 @@ export default {
       class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
       :class="{
         'mb-8 mt-15': !showGoogleOAuth,
-        'animate-wiggle': loginApi.hasErrored,
+        'animate-wiggle': hasErrored,
       }"
     >
-      <div v-if="!email">
+      <div v-if="!props.email">
         <div class="flex flex-col gap-4">
           <GoogleOAuthButton v-if="showGoogleOAuth" />
           <div v-if="showSamlLogin" class="text-center">
@@ -282,7 +263,7 @@ export default {
           />
         </div>
         <form class="space-y-5" @submit.prevent="submitFormLogin">
-          <FormInput
+          <Input
             v-model="credentials.email"
             name="email_address"
             type="text"
@@ -295,7 +276,7 @@ export default {
             :message-type="v$.credentials.email.$error ? 'error' : ''"
             @input="v$.credentials.email.$touch"
           />
-          <FormInput
+          <Input
             v-model="credentials.password"
             type="password"
             name="password"
@@ -322,7 +303,7 @@ export default {
                 </router-link>
               </p>
             </template>
-          </FormInput>
+          </Input>
           <NextButton
             lg
             type="submit"
@@ -330,8 +311,8 @@ export default {
             class="w-full"
             :tabindex="3"
             :label="$t('LOGIN.SUBMIT')"
-            :disabled="loginApi.showLoading"
-            :is-loading="loginApi.showLoading"
+            :disabled="showLoading"
+            :is-loading="showLoading"
           />
         </form>
       </div>
diff --git a/app/javascript/v3/views/login/Saml.vue b/app/javascript/v3/views/login/Saml.vue
index b2362bbda..d53abadea 100644
--- a/app/javascript/v3/views/login/Saml.vue
+++ b/app/javascript/v3/views/login/Saml.vue
@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 
 // components
-import FormInput from 'dashboard/components-next/input/Input.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
@@ -94,7 +94,7 @@ onMounted(async () => {
       }"
     >
       <form class="space-y-5" method="POST" action="/api/v1/auth/saml_login">
-        <FormInput
+        <Input
           v-model="credentials.email"
           name="email"
           type="text"