<template>
  <VaForm ref="passwordForm" @submit.prevent="submit" @keyup.enter="submit">
    <h1 class="font-semibold text-4xl mb-4">Забыли свой пароль?</h1>
    <p class="text-base mb-4 leading-5">
      Если вы забыли свой пароль, не волнуйтесь. Просто введите свой адрес
      электронной почты ниже, и мы отправим вам электронное письмо с временным
      паролем.
    </p>
    <VaInput
      v-model="email"
      :rules="[(v) => !!v || 'Email обязательное поле']"
      class="mb-4"
      label="Введите ваш email"
      type="email"
    />
    <VaButton class="w-full mb-2" @click="submit">Отправить пароль</VaButton>
    <VaButton
      :to="{ name: 'login' }"
      class="w-full"
      preset="secondary"
      @click="submit"
      >Вернуться</VaButton
    >
  </VaForm>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref } from "vue";
import { useForm } from "vuestic-ui";
import { useRouter } from "vue-router";

const email = ref("");
const form = useForm("passwordForm");
const router = useRouter();

const submit = () => {
  if (form.validate()) {
    axios
      .post(`/api/v0/profiles/passwords/require/recover`, {
        email: email.value,
      })
      .then((response) => {
        router.push({ name: "recover-password-email", query: { email: email.value }  });
      });
  }
};
</script>
