<script setup>
  useHead({
    title: 'Sign in | Tinysites',
    meta: [
      { 
        name: 'description', 
        content: `Sign into your Tinysites account. Effortlessly design, edit, and launch one-page websites with Tinysites.` 
      },      
    ],
  })

  definePageMeta({
    layout: 'main',
  })

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

  const { login } = useDirectusAuth()

  let error

  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.errors)

        error = e
      }
    }
  }

</script>

<template>
  <div class="auth">

    <div class="login modal">

      <AuthBanner />

      <div class="form-container">
        <div class="form">
          <h3>Sign in to your account</h3>
          <h4 class="policy">By continuing, you agree to our <NuxtLink to="/docs/terms">Terms of 
            use</NuxtLink> and <NuxtLink to="/docs/privacy">Privacy policy</NuxtLink>.</h4>

          <p class="error"></p>
      
          <form :state="credentials" @submit.prevent="attemptLogin">
            <div class="input border">
              <label>Email address</label>
              <input v-model="credentials.email" name="email" type="email" placeholder="Your email address" required="true" />
            </div>

            <div class="input border">
              <label>Password</label>
              <input v-model="credentials.password" name="password" type="password" placeholder="********" required="true" />
            </div>
      
            <button type="submit">Sign in</button>
          </form>
      
          <p class="newbie">Don&apos;t have an account? <NuxtLink to="/register">Create account</NuxtLink></p>
          <p class="reset">Forgot password? <NuxtLink to="/reset">Reset password</NuxtLink></p>
        </div>
      </div>
      
    </div>
  </div>
</template>