@data-fair/lib-vue 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vue",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Composables and other utilities for Vue applications in the data-fair stack.",
   "main": "index.js",
   "files": [

package/session.d.ts

@@ -12,11 +12,30 @@ interface GenericCookies {
 export interface SessionOptions {
     sitePath: string;
     directoryUrl: string;
+    defaultLang: string;
     route?: RouteLocation;
     logoutRedirectUrl?: string;
     req?: IncomingMessage;
     cookies?: GenericCookies;
     customFetch?: typeof fetch;
+    siteInfo?: boolean;
+}
+export interface Colors {
+    background: string;
+    surface: string;
+    primary: string;
+    secondary: string;
+    accent: string;
+    error: string;
+    info: string;
+    success: string;
+    warning: string;
+    admin: string;
+}
+export interface SiteInfo {
+    main?: boolean;
+    logo?: string;
+    colors: Colors;
 }
 export interface Session {
     state: SessionState;
@@ -26,6 +45,7 @@ export interface Session {
     accountRole: ComputedRef<SessionState['accountRole']>;
     lang: ComputedRef<SessionState['lang']>;
     dark: ComputedRef<SessionState['dark']>;
+    site: Ref<SiteInfo | null>;
     loginUrl: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => string;
     login: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => void;
     logout: (redirect?: string) => Promise<void>;
@@ -34,6 +54,7 @@ export interface Session {
     asAdmin: (user: any | null) => Promise<void>;
     cancelDeletion: () => Promise<void>;
     keepalive: () => Promise<void>;
+    refreshSiteInfo: () => Promise<void>;
     switchDark: (value: boolean) => void;
     switchLang: (value: string) => void;
     topLocation: Ref<Location | undefined>;
@@ -56,6 +77,7 @@ export declare function createSession(initOptions: Partial<SessionOptions>): Pro
     accountRole: ComputedRef<SessionState["accountRole"]>;
     lang: ComputedRef<SessionState["lang"]>;
     dark: ComputedRef<SessionState["dark"]>;
+    site: Ref<SiteInfo | null>;
     loginUrl: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => string;
     login: (redirect?: string, extraParams?: Record<string, string>, immediateRedirect?: true) => void;
     logout: (redirect?: string) => Promise<void>;
@@ -64,6 +86,7 @@ export declare function createSession(initOptions: Partial<SessionOptions>): Pro
     asAdmin: (user: any | null) => Promise<void>;
     cancelDeletion: () => Promise<void>;
     keepalive: () => Promise<void>;
+    refreshSiteInfo: () => Promise<void>;
     switchDark: (value: boolean) => void;
     switchLang: (value: string) => void;
     topLocation: Ref<Location | undefined>;

package/session.js

@@ -1,8 +1,9 @@
-import { reactive, computed, watch, inject } from 'vue'
+import { reactive, computed, watch, inject, ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { jwtDecode } from 'jwt-decode'
 import cookiesModule from 'universal-cookie'
 import Debug from 'debug'
+import inIframe from '@data-fair/lib-utils/in-iframe.js'
 const Cookies = cookiesModule
 const debug = Debug('session')
 debug.log = console.log.bind(console)
@@ -36,7 +37,7 @@ const goTo = (url) => {
   }
   if (url) { topLocation.href = url } else { topLocation.reload() }
 }
-const defaultOptions = { directoryUrl: '/simple-directory', sitePath: '' }
+const defaultOptions = { directoryUrl: '/simple-directory', sitePath: '', defaultLang: 'fr' }
 export async function getSession (initOptions) {
   const options = { ...defaultOptions, ...initOptions }
   const cookiesPath = options.sitePath + '/'
@@ -55,13 +56,14 @@ export async function getSession (initOptions) {
   })
   // the core state of the session that is filled by reading cookies
   const state = reactive({})
+  const site = ref(null)
   // cookies are the source of truth and this information is transformed into the state reactive object
   const cookies = initOptions?.cookies ?? new Cookies(options.req?.headers.cookie)
-  const readCookies = () => {
+  const readState = () => {
     const darkCookie = cookies.get('theme_dark')
     state.dark = darkCookie === '1' || darkCookie === 'true'
     const langCookie = cookies.get('i18n_lang')
-    if (langCookie) { state.lang = langCookie } else { delete state.lang }
+    state.lang = langCookie ?? options.defaultLang
     const idToken = cookies.get('id_token')
     const user = jwtDecodeAlive(idToken)
     if (!user) {
@@ -107,16 +109,22 @@ export async function getSession (initOptions) {
       }
       state.accountRole = 'admin'
     }
+    if (!ssr) {
+      const siteInfoStorage = getSiteInfoStorage()
+      site.value = siteInfoStorage ? siteInfoStorage.info : null
+    }
   }
-  readCookies()
+  readState()
   debug('initial state', state)
   if (!ssr) {
     // sessionData is also stored in localStorage as a way to access it in simpler pages that do not require use-session
     // and in order to listen to storage event from other contexts and sync session info accross windows and tabs
-    const storageListener = (event) => {
-      if (event.key === 'sd-session' + options.sitePath) { readCookies() }
+    if (!ssr) {
+      const storageListener = (event) => {
+        if (event.key === 'sd-session' + options.sitePath) { readState() }
+      }
+      window.addEventListener('storage', storageListener)
     }
-    window.addEventListener('storage', storageListener)
     // we cannot use onUnmounted here or we get warnings "onUnmounted is called when there is no active component instance to be associated with. "
     // TODO: should we have another cleanup mechanism ?
     // onUnmounted(() => { window.removeEventListener('storage', storageListener) })
@@ -166,7 +174,7 @@ export async function getSession (initOptions) {
   const switchOrganization = (org, dep) => {
     if (org) { cookies.set('id_token_org', org, { path: cookiesPath }) } else { cookies.remove('id_token_org') }
     if (dep) { cookies.set('id_token_dep', dep, { path: cookiesPath }) } else { cookies.remove('id_token_dep') }
-    readCookies()
+    readState()
   }
   const setAdminMode = async (adminMode, redirect) => {
     if (adminMode) {
@@ -185,36 +193,67 @@ export async function getSession (initOptions) {
     } else {
       await customFetch(`${options.directoryUrl}/api/auth/asadmin`, { method: 'DELETE' })
     }
-    readCookies()
+    readState()
   }
   const cancelDeletion = async () => {
     if (state.user == null) { return }
     await customFetch(`${options.directoryUrl}/api/users/${state.user.id}`, { method: 'PATCH', body: ({ plannedDeletion: null }) })
-    readCookies()
+    readState()
   }
   const switchDark = (value) => {
     const maxAge = 60 * 60 * 24 * 365 // 1 year
     cookies.set('theme_dark', `${value}`, { maxAge, path: cookiesPath })
-    readCookies()
+    readState()
   }
   const switchLang = (value) => {
     const maxAge = 60 * 60 * 24 * 365 // 1 year
     cookies.set('i18n_lang', value, { maxAge, path: cookiesPath })
-    readCookies()
+    readState()
   }
   const keepalive = async () => {
     if (state.user == null) { return }
-    window.localStorage.setItem('sd-keepalive' + options.sitePath, `${new Date().getTime()}`)
+    if (!ssr) {
+      window.localStorage.setItem('sd-keepalive' + options.sitePath, `${new Date().getTime()}`)
+    }
     await customFetch(`${options.directoryUrl}/api/auth/keepalive`, { method: 'POST' })
-    readCookies()
+    readState()
+  }
+  const getSiteInfoStorage = () => {
+    const siteInfoStorageStr = window.localStorage.getItem('sd-site-info' + options.sitePath)
+    return siteInfoStorageStr ? JSON.parse(siteInfoStorageStr) : null
+  }
+  const setSiteInfoStorage = (siteInfo) => {
+    const siteInfoStorage = { info: siteInfo, updatedAt: new Date().getTime() }
+    window.localStorage.setItem('sd-site-info' + options.sitePath, JSON.stringify(siteInfoStorage))
+  }
+  const refreshSiteInfo = async () => {
+    const siteInfo = await customFetch(`${options.directoryUrl}/api/sites/_public`) ?? null
+    site.value = siteInfo
+    if (!ssr) {
+      setSiteInfoStorage(siteInfo)
+    }
   }
   // immediately performs a keepalive, but only on top windows (not iframes or popups)
   // and only if it was not done very recently (maybe from a refreshed page next to this one)
-  if (!ssr && window.top === window.self) {
+  // also run an auto-refresh loop
+  if (!ssr && !inIframe) {
     const lastKeepalive = window.localStorage.getItem('sd-keepalive' + options.sitePath)
-    if (!lastKeepalive || (new Date().getTime() - Number(lastKeepalive)) > 10000) {
+    if (state.user && (!lastKeepalive || (new Date().getTime() - Number(lastKeepalive)) > 10000)) {
       await keepalive()
     }
+    if (options.siteInfo) {
+      const lastSiteInfoStorage = getSiteInfoStorage()
+      if (!lastSiteInfoStorage || (new Date().getTime() - Number(lastSiteInfoStorage.updatedAt)) > 10000) {
+        await refreshSiteInfo()
+      }
+    }
+    const refreshLoopDelay = 10 * 60 * 1000 // 10 minutes
+    setInterval(() => {
+      const lastKeepalive = window.localStorage.getItem('sd-keepalive' + options.sitePath)
+      if (!lastKeepalive || (new Date().getTime() - Number(lastKeepalive)) > refreshLoopDelay / 2) {
+        keepalive().catch(err => console.error(err))
+      }
+    }, refreshLoopDelay)
   }
   const session = {
     state,
@@ -224,6 +263,7 @@ export async function getSession (initOptions) {
     accountRole: computed(() => state.accountRole),
     dark: computed(() => state.dark),
     lang: computed(() => state.lang),
+    site,
     loginUrl,
     login,
     logout,
@@ -232,6 +272,7 @@ export async function getSession (initOptions) {
     asAdmin,
     cancelDeletion,
     keepalive,
+    refreshSiteInfo,
     switchDark,
     switchLang,
     topLocation,