<script setup>
import { ref } from 'vue';
import { FloatingLabelInput, FormLayout, PasswordInput } from '@/components'
import { store } from '@/store.js';
import router from '@/router.js';

const username = ref("");
const password = ref("");
const stayLoggedIn = ref(false);

async function login(e) {
    const success = await store.login({
        username: username.value,
        password: password.value
    }, stayLoggedIn.value);

    if (success) {
        router.push("/subscriptions");
    }
}

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

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

            <!-- Eingabefeld für Passwort -->
            <PasswordInput
                v-model="password"
                :label="$t('form.password')"
            />
            
            <div class="row">
                <!-- Angemeldet bleiben Checkbox -->
                <div class="col-6">
                    <div class="checkbox mb-3">
                        <label>
                            <input
                                v-model="stayLoggedIn"
                                type="checkbox"
                                value="remember-me"
                            >
                            {{ $t("message.rememberMe") }}
                        </label>
                    </div>
                </div>

                <!-- Passwort vergessen Link -->
                <div class="col-6">
                    <router-link to="/forgotPassword">
                        {{ $t("message.forgotPassword") }}?
                    </router-link>
                </div>
            </div>

            <!-- Knopf um sich anzumelden -->
            <button
                type="submit"
                class="w-100 btn btn-lg btn-primary"
            >
                {{ $t("message.login") }}
            </button>

            <!-- Registrieren Link -->
            <p class="mt-1">
                {{ $t("message.noAccountYet") }}?
                <router-link to="/registration">
                    {{ $t("message.signUp") }}
                </router-link>
            </p>
        </form>

        <!-- Footer -->
        <p class="mt-5 mb-3 text-muted">
            &copy; 2023
        </p>
    </FormLayout>
</template>
<style scoped>
</style>