<script setup>
import { ref } from 'vue'

const user = ref('')
const pass = ref('')

async function login(ev) {
  ev.preventDefault()
  const api_url = '/api/auth'
  const payload = { username: user.value, password: pass.value }
  const fetch_options = {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: {
      'Content-Type': 'application/json'
    }
  }

  console.log(user.value)
  console.log(pass.value)
  console.log(api_url)
  console.log(payload)
  console.log(fetch_options)

  let resp = await fetch(api_url, fetch_options)
  console.log(resp)
  if (resp.ok) {
    let ans = await resp.json()
    console.log(ans)

    window.location.hash = "/"
  } else {
    user.value = ''
    pass.value = ''
  }
}
</script>

<template>
  <main class="form-signin w-100 m-auto">
    <form onsubmit="event.preventDefault();">
      <!-- <img class="mb-4" src="../assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> -->
      <svg class="bi me-2" width="72" height="57" role="img" viewBox="0 0 16 16">
        <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" />
        <path
          d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5h5.5a.5.5 0 0 1 0 1H10A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5H.5a.5.5 0 0 1 0-1H6A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1zm6 7.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5z" />
      </svg>
      <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

      <div class="form-floating">
        <input type="email" v-model="user" class="form-control" id="floatingInput" placeholder="username">
        <label for="floatingInput">Username</label>
      </div>
      <div class="form-floating">
        <input type="password" v-model="pass" class="form-control" id="floatingPassword" placeholder="Password">
        <label for="floatingPassword">Password</label>
      </div>
      <div class="form-floating mb-3">
        <a href="#/signup">Sign up</a>
      </div>

      <button type="submit" @click="login" class="btn btn-primary w-100 py-2">Sign in</button>

      <p class="mt-5 mb-3 text-body-secondary">&copy; 2023</p>
    </form>
  </main>
</template>

<style scoped>
/* html,
body {
  height: 100%;
} */

.form-signin {
  max-width: 330px;
  padding: 1rem;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
</style>
