<script setup lang="ts">
import { onBeforeMount } from "vue";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import { OpenAPI } from "@/client";

const router = useRouter();

const store = useAuthStore();

onBeforeMount(() => {
  if (store.authenticated) {
    // If user is authenticated redirect him to the dashboard
    router.push({ name: "buckets" });
  }
});
</script>

<template>
  <div
    class="card text-center bg-dark ms-md-auto position-fixed top-50 start-50 translate-middle"
  >
    <div class="card-header text-dark bg-light">LoginView</div>
    <div class="card-body p-5">
      <h5 class="card-title text-light">Login</h5>
      <p class="card-text text-secondary">
        Login to this service with LifeScience
      </p>
      <a :href="OpenAPI.BASE + '/auth/login'" class="m-2">
        <img src="/src/assets/images/ls-login.png" alt="[LS Login]" />
      </a>
    </div>
  </div>
</template>

<style scoped></style>