current session info + some template refactor

src/stores/authStore.js

@@ -72,6 +72,15 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
+  const currentSession = async () => {
+    try {
+      const response = await apiClient.get('/user/auth/current-session')
+      return response.data
+    } catch (error) {
+      console.error('Register error:', error)
+    }
+  }
+
   return {
     accessToken,
     user,
@@ -83,5 +92,6 @@ export const useAuthStore = defineStore('auth', () => {
     forceLogout,
     register,
     userInfo,
+    currentSession,
   }
 })

src/views/PersonalView.vue

@@ -1,11 +1,15 @@
 <script setup>
-import List from '@/views/PersonalView/List.vue'
+import PersonalMainBlock from '@/views/PersonalView/PersonalMainBlock.vue'
+import PersonalSessionBlock from '@/views/PersonalView/PersonalSessionBlock.vue'
 </script>
 
 <template>
   <n-card bordered title="Personal info">
-    <List />
+    <PersonalMainBlock />
+    <PersonalSessionBlock />
   </n-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+</style>

src/views/PersonalView/List.vue

@@ -1,42 +0,0 @@
-<script setup>
-import { useAuthStore} from '@/stores/authStore.js'
-import { onMounted, ref } from 'vue'
-
-const store = useAuthStore()
-
-const userData = ref(null)
-
-onMounted(() => {
-  store.userInfo().then(data => {
-    userData.value = data
-  })
-})
-
-</script>
-
-<template>
-  <n-list hoverable clickable>
-    <n-list-item>
-      <n-thing title="Email" content-style="margin-top: 10px;">
-        {{ userData?.email || "---" }}
-      </n-thing>
-    </n-list-item>
-
-    <n-list-item>
-      <n-thing title="Username" content-style="margin-top: 10px;">
-        {{ userData?.username || "---" }}
-      </n-thing>
-    </n-list-item>
-
-    <n-list-item>
-      <n-thing title="Created At" content-style="margin-top: 10px;">
-        {{ userData?.created_at || "---" }}
-      </n-thing>
-    </n-list-item>
-
-  </n-list>
-</template>
-
-<style scoped>
-
-</style>

src/views/PersonalView/PersonalMainBlock.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useAuthStore } from '@/stores/authStore.js'
+import { onMounted, ref } from 'vue'
+
+const store = useAuthStore()
+
+const userData = ref(null)
+
+onMounted(() => {
+  store.userInfo().then((data) => {
+    userData.value = data
+  })
+})
+</script>
+
+<template>
+  <n-card :bordered="false" title="Main">
+    <n-list hoverable clickable>
+      <n-list-item>
+        <n-thing title="Email" content-style="margin-top: 10px;">
+          {{ userData?.email || '---' }}
+        </n-thing>
+      </n-list-item>
+
+      <n-list-item>
+        <n-thing title="Username" content-style="margin-top: 10px;">
+          {{ userData?.username || '---' }}
+        </n-thing>
+      </n-list-item>
+
+      <n-list-item>
+        <n-thing title="Created At" content-style="margin-top: 10px;">
+          {{ userData?.created_at || '---' }}
+        </n-thing>
+      </n-list-item>
+    </n-list>
+  </n-card>
+</template>
+
+<style scoped></style>

src/views/PersonalView/PersonalSessionBlock.vue

@@ -0,0 +1,51 @@
+<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 '---';
+  }
+});
+
+</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>
+    </n-list>
+  </n-card>
+</template>
+
+<style scoped></style>