diff options
author | vnugent <public@vaughnnugent.com> | 2024-01-30 15:23:06 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-01-30 15:23:06 -0500 |
commit | 5abc489b9954111d66d1385aa62a3ea962fa0a55 (patch) | |
tree | b1715e5c5e6316f33e3e33fb55397d93200ab518 /front-end/src/bootstrap/Environment.vue | |
parent | e4dc63ded324c6e9678603296953bb1f7dea7569 (diff) |
merge upstream. Add dynamic client-side support for optional oauth2 and social login methods
Diffstat (limited to 'front-end/src/bootstrap/Environment.vue')
-rw-r--r-- | front-end/src/bootstrap/Environment.vue | 79 |
1 files changed, 39 insertions, 40 deletions
diff --git a/front-end/src/bootstrap/Environment.vue b/front-end/src/bootstrap/Environment.vue index 618ee62..c14b7b6 100644 --- a/front-end/src/bootstrap/Environment.vue +++ b/front-end/src/bootstrap/Environment.vue @@ -1,3 +1,42 @@ +<script setup lang="ts"> + +import { computed, defineAsyncComponent } from 'vue' +import { RouteLocation, useRouter } from 'vue-router' +import { filter, map, without, find, includes } from 'lodash-es' +import { storeToRefs } from 'pinia' +import { useEnvSize } from '@vnuge/vnlib.browser' +import { useStore } from '../store' +import siteHeader from './components/Header.vue' +import siteFooter from './components/Footer.vue' +const ConfirmPrompt = defineAsyncComponent(() => import('./components/ConfirmPrompt.vue')); +const CookieWarning = defineAsyncComponent(() => import('./components/CookieWarning.vue')); +const PasswordPrompt = defineAsyncComponent(() => import('./components/PasswordPrompt.vue')); + +const emit = defineEmits(['logout']) +const store = useStore() +const { showCookieWarning, currentRoutes } = storeToRefs(store) +const { getRoutes } = useRouter(); + +//Use the env size to calculate the header and footer heights for us +const { header, footer, content, headerHeight, footerHeight } = useEnvSize(true) + +const routes = computed<RouteLocation[]>(() => { + // Get routes that are defined above but only if they are defined in the router + // This is a computed property because loggedin is a reactive property + + const routes = filter(getRoutes(), (pageName) => includes(currentRoutes.value, pageName.name)) + + const activeRoutes = map(currentRoutes.value, route => find(routes, { name: route })) + + return without<RouteLocation>(activeRoutes, undefined) +}) + +//Forces the page content to be exactly the height of the viewport - header and footer sizes +const bodyStyle = computed(() => ({ 'min-height': `calc(100vh - ${headerHeight.value + footerHeight.value}px)` })) +const generalToastStyle = computed(() => ({ top: `${headerHeight.value + 5}px` })) +const formToastStyle = computed(() => ({ top: `${headerHeight.value}px` })) + +</script> <template> <div id="env-entry" ref="content" class="absolute top-0 left-0 w-full min-h-screen env-bg"> <div class="absolute flex w-full"> @@ -44,43 +83,3 @@ <ConfirmPrompt /> </div> </template> - -<script setup lang="ts"> - -import { computed } from 'vue' -import { RouteLocation, useRouter } from 'vue-router' -import { filter, map, without, find, includes } from 'lodash-es' -import { storeToRefs } from 'pinia' -import { useEnvSize } from '@vnuge/vnlib.browser' -import { useStore } from '../store' -import CookieWarning from './components/CookieWarning.vue' -import PasswordPrompt from './components/PasswordPrompt.vue' -import siteHeader from './components/Header.vue' -import siteFooter from './components/Footer.vue' -import ConfirmPrompt from './components/ConfirmPrompt.vue' - -const emit = defineEmits(['logout']) -const store = useStore() -const { showCookieWarning, currentRoutes } = storeToRefs(store) -const { getRoutes } = useRouter(); - -//Use the env size to calculate the header and footer heights for us -const { header, footer, content, headerHeight, footerHeight } = useEnvSize(true) - -const routes = computed<RouteLocation[]>(() => { - // Get routes that are defined above but only if they are defined in the router - // This is a computed property because loggedin is a reactive property - - const routes = filter(getRoutes(), (pageName) => includes(currentRoutes.value, pageName.name)) - - const activeRoutes = map(currentRoutes.value, route => find(routes, { name: route })) - - return without<RouteLocation>(activeRoutes, undefined) -}) - -//Forces the page content to be exactly the height of the viewport - header and footer sizes -const bodyStyle = computed(() => ({ 'min-height': `calc(100vh - ${headerHeight.value + footerHeight.value}px)` })) -const generalToastStyle = computed(() => ({ top: `${headerHeight.value + 5}px` })) -const formToastStyle = computed(() => ({ top: `${headerHeight.value}px` })) - -</script> |