<script setup>
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import VnInput from 'src/components/common/VnInput.vue';
import VnOutForm from 'src/components/ui/VnOutForm.vue';

const quasar = useQuasar();
const router = useRouter();
const route = useRoute();
const { t } = useI18n();

const user = ref(route.query.user);

async function onSubmit() {
    try {
        await axios.post('VnUsers/recoverPassword', { user: user.value, app: 'lilium' });
        router.push('Login');
        quasar.notify({
            message: t('globals.notificationSent'),
            type: 'positive',
        });
    } catch (e) {
        quasar.notify({
            message: e.response?.data?.error.message,
            type: 'negative',
        });
    }
}
</script>
<template>
    <VnOutForm @submit="onSubmit" :title="t('globals.pageTitles.recoverPassword')">
        <template #default>
            <VnInput
                v-model="user"
                :label="t('recoverPassword.userOrEmail')"
                :hint="t('recoverPassword.explanation')"
                autofocus
                required
            >
                <template #prepend>
                    <QIcon name="contact_mail" />
                </template>
            </VnInput>
        </template>
        <template #buttons>
            <QBtn
                :label="t('globals.pageTitles.recoverPassword')"
                type="submit"
                color="primary"
                class="full-width q-mt-md"
                rounded
                unelevated
            />
        </template>
    </VnOutForm>
</template>
