bt-core-app 0.0.0

package/src/composables/auth.ts

@@ -0,0 +1,382 @@
+import { isLengthyArray } from '@/composables/helpers';
+import { DateTime } from 'luxon'
+import { type RemovableRef, useStorage } from '@vueuse/core'
+import { type BTDemo } from '@/composables/demo'
+import { useRouter } from 'vue-router'
+import { toValue } from 'vue'
+
+export interface AuthItem {
+    children?: AuthItem[]
+    ignoreSuspension?: boolean
+    permissions?: string[]
+    requiresAuth?: boolean
+    subscriptions?: string[]
+}
+
+export interface AuthSubscription {
+    code: string
+    value: number
+}
+
+export interface BaseAuthCredentials {
+    expiresOn?: string
+    isGlobalAdmin?: boolean
+    isLoggedIn?: boolean
+    isSuspended?: boolean
+    permissions?: string
+    subscriptionCode?: string
+    timeZone?: string
+    token?: string
+    userID?: string
+    userPermissions?: string[]
+}
+
+// const state = useStorage<BaseAuthCredentials>('auth-credentials', {})
+// let defaultsSet = false
+let defaultTimeZone = 'Australia/Melbourne'
+
+// export type FindAuthItem = (navName?: string | AuthItem) => AuthItem | undefined
+export type GetAuthUrl = (redirectPath?: string, state?: string) => string
+
+export interface CreateAuthOptions {
+    defaultTimeZone?: string,
+    demo?: BTDemo,
+    /**expiry token date format.  Defaults to 'd/MM/yyyy h:mm:ss a' */
+    expiryTokenFormat?: string
+    /**retrieve the auth item */
+    getAuthItem: (navName?: string | AuthItem) => AuthItem | null
+    /**retrieve the url to navigate to for the OAuth 2.0 process */
+    getAuthUrl: GetAuthUrl
+    /**sets current credentials on top of default function*/
+    setCredentials?: (state: RemovableRef<any>, payload: any) => void
+    /**suboptions */
+    subscriptionOptions?: AuthSubscription[]
+}
+
+export interface BTAuth {
+    authState: string
+    canEdit: (navName?: string) => boolean
+    canEditPermit: (permit: string) => boolean
+    canView: (navName?: string) => boolean
+    canViewPermit: (permit: string) => boolean
+    credentials: any
+    doShow: (subcodes?: string[], permissions?: string[], action?: 'view' | 'edit') => boolean
+    doShowByNav: (navName?: string | AuthItem, includeChildren?: boolean) => boolean
+    getAuthUrl: (redirectPath?: string) => string
+    getTimeZone: () => string
+    login: (redirectPath?: string) => void
+    logout: (navNameRedirect?: string) => void
+    setAuth: (jwtToken?: string) => void
+    tryLogin: () => boolean | undefined
+}
+
+// /**returns current timezone */
+// export function useTimeZone() {
+//     return state.value.timeZone ?? defaultTimeZone
+// }
+
+// export function useAuthData() {
+//     return state.value
+// }
+
+export function createAuth(options: CreateAuthOptions): BTAuth {
+    const router = useRouter()
+    const expiryFormat = options.expiryTokenFormat ?? 'd/MM/yyyy h:mm:ss a'
+    const authState = useStorage<string>('auth-credentials-state', (Math.random().toString(36).substring(4, 19) + Math.random().toString(12).substring(1, 11)))
+    const state = useStorage<BaseAuthCredentials>('auth-credentials', {})
+    
+    // if (!defaultsSet) {
+    //     setDefaults()
+    //     defaultsSet = true
+    // }
+
+    // const { endDemo, isDemoing } = useDemo()
+    
+    /**can edit if navName is undefined, isGlobalAdmin, not suspended, or user permissions allow editing of this navItem */
+    function canEdit(navName?: string): boolean {
+        if (navName == null) return true
+
+        var navItem = options.getAuthItem(navName);
+        if (navItem == null) return false
+        if (navItem.requiresAuth === false) return true
+
+        const mState = toValue(state)
+        if (mState.isSuspended && navItem.ignoreSuspension !== true) return false
+        if (mState.isGlobalAdmin) return true
+        
+        if (navItem.permissions != null) {
+            for (var ii = 0; ii < navItem.permissions.length; ii++) {
+                if (!canEditPermit(navItem.permissions[ii])) {
+                    return false
+                }
+            }
+        }
+
+        return true;
+    }
+    
+    /**purely tests for whether this permit is in the user's permissions list.
+     * Or else the user just needs the 'everything.edit' permission.
+     */
+    function canEditPermit(permit: string): boolean {
+        const mState = toValue(state)
+        
+        if (mState.userPermissions != null) {
+            for (var i = 0; i < mState.userPermissions.length; i++) {
+                var parts = mState.userPermissions[i].split('.');
+                if (mState.userPermissions[i] == 'everything.edit' ||
+                    permit == parts[0] && parts.length > 1 && parts[1] == 'edit') {
+                    return true;
+                }
+            }
+        }
+        
+        return false
+    }
+    
+    /**can view if navName is undefined, isGlobalAdmin, not susepended, or user permissions allow viewing of this navItem */
+    function canView(navName: string | undefined): boolean {
+        if (navName == null) return true
+        
+        var navItem = options.getAuthItem(navName);
+        if (navItem == null) return false
+        if (navItem.requiresAuth === false) return true
+
+        const mState = toValue(state)
+        if (mState.isSuspended && navItem.ignoreSuspension !== true) return false
+        if (mState.isGlobalAdmin) return true
+
+        if (navItem.permissions != null) {
+            for (var ii = 0; ii < navItem.permissions.length; ii++) {
+                if (!canViewPermit(navItem.permissions[ii])) {
+                    return false;
+                }
+            }
+        }
+
+        return true;
+    }
+    
+    /**purely tests for whether this permit is in the user's permissions list.
+     * Or else the user just needs the 'everything.view' permission or '[permit].edit'.
+     */
+    function canViewPermit(permit: string): boolean {
+        const mState = toValue(state)
+        
+        if (mState.userPermissions != null) {
+            for (var i = 0; i < mState.userPermissions.length; i++) {
+                var parts = mState.userPermissions[i].split('.');
+                if (permit == parts[0] || permit == 'everything' || 
+                    mState.userPermissions[i] == 'everything.view' ||
+                    mState.userPermissions[i] == 'everything.edit') {
+                    return true;
+                }
+            }
+        }
+        
+        return false;
+    }
+    
+    /**doesn't check for suspension
+     * if user
+     */
+    function doShow(subcodes?: string[], permissions?: string[], action?: 'view' | 'edit'): boolean {
+        let doShowRes = true
+
+        const mState = toValue(state)
+        if (mState.isGlobalAdmin) return true
+
+        if (permissions != null && permissions.length > 0) {
+            permissions.forEach((permit: string) => {
+                if (action == 'edit') {
+                    if (!canEditPermit(permit)) {
+                        doShowRes = false
+                    }
+                }
+                else {
+                    //otherwise it will be view
+                    if (!canViewPermit(permit)) {
+                        doShowRes = false
+                    }
+                }
+            })
+        }
+
+        if (subcodes != null && subcodes.length > 0) {
+            if (!subcodes.some((subCode: string) => isWithinSubscription(subCode))) {
+                doShowRes = false
+            }
+        }
+
+        return doShowRes
+    }
+
+    function doShowByNav(navName?: string | AuthItem, includeChildren: boolean = false) {
+        var navItem = options.getAuthItem(navName);
+        let doShowRes = false;
+
+        if (navItem == null) return false
+
+        let subcodes = navItem.subscriptions ?? []
+        let permissions = navItem.permissions ?? []
+        let oRes = doShow(subcodes, permissions, 'view');
+
+        if (oRes || !includeChildren || !isLengthyArray(navItem.children))
+            return oRes
+
+        if (navItem?.children != null) {
+            navItem.children.forEach(child => {
+                if (doShowByNav(child, true)) {
+                    doShowRes = true;
+                }
+            })
+        }
+        
+        return doShowRes;
+    }
+
+    function getAuthUrl(redirectPath?: string) {
+        return options.getAuthUrl(redirectPath, authState.value)
+    }
+
+    /**undefined or unfound is worth 0 */
+    function getSubscriptionCodeValue(subCode?: string) {
+        if (subCode == null) return 0
+        let subList = options.subscriptionOptions ?? []
+        return subList.find(x => x.code == subCode)?.value ?? 0
+    }
+
+    /**identifies whether user's subscription level allows for this subCode */
+    function isWithinSubscription(subCode?: string) {
+        const mState = toValue(state)
+
+        if (mState.subscriptionCode == null) return false
+        if (mState.subscriptionCode == subCode) return true
+
+        const subLevelNeeded = getSubscriptionCodeValue(subCode)
+        const subCompanyLevel = getSubscriptionCodeValue(mState.subscriptionCode)
+
+        return subLevelNeeded <= subCompanyLevel
+    }
+
+    /**decrypts jwt token */
+    function jwtDecrypt(token: string) {
+        const base64Url = token.split('.')[1];
+        const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+        const jsonPayload = decodeURIComponent(
+            atob(base64)
+                .split("")
+                .map(function(c) {
+                    return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+                })
+                .join("")
+        );
+
+        return JSON.parse(jsonPayload);
+    }
+
+    /**clears credentials and potentially redirects */
+    function logout(navNameRedirect?: string) {
+        state.value = undefined
+        
+        //ensure time zone still exists
+        setDefaults()
+        
+        //clear stores
+
+        //maybe redirect
+        if (navNameRedirect != null) {
+            if (router.currentRoute.value.name != navNameRedirect) {
+                router.push({ name: navNameRedirect })
+            }
+        }
+    }
+
+    /**Redirects to OAuth 2.0 process if not yet logged in and token expired.  Ends demo. */
+    function login(redirectPath?: string) {
+        const mState = toValue(state)
+
+        if (!mState.isLoggedIn) {
+            options.demo?.endDemo()
+            if (tokenExpired()) {
+                logout()
+                window.location.href = getAuthUrl(redirectPath) //}response_type=code&client_id=appClient1&redirect_path=${redirectPath}` : getAuthUrl()
+            }
+        }
+    }
+
+    /**if not demoing, then will decrypt the jwtToken and attempt to set credentials */
+    function setAuth(jwtToken?: string) {
+        if (jwtToken == null) return
+
+        if (options.demo == null || !options.demo.isDemoing.value) {
+            const d = jwtDecrypt(jwtToken)
+            
+            setDefaultAuth(d)
+            
+            if (options.setCredentials != null) {
+                options.setCredentials(state as RemovableRef<any>, d)
+            }
+        }
+    }
+
+    function setDefaultAuth(d: any) {
+        const v = state.value
+        v.expiresOn = d.ExpiresOn
+        v.isGlobalAdmin = d.IsGlobalAdmin == 'True'
+        v.isLoggedIn = true
+        v.permissions = d.Permissions
+        v.subscriptionCode = d.Subscription
+        // v.subscriptionsInUse = d.SubscriptionsInUse
+        v.token = d
+        v.userID = d.UserLoginID
+        v.userPermissions = d.Permissions?.split(',') ?? []
+    }
+
+    function setDefaults() {
+        state.value.timeZone ??= (options.defaultTimeZone ?? defaultTimeZone)
+    }
+
+    function getTimeZone() {
+        return state.value.timeZone ?? options.defaultTimeZone ?? defaultTimeZone
+    }
+
+    /**returns whether or not logged in.  Potentially redirects to OAauth 2.0 process if logged in and expired */
+    function tryLogin() {
+        const mState = toValue(state)
+
+        //what if no internet?
+        if (mState.isLoggedIn && tokenExpired()) {
+            logout()
+            window.location.href = getAuthUrl()
+        }
+
+        return mState.isLoggedIn
+    }
+
+    function tokenExpired() {
+        const mState = toValue(state)
+        if (mState == null || mState.expiresOn == null) return true
+
+        const e1 = DateTime.fromFormat(mState.expiresOn, expiryFormat)
+        const e2 = DateTime.utc()
+        return e1 <= e2
+    }
+
+    return {
+        authState: authState.value,
+        canEdit,
+        canEditPermit,
+        canView,
+        canViewPermit,
+        credentials: state.value,
+        doShow,
+        doShowByNav,
+        getAuthUrl,
+        getTimeZone,
+        login,
+        logout,
+        setAuth,
+        tryLogin
+    }
+}

