<template>
    <div class="text-center">
        <div>
            <QIcon
                name="contact_support"
                class="block q-mx-auto text-accent"
                style="font-size: 120px"
            />
        </div>
        <div>
            <QForm
                @submit="onSend"
                class="q-gutter-y-md text-grey-8"
            >
                <div class="text-h5">
                    <div>
                        {{ $t('dontWorry') }}
                    </div>
                    <div>
                        {{ $t('fillData') }}
                    </div>
                </div>
                <QInput
                    v-model="email"
                    :label="$t('user')"
                    :rules="[val => !!val || $t('inputEmail')]"
                    autofocus
                />
                <div class="q-mt-lg">
                    {{ $t('weSendEmail') }}
                </div>
                <div>
                    <QBtn
                        type="submit"
                        :label="$t('send')"
                        class="full-width q-mt-md"
                        color="primary"
                        rounded
                        no-caps
                        unelevated
                    />
                    <div class="text-center q-mt-md">
                        <router-link
                            to="/login"
                            class="link"
                        >
                            {{ $t('return') }}
                        </router-link>
                    </div>
                </div>
            </QForm>
        </div>
    </div>
</template>

<style lang="scss" scoped>
#image {
    height: 190px;
}
.q-btn {
    height: 50px;
}
a {
    color: inherit;
    font-size: 0.8rem;
}
</style>

<script>
export default {
    name: 'VnRememberPasword',
    data() {
        return {
            email: ''
        };
    },
    methods: {
        async onSend() {
            const params = {
                email: this.email
            };
            await this.$axios.post('Users/reset', params);
            this.$q.notify({
                message: this.$t('weHaveSentEmailToRecover'),
                type: 'positive'
            });
            this.$router.push('/login');
        }
    }
};
</script>

<i18n lang="yaml">
en-US:
    user: User
    inputEmail: Input email
    rememberPassword: Rememeber password
    dontWorry: Don't worry!
    fillData: Fill the data
    weSendEmail: We will sent you an email to recover your password
    weHaveSentEmailToRecover: We've sent you an email where you can recover your password
    send: Send
    return: Return
es-ES:
    user: Usuario
    inputEmail: Introduce el correo electrónico
    rememberPassword: Recordar contraseña
    dontWorry: ¡No te preocupes!
    fillData: Rellena los datos
    weSendEmail: Te enviaremos un correo para restablecer tu contraseña
    weHaveSentEmailToRecover: Te hemos enviado un correo donde podrás recuperar tu contraseña
    send: Enviar
    return: Volver
</i18n>
