merge upstream. Add dynamic client-side support for optional oauth2 and social login methods

2 files changed, 23 insertions, 20 deletions

diff --git a/front-end/src/views/Login/components/Social.vue b/front-end/src/views/Login/components/Social.vue
index 4d22074..7e92d99 100644
--- a/front-end/src/views/Login/components/Social.vue
+++ b/front-end/src/views/Login/components/Social.vue
@@ -1,19 +1,3 @@
-<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>
-
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { apiCall, useWait, type OAuthMethod } from '@vnuge/vnlib.browser'
@@ -43,4 +27,22 @@ const getIcon = (method: OAuthMethod): string[] => {
 //Load methods once the fetch completes
 store.socialOauth().then(m => methods.value = m.methods);
 
-</script>
\ No newline at end of file
+</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>
diff --git a/front-end/src/views/Login/components/UserPass.vue b/front-end/src/views/Login/components/UserPass.vue
index 442abb1..bc9d8d1 100644
--- a/front-end/src/views/Login/components/UserPass.vue
+++ b/front-end/src/views/Login/components/UserPass.vue
@@ -55,14 +55,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, shallowRef, reactive, defineAsyncComponent, type Ref } from 'vue'
+import { ref, shallowRef, reactive, defineAsyncComponent, Ref } from 'vue'
 import { useTimeoutFn, set } from '@vueuse/core'
 import { useVuelidate } from '@vuelidate/core'
 import { isEqual } from 'lodash-es'
 import { required, maxLength, minLength, email, helpers } from '@vuelidate/validators'
 import { 
     useVuelidateWrapper, useMfaLogin, totpMfaProcessor, IMfaFlowContinuiation, MfaMethod,
-    apiCall, useMessage, useWait, debugLog, WebMessage
+    apiCall, useMessage, useWait, debugLog, WebMessage,
+    type VuelidateInstance
 } from '@vnuge/vnlib.browser'
 const Totp = defineAsyncComponent(() => import('./Totp.vue'))
 
@@ -97,7 +98,7 @@ const rules = {
 }
 
 const v$ = useVuelidate(rules, vState)
-const { validate } = useVuelidateWrapper(v$);
+const { validate } = useVuelidateWrapper(v$ as Ref<VuelidateInstance>);
 
 const SubmitLogin = async () => {