frontend/src/views/PersonalView/PersonalSessionBlock.vue

<script setup>
import { useAuthStore } from '@/stores/authStore.js'
import { computed, onMounted, ref } from 'vue'
import { convertIso } from '@/services/convertTime.js'

const store = useAuthStore()

const currentSession = ref(null)

onMounted(() => {
  store.currentSession().then((data) => {
    currentSession.value = data
  })
})

const formattedDate = computed(() => {
  const expires = currentSession?.value?.expires

  if (!expires) {
    return '---'
  }

  try {
    return convertIso(expires)
  } catch (error) {
    console.log(error, expires);
    return '---';
  }
});

const onLogout = () => {
  store.logout()
}

</script>

<template>
  <n-card :bordered="false" title="Session">
    <n-list hoverable clickable>
      <n-list-item>
        <n-thing title="Session id" content-style="margin-top: 10px;">
          {{ currentSession?.uuid || '---' }}
        </n-thing>
      </n-list-item>

      <n-list-item>
        <n-thing title="Expires at" content-style="margin-top: 10px;">
          {{ formattedDate }}
        </n-thing>
      </n-list-item>
      <div class="button-container-center">
        <n-button type="info" class="center-button" @click="onLogout">Log out</n-button>
      </div>
    </n-list>
  </n-card>
</template>

<style scoped>

</style>