@fy-/fws-vue 2.2.64 → 2.2.65

package/components/fws/UserFlow.vue

@@ -237,25 +237,19 @@ onMounted(async () => {
 
       <!-- OAuth providers section -->
       <div v-if="hasOauth && !showEmail" class="fws-login__oauth space-y-3">
-        <div
-          v-for="field of responseFields"
-          v-show="field.type && field.type === 'oauth2' && field.button"
-          :key="field.id"
-        >
-          <button
-            type="button"
+        <template v-for="field of responseFields" :key="field.id">
+          <a
+            v-if="field.type && field.type === 'oauth2' && field.button"
+            href="javascript:void(0);"
             class="flex w-full items-center justify-start gap-3 px-4 py-2.5 rounded-lg border border-fv-neutral-200 dark:border-fv-neutral-700
                    transition-all duration-200 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-fv-neutral-800
                    focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600"
-            :style="`background: ${
-              field.button['background-color']
-            }; color: ${$getContrastingTextColor(
-              field.button['background-color'],
-            )}`"
-            :aria-label="`${$t('user_flow_signin_with', { provider: field.name })}`"
+            :style="field.button && field.button['background-color']
+              ? `background: ${field.button['background-color']}; color: ${$getContrastingTextColor(field.button['background-color'])}`
+              : ''"
             @click="
               () => {
-                if (field.info.Button_Extra?.trigger) {
+                if (field.info && field.info.Button_Extra && field.info.Button_Extra.trigger) {
                   doTrigger(field);
                 }
                 else {
@@ -265,16 +259,17 @@ onMounted(async () => {
             "
           >
             <img
+              v-if="field.button && field.button.logo"
               :key="`${field.label}oauth`"
               class="h-6 w-6 flex-shrink-0"
-              :alt="field.info.Name"
+              :alt="field.info && field.info.Name ? field.info.Name : ''"
               :src="field.button.logo"
             >
             <span class="text-base font-medium">
               {{ $t("user_flow_signin_with", { provider: field.name }) }}
             </span>
-          </button>
-        </div>
+          </a>
+        </template>
 
         <div class="relative my-6">
           <div class="absolute inset-0 flex items-center">
@@ -429,6 +424,7 @@ onMounted(async () => {
   @apply transition-all duration-300;
 }
 
+.fws-login__oauth a,
 .fws-login__oauth button,
 .fws-login__form button[type="submit"] {
   @apply transition-all duration-200;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.2.64",
+  "version": "2.2.65",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",