diff options
author | vnugent <public@vaughnnugent.com> | 2024-01-07 01:53:03 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-01-07 01:53:03 -0500 |
commit | e01aae6c30f18003ceae07c092cddeb488e8f472 (patch) | |
tree | d7dd1b9bd931d1b274243bfb34fb44885c94e395 /front-end/src/views/Login/components | |
parent | ce77fe97522bc9c37ccc275efebb94e920c1f2ae (diff) |
package updates & social auth setup
Diffstat (limited to 'front-end/src/views/Login/components')
-rw-r--r-- | front-end/src/views/Login/components/Social.vue | 26 |
1 files changed, 21 insertions, 5 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 |