@data-fair/lib-vue 0.1.0 → 1.0.1

package/session.js

@@ -1,289 +1,257 @@
-import { reactive, computed, watch, inject } from 'vue';
-import { ofetch } from 'ofetch';
-import { jwtDecode } from 'jwt-decode';
-import cookiesModule from 'universal-cookie';
-import Debug from 'debug';
-const Cookies = cookiesModule;
-const debug = Debug('session');
-debug.log = console.log.bind(console);
-function jwtDecodeAlive(jwt) {
-    if (!jwt)
-        return;
-    const decoded = jwtDecode(jwt);
-    if (!decoded)
-        return;
-    const now = Math.ceil(Date.now().valueOf() / 1000);
-    if (typeof decoded.exp !== 'undefined' && decoded.exp < now) {
-        console.error(`token expired: ${decoded.exp}<${now},  ${JSON.stringify(decoded)}`);
-        return;
-    }
-    if (typeof decoded.nbf !== 'undefined' && decoded.nbf > now) {
-        console.warn(`token not yet valid: ${decoded.nbf}>${now}, ${JSON.stringify(decoded)}`);
-        // do not return null here, this is probably a false flag due to a slightly mismatched clock
-        // return null
-    }
-    return decoded;
+import { reactive, computed, watch, inject } from 'vue'
+import { ofetch } from 'ofetch'
+import { jwtDecode } from 'jwt-decode'
+import cookiesModule from 'universal-cookie'
+import Debug from 'debug'
+const Cookies = cookiesModule
+const debug = Debug('session')
+debug.log = console.log.bind(console)
+function jwtDecodeAlive (jwt) {
+  if (!jwt) { return }
+  const decoded = jwtDecode(jwt)
+  if (!decoded) { return }
+  const now = Math.ceil(Date.now().valueOf() / 1000)
+  if (typeof decoded.exp !== 'undefined' && decoded.exp < now) {
+    console.error(`token expired: ${decoded.exp}<${now},  ${JSON.stringify(decoded)}`)
+    return
+  }
+  if (typeof decoded.nbf !== 'undefined' && decoded.nbf > now) {
+    console.warn(`token not yet valid: ${decoded.nbf}>${now}, ${JSON.stringify(decoded)}`)
+    // do not return null here, this is probably a false flag due to a slightly mismatched clock
+    // return null
+  }
+  return decoded
 }
 const getTopLocation = () => {
-    try {
-        return window.top ? window.top.location : window.location;
+  try {
+    return window.top ? window.top.location : window.location
+  } catch (err) {
+    return window.location
+  }
+}
+const goTo = (url) => {
+  const topLocation = getTopLocation()
+  if (topLocation == null) {
+    throw new TypeError('session.goTo was called without access to the window object or its location')
+  }
+  if (url) { topLocation.href = url } else { topLocation.reload() }
+}
+const defaultOptions = { directoryUrl: '/simple-directory', sitePath: '' }
+export async function getSession (initOptions) {
+  const options = { ...defaultOptions, ...initOptions }
+  const cookiesPath = options.sitePath + '/'
+  debug(`init directoryUrl=${options.directoryUrl}, cookiesPath=${cookiesPath}`)
+  const ssr = !!options.req
+  if (ssr) { debug('run in SSR context') }
+  const customFetch = initOptions?.customFetch ?? ofetch
+  // use vue-router to detect page change and maintain a reference to the current page location
+  // top page if we are in iframe context
+  const topLocation = computed(() => {
+    if (ssr) { return undefined }
+    if (options.route?.fullPath) { /* empty */ } // adds reactivity
+    const location = getTopLocation()
+    debug('update location based on route change', location)
+    return location
+  })
+  // the core state of the session that is filled by reading cookies
+  const state = reactive({})
+  // 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 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 }
+    const idToken = cookies.get('id_token')
+    const user = jwtDecodeAlive(idToken)
+    if (!user) {
+      delete state.user
+      delete state.organization
+      delete state.account
+      delete state.accountRole
+      return
     }
-    catch (err) {
-        return window.location;
+    // this is to prevent null values that are put by SD versions that do not strictly respect their schema
+    for (const org of user.organizations) {
+      if (!org.department) {
+        delete org.department
+        delete org.departmentName
+      }
     }
-};
-const goTo = (url) => {
-    const topLocation = getTopLocation();
-    if (topLocation == null) {
-        throw new TypeError('session.goTo was called without access to the window object or its location');
+    state.user = user
+    const organizationId = cookies.get('id_token_org')
+    const departmentId = cookies.get('id_token_dep')
+    if (organizationId) {
+      if (departmentId) {
+        state.organization = state.user.organizations.find(o => o.id === organizationId && o.department === departmentId)
+      } else {
+        state.organization = state.user.organizations.find(o => o.id === organizationId)
+      }
+    } else {
+      delete state.organization
+    }
+    if (state.organization) {
+      state.account = {
+        type: 'organization',
+        id: state.organization.id,
+        name: state.organization.name,
+        department: state.organization.department,
+        departmentName: state.organization.departmentName
+      }
+      state.accountRole = state.organization.role
+    } else {
+      state.account = {
+        type: 'user',
+        id: state.user.id,
+        name: state.user.name
+      }
+      state.accountRole = 'admin'
     }
-    if (url)
-        topLocation.href = url;
-    else
-        topLocation.reload();
-};
-const defaultOptions = { directoryUrl: '/simple-directory', sitePath: '' };
-export async function getSession(initOptions) {
-    const options = { ...defaultOptions, ...initOptions };
-    const cookiesPath = options.sitePath + '/';
-    debug(`init directoryUrl=${options.directoryUrl}, cookiesPath=${cookiesPath}`);
-    const ssr = !!options.req;
-    if (ssr)
-        debug('run in SSR context');
-    const customFetch = initOptions?.customFetch ?? ofetch;
-    // use vue-router to detect page change and maintain a reference to the current page location
-    // top page if we are in iframe context
-    const topLocation = computed(() => {
-        if (ssr)
-            return undefined;
-        if (options.route?.fullPath) { /* empty */ } // adds reactivity
-        const location = getTopLocation();
-        debug('update location based on route change', location);
-        return location;
-    });
-    // the core state of the session that is filled by reading cookies
-    const state = reactive({});
-    // 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 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;
-        const idToken = cookies.get('id_token');
-        const user = jwtDecodeAlive(idToken);
-        if (!user) {
-            delete state.user;
-            delete state.organization;
-            delete state.account;
-            delete state.accountRole;
-            return;
-        }
-        // this is to prevent null values that are put by SD versions that do not strictly respect their schema
-        for (const org of user.organizations) {
-            if (!org.department) {
-                delete org.department;
-                delete org.departmentName;
-            }
-        }
-        state.user = user;
-        const organizationId = cookies.get('id_token_org');
-        const departmentId = cookies.get('id_token_dep');
-        if (organizationId) {
-            if (departmentId) {
-                state.organization = state.user.organizations.find(o => o.id === organizationId && o.department === departmentId);
-            }
-            else {
-                state.organization = state.user.organizations.find(o => o.id === organizationId);
-            }
-        }
-        else {
-            delete state.organization;
-        }
-        if (state.organization) {
-            state.account = {
-                type: 'organization',
-                id: state.organization.id,
-                name: state.organization.name,
-                department: state.organization.department,
-                departmentName: state.organization.departmentName
-            };
-            state.accountRole = state.organization.role;
-        }
-        else {
-            state.account = {
-                type: 'user',
-                id: state.user.id,
-                name: state.user.name
-            };
-            state.accountRole = 'admin';
-        }
-    };
-    readCookies();
-    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();
-        };
-        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) })
-        // trigger some full page refresh when some key session elements are changed
-        // the danger of simply using reactivity is too high, data must be re-fetched, etc.
-        watch(() => state.account, (account, oldAccount) => {
-            if (account?.type !== oldAccount?.type || account?.id !== oldAccount?.id || account?.department !== oldAccount?.department) {
-                goTo(null);
-            }
-        });
-        watch(() => state.lang, () => {
-            goTo(null);
-        });
-        watch(() => state.dark, () => {
-            goTo(null);
-        });
-        watch(state, (state) => {
-            if (!ssr) {
-                window.localStorage.setItem('sd-session' + options.sitePath, JSON.stringify(state));
-            }
-            debug('state changed', state);
-        });
+  }
+  readCookies()
+  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() }
     }
