<script setup lang="ts">
import {useAuthStore} from "@/stores/authStore";

const store = useAuthStore()

</script>

<template>
  <h1>Test page</h1>
  <table class="test"  style="width:100%">
    <tbody>
    <tr>
      <td>Is Currently Authenticated ? </td>
      <td>{{store.authenticated}}</td>
      <td><button @click="store.login">Login</button></td>
      <td><button @click="store.logout">Logout</button></td>
      <td><button @click="store.signup">Signup</button></td>
    </tr>
    <tr>
      <td>current token</td>
      <td>{{store.user.token}}</td>
      <td><button @click="store.refreshUserToken">Refresh</button></td>
    </tr>
    <tr>
      <td>Current refresh token</td>
      <td>{{store.user.refreshToken}}</td>
    </tr>
    <tr>
      <td>Unauthenticated API call</td>
      <td><button>call</button></td>
      <td>res</td>
      <td></td>
    </tr>
    <tr>
      <td>Authenticated API call</td>
      <td><button>call</button></td>
      <td>res</td>
      <td></td>
    </tr>
    </tbody>
  </table>
</template>

<style scoped>
table {
    width: 100px;
  table-layout: fixed
  }
  tr {
    width: 100%;
    height: 100%;
  }
  td {
    border: solid 1px black;
    width: 20%;
    height: 100%;
    overflow: hidden;
  }
</style>