LoginAfterAuth.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
  2. <script setup lang="ts">
  3. import { onBeforeRouteLeave, useRouter } from 'vue-router'
  4. import { ref, nextTick, watch } from 'vue'
  5. import type { RouteLocationRaw } from 'vue-router'
  6. import LayoutPublicPage from '#desktop/components/layout/LayoutPublicPage/LayoutPublicPage.vue'
  7. import { useAfterAuthPlugins } from '../after-auth/composable/useAfterAuthPlugins.ts'
  8. defineOptions({
  9. beforeRouteEnter(to) {
  10. const { currentPlugin } = useAfterAuthPlugins()
  11. if (!currentPlugin.value) {
  12. return to.redirectedFrom ? false : '/'
  13. }
  14. },
  15. })
  16. const { currentPlugin, data } = useAfterAuthPlugins()
  17. const finished = ref(false)
  18. onBeforeRouteLeave(() => {
  19. if (!finished.value) return false
  20. })
  21. watch(
  22. () => currentPlugin.value?.name,
  23. (name) => {
  24. if (name) {
  25. finished.value = false
  26. }
  27. },
  28. )
  29. const router = useRouter()
  30. // TODO 2023-05-17 Sheremet V.A. - call a query to get a possible next after auth handler
  31. const redirect = async (route: RouteLocationRaw) => {
  32. finished.value = true
  33. await nextTick()
  34. return router.replace(route)
  35. }
  36. </script>
  37. <template>
  38. <LayoutPublicPage box-size="small" :title="currentPlugin?.title">
  39. <main data-test-id="loginAfterAuth" class="m-auto w-full max-w-md">
  40. <div class="flex grow flex-col justify-center">
  41. <div v-if="currentPlugin" class="grow">
  42. <component
  43. :is="currentPlugin.component"
  44. :data="data"
  45. @redirect="redirect"
  46. />
  47. </div>
  48. </div>
  49. </main>
  50. </LayoutPublicPage>
  51. </template>