blob: 3c93d0e416a9aa99b456754859a0bb4e19847a03 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<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';
const { waiting } = useWait()
const store = useStore()
const methods = shallowRef<OAuthMethod[]>([])
//Invoke login wrapped in api call
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>
<template>
<div class="flex flex-col gap-3">
<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="getIcon(method)" size="xl" />
Login with {{ capitalize(method.id) }}
</button>
</div>
</div>
</template>
|
