Auth.vue
58 lines
| 1 | <template> |
| 2 | <component :is="authPagesObj[pageKey]"></component> |
| 3 | </template> |
| 4 | |
| 5 | <script setup> |
| 6 | // * import from Vue |
| 7 | import { ref, computed, markRaw, inject, provide } from 'vue' |
| 8 | |
| 9 | // * Form Component Collection |
| 10 | import SignIn from './parts/SignIn.vue' |
| 11 | import SendAccessLink from './parts/SendAccessLink.vue' |
| 12 | import SendAccessLinkProcess from './parts/SendAccessLinkSuccess.vue' |
| 13 | import SetPass from './parts/SetPass.vue' |
| 14 | import ChangePassSuccess from './parts/SetPassSuccess.vue' |
| 15 | |
| 16 | // * import composable |
| 17 | import { defaultCustomizeSettings } from '@/assets/js/common/defaultCustomize' |
| 18 | |
| 19 | // * Root Settings |
| 20 | const amSettings = inject('settings') |
| 21 | |
| 22 | // * Auth pages |
| 23 | let authPagesObj = ref({ |
| 24 | signIn: markRaw(SignIn), |
| 25 | sendAccessLink: markRaw(SendAccessLink), |
| 26 | sendAccessLinkProcess: markRaw(SendAccessLinkProcess), |
| 27 | setPassword: markRaw(SetPass), |
| 28 | changeSuccess: markRaw(ChangePassSuccess), |
| 29 | }) |
| 30 | |
| 31 | let originKey = inject('originKey') |
| 32 | |
| 33 | // * Page key |
| 34 | let pageKey = ref('signIn') |
| 35 | provide('pageKey', pageKey) |
| 36 | |
| 37 | // * Fonts |
| 38 | const amFonts = ref( |
| 39 | amSettings.customizedData ? amSettings.customizedData.fonts : defaultCustomizeSettings.fonts, |
| 40 | ) |
| 41 | provide('amFonts', amFonts) |
| 42 | |
| 43 | // * Colors block |
| 44 | let amColors = computed(() => { |
| 45 | return amSettings.customizedData && originKey.value in amSettings.customizedData |
| 46 | ? amSettings.customizedData[originKey.value].colors |
| 47 | : defaultCustomizeSettings[originKey.value].colors |
| 48 | }) |
| 49 | |
| 50 | provide('amColors', amColors) |
| 51 | </script> |
| 52 | |
| 53 | <script> |
| 54 | export default { |
| 55 | name: 'AuthWrapper', |
| 56 | } |
| 57 | </script> |
| 58 |