<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import * as log from "loglevel";
import { reactive } from "vue";
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 lg:px-12 lg:py-12 bg-gray-200">
    <div class="container-medium">
      <h1 class="mb-8">Login</h1>

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

        <div>
          <input
            data-cy="login-button"
            type="submit"
            value="Login"
            class="btn-primary"
          />
        </div>
      </form>
      <p class="pt-8"><a href="/sso/login/">Login mit SSO</a></p>
    </div>
  </main>
</template>

<style scoped></style>