package/src/composables/cosmetics.ts

@@ -0,0 +1,178 @@
+import { useStorage } from '@vueuse/core'
+import { useTheme } from 'vuetify';
+
+interface CosmeticData {
+    dark?: BaseCosmeticTheme,
+    drawer?: boolean,
+    drawerStick?: boolean,
+    light?: BaseCosmeticTheme,
+    theme?: string
+}
+
+export interface BaseCosmeticTheme {
+    primary: string,
+    secondary: string,
+    accent: string,
+    error: string,
+    info: string,
+    success: string,
+    warning: string,
+}
+
+const defaultLight: BaseCosmeticTheme = {
+    primary: '#192233',
+    secondary: '#192233',
+    accent: '#2a76a2',
+    error: '#FF5252',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00'
+}
+
+const defaultDark: BaseCosmeticTheme = {
+    primary: '#1d5474',
+    secondary: '#192233',
+    accent: '#7fcbf7',
+    error: '#FF5252',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00'
+}
+
+export interface UseCosmeticsOptions<T extends BaseCosmeticTheme> {
+    defaultDarkTheme?: T
+    defaultLightTheme?: T
+    defaultDrawer?: boolean
+    defaultDrawerStick?: boolean
+    defaultTheme?: string
+}
+
+export interface BTCosmetics {
+    state: CosmeticData
+    resetCosmetics: (toDefault: boolean) => void
+    setTemporaryColor: (color: string) => void
+    toggleDrawer: () => void
+    toggleDrawerStick: () => void
+    toggleLightDark: () => void
+    undoTemporaryColor: () => void
+}
+
+export function createCosmetics<T extends BaseCosmeticTheme>(options: UseCosmeticsOptions<T>): BTCosmetics {
+    const themeManager = useTheme();
+    const state = useStorage<CosmeticData>('cosmetics', {
+        theme: options.defaultTheme ?? 'light',
+        light: options.defaultLightTheme ?? defaultLight,
+        dark: options.defaultDarkTheme ?? defaultDark,
+        drawer: options.defaultDrawer ?? true,
+        drawerStick: options.defaultDrawerStick ?? false
+    })
+
+    // if (!defaultsSet) {
+    //     state.value.theme ??= (options.defaultTheme ?? 'light')
+    //     state.value.light ??= (options.defaultLightTheme ?? defaultLight)
+    //     state.value.dark ??= (options.defaultDarkTheme ?? defaultDark)
+    //     state.value.drawer ??= (options.defaultDrawer ?? true)
+    //     state.value.drawerStick ??= (options.defaultDrawerStick ?? false)
+    //     defaultsSet = true
+    // }
+    
+    /**used for initiating the themes and colors from storage when the web app is loaded */
+    // function loadCosmetics() {
+        themeManager.global.name.value = state.value.theme!
+        
+        //load dark colors
+        let darkColors = themeManager.themes.value.dark.colors
+        let storedDarkTheme = state.value.dark!
+        const darkThemeKeys = Object.keys(storedDarkTheme)
+        darkThemeKeys.forEach(darkKey => {
+            const k = darkKey as keyof typeof storedDarkTheme
+            darkColors[darkKey] = storedDarkTheme[k]
+        })
+        
+        let lightColors = themeManager.themes.value.light.colors
+        let storedLightTheme = state.value.light!
+        const lightThemeKeys = Object.keys(storedLightTheme)
+        lightThemeKeys.forEach(lightKey => {
+            const lKey = lightKey as keyof typeof storedLightTheme
+            lightColors[lKey] = storedLightTheme[lKey]
+        })
+    // }
+
+    /**resets to the default colors or last saved colors of the current theme */
+    function resetCosmetics(toDefault: boolean) {
+        
+        themeManager.global.name.value = state.value.theme!
+
+        if (themeManager.global.name.value == 'dark') {
+            //dark
+            if (toDefault)
+                state.value.dark = { ...(options.defaultDarkTheme ?? defaultDark) };
+
+            themeManager.themes.value.dark = {
+                ...themeManager.themes.value.dark,
+                colors: {
+                    ...themeManager.themes.value.dark.colors,
+                    ...state.value.dark
+                }
+            }
+        }
+        else {
+            //light
+            if (toDefault)
+                state.value.light = { ...(options.defaultLightTheme ?? defaultLight) };
+
+            themeManager.themes.value.light = {
+                ...themeManager.themes.value.light,
+                colors: {
+                    ...themeManager.themes.value.light.colors,
+                    ...state.value.light
+                }
+            }
+        }
+    }
+
+    /**sets a temporary primary color that is not saved but is applied to cosmetics */
+    function setTemporaryColor(color: string) {
+        const dark = themeManager.themes.value.dark
+        const light = themeManager.themes.value.light
+
+        dark.colors.primary = color
+        light.colors.primary = color
+        
+        document.querySelector('meta[name="theme-color"]')?.setAttribute("content", color)
+    }
+
+    function toggleDrawer() {
+        state.value.drawer = !state.value.drawer
+    }
+
+    function toggleDrawerStick() {
+        state.value.drawerStick = !state.value.drawerStick
+    }
+
+    function toggleLightDark() {
+        state.value.theme = state.value.theme == 'dark' ? 'light' : 'dark'
+        themeManager.global.name.value = state.value.theme
+    }
+    
+    function undoTemporaryColor() {
+        const dark = themeManager.themes.value.dark
+        const light = themeManager.themes.value.light
+
+        dark.colors.primary = (state.value.dark ?? options.defaultDarkTheme ?? defaultDark).primary
+        light.colors.primary = (state.value.light ?? options.defaultLightTheme ?? defaultLight).primary
+
+        document.querySelector('meta[name="theme-color"]')?.setAttribute("content", '')
+    }
+
+    return {
+        state: state.value,
+        // loadCosmetics,
+        resetCosmetics,
+        setTemporaryColor,
+        toggleDrawer,
+        toggleDrawerStick,
+        toggleLightDark,
+        undoTemporaryColor
+    }
+}