chore: Move auth components to Composition API

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>

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>

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">

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>

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"

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>

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>