<script setup>

  const credentials = reactive({
    email: undefined,
    password: undefined,
    test: undefined,
  })

  const { login } = useDirectusAuth()

  async function attemptLogin() {
    if (credentials.test === undefined) {
      try {
        await login({
          email: credentials.email,
          password: credentials.password
        })
  
        // Redirect on success
        navigateTo('/dashboard')
  
      } catch (e) {
        console.log(e)
      }
    }

  }
</script>

<template>
  <div class="form">
    <form :state="credentials" @submit.prevent="attemptLogin">
      <h2>Sign in to your account</h2>
      <p>Don&apos;t have an account? <NuxtLink to="/contact">Get in touch</NuxtLink></p>

      <label for="email" >Email address</label>
      <input v-model="credentials.email" name="email" type="email" placeholder="Enter your email address" required="true" />

      <input v-model="credentials.test" type="text" class="hidden" />

      <label for="password" >Password</label>
      <input v-model="credentials.password" name="password" type="password" placeholder="********" required="true" />

      <NuxtLink to="/contact" class="reset" >Forgot password</NuxtLink>

      <button type="submit">Sign in</button>
    </form>
  </div>
</template>