<script setup>
import { FloatingLabelInput, FormLayout } from '@/components'
import { useLogger } from '@/logger.js'
import { ref } from 'vue'
import { forgotPassword } from '@/api/pse-squared.js'

const email = ref("");

const { passwordForgot } = useLogger();

async function formForgot() {
    try {
        await forgotPassword({ email: email.value });
        passwordForgot();
    } catch (err) {}
}
</script>
<template>
    <FormLayout>
        <!-- Text über Texteingabefeld -->
        <h1 class="h3 mb-3 fw-normal">
            {{ $t("message.emailAddressRequest") }}
        </h1>

        <form @submit.prevent="formForgot">
            <!-- Eingabefeld für E-Mail-Adresse -->
            <FloatingLabelInput
                v-model="email"
                type="email"
                :label="$t('form.emailAddress')"
            />
    
            <!-- Absende Knopf der Daten -->
            <button
                type="submit"
                class="w-100 btn btn-lg btn-primary mt-2"
            >
                {{ $t("message.send") }}
            </button>
        </form>

        <!-- Zurück zur Anmeldung -->
        <router-link to="/">
            <button class="w-100 btn btn-lg btn-secondary mt-2">
                {{ $t("message.close") }}
            </button>
        </router-link>
    </FormLayout>
</template>
<style scoped>
</style>

