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

  definePageMeta({
    layout: 'main',
    middleware: ["dashboard"]
  })

  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>