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

const username = ref("");
const email = ref("");
const passwordModel = ref(null);

const { passwordRequirements, accountCreated } = useLogger();

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

    try {
        await register({
            username: username.value,
            email: email.value, 
            password: passwordModel.value.password
        });

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

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

        <form @submit.prevent="formRegister">
            <!-- Eingabefeld für Nutzernamen -->
            <FloatingLabelInput
                v-model="username"
                type="text"
                :label="$t('form.username')"
            />

            <!-- Eingabefeld für E-Mail-Adresse -->
            <FloatingLabelInput
                v-model="email"
                type="email"
                :label="$t('form.emailAddress')"
            />

            <!-- 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.signUp") }}
            </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>
