OTP Verification and Password Reset

<script>
import { ref, inject, onMounted } from "vue";
import { useForm, useField } from "vee-validate";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import publicApi from "@/publicApi";
import SingleColumn from "@/layouts/SingleColumn.vue";

const authStore = useAuthStore();
const router = useRouter();
const apiUrl = inject<string>("apiUrl");

const showPassword = ref(false);
const alertMessage = ref("");
const alertColor = ref("");
const step = ref(1);
const loading = ref(false);

const items = ["Forget Password", "Reset Password"];

onMounted(() => {
  if (authStore.isAuthenticated) {
    router.push("/dashboard"); // Redirect if already logged in
  }
});

// **Email Form Validation**
const { handleSubmit, handleReset } = useForm({
  validationSchema: {
    email(value: string) {
      return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/i.test(value) || "Must be a valid e-mail.";
    },
  },
});
const email = useField("email");

// **Password Reset Form Validation**




// **Submit Forgot Password**
const submit = handleSubmit(async (values) => {
  loading.value = true;
  alertMessage.value = "";
  alertColor.value = "";

  try {
    const response = await publicApi.post(`${apiUrl}/send-otp-password`, {
      email: values.email,
    });

    loading.value = false;
    if (response.data.success) {
      alertMessage.value = "OTP has been sent successfully!";
      alertColor.value = "success";
      step.value = 2;
    } else {
      alertMessage.value = response.data.message;
      alertColor.value = "error";
    }
  } catch (error: any) {
    loading.value = false;
    alertMessage.value = error.response?.data.message || "Error sending OTP.";
    alertColor.value = "error";
  }
});
// **Submit OTP and Reset Password**
</script>

<script>
nimport { ref, inject, onMounted } from "vue";nimport { useForm, useField } from "vee-validate";nimport { useAuthStore } from "@/stores/auth";nimport { useRouter } from "vue-router";nimport publicApi from "@/publicApi";nimport SingleColumn from "@/layouts/SingleColumn.vue";nnconst authStore = useAuthStore();nconst router = useRouter();nconst apiUrl = inject<string>("apiUrl");nnconst showPassword = ref(false);nconst alertMessage = ref("");nconst alertColor = ref("");nconst step = ref(1);nconst loading = ref(false);nnconst items = ["Forget Password", "Reset Password"];nnonMounted(() => {n  if (authStore.isAuthenticated) {n    router.push("/dashboard");n  }n});nn// **Email Form Validation**nconst { handleSubmit: handleEmailSubmit, handleReset: handleEmailReset } = useForm({n  validationSchema: {n    email(value: string) {n      return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/i.test(value) || "Must be a valid e-mail.";n    },n  },n});nconst email = useField("email");nn// **OTP & Password Form Validation**nconst { handleSubmit: handleResetSubmit } = useForm({n  validationSchema: {n    otp(value: string) {n      return value.length === 6 || "OTP must be 6 digits.";n    },n    password(value: string) {n      return value.length >= 6 || "Password must be at least 6 characters.";n    },n    confirmPassword(value: string, { password }: any) {n      return value === password || "Passwords do not match.";n    },n  },n});nconst otp = useField("otp");nconst password = useField("password");nconst confirmPassword = useField("confirmPassword");nn// **Submit Forgot Password**nconst submitEmail = handleEmailSubmit(async (values) => {n  loading.value = true;n  alertMessage.value = "";n  alertColor.value = "";nn  try {n    const response = await publicApi.post(`${apiUrl}/send-otp-password`, {n      email: values.email,n    });nn    loading.value = false;n    if (response.data.success) {n      alertMessage.value = "OTP has been sent successfully!";n      alertColor.value = "success";n      step.value = 2;n    } else {n      alertMessage.value = response.data.message;n      alertColor.value = "error";n    }n  } catch (error: any) {n    loading.value = false;n    alertMessage.value = error.response?.data.message || "Error sending OTP.";n    alertColor.value = "error";n  }n});nn// **Submit OTP and Reset Password**nconst submitReset = handleResetSubmit(async (values) => {n  loading.value = true;n  alertMessage.value = "";n  alertColor.value = "";nn  try {n    const response = await publicApi.post(`${apiUrl}/reset-password`, {n      email: email.value.value,n      otp: values.otp,n      password: values.password,n    });nn    loading.value = false;n    if (response.data.success) {n      alertMessage.value = "Password has been reset successfully!";n      alertColor.value = "success";n      router.push("/login");n    } else {n      alertMessage.value = response.data.message;n      alertColor.value = "error";n    }n  } catch (error: any) {n    loading.value = false;n    alertMessage.value = error.response?.data.message || "Error resetting password.";n    alertColor.value = "error";n  }n});n
</script>