From b36c7c4da6f6229851f54b7d0017bbbb7564649a Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Sun, 14 Sep 2025 19:30:42 +0300
Subject: [PATCH] current session info + some template refactor

---
 src/stores/authStore.js                       | 10 ++++
 src/views/PersonalView.vue                    | 10 ++--
 src/views/PersonalView/List.vue               | 42 ---------------
 src/views/PersonalView/PersonalMainBlock.vue  | 40 +++++++++++++++
 .../PersonalView/PersonalSessionBlock.vue     | 51 +++++++++++++++++++
 5 files changed, 108 insertions(+), 45 deletions(-)
 delete mode 100644 src/views/PersonalView/List.vue
 create mode 100644 src/views/PersonalView/PersonalMainBlock.vue
 create mode 100644 src/views/PersonalView/PersonalSessionBlock.vue

diff --git a/src/stores/authStore.js b/src/stores/authStore.js
index 7ddbe76..96bb522 100644
--- a/src/stores/authStore.js
+++ b/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,
   }
 })
diff --git a/src/views/PersonalView.vue b/src/views/PersonalView.vue
index 4112f86..002e43c 100644
--- a/src/views/PersonalView.vue
+++ b/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>
diff --git a/src/views/PersonalView/List.vue b/src/views/PersonalView/List.vue
deleted file mode 100644
index 6e67557..0000000
--- a/src/views/PersonalView/List.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/PersonalView/PersonalMainBlock.vue b/src/views/PersonalView/PersonalMainBlock.vue
new file mode 100644
index 0000000..0e89baf
--- /dev/null
+++ b/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>
diff --git a/src/views/PersonalView/PersonalSessionBlock.vue b/src/views/PersonalView/PersonalSessionBlock.vue
new file mode 100644
index 0000000..d526af3
--- /dev/null
+++ b/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>