-    // login can be performed as a simple link (please use target=top) or as a function
-    function loginUrl(redirect, extraParams = {}, immediateRedirect = true) {
-        // login can also be used to redirect user immediately if he is already logged
-        if (redirect && state.user && immediateRedirect)
-            return redirect;
-        if (!redirect && topLocation.value)
-            redirect = topLocation.value.href;
-        let url = `${options.directoryUrl}/login?redirect=${encodeURIComponent(redirect ?? '')}`;
-        Object.keys(extraParams).filter(key => ![null, undefined, ''].includes(extraParams[key])).forEach((key) => {
-            url += `&${key}=${encodeURIComponent(extraParams[key])}`;
-        });
-        return url;
+    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) })
+    // trigger some full page refresh when some key session elements are changed
+    // the danger of simply using reactivity is too high, data must be re-fetched, etc.
+    watch(() => state.account, (account, oldAccount) => {
+      if (account?.type !== oldAccount?.type || account?.id !== oldAccount?.id || account?.department !== oldAccount?.department) {
+        goTo(null)
+      }
+    })
+    watch(() => state.lang, () => {
+      goTo(null)
+    })
+    watch(() => state.dark, () => {
+      goTo(null)
+    })
+    watch(state, (state) => {
+      if (!ssr) {
+        window.localStorage.setItem('sd-session' + options.sitePath, JSON.stringify(state))
+      }
+      debug('state changed', state)
+    })
+  }
+  // login can be performed as a simple link (please use target=top) or as a function
+  function loginUrl (redirect, extraParams = {}, immediateRedirect = true) {
+    // login can also be used to redirect user immediately if he is already logged
+    if (redirect && state.user && immediateRedirect) { return redirect }
+    if (!redirect && topLocation.value) { redirect = topLocation.value.href }
+    let url = `${options.directoryUrl}/login?redirect=${encodeURIComponent(redirect ?? '')}`
+    Object.keys(extraParams).filter(key => ![null, undefined, ''].includes(extraParams[key])).forEach((key) => {
+      url += `&${key}=${encodeURIComponent(extraParams[key])}`
+    })
+    return url
+  }
+  const login = (redirect, extraParams = {}, immediateRedirect = true) => {
+    goTo(loginUrl(redirect, extraParams, immediateRedirect))
+  }
+  const logout = async (redirect) => {
+    await customFetch(`${options.directoryUrl}/api/auth`, { method: 'DELETE' })
+    // sometimes server side cookie deletion is not applied immediately in browser local js context
+    // so we do it here to
+    cookies.remove('id_token')
+    cookies.remove('id_token_org')
+    cookies.remove('id_token_dep')
+    goTo(redirect ?? options.logoutRedirectUrl ?? null)
+  }
+  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()
+  }
+  const setAdminMode = async (adminMode, redirect) => {
+    if (adminMode) {
+      const params = { adminMode: 'true' }
+      if (state.user != null) { params.email = state.user.email }
+      const url = loginUrl(redirect, params, true)
+      goTo(url)
+    } else {
+      await customFetch(`${options.directoryUrl}/api/auth/adminmode`, { method: 'DELETE' })
+      goTo(redirect ?? null)
     }
-    const login = (redirect, extraParams = {}, immediateRedirect = true) => {
-        goTo(loginUrl(redirect, extraParams, immediateRedirect));
-    };
-    const logout = async (redirect) => {
-        await customFetch(`${options.directoryUrl}/api/auth`, { method: 'DELETE' });
-        // sometimes server side cookie deletion is not applied immediately in browser local js context
-        // so we do it here to
-        cookies.remove('id_token');
-        cookies.remove('id_token_org');
-        cookies.remove('id_token_dep');
-        goTo(redirect ?? options.logoutRedirectUrl ?? null);
-    };
-    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();
-    };
-    const setAdminMode = async (adminMode, redirect) => {
-        if (adminMode) {
-            const params = { adminMode: 'true' };
-            if (state.user != null)
-                params.email = state.user.email;
-            const url = loginUrl(redirect, params, true);
-            goTo(url);
-        }
-        else {
-            await customFetch(`${options.directoryUrl}/api/auth/adminmode`, { method: 'DELETE' });
-            goTo(redirect ?? null);
-        }
-    };
-    const asAdmin = async (user) => {
-        if (user) {
-            await customFetch(`${options.directoryUrl}/api/auth/asadmin`, { method: 'POST', body: user });
-        }
-        else {
-            await customFetch(`${options.directoryUrl}/api/auth/asadmin`, { method: 'DELETE' });
-        }
-        readCookies();
-    };
-    const cancelDeletion = async () => {
-        if (state.user == null)
-            return;
-        await customFetch(`${options.directoryUrl}/api/users/${state.user.id}`, { method: 'PATCH', body: ({ plannedDeletion: null }) });
-        readCookies();
-    };
-    const switchDark = (value) => {
-        const maxAge = 60 * 60 * 24 * 365; // 1 year
-        cookies.set('theme_dark', `${value}`, { maxAge, path: cookiesPath });
-        readCookies();
-    };
-    const switchLang = (value) => {
-        const maxAge = 60 * 60 * 24 * 365; // 1 year
-        cookies.set('i18n_lang', value, { maxAge, path: cookiesPath });
-        readCookies();
-    };
-    const keepalive = async () => {
-        if (state.user == null)
-            return;
-        window.localStorage.setItem('sd-keepalive' + options.sitePath, `${new Date().getTime()}`);
-        await customFetch(`${options.directoryUrl}/api/auth/keepalive`, { method: 'POST' });
-        readCookies();
-    };
-    // 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) {
-        const lastKeepalive = window.localStorage.getItem('sd-keepalive' + options.sitePath);
-        if (!lastKeepalive || (new Date().getTime() - Number(lastKeepalive)) > 10000) {
-            await keepalive();
-        }
+  }
+  const asAdmin = async (user) => {
+    if (user) {
+      await customFetch(`${options.directoryUrl}/api/auth/asadmin`, { method: 'POST', body: user })
+    } else {
+      await customFetch(`${options.directoryUrl}/api/auth/asadmin`, { method: 'DELETE' })
     }
-    const session = {
-        state,
-        loginUrl,
-        login,
-        logout,
-        switchOrganization,
-        setAdminMode,
-        asAdmin,
-        cancelDeletion,
-        keepalive,
-        switchDark,
-        switchLang,
-        topLocation,
-        options
-    };
-    return session;
+    readCookies()
+  }
+  const cancelDeletion = async () => {
+    if (state.user == null) { return }
+    await customFetch(`${options.directoryUrl}/api/users/${state.user.id}`, { method: 'PATCH', body: ({ plannedDeletion: null }) })
+    readCookies()
+  }
+  const switchDark = (value) => {
+    const maxAge = 60 * 60 * 24 * 365 // 1 year
+    cookies.set('theme_dark', `${value}`, { maxAge, path: cookiesPath })
+    readCookies()
+  }
+  const switchLang = (value) => {
+    const maxAge = 60 * 60 * 24 * 365 // 1 year
+    cookies.set('i18n_lang', value, { maxAge, path: cookiesPath })
+    readCookies()
+  }
+  const keepalive = async () => {
+    if (state.user == null) { return }
+    window.localStorage.setItem('sd-keepalive' + options.sitePath, `${new Date().getTime()}`)
+    await customFetch(`${options.directoryUrl}/api/auth/keepalive`, { method: 'POST' })
+    readCookies()
+  }
+  // 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) {
+    const lastKeepalive = window.localStorage.getItem('sd-keepalive' + options.sitePath)
+    if (!lastKeepalive || (new Date().getTime() - Number(lastKeepalive)) > 10000) {
+      await keepalive()
+    }
+  }
+  const session = {
+    state,
+    loginUrl,
+    login,
+    logout,
+    switchOrganization,
+    setAdminMode,
+    asAdmin,
+    cancelDeletion,
+    keepalive,
+    switchDark,
+    switchLang,
+    topLocation,
+    options
+  }
+  return session
 }
 // uses pattern for SSR friendly plugin/composable, cf https://antfu.me/posts/composable-vue-vueday-2021#shared-state-ssr-friendly
