<script lang="ts" setup>
import {useAuthStore} from "~/store/auth";
import {useNotificationStore} from "~/store/notification";

definePageMeta({
  layout: 'main-header'
});

const email = ref("nicolas.doby@gmail.com");
const password = ref("Password123;");

function authenticate() {
  useAuthStore()
    .login(email.value, password.value)
    .then(() => {
      if (useAuthStore().authenticated) {
        navigateTo("/bundle");
      }
    })
    .catch(e => {
      console.dir(e)
      useNotificationStore().pushNotification("warn", e);
    });
}

</script>

<template>
  <form class="login" @submit.prevent="authenticate">
    <input v-model="email" type="email" required autocomplete="username" placeholder="E-mail" aria-label="E-mail"/>
    <input id="code" v-model="password" type="password" required autocomplete="current-password"
           placeholder="Mot de passe" aria-label="Mot de passe"/>
    <button class="button orange" type="submit">
      Continuer
    </button>
    <nuxt-link class="link-forget-password" to="/account/password/reset">J'ai oublié mon mot de passe</nuxt-link>
    <nuxt-link class="button blue" to="/account/create">Créer un compte</nuxt-link>
  </form>
</template>

<style lang="scss" scoped>

@import "assets/css/spacing";

form.login {
  display: flex;
  flex-direction: column;
  gap: $xxx_small;
  padding: $medium 0;

  button {
    margin-block: $medium 0;
  }

  .link-forget-password {
    align-self: center;
    margin-block: $xx_small $x_medium;
  }
}

</style>
