chore: Move auth components to Composition API

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