-export const sessionKey = Symbol('session');
-export async function createSession(initOptions) {
-    const session = await getSession(initOptions);
-    return {
-        install(app) { app.provide(sessionKey, session); },
-        value: session
-    };
+export const sessionKey = Symbol('session')
+export async function createSession (initOptions) {
+  const session = await getSession(initOptions)
+  return {
+    install (app) { app.provide(sessionKey, session) },
+    value: session
+  }
 }
-export function useSession() {
-    const session = inject(sessionKey);
-    if (!session)
-        throw new Error('useSession requires using the plugin createSession');
-    return session;
+export function useSession () {
+  const session = inject(sessionKey)
+  if (!session) { throw new Error('useSession requires using the plugin createSession') }
+  return session
 }
-export function useSessionAuthenticated(errorBuilder) {
-    const session = useSession();
-    if (!session.state.user) {
-        if (errorBuilder)
-            throw errorBuilder();
-        else
-            throw new Error('useSessionAuthenticated requires a logged in user');
-    }
-    return session;
+export function useSessionAuthenticated (errorBuilder) {
+  const session = useSession()
+  if (!session.state.user) {
+    if (errorBuilder) { throw errorBuilder() } else { throw new Error('useSessionAuthenticated requires a logged in user') }
+  }
+  return session
 }
-export default useSession;
+export default useSession

package/ui-notif-global.js

@@ -1,7 +1,7 @@
 // same as use-ui-notif.js but in a module level singleton for convenience when not using SSR
-import { getUiNotif } from './ui-notif.js';
+import { getUiNotif } from './ui-notif.js'
 // @ts-ignore
 if (import.meta.env?.SSR) {
-    throw new Error('this module uses a module level singleton, it cannot be used in SSR mode');
+  throw new Error('this module uses a module level singleton, it cannot be used in SSR mode')
 }
-export default getUiNotif();
+export default getUiNotif()

package/ui-notif.d.ts

@@ -1,4 +1,4 @@
-import type { Ref, App } from 'vue';
+import type { App } from 'vue';
 export type UiNotif = UiNotifBase | UiNotifError;
 export interface PartialUiNotif {
     type?: 'default' | 'info' | 'success' | 'warning' | 'error';
@@ -17,7 +17,7 @@ interface UiNotifError {
     errorMsg: string;
 }
 export declare const getUiNotif: () => {
-    current: Ref<{
+    current: import("vue").Ref<{
         type?: ("default" | "info" | "success" | "warning") | undefined;
         msg: string;
     } | {

package/ui-notif.js

@@ -1,38 +1,35 @@
-import { ref, inject } from 'vue';
-import inIframe from '@data-fair/lib-utils/in-iframe.js';
-function getFullNotif(notif) {
-    if (typeof notif === 'string')
-        return { msg: notif, type: 'default' };
-    if (notif.error) {
-        notif.type = 'error';
-        notif.errorMsg = (notif.error.response && (notif.error.response.data || notif.error.response.status)) || notif.error.message || notif.error;
-    }
-    notif.type = notif.type || 'default';
-    if (inIframe) {
-        window.top?.postMessage({ vIframe: true, uiNotification: notif }, '*');
-    }
-    else {
-        console.log('notification', notif);
-    }
-    throw new Error('invalid UI notification');
+import { ref, inject } from 'vue'
+import inIframe from '@data-fair/lib-utils/in-iframe.js'
+function getFullNotif (notif) {
+  if (typeof notif === 'string') { return { msg: notif, type: 'default' } }
+  if (notif.error) {
+    notif.type = 'error'
+    notif.errorMsg = (notif.error.response && (notif.error.response.data || notif.error.response.status)) || notif.error.message || notif.error
+  }
+  notif.type = notif.type || 'default'
+  if (inIframe) {
+    window.top?.postMessage({ vIframe: true, uiNotification: notif }, '*')
+  } else {
+    console.log('notification', notif)
+  }
+  throw new Error('invalid UI notification')
 }
 export const getUiNotif = () => {
-    const current = ref(null);
-    const send = (partialNotif) => {
-        current.value = getFullNotif(partialNotif);
-    };
-    return { current, send };
-};
+  const current = ref(null)
+  const send = (partialNotif) => {
+    current.value = getFullNotif(partialNotif)
+  }
+  return { current, send }
+}
 // uses pattern for SSR friendly plugin/composable, cf https://antfu.me/posts/composable-vue-vueday-2021#shared-state-ssr-friendly
-export const uiNotifKey = Symbol('uiNotif');
-export function createUiNotif() {
-    const uiNotif = getUiNotif();
-    return { install(app) { app.provide(uiNotifKey, uiNotif); } };
+export const uiNotifKey = Symbol('uiNotif')
+export function createUiNotif () {
+  const uiNotif = getUiNotif()
+  return { install (app) { app.provide(uiNotifKey, uiNotif) } }
 }
-export function useUiNotif() {
-    const session = inject(uiNotifKey);
-    if (!session)
-        throw new Error('useUiNotif requires using the plugin createUiNotif');
-    return session;
+export function useUiNotif () {
+  const session = inject(uiNotifKey)
+  if (!session) { throw new Error('useUiNotif requires using the plugin createUiNotif') }
+  return session
 }
-export default useUiNotif;
+export default useUiNotif