1 files changed, 29 insertions, 23 deletions
diff --git a/front-end/src/views/Login/components/Social.vue b/front-end/src/views/Login/components/Social.vue
index 3c93d0e..2087524 100644
--- a/front-end/src/views/Login/components/Social.vue
+++ b/front-end/src/views/Login/components/Social.vue
@@ -1,13 +1,29 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
 import { apiCall, useWait, type OAuthMethod } from '@vnuge/vnlib.browser'
-import { capitalize } from 'lodash-es';
+import { capitalize, map } from 'lodash-es';
 import { useStore } from '../../../store';
+import { useAsyncState } from '@vueuse/core';
+import { shallowRef } from 'vue';
+import { Mutable } from '@vueuse/core';
 
 const { waiting } = useWait()
 const store = useStore()
+const buttonCont = shallowRef<HTMLDivElement | null>(null)
+
+const filterSvgIcon = (oauth: OAuthMethod[]) => {
+    return map(oauth, (method: Mutable<OAuthMethod>) => {
+        //parse the base64 icon as an svg
+        if (method.icon) {
+            return{
+                ...method,
+                icon: atob(method.icon).replace(/(width|height)="[^"]*"/g, '')
+            }
+        }
+        return method;
+    })
+}
 
-const methods = shallowRef<OAuthMethod[]>([])
+const { state: methods, isReady } = useAsyncState(store.socialOauth().then(p => filterSvgIcon(p.methods)), []);
 
 //Invoke login wrapped in api call
 const submitLogin = (method: OAuthMethod) => apiCall(async () => {
@@ -15,34 +31,24 @@ const submitLogin = (method: OAuthMethod) => apiCall(async () => {
     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 ref="buttonCont" v-if="isReady" 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" />
+            <button type="submit" class="btn social-button" :disabled="waiting" @click.prevent="submitLogin(method)">
+
+                <div v-html="method.icon" class="w-6 h-6" >
+                </div>
+
                 Login with {{ capitalize(method.id) }}
             </button>
         </div>
     </div>
 
+    <div v-else class="my-8">
+        <fa-icon icon="spinner" size="2xl" spin />
+    </div>
+
 </template>