display session expiration date

backend/analysis/api.py

@@ -34,7 +34,7 @@ def init_session(request):
         request.session.create()
         request.session.set_expiry(60000)
     
-    return JsonResponse({"session": "ok"})
+    return JsonResponse({"session": "ok", "expire_date": request.session.get_expiry_date()})
 
 
 @router.post("add", response=AnalysisOutSchema)

frontend/components/AnalysisList.vue

@@ -4,7 +4,7 @@ import type { Analysis } from '../composables/useFetchAnalysis';
 const router = useRouter()
 const { csrfToken } = await useCsrfToken()
 const { data: analyses, refresh } = await useFetch<Analysis[]>("/api/analysis/", { server: false });
-
+const sessionExpiryDate = useState('sessionExpiryDate')
 const toEdit: Ref<number | null> = ref(null)
 const newTitle: Ref<string | null> = ref(null)
 const sanitizedAnalyses = computed(() => {
@@ -69,6 +69,11 @@ function goToAnalysis(analysisId: number) {
 <template>
   <v-card flat>
     <v-card-title>Analyses</v-card-title>
+    <v-card-text>
+      <v-alert type="info" variant="tonal">Session will expire {{ new Date(sessionExpiryDate).toLocaleString() }}. After
+        this
+        date, all the analyses will be deleted</v-alert>
+    </v-card-text>
     <v-card-text v-if="sanitizedAnalyses !== null">
       <!-- <template v-for="analysis, index in sanitizedAnalyses" :key="analysis.id"> -->
       <v-data-iterator :items="sanitizedAnalyses" :items-per-page="8">

frontend/components/Main.vue

@@ -6,12 +6,15 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
   fluid: true
 });
+const sessionExpiryDate = useState('sessionExpiryDate', () => "testsetset")
 const { csrfToken } = await useCsrfToken()
 // init session
 if (csrfToken.value) {
-  const { data, pending, error } = useFetch("/api/analysis/init-session", {
+  const { data, pending, error } = await useFetch("/api/analysis/init-session", {
     headers: [["X-CSRFToken", csrfToken.value]]
+
   })
+  sessionExpiryDate.value = data.value?.expire_date ?? "NA"
 }
 const scrollThreshold = ref(200)
 const density = ref<'compact' | 'prominent'>("prominent")
@@ -29,6 +32,7 @@ function onScroll() {
     <VApp>
       <Navbar :density="density" />
       <v-main style="min-height: 300px">
+
         <v-container v-scroll="onScroll" :fluid="props.fluid">
           <slot />
         </v-container>