chore: Move auth components to Composition API

2025-11-07 21:57:08 +05:30
parent 0862692b0e
commit 79d9cb3cea
10 changed files with 403 additions and 463 deletions
@@ -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"
@@ -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>
@@ -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>