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

const props = defineProps({
    token: {
        type: String,
        default: ""
    },
    username: {
        type: String,
        default: ""
    }
});

const { passwordRequirements, passwordReset } = useLogger();

const passwordModel = ref(null);

async function formResetPassword() {
    if(!passwordModel.value.valid) {
        // log.append({type: "info", message: "Password requirements are not met"})
        passwordRequirements();
        return;
    } 

    try {
        await resetPassword({
            username: props.username,
            password: passwordModel.value.password,
            token: props.token
        });

        passwordReset();
        router.push("/login");
    } catch (err) {}
}

</script>
<template>
    <FormLayout>
        <form @submit.prevent="formResetPassword">
            <!-- Text über Texteingabefeld -->
            <h1 class="h3 mb-3 fw-normal">
                {{ $t("message.setNewPassword") }}
            </h1>

            <!-- Passwort-Validierungs-Komponente -->
            <PasswordValidator v-model="passwordModel" />

            <!-- Absende Knopf für E-Mail-Adresse -->
            <button
                type="submit"
                class="w-100 btn btn-lg btn-primary"
            >
                {{ $t("message.send") }}
            </button>

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