<script setup lang="ts">
import * as log from 'loglevel';
import {reactive} from 'vue';
import {useUserStore} from '@/stores/user';
import {useRoute} from 'vue-router';

const route = useRoute()

log.debug('LoginView.vue created');
log.debug(route.query);

const state = reactive({
  username: '',
  password: '',
});

const userStore = useUserStore();

</script>

<template>
  <main class="px-8 py-8">
    <h1>Login</h1>

    <form
      @submit.prevent="userStore.handleLogin(state.username, state.password, route.query.next)"
    >
      <div class="mt-8 mb-4">
        <label class="block mb-1" for="email">Username</label>
        <input
          id="username"
          type="text"
          name="username"
          v-model="state.username"
          class="py-2 px-3 border border-gray-500 mt-1 block w-96"
        />
      </div>
      <div class="mb-4">
        <label class="block mb-1" for="password">Password</label>
        <input
          id="password"
          type="password"
          name="password"
          v-model="state.password"
          class="py-2 px-3 border border-gray-500 mt-1 block w-96"
        />
      </div>

      <div>
        <input
          type="submit"
          value="Login"
          class="btn-primary"
        />
      </div>
    </form>

  </main>
</template>

<style scoped>
</style>
