feat: Enhance OAuth login button configuration and rendering

Author: SerVitasik

custom/OAuthLoginButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="meta.iconOnly ? 'flex flex-row justify-center items-center gap-3' : 'flex flex-col justify-center items-center gap-2'" >
+    <button 
+      v-for="provider in meta.providers" 
+      :key="provider.provider"
+      @click="handleLogin(provider.authUrl)" 
+      class="border dark:border-gray-400 flex items-center justify-center hover:bg-gray-50 hover:dark:border-gray-300 hover:dark:bg-gray-700"
+      :class="[
+        meta.iconOnly ? 'w-11 h-11 p-0' : 'w-full py-2 px-4',
+        meta.pill ? 'rounded-full' : 'rounded-md'
+      ]"
+    >
+      <div v-html="provider.icon" class="w-6 h-6" :class="meta.iconOnly ? 'mr-0' : 'mr-4'" :alt="getProviderName(provider.provider)" />
+      <span v-if="!meta.iconOnly" class="font-medium dark:text-white">Continue with {{ getProviderName(provider.provider) }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  meta: {
+    type: Object,
+    required: true
+  }
+});
+
+const getProviderName = (provider) => {
+  return provider.replace('AdminForthAdapter', '').replace('Oauth2', '');
+};
+
+const handleLogin = (authUrl) => {
+  window.location.href = authUrl;
+};
+</script>

custom/OAuthLoginButtons.vue

@@ -10,6 +10,9 @@ interface OAuthPluginOptions {
   emailField: string;
   emailConfirmedField?: string;
   adapters: OAuth2Adapter[];
+  iconOnly?: boolean;
+  pill?: boolean;
+  authenticationExpireDuration?: number;
   openSignup?: {
     enabled?: boolean;
     defaultFieldValues?: Record<string, any>;
@@ -30,6 +33,8 @@ export default class OAuthPlugin extends AdminForthPlugin {
     // Set default values for openSignup
     this.options = {
       ...options,
+      iconOnly: options.iconOnly ?? false,
+      pill: options.pill ?? false,
       openSignup: {
         enabled: options.openSignup?.enabled ?? false,
         defaultFieldValues: options.openSignup?.defaultFieldValues ?? {},
@@ -43,11 +48,6 @@ export default class OAuthPlugin extends AdminForthPlugin {
     this.adminforth = adminforth;
     this.resource = resource;
 
-    // Add custom page for OAuth callback
-    if (!adminforth.config.customization.customPages) {
-      adminforth.config.customization.customPages = [];
-    }
-
     adminforth.config.customization.customPages.push({
       path: '/oauth/callback',
       component: { 
@@ -84,24 +84,30 @@ export default class OAuthPlugin extends AdminForthPlugin {
     }
 
     // Register the component with the correct plugin path
-    const componentPath = `@@/plugins/${this.constructor.name}/OAuthLoginButton.vue`;
-    this.componentPath('OAuthLoginButton.vue');
+    const componentPath = `@@/plugins/${this.constructor.name}/OAuthLoginButtons.vue`;
+    this.componentPath('OAuthLoginButtons.vue');
 
     const baseUrl = adminforth.config.baseUrl || '';
-    this.options.adapters.forEach(adapter => {
+    const providers = this.options.adapters.map(adapter => {
       const state = Buffer.from(JSON.stringify({
         provider: adapter.constructor.name
       })).toString('base64');
 
-      adminforth.config.customization.loginPageInjections.underInputs.push({
-        file: componentPath,
-        meta: {
-          authUrl: `${adapter.getAuthUrl()}&state=${state}`,
-          provider: adapter.constructor.name,
-          baseUrl,
-          icon: adapter.getIcon()
-        }
-      });
+      return {
+        authUrl: `${adapter.getAuthUrl()}&state=${state}`,
+        provider: adapter.constructor.name,
+        baseUrl,
+        icon: adapter.getIcon(),
+      };
+    });
+
+    adminforth.config.customization.loginPageInjections.underInputs.push({
+      file: componentPath,
+      meta: {
+        providers,
+        iconOnly: this.options.iconOnly,
+        pill: this.options.pill,
+      }
     });
   }
 
@@ -136,7 +142,7 @@ export default class OAuthPlugin extends AdminForthPlugin {
         response,
         username,
         pk: user.id,
-        expireInDays: this.adminforth.config.auth.rememberMeDays 
+        expireInDays: this.options.authenticationExpireDuration ? this.options.authenticationExpireDuration : this.adminforth.config.auth.rememberMeDays 
       });
     }