diff options
Diffstat (limited to 'front-end/src/views/Login')
| -rw-r--r-- | front-end/src/views/Login/components/Social.vue | 26 | ||||
| -rw-r--r-- | front-end/src/views/Login/index.vue | 4 | ||||
| -rw-r--r-- | front-end/src/views/Login/social/[type].vue | 3 |
3 files changed, 26 insertions, 7 deletions
diff --git a/front-end/src/views/Login/components/Social.vue b/front-end/src/views/Login/components/Social.vue index 2cea930..4d22074 100644 --- a/front-end/src/views/Login/components/Social.vue +++ b/front-end/src/views/Login/components/Social.vue @@ -1,22 +1,21 @@ <template> - <div class="flex flex-col gap-3"> - <div v-for="method in store.socialOauth.methods" :key="method.Id" class=""> + <div v-for="method in methods" :key="method.Id" class=""> <button type="submit" class="btn social-button" :disabled="waiting" @click.prevent="submitLogin(method)" > - <fa-icon :icon="['fab', method.Id]" size="xl" /> + <fa-icon :icon="getIcon(method)" size="xl" /> Login with {{ capitalize(method.Id) }} </button> </div> </div> - </template> <script setup lang="ts"> +import { shallowRef } from 'vue' import { apiCall, useWait, type OAuthMethod } from '@vnuge/vnlib.browser' import { capitalize } from 'lodash-es'; import { useStore } from '../../../store'; @@ -24,7 +23,24 @@ import { useStore } from '../../../store'; const { waiting } = useWait() const store = useStore() +const methods = shallowRef<OAuthMethod[]>([]) + //Invoke login wrapped in api call -const submitLogin = (method: OAuthMethod) => apiCall(() => store.socialOauth.beginLoginFlow(method)) +const submitLogin = (method: OAuthMethod) => apiCall(async () => { + const { beginLoginFlow } = await store.socialOauth(); + await beginLoginFlow(method) +}) + +const getIcon = (method: OAuthMethod): string[] => { + switch (method.Id) { + case 'auth0': + return ['fa', 'certificate'] + default: + return ['fab', method.Id] + } +} + +//Load methods once the fetch completes +store.socialOauth().then(m => methods.value = m.methods); </script>
\ No newline at end of file diff --git a/front-end/src/views/Login/index.vue b/front-end/src/views/Login/index.vue index 5d8f298..6a55aeb 100644 --- a/front-end/src/views/Login/index.vue +++ b/front-end/src/views/Login/index.vue @@ -62,7 +62,9 @@ const submitLogout = async () => { //Submit logout request await apiCall(async ({ toaster }) => { // Attempt to logout - await store.socialOauth.logout() + const { logout } = await store.socialOauth() + await logout() + // Push a new toast message toaster.general.success({ id: 'logout-success', diff --git a/front-end/src/views/Login/social/[type].vue b/front-end/src/views/Login/social/[type].vue index 68e8b77..51da94f 100644 --- a/front-end/src/views/Login/social/[type].vue +++ b/front-end/src/views/Login/social/[type].vue @@ -64,7 +64,8 @@ tryOnMounted(() => defer(() => { apiCall(async ({ toaster }) => { try{ //Complete the login - await store.socialOauth.completeLogin(); + const { completeLogin } = await store.socialOauth(); + await completeLogin() toaster.general.success({ title:'Login Successful